"use client";
// Sécurité : gestion des comptes (rôle, cours, désactivation, réinitialisation du mot
// de passe, révocation des sessions) et journal des événements d'authentification.
import { useState } from "react";
import { Check, Copy, KeyRound, LogOut, ShieldAlert, Users } from "lucide-react";
import { PageHeader } from "@/components/app-shell";
import { Badge, Button, Card, EmptyState, Modal, Skeleton, Spinner, cn } from "@/components/ui";
import { ErrorBanner, SectionTitle, fmtDate, fmtInt, postJson, useFetchJson } from "./shared";

type UserRow = {
  id: number;
  username: string;
  display_name: string;
  email: string | null;
  role: "student" | "instructor" | "admin";
  disabled: number;
  must_change_password: number;
  is_initial_admin: number;
  created_at: string;
  last_login_at: string | null;
  courses: string | null; // "IMM1003,IMM1033"
  sessions: number;
};

type AuthEvent = {
  id: number;
  user_id: number | null;
  username: string | null;
  event: string;
  ip: string | null;
  detail: string | null;
  created_at: string;
};

const ROLE_LABEL: Record<UserRow["role"], string> = {
  student: "Étudiant·e",
  instructor: "Professeur",
  admin: "Admin",
};

const COURSES = ["IMM1003", "IMM1033"] as const;

function eventTone(event: string): string {
  if (/failed|rate-limited|disabled/.test(event)) return "text-red-600 dark:text-red-400 font-medium";
  if (event === "login-success" || event === "register") return "text-emerald-700 dark:text-emerald-400";
  return "text-fg";
}

