"use client";

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

interface LoginEvent {
  id: string;
  username: string;
  success: boolean;
  kind: string;
  actor: string | null;
  ip: string | null;
  userAgent: string | null;
  createdAt: string;
}

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

// Raccourci lisible du User-Agent (navigateur / OS).
function shortUA(ua: string | null): string {
  if (!ua) return "—";
  const m = ua.match(/(Firefox|Edg|Chrome|Safari|curl)[/ ]?([\d.]+)?/);
  const browser = m ? (m[1] === "Edg" ? "Edge" : m[1]) : ua.slice(0, 20);
  let os = "";
  if (/Android/.test(ua)) os = "Android";
  else if (/iPhone|iPad|iOS/.test(ua)) os = "iOS";
  else if (/Windows/.test(ua)) os = "Windows";
  else if (/Mac OS X|Macintosh/.test(ua)) os = "macOS";
  else if (/Linux/.test(ua)) os = "Linux";
  return os ? `${browser} · ${os}` : browser;
}

export default function AdminLogsPage() {
  const router = useRouter();
  const me = useCurrentUser();
  const [events, setEvents] = useState<LoginEvent[]>([]);
  const [total, setTotal] = useState(0);
  const [offset, setOffset] = useState(0);
  const [loading, setLoading] = useState(true);

  const load = useCallback(async (off: number) => {
    setLoading(true);
    try {
      const res = await fetch(`/backend/audit/logins?limit=${PAGE}&offset=${off}`, { credentials: "include" });
      if (!res.ok) return;
      const d = await res.json();
      setEvents(d.events);
      setTotal(d.total);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    if (me.role !== "super_admin") {
      router.replace("/dashboard");
      return;
    }
    load(offset);
  }, [me.role, router, load, offset]);

  const page = Math.floor(offset / PAGE) + 1;
  const totalPages = Math.max(1, Math.ceil(total / PAGE));

  return (
    <div className="mx-auto w-full max-w-4xl">
      <h1 className="mb-1 text-xl font-semibold text-black sm:text-2xl dark:text-zinc-50">Journal de connexions</h1>
      <p className="mb-6 text-sm text-zinc-500">Qui s&apos;est connecté, quand et depuis où ({total} événements).</p>

      {loading ? (
        <p className="text-sm text-zinc-500">Chargement…</p>
      ) : events.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">Aucun événement.</p>
      ) : (
        <>
          {/* Cartes sur mobile */}
          <div className="flex flex-col gap-2 sm:hidden">
            {events.map((e) => (
              <div key={e.id} className="rounded-xl border border-zinc-200 bg-white p-3 text-sm dark:border-zinc-800 dark:bg-zinc-950">
                <div className="flex items-center justify-between">
                  <span className="font-medium text-black dark:text-zinc-50">{e.username}</span>
                  <span className={e.success ? "text-xs text-green-600" : "text-xs text-red-600"}>{e.success ? "Succès" : "Échec"}</span>
                </div>
                <div className="mt-0.5 text-xs text-zinc-500">{dateFmt.format(new Date(e.createdAt))}</div>
                <div className="text-xs text-zinc-400">
                  {e.kind === "impersonation" ? `Impersonation (par ${e.actor})` : "Mot de passe"} · {e.ip ?? "—"} · {shortUA(e.userAgent)}
                </div>
              </div>
            ))}
          </div>

          {/* Tableau dès sm */}
          <div className="hidden overflow-x-auto rounded-2xl border border-zinc-200 bg-white sm:block dark:border-zinc-800 dark:bg-zinc-950">
            <table className="w-full text-left text-sm">
              <thead className="border-b border-zinc-200 text-zinc-500 dark:border-zinc-800">
                <tr>
                  <th className="px-4 py-3 font-medium">Date / heure</th>
                  <th className="px-4 py-3 font-medium">Utilisateur</th>
                  <th className="px-4 py-3 font-medium">Type</th>
                  <th className="px-4 py-3 font-medium">Résultat</th>
                  <th className="px-4 py-3 font-medium">IP</th>
                  <th className="px-4 py-3 font-medium">Appareil</th>
                </tr>
              </thead>
              <tbody>
                {events.map((e) => (
                  <tr key={e.id} className="border-b border-zinc-100 last:border-0 dark:border-zinc-900">
                    <td className="whitespace-nowrap px-4 py-2.5 text-zinc-600 dark:text-zinc-400">{dateFmt.format(new Date(e.createdAt))}</td>
                    <td className="px-4 py-2.5 font-medium text-black dark:text-zinc-50">{e.username}</td>
                    <td className="px-4 py-2.5 text-xs text-zinc-500">
                      {e.kind === "impersonation" ? `Impersonation (par ${e.actor})` : "Mot de passe"}
                    </td>
                    <td className="px-4 py-2.5">
                      <span className={e.success ? "text-green-600" : "text-red-600"}>{e.success ? "Succès" : "Échec"}</span>
                    </td>
                    <td className="px-4 py-2.5 text-zinc-600 dark:text-zinc-400">{e.ip ?? "—"}</td>
                    <td className="px-4 py-2.5 text-xs text-zinc-500">{shortUA(e.userAgent)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {totalPages > 1 && (
            <div className="mt-4 flex items-center justify-between text-sm">
              <button onClick={() => setOffset(Math.max(0, offset - PAGE))} disabled={offset === 0} className="rounded-md border border-zinc-300 px-3 py-1.5 disabled:opacity-40 dark:border-zinc-700">‹ Précédent</button>
              <span className="text-zinc-500">Page {page} / {totalPages}</span>
              <button onClick={() => setOffset(offset + PAGE)} disabled={page >= totalPages} className="rounded-md border border-zinc-300 px-3 py-1.5 disabled:opacity-40 dark:border-zinc-700">Suivant ›</button>
            </div>
          )}
        </>
      )}
    </div>
  );
}