import { useStore } from "../store";

export default function SyncOverlay() {
  const { syncProgress } = useStore();
  const { current = 0, total = 29, label = "…" } = syncProgress ?? {};
  const pct = total > 0 ? Math.round((current / total) * 100) : 0;

  return (
    <div style={{
      position: "fixed", inset: 0, background: "rgba(0,0,0,0.6)",
      display: "flex", alignItems: "center", justifyContent: "center",
      zIndex: 200, borderRadius: "10px",
    }}>
      <div style={{
        background: "#161b22", border: "1px solid #2d3748", borderRadius: "12px",
        padding: "28px 40px", display: "flex", flexDirection: "column",
        alignItems: "center", gap: "14px", minWidth: "320px",
      }}>
        <div style={{ fontSize: "28px", animation: "spin 1s linear infinite" }}>↻</div>

        <div style={{ width: "100%", textAlign: "center" }}>
          <p style={{ fontSize: "14px", fontWeight: 600, color: "#e2e8f0", marginBottom: "4px" }}>
            Synchronisation en cours…
          </p>
          <p style={{ fontSize: "12px", color: "#94a3b8" }}>
            {current}/{total} — <span style={{ color: "#f0c040" }}>{label}</span>
          </p>
        </div>

        {/* Progress bar */}
        <div style={{ width: "100%", height: "4px", background: "#2d3748", borderRadius: "2px", overflow: "hidden" }}>
          <div style={{
            height: "100%",
            width: `${pct}%`,
            background: "linear-gradient(90deg, #4a9eff, #f0c040)",
            borderRadius: "2px",
            transition: "width 0.3s ease",
          }} />
        </div>

        <p style={{ fontSize: "11px", color: "#4a5568" }}>
          {pct}% — Google Sheets CSV
        </p>
      </div>
    </div>
  );
}
