"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { useCurrentUser } from "../user-context";

interface Status {
  configured: boolean;
  connected: boolean;
  state?: string;
}
interface Chat {
  jid: string;
  name: string;
  isGroup: boolean;
  unread: number;
}
interface Msg {
  id: string;
  fromMe: boolean;
  text: string;
  timestamp: number;
}

const timeFmt = new Intl.DateTimeFormat("fr-FR", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" });

export default function WhatsappPage() {
  const me = useCurrentUser();
  const canWrite = me.role === "admin" || me.role === "super_admin";
  const canManage = me.role === "super_admin";

  const [status, setStatus] = useState<Status | null>(null);
  const [qr, setQr] = useState<string | null>(null);
  const [linking, setLinking] = useState(false);

  const [chats, setChats] = useState<Chat[]>([]);
  const [loadingChats, setLoadingChats] = useState(false);
  const [openJid, setOpenJid] = useState<string | null>(null);
  const [messages, setMessages] = useState<Msg[]>([]);
  const [loadingMsgs, setLoadingMsgs] = useState(false);
  const [draft, setDraft] = useState("");
  const [sending, setSending] = useState(false);
  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);

  const loadStatus = useCallback(async (): Promise<Status | null> => {
    const res = await fetch("/backend/whatsapp/status", { credentials: "include" });
    if (!res.ok) return null;
    const s = (await res.json()) as Status;
    setStatus(s);
    return s;
  }, []);

  const loadChats = useCallback(async () => {
    setLoadingChats(true);
    try {
      const res = await fetch("/backend/whatsapp/chats", { credentials: "include" });
      if (res.ok) setChats((await res.json()).chats);
    } finally {
      setLoadingChats(false);
    }
  }, []);

  useEffect(() => {
    loadStatus().then((s) => {
      if (s?.connected) loadChats();
    });
  }, [loadStatus, loadChats]);

  // Pendant la liaison : poll du statut jusqu'à connexion.
  useEffect(() => {
    if (!qr || status?.connected) {
      if (pollRef.current) clearInterval(pollRef.current);
      return;
    }
    pollRef.current = setInterval(async () => {
      const s = await loadStatus();
      if (s?.connected) {
        setQr(null);
        setLinking(false);
        if (pollRef.current) clearInterval(pollRef.current);
        loadChats();
      }
    }, 3000);
    return () => {
      if (pollRef.current) clearInterval(pollRef.current);
    };
  }, [qr, status?.connected, loadStatus, loadChats]);

  async function startLink() {
    setLinking(true);
    const res = await fetch("/backend/whatsapp/connect", { method: "POST", credentials: "include" });
    if (res.ok) {
      const d = await res.json();
      if (d.state === "open") {
        await loadStatus();
        loadChats();
      } else {
        setQr(d.base64);
      }
    }
    setLinking(false);
  }

  async function unlink() {
    if (!window.confirm("Déconnecter WhatsApp ?")) return;
    await fetch("/backend/whatsapp/logout", { method: "DELETE", credentials: "include" });
    setQr(null);
    setChats([]);
    setOpenJid(null);
    loadStatus();
  }

  const openChat = useCallback(async (jid: string) => {
    setOpenJid(jid);
    setMessages([]);
    setLoadingMsgs(true);
    try {
      const res = await fetch(`/backend/whatsapp/messages?jid=${encodeURIComponent(jid)}`, { credentials: "include" });
      if (res.ok) setMessages((await res.json()).messages);
    } finally {
      setLoadingMsgs(false);
    }
  }, []);

  async function send() {
    if (!draft.trim() || !openJid) return;
    setSending(true);
    try {
      // Le jid complet fonctionne pour tous les formats (@s.whatsapp.net, @lid, @g.us).
      const number = openJid;
      const res = await fetch("/backend/whatsapp/send", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
        body: JSON.stringify({ number, text: draft.trim() }),
      });
      if (res.ok) {
        setDraft("");
        setTimeout(() => openChat(openJid), 800); // recharge la conversation
      }
    } finally {
      setSending(false);
    }
  }

  // ── États ─────────────────────────────────────────────────────────────────
  if (status && !status.configured) {
    return (
      <div className="mx-auto w-full max-w-3xl">
        <h1 className="mb-4 text-xl font-semibold sm:text-2xl">WhatsApp</h1>
        <p className="rounded-2xl border border-amber-300 bg-amber-50 p-5 text-sm text-amber-800 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200">
          WhatsApp n&apos;est pas configuré côté serveur.
        </p>
      </div>
    );
  }

  // Non connecté
  if (status && !status.connected) {
    return (
      <div className="mx-auto w-full max-w-md">
        <h1 className="mb-4 text-xl font-semibold sm:text-2xl">WhatsApp</h1>
        {!canManage ? (
          <p className="rounded-2xl border border-amber-300 bg-amber-50 p-5 text-sm text-amber-800 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200">
            WhatsApp n&apos;est pas connecté. L&apos;administrateur doit lier un numéro.
          </p>
        ) : qr ? (
          <div className="rounded-2xl border border-zinc-200 bg-white p-5 text-center dark:border-zinc-800 dark:bg-zinc-950">
            <p className="mb-3 text-sm text-zinc-600 dark:text-zinc-300">
              Sur le téléphone : WhatsApp → <strong>Appareils connectés</strong> → <strong>Connecter un appareil</strong>, puis scannez :
            </p>
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src={qr} alt="QR WhatsApp" className="mx-auto h-64 w-64" />
            <p className="mt-3 text-xs text-zinc-400">En attente de connexion… (le QR se régénère si besoin)</p>
            <button onClick={startLink} disabled={linking} className="mt-3 rounded-lg border border-zinc-300 px-3 py-1.5 text-sm hover:bg-zinc-100 disabled:opacity-50 dark:border-zinc-700 dark:hover:bg-zinc-900">
              Régénérer le QR
            </button>
          </div>
        ) : (
          <div className="rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
            <p className="mb-3 text-sm text-zinc-600 dark:text-zinc-300">Liez un numéro WhatsApp (de préférence secondaire) pour activer la messagerie.</p>
            <button onClick={startLink} disabled={linking} className="rounded-lg bg-black px-4 py-2 text-sm font-medium text-white hover:bg-zinc-800 disabled:opacity-60 dark:bg-white dark:text-black dark:hover:bg-zinc-200">
              {linking ? "Génération du QR…" : "Lier WhatsApp"}
            </button>
          </div>
        )}
      </div>
    );
  }

  if (!status) return <div className="text-sm text-zinc-500">Chargement…</div>;

  // ── Connecté : messagerie ───────────────────────────────────────────────────
  if (openJid) {
    const chat = chats.find((c) => c.jid === openJid);
    return (
      <div className="mx-auto flex h-[calc(100vh-8rem)] w-full max-w-3xl flex-col">
        <div className="mb-3 flex items-center gap-3">
          <button onClick={() => setOpenJid(null)} className="rounded-md border border-zinc-300 px-3 py-1.5 text-sm hover:bg-zinc-100 dark:border-zinc-700 dark:hover:bg-zinc-900">←</button>
          <h1 className="truncate text-lg font-semibold">{chat?.name ?? openJid.replace(/@.*/, "")}</h1>
        </div>

        <div className="flex-1 space-y-2 overflow-auto rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-950">
          {loadingMsgs ? (
            <p className="text-sm text-zinc-500">Chargement…</p>
          ) : messages.length === 0 ? (
            <p className="text-sm text-zinc-400">Aucun message.</p>
          ) : (
            messages.map((m) => (
              <div key={m.id} className={"flex " + (m.fromMe ? "justify-end" : "justify-start")}>
                <div className={"max-w-[80%] rounded-2xl px-3 py-2 text-sm " + (m.fromMe ? "bg-green-600 text-white" : "bg-zinc-100 text-black dark:bg-zinc-800 dark:text-zinc-50")}>
                  <div className="whitespace-pre-wrap break-words">{m.text}</div>
                  <div className={"mt-0.5 text-[10px] " + (m.fromMe ? "text-green-100" : "text-zinc-400")}>
                    {m.timestamp ? timeFmt.format(new Date(m.timestamp * 1000)) : ""}
                  </div>
                </div>
              </div>
            ))
          )}
        </div>

        {canWrite && (
          <form onSubmit={(e) => { e.preventDefault(); send(); }} className="mt-3 flex gap-2">
            <input value={draft} onChange={(e) => setDraft(e.target.value)} placeholder="Votre message…" className="flex-1 rounded-lg border border-zinc-300 px-3 py-2 text-sm dark:border-zinc-700 dark:bg-black" />
            <button type="submit" disabled={sending || !draft.trim()} className="rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700 disabled:opacity-50">
              {sending ? "…" : "Envoyer"}
            </button>
          </form>
        )}
      </div>
    );
  }

  return (
    <div className="mx-auto w-full max-w-3xl">
      <div className="mb-4 flex items-center justify-between">
        <h1 className="text-xl font-semibold sm:text-2xl">WhatsApp</h1>
        <div className="flex items-center gap-2">
          <button onClick={loadChats} className="rounded-lg border border-zinc-300 px-3 py-1.5 text-sm hover:bg-zinc-100 dark:border-zinc-700 dark:hover:bg-zinc-900">↻</button>
          {canManage && (
            <button onClick={unlink} className="rounded-lg border border-red-300 px-3 py-1.5 text-sm text-red-600 hover:bg-red-50 dark:border-red-900 dark:hover:bg-red-950">Déconnecter</button>
          )}
        </div>
      </div>

      {loadingChats ? (
        <p className="text-sm text-zinc-500">Chargement des conversations…</p>
      ) : chats.length === 0 ? (
        <p className="rounded-2xl border border-zinc-200 bg-white p-5 text-sm text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950">Aucune conversation.</p>
      ) : (
        <ul className="flex flex-col gap-1.5">
          {chats.map((c) => (
            <li key={c.jid}>
              <button onClick={() => openChat(c.jid)} className="flex w-full items-center justify-between gap-3 rounded-xl border border-zinc-200 bg-white p-3 text-left hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-900">
                <span className="flex items-center gap-2 truncate">
                  <span aria-hidden>{c.isGroup ? "👥" : "💬"}</span>
                  <span className="truncate text-sm font-medium">{c.name}</span>
                </span>
                {c.unread > 0 && <span className="shrink-0 rounded-full bg-green-600 px-2 py-0.5 text-xs text-white">{c.unread}</span>}
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}