export function AdminSecurity() {
  const { data, error, loading, reload } = useFetchJson<{ users: UserRow[]; events: AuthEvent[] }>("/api/admin/users");
  const [actionError, setActionError] = useState<string | null>(null);
  const [busyId, setBusyId] = useState<number | null>(null);

  // Réinitialisation du mot de passe
  const [resetTarget, setResetTarget] = useState<UserRow | null>(null);
  const [tempPassword, setTempPassword] = useState<string | null>(null);
  const [copied, setCopied] = useState(false);

  async function patch(userId: number, body: Record<string, unknown>): Promise<{ ok: boolean; tempPassword: string | null } | null> {
    setBusyId(userId);
    setActionError(null);
    try {
      const r = await postJson<{ ok: boolean; tempPassword: string | null }>("/api/admin/users", { userId, ...body }, "PATCH");
      await reload();
      return r;
    } catch (e) {
      setActionError(e instanceof Error ? e.message : "L'action a échoué.");
      return null;
    } finally {
      setBusyId(null);
    }
  }

  function toggleCourse(u: UserRow, course: string) {
    const current = (u.courses ?? "").split(",").filter(Boolean);
    const next = current.includes(course) ? current.filter((c) => c !== course) : [...current, course];
    patch(u.id, { courses: next });
  }

  async function resetPassword() {
    if (!resetTarget) return;
    const r = await patch(resetTarget.id, { resetPassword: true });
    if (r?.tempPassword) {
      setTempPassword(r.tempPassword);
      setCopied(false);
    }
  }

  async function copyPassword() {
    if (!tempPassword) return;
    try {
      await navigator.clipboard.writeText(tempPassword);
      setCopied(true);
      setTimeout(() => setCopied(false), 2500);
    } catch {
      setActionError("Impossible de copier — sélectionnez le mot de passe manuellement.");
    }
  }

  function closeResetModal() {
    setResetTarget(null);
    setTempPassword(null);
    setCopied(false);
  }

  return (
    <div className="animate-fade-up">
      <PageHeader title="Sécurité" subtitle="Comptes, rôles, sessions et journal d'authentification" />

      {actionError && <div className="mb-4"><ErrorBanner message={actionError} /></div>}

      {loading ? (
        <div className="space-y-4">
          <Skeleton className="h-72" />
          <Skeleton className="h-56" />
        </div>
      ) : error || !data ? (
        <ErrorBanner
          message={
            error?.includes("403") || error?.toLowerCase().includes("accès")
              ? "Accès refusé — la gestion des comptes est réservée aux administrateurs."
              : error ?? "Données indisponibles."
          }
          onRetry={reload}
        />
      ) : (
        <>
          {/* Utilisateurs */}
          {data.users.length === 0 ? (
            <Card>
              <EmptyState icon={<Users />} title="Aucun utilisateur" description="Aucun compte n'existe encore." />
            </Card>
          ) : (
            <Card className="overflow-hidden">
              <div className="overflow-x-auto">
                <table className="w-full text-[13px]">
                  <thead>
                    <tr className="border-b border-app text-left text-[12px] text-muted">
                      <th className="px-4 py-2 font-medium">Identifiant</th>
                      <th className="px-3 py-2 font-medium">Nom</th>
                      <th className="px-3 py-2 font-medium">Rôle</th>
                      <th className="px-3 py-2 font-medium">Cours</th>
                      <th className="px-3 py-2 text-right font-medium">Sessions</th>
                      <th className="px-3 py-2 font-medium">Dernière connexion</th>
                      <th className="px-4 py-2 font-medium">Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    {data.users.map((u) => (
                      <tr key={u.id} className={cn("border-b border-app last:border-0", !!u.disabled && "opacity-60")}>
                        <td className="px-4 py-2.5">
                          <div className="flex flex-wrap items-center gap-1.5">
                            <span className="font-mono text-[12.5px] text-fg">{u.username}</span>
                            {!!u.is_initial_admin && <Badge tone="amber">admin initial</Badge>}
                            {!!u.disabled && <Badge tone="red">désactivé</Badge>}
                          </div>
                        </td>
                        <td className="px-3 py-2.5 text-fg">{u.display_name || "—"}</td>
                        <td className="px-3 py-2.5">
                          <select
                            value={u.role}
                            onChange={(e) => patch(u.id, { role: e.target.value })}
                            disabled={busyId === u.id}
                            aria-label={`Rôle de ${u.username}`}
                            className="h-8 rounded-lg border border-app bg-card px-2 text-[12.5px] text-fg outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-500/25"
                          >
                            {(Object.keys(ROLE_LABEL) as UserRow["role"][]).map((r) => (
                              <option key={r} value={r}>{ROLE_LABEL[r]}</option>
                            ))}
                          </select>
                        </td>
                        <td className="px-3 py-2.5">
                          <div className="flex gap-3">
                            {COURSES.map((c) => {
                              const enrolled = (u.courses ?? "").split(",").includes(c);
                              return (
                                <label key={c} className="flex items-center gap-1.5 text-[12px] text-muted">
                                  <input
                                    type="checkbox"
                                    checked={enrolled}
                                    disabled={busyId === u.id}
                                    onChange={() => toggleCourse(u, c)}
                                    className="h-3.5 w-3.5 accent-[var(--color-brand-600)]"
                                  />
                                  {c}
                                </label>
                              );
                            })}
                          </div>
                        </td>
                        <td className="px-3 py-2.5 text-right tabular-nums text-fg">{fmtInt(u.sessions)}</td>
                        <td className="whitespace-nowrap px-3 py-2.5 tabular-nums text-muted">{u.last_login_at ? fmtDate(u.last_login_at) : "Jamais"}</td>
                        <td className="px-4 py-2.5">
                          <div className="flex items-center gap-1">
                            {busyId === u.id && <Spinner className="text-muted" />}
                            <Button
                              size="sm"
                              variant="ghost"
                              onClick={() => patch(u.id, { disabled: !u.disabled })}
                              disabled={busyId === u.id}
                              title={u.disabled ? "Réactiver le compte" : "Désactiver le compte"}
                              className={u.disabled ? "" : "text-red-600 hover:bg-red-500/10 dark:text-red-400"}
                            >
                              <ShieldAlert size={14} />
                              {u.disabled ? "Réactiver" : "Désactiver"}
                            </Button>
                            <Button
                              size="sm"
                              variant="ghost"
                              onClick={() => { setTempPassword(null); setResetTarget(u); }}
                              disabled={busyId === u.id}
                              title="Réinitialiser le mot de passe"
                            >
                              <KeyRound size={14} />
                              Réinit. mdp
                            </Button>
                            <Button
                              size="sm"
                              variant="ghost"
                              onClick={() => patch(u.id, { revokeSessions: true })}
                              disabled={busyId === u.id || u.sessions === 0}
                              title="Révoquer toutes les sessions"
                            >
                              <LogOut size={14} />
                              Révoquer
                            </Button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </Card>
          )}

          {/* Journal d'authentification */}
          <section className="mt-8">
            <SectionTitle sub="100 derniers événements — échecs en rouge">Journal des événements d'authentification</SectionTitle>
            {data.events.length === 0 ? (
              <Card className="p-5">
                <p className="text-sm text-muted">Aucun événement enregistré.</p>
              </Card>
            ) : (
              <Card className="overflow-hidden">
                <div className="max-h-[480px] overflow-auto">
                  <table className="w-full text-[13px]">
                    <thead className="sticky top-0 bg-card">
                      <tr className="border-b border-app text-left text-[12px] text-muted">
                        <th className="px-4 py-2 font-medium">Événement</th>
                        <th className="px-3 py-2 font-medium">Utilisateur</th>
                        <th className="px-3 py-2 font-medium">IP</th>
                        <th className="px-4 py-2 font-medium">Date</th>
                      </tr>
                    </thead>
                    <tbody>
                      {data.events.map((e) => (
                        <tr key={e.id} className="border-b border-app last:border-0">
                          <td className={cn("px-4 py-1.5 font-mono text-[12px]", eventTone(e.event))}>{e.event}</td>
                          <td className="px-3 py-1.5 font-mono text-[12px] text-fg">{e.username ?? "—"}</td>
                          <td className="px-3 py-1.5 font-mono text-[12px] text-muted">{e.ip ?? "—"}</td>
                          <td className="whitespace-nowrap px-4 py-1.5 tabular-nums text-muted">{fmtDate(e.created_at)}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </Card>
            )}
          </section>
        </>
      )}

      {/* Modal de réinitialisation */}
      <Modal
        open={resetTarget !== null}
        onClose={closeResetModal}
        title={tempPassword ? "Mot de passe temporaire généré" : "Réinitialiser le mot de passe"}
      >
        {!tempPassword ? (
          <>
            <p className="text-sm text-fg">
              Réinitialiser le mot de passe de <span className="font-mono">{resetTarget?.username}</span>&nbsp;?
            </p>
            <p className="mt-2 text-[13px] text-muted">
              Un mot de passe temporaire sera généré, toutes ses sessions seront fermées et la personne devra choisir
              un nouveau mot de passe à sa prochaine connexion.
            </p>
            <div className="mt-5 flex justify-end gap-2">
              <Button variant="secondary" onClick={closeResetModal}>Annuler</Button>
              <Button variant="danger" onClick={resetPassword} disabled={busyId !== null}>
                {busyId !== null && <Spinner />}
                Réinitialiser
              </Button>
            </div>
          </>
        ) : (
          <>
            <p className="text-sm text-fg">
              Mot de passe temporaire pour <span className="font-mono">{resetTarget?.username}</span>&nbsp;:
            </p>
            <div className="mt-3 flex items-center gap-2">
              <code className="flex-1 select-all rounded-lg border border-app bg-surface-1 px-4 py-2.5 font-mono text-[15px] font-semibold tracking-wide text-fg dark:bg-brand-950">
                {tempPassword}
              </code>
              <Button variant="secondary" onClick={copyPassword}>
                {copied ? <Check size={15} className="text-emerald-600" /> : <Copy size={15} />}
                {copied ? "Copié" : "Copier"}
              </Button>
            </div>
            <div className="mt-4 rounded-xl border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-[13px] text-amber-800 dark:text-amber-300">
              Ce mot de passe ne sera plus jamais affiché. Transmettez-le de façon sécurisée (en personne ou par un canal
              chiffré) — jamais par courriel en clair. La personne devra le remplacer dès sa première connexion.
            </div>
            <div className="mt-5 flex justify-end">
              <Button onClick={closeResetModal}>Fermer</Button>
            </div>
          </>
        )}
      </Modal>
    </div>
  );
}