import useSyncProgress from "@/hooks/useSyncProgress";
import { useCallback, useEffect, useMemo, useState } from "react";

const STORAGE_KEY = "@syncProgressMonitor";
const EVENT_START = "sync-monitor:start";

type SyncMonitorPayload = {
  syncId: string;
  distribuidor?: string;
};

const lerMonitorStorage = (): SyncMonitorPayload | null => {
  if (typeof window === "undefined") return null;

  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (!raw) return null;
    const parsed = JSON.parse(raw);
    if (!parsed?.syncId) return null;
    return parsed;
  } catch {
    return null;
  }
};

const salvarMonitorStorage = (payload: SyncMonitorPayload) => {
  if (typeof window === "undefined") return;
  localStorage.setItem(STORAGE_KEY, JSON.stringify(payload));
};

const limparMonitorStorage = () => {
  if (typeof window === "undefined") return;
  localStorage.removeItem(STORAGE_KEY);
};

export default function SyncFloatingMonitor() {
  const [monitor, setMonitor] = useState<SyncMonitorPayload | null>(null);
  const [isMinimized, setIsMinimized] = useState(false);

  const {
    startPolling,
    stopPolling,
    progress,
    percentage,
    processed,
    total,
    status,
  } = useSyncProgress({
    syncId: monitor?.syncId || null,
    pollingInterval: 1500,
  });

  const iniciarMonitor = useCallback(
    (payload: SyncMonitorPayload) => {
      console.log(
        "[SyncFloatingMonitor] 🚀 Iniciando monitor com payload:",
        payload
      );
      if (!payload?.syncId) return;
      setMonitor(payload);
      salvarMonitorStorage(payload);
      startPolling(payload.syncId);
    },
    [startPolling]
  );

  const fecharMonitor = useCallback(() => {
    console.log("[SyncFloatingMonitor] 🚫 Fechando monitor");
    stopPolling();
    setMonitor(null);
    limparMonitorStorage();
  }, [stopPolling]);

  useEffect(() => {
    const salvo = lerMonitorStorage();
    if (salvo?.syncId) {
      iniciarMonitor(salvo);
    }
  }, [iniciarMonitor]);

  useEffect(() => {
    const handleStart = (event: Event) => {
      const customEvent = event as CustomEvent<SyncMonitorPayload>;
      if (!customEvent?.detail?.syncId) return;
      iniciarMonitor(customEvent.detail);
      setIsMinimized(false);
    };

    window.addEventListener(EVENT_START, handleStart as EventListener);
    return () => {
      window.removeEventListener(EVENT_START, handleStart as EventListener);
    };
  }, [iniciarMonitor]);

  const tituloStatus = useMemo(() => {
    if (status === "completed") return "Sincronização concluída";
    if (status === "error") return "Sincronização com erro";
    return "Sincronização em andamento";
  }, [status]);

  if (!monitor?.syncId) return null;

  if (isMinimized) {
    return (
      <button
        type="button"
        onClick={() => setIsMinimized(false)}
        className="fixed bottom-6 right-6 z-[1200] rounded-full bg-primary text-white shadow-lg px-4 py-3 text-sm font-semibold"
      >
        Sync {Math.round(percentage)}%
      </button>
    );
  }

  return (
    <div className="fixed bottom-6 right-6 z-[1200] w-[320px] rounded-lg border border-stroke bg-white p-4 shadow-2xl dark:border-strokedark dark:bg-boxdark">
      <div className="mb-3 flex items-start justify-between gap-2">
        <div>
          <p className="text-sm font-semibold text-black dark:text-white">
            {tituloStatus}
          </p>
          <p className="text-xs text-body">
            {monitor.distribuidor || progress?.distribuidor || "Distribuidor"}
          </p>
        </div>
        <div className="flex items-center gap-2">
          <button
            type="button"
            onClick={() => setIsMinimized(true)}
            className="text-xs text-primary underline"
          >
            Retrair
          </button>
          <button
            type="button"
            onClick={fecharMonitor}
            className="text-xs text-danger underline"
          >
            Fechar
          </button>
        </div>
      </div>

      <div className="mb-2 flex items-center justify-between text-sm">
        <span className="text-body">Progresso</span>
        <span className="font-semibold text-black dark:text-white">
          {processed}/{total || 0}
        </span>
      </div>

      <div className="h-2 w-full overflow-hidden rounded-full bg-stroke dark:bg-strokedark">
        <div
          className={`h-full transition-all duration-300 ${
            status === "error"
              ? "bg-danger"
              : status === "completed"
                ? "bg-success"
                : "bg-primary"
          }`}
          style={{ width: `${Math.max(0, Math.min(100, percentage))}%` }}
        />
      </div>

      <div className="mt-2 text-right text-xs font-semibold text-black dark:text-white">
        {Math.round(percentage)}%
      </div>
    </div>
  );
}