"use client";

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

interface MailItem {
  id: string;
  from: string;
  subject: string;
  date: string;
  snippet: string;
  unread: boolean;
}

interface MailDetail {
  id: string;
  from: string;
  to: string;
  subject: string;
  date: string;
  unread: boolean;
  bodyHtml: string | null;
  bodyText: string | null;
  attachments: { filename: string; mimeType: string; size: number }[];
}

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

function fmtDate(d: string) {
  const t = new Date(d);
  return isNaN(t.getTime()) ? d : dateFmt.format(t);
}
function fmtSize(n: number) {
  if (n < 1024) return `${n} o`;
  if (n < 1024 * 1024) return `${Math.round(n / 1024)} Ko`;
  return `${(n / 1024 / 1024).toFixed(1)} Mo`;
}

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

  const [messages, setMessages] = useState<MailItem[]>([]);
  const [nextToken, setNextToken] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [loadingMore, setLoadingMore] = useState(false);
  const [problem, setProblem] = useState<"none" | "not_connected" | "reconnect" | "error">("none");

  const [openId, setOpenId] = useState<string | null>(null);
  const [detail, setDetail] = useState<MailDetail | null>(null);
  const [loadingDetail, setLoadingDetail] = useState(false);
  const [busy, setBusy] = useState(false);

  const loadList = useCallback(async (token?: string) => {
    if (token) setLoadingMore(true);
    else setLoading(true);
    try {
      const url = `/backend/mail/messages?maxResults=20${token ? `&pageToken=${encodeURIComponent(token)}` : ""}`;
      const res = await fetch(url, { credentials: "include" });
      if (res.status === 409) {
        const d = await res.json().catch(() => ({}));
        setProblem(d.error === "reconnect" ? "reconnect" : "not_connected");
        return;
      }
      if (!res.ok) {
        setProblem("error");
        return;
      }
      const data = await res.json();
      setProblem("none");
      setMessages((prev) => (token ? [...prev, ...data.messages] : data.messages));
      setNextToken(data.nextPageToken);
    } catch {
      setProblem("error");
    } finally {
      setLoading(false);
      setLoadingMore(false);
    }
  }, []);

  useEffect(() => {
    loadList();
  }, [loadList]);

  async function open(id: string) {
    setOpenId(id);
    setDetail(null);
    setLoadingDetail(true);
    try {
      const res = await fetch(`/backend/mail/messages/${id}`, { credentials: "include" });
      if (res.ok) setDetail(await res.json());
    } finally {
      setLoadingDetail(false);
    }
  }

  async function action(id: string, path: string, removeFromList = false) {
    setBusy(true);
    try {
      const res = await fetch(`/backend/mail/messages/${id}/${path}`, {
        method: "POST",
        credentials: "include",
      });
      if (!res.ok) return;
      if (removeFromList) {
        setMessages((prev) => prev.filter((m) => m.id !== id));
        setOpenId(null);
        setDetail(null);
      } else {
        // bascule lu/non-lu localement
        setMessages((prev) =>
          prev.map((m) => (m.id === id ? { ...m, unread: path === "unread" } : m))
        );
        if (detail && detail.id === id) setDetail({ ...detail, unread: path === "unread" });
      }
    } finally {
      setBusy(false);
    }
  }

  // ── États de problème ─────────────────────────────────────────────────────
  if (problem === "not_connected" || problem === "reconnect") {
    return (
      <div className="mx-auto w-full max-w-3xl">
        <h1 className="mb-6 text-xl font-semibold text-black sm:text-2xl dark:text-zinc-50">Boîte mail</h1>
        <div 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">
          {problem === "reconnect" ? "Votre connexion Google a expiré. " : "Votre compte Google n'est pas connecté. "}
          <Link href="/settings" className="font-medium underline">Aller dans Paramètres</Link>.
        </div>
      </div>
    );
  }

  // ── Vue détail ────────────────────────────────────────────────────────────
  if (openId) {
    return (
      <div className="mx-auto w-full max-w-3xl">
        <button
          onClick={() => { setOpenId(null); setDetail(null); }}
          className="mb-4 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"
        >
          ← Retour
        </button>

        {loadingDetail || !detail ? (
          <p className="text-sm text-zinc-500">Chargement…</p>
        ) : (
          <div className="rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
            <h1 className="text-lg font-semibold text-black dark:text-zinc-50">{detail.subject}</h1>
            <div className="mt-1 text-sm text-zinc-500">{detail.from}</div>
            <div className="text-xs text-zinc-400">{fmtDate(detail.date)}</div>

            {canWrite && (
              <div className="mt-3 flex flex-wrap gap-2 border-y border-zinc-100 py-3 text-xs dark:border-zinc-900">
                <button disabled={busy} onClick={() => action(detail.id, detail.unread ? "read" : "unread")} className="rounded-md border border-zinc-300 px-2 py-1 hover:bg-zinc-100 disabled:opacity-50 dark:border-zinc-700 dark:hover:bg-zinc-900">
                  {detail.unread ? "Marquer lu" : "Marquer non lu"}
                </button>
                <button disabled={busy} onClick={() => action(detail.id, "archive", true)} className="rounded-md border border-zinc-300 px-2 py-1 hover:bg-zinc-100 disabled:opacity-50 dark:border-zinc-700 dark:hover:bg-zinc-900">
                  Archiver
                </button>
                <button disabled={busy} onClick={() => action(detail.id, "trash", true)} className="rounded-md border border-red-300 px-2 py-1 text-red-600 hover:bg-red-50 disabled:opacity-50 dark:border-red-900 dark:hover:bg-red-950">
                  Corbeille
                </button>
              </div>
            )}

            <div className="mt-4">
              {detail.bodyHtml ? (
                // HTML rendu en iframe sandboxée (scripts désactivés = isolation/sécurité)
                <iframe
                  title="Contenu de l'email"
                  sandbox=""
                  srcDoc={detail.bodyHtml}
                  className="h-[60vh] w-full rounded-lg border border-zinc-200 bg-white dark:border-zinc-800"
                />
              ) : (
                <pre className="whitespace-pre-wrap break-words text-sm text-zinc-700 dark:text-zinc-300">
                  {detail.bodyText || "(message vide)"}
                </pre>
              )}
            </div>

            {detail.attachments.length > 0 && (
              <div className="mt-4 border-t border-zinc-100 pt-3 dark:border-zinc-900">
                <h2 className="mb-2 text-xs font-medium text-zinc-500">Pièces jointes</h2>
                <ul className="flex flex-col gap-1 text-sm">
                  {detail.attachments.map((a, i) => (
                    <li key={i} className="text-zinc-600 dark:text-zinc-400">
                      📎 {a.filename} <span className="text-xs text-zinc-400">({fmtSize(a.size)})</span>
                    </li>
                  ))}
                </ul>
              </div>
            )}
          </div>
        )}
      </div>
    );
  }

  // ── Vue liste ─────────────────────────────────────────────────────────────
  return (
    <div className="mx-auto w-full max-w-3xl">
      <h1 className="mb-6 text-xl font-semibold text-black sm:text-2xl dark:text-zinc-50">Boîte mail</h1>

      {problem === "error" && (
        <div className="mb-4 rounded-2xl border border-red-300 bg-red-50 p-5 text-sm text-red-700 dark:border-red-900 dark:bg-red-950 dark:text-red-300">
          Impossible de charger les emails pour le moment.
        </div>
      )}

      {loading ? (
        <p className="text-sm text-zinc-500">Chargement…</p>
      ) : messages.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">
          Boîte de réception vide.
        </p>
      ) : (
        <>
          <ul className="flex flex-col gap-1.5">
            {messages.map((m) => (
              <li key={m.id}>
                <button
                  onClick={() => open(m.id)}
                  className="flex w-full flex-col gap-0.5 rounded-xl border border-zinc-200 bg-white p-3 text-left transition-colors hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-900"
                >
                  <div className="flex items-center justify-between gap-2">
                    <span className={"truncate text-sm " + (m.unread ? "font-semibold text-black dark:text-zinc-50" : "text-zinc-600 dark:text-zinc-400")}>
                      {m.unread && <span className="mr-1 inline-block h-2 w-2 rounded-full bg-blue-500 align-middle" />}
                      {m.from}
                    </span>
                    <span className="shrink-0 text-xs text-zinc-400">{fmtDate(m.date)}</span>
                  </div>
                  <div className={"truncate text-sm " + (m.unread ? "font-medium text-black dark:text-zinc-100" : "text-zinc-600 dark:text-zinc-400")}>
                    {m.subject}
                  </div>
                  <div className="truncate text-xs text-zinc-400">{m.snippet}</div>
                </button>
              </li>
            ))}
          </ul>

          {nextToken && (
            <div className="mt-4 flex justify-center">
              <button
                onClick={() => loadList(nextToken)}
                disabled={loadingMore}
                className="rounded-lg border border-zinc-300 px-4 py-2 text-sm hover:bg-zinc-100 disabled:opacity-60 dark:border-zinc-700 dark:hover:bg-zinc-900"
              >
                {loadingMore ? "Chargement…" : "Charger plus"}
              </button>
            </div>
          )}
        </>
      )}
    </div>
  );
}