"use client";

import { useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";

import SectorEmailsPanel from "@/components/parametres/SectorEmailsPanel";
import DatabaseTablesPanel from "@/components/parametres/DatabaseTablesPanel";
import DocumentTemplatesPanel from "@/components/parametres/DocumentTemplatesPanel";
import ProcedureRhRecipientsPanel from "@/components/parametres/ProcedureRhRecipientsPanel";

const MODULES = [
  ["dashboard", "Tableau de bord"],
  ["alertes", "Alertes"],
  ["etat_civil", "État civil"],
  ["contrats", "Contrats"],
  ["absences", "Absences"],
  ["visites_medicales", "Visites médicales"],
  ["sanctions", "Sanctions"],
  ["fiches_paie", "Fiches de paie"],
  ["impressions", "Impressions"],
  ["autres", "Autres actions"],
  ["parametres", "Paramètres"],
] as const;

type AppModule = (typeof MODULES)[number][0];
type Permission = {
  module: AppModule;
  canRead: boolean;
  canWrite: boolean;
};

type Sector = { id: number; name: string };
type Establishment = {
  id: number;
  name: string;
  company: string | null;
};
type ContractType = { id: number; name: string };

type AdminUser = {
  id: number;
  username: string;
  email: string | null;
  role: string;
  provider: string | null;
  is_active: boolean;
  last_login_at: string | null;
  all_sectors: boolean;
  all_establishments: boolean;
  all_categories: boolean;
  all_contract_types: boolean;
  permissions: Array<{
    module: string;
    can_read: boolean;
    can_write: boolean;
  }>;
  sectors: Array<{
    sector: { id: number; secteurs: string | null };
  }>;
  establishments: Array<{
    establishment: {
      id: number;
      etb: string | null;
      entreprise: string | null;
    };
  }>;
  categories: Array<{ category: string }>;
  contract_types: Array<{
    contract_type: { id: number; tcs: string | null };
  }>;
};

type CurrentUser = {
  id: number;
  username: string;
  role: string;
  access: {
    permissions: Record<AppModule, { canRead: boolean; canWrite: boolean }>;
  };
};

type UserEmailSignature = {
  userId: number;
  username: string;
  email: string | null;
  enabled: boolean;
  displayName: string;
  jobTitle: string;
  phone: string;
  company: string;
  address: string;
  website: string;
  logo: "ENVIE_2E" | "ENVIE_MAGASINS" | "NONE";
};

type SettingsTab = "users" | "sector-emails" | "document-templates" | "references" | "general";

function blankPermissions(): Permission[] {
  return MODULES.map(([module]) => ({
    module,
    canRead: false,
    canWrite: false,
  }));
}

function permissionsFromUser(user: AdminUser): Permission[] {
  const byModule = new Map(
    user.permissions.map((permission) => [permission.module, permission]),
  );

  return MODULES.map(([module]) => {
    const stored = byModule.get(module);
    return {
      module,
      canRead: stored?.can_read ?? false,
      canWrite: stored?.can_write ?? false,
    };
  });
}

function formatDate(value: string | null) {
  return value ? new Date(value).toLocaleString("fr-FR") : "Jamais";
}

function normalizeWebsite(value: string) {
  const trimmed = value.trim();
  if (!trimmed || /^https?:\/\//i.test(trimmed)) return trimmed;
  return `https://${trimmed}`;
}

export default function ParametresPage() {
  const router = useRouter();
  const [currentUser, setCurrentUser] = useState<CurrentUser | null>(null);
  const [activeTab, setActiveTab] = useState<SettingsTab>("users");
  const [users, setUsers] = useState<AdminUser[]>([]);
  const [sectors, setSectors] = useState<Sector[]>([]);
  const [establishments, setEstablishments] = useState<Establishment[]>([]);
  const [categories, setCategories] = useState<string[]>([]);
  const [contractTypes, setContractTypes] = useState<ContractType[]>([]);
  const [search, setSearch] = useState("");
  const [editingUser, setEditingUser] = useState<AdminUser | null>(null);
  const [signatureUser, setSignatureUser] = useState<AdminUser | null>(null);
  const [signature, setSignature] = useState<UserEmailSignature | null>(null);
  const [signatureLoading, setSignatureLoading] = useState(false);
  const [signatureSaving, setSignatureSaving] = useState(false);
  const [signatureError, setSignatureError] = useState<string | null>(null);
  const [permissions, setPermissions] =
    useState<Permission[]>(blankPermissions);
  const [sectorIds, setSectorIds] = useState<number[]>([]);
  const [allSectors, setAllSectors] = useState(false);
  const [establishmentIds, setEstablishmentIds] = useState<number[]>([]);
  const [allEstablishments, setAllEstablishments] = useState(true);
  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
  const [allCategories, setAllCategories] = useState(true);
  const [contractTypeIds, setContractTypeIds] = useState<number[]>([]);
  const [allContractTypes, setAllContractTypes] = useState(true);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  const isSuperAdmin = currentUser?.role === "super_admin";
  const canReadSettings =
    isSuperAdmin || currentUser?.access.permissions.parametres.canRead;

  async function api(path: string, init?: RequestInit) {
    const token = localStorage.getItem("token");
    return fetch(`${process.env.NEXT_PUBLIC_API_URL}${path}`, {
      ...init,
      cache: "no-store",
      headers: {
        Authorization: `Bearer ${token}`,
        ...(init?.body ? { "Content-Type": "application/json" } : {}),
        ...init?.headers,
      },
    });
  }

  // Réponse parfois vide (erreur réseau, 204, crash serveur sans corps) :
  // response.json() lève "Unexpected end of JSON input" dans ce cas.
  async function readJson(response: Response) {
    const text = await response.text();
    if (!text) return {};
    try {
      return JSON.parse(text);
    } catch {
      return {};
    }
  }

  async function loadUsers() {
    if (!isSuperAdmin) return;

    const response = await api("/api/admin/users");
    const data = await readJson(response);

    if (!response.ok) throw new Error(data.message ?? "Chargement impossible");

    setUsers(data.items ?? []);
    setSectors(data.sectors ?? []);
    setEstablishments(data.establishments ?? []);
    setCategories(data.categories ?? []);
    setContractTypes(data.contractTypes ?? []);
  }

  useEffect(() => {
    let cancelled = false;

    async function initialize() {
      try {
        const response = await api("/api/auth/me");
        const data = await readJson(response);

        if (!response.ok) throw new Error("Session invalide");
        if (cancelled) return;

        const user = data.user as CurrentUser;
        setCurrentUser(user);
        localStorage.setItem("user", JSON.stringify(user));

        const settingsAllowed =
          user.role === "super_admin" ||
          user.access.permissions.parametres.canRead;

        if (!settingsAllowed) {
          router.replace("/dashboard");
          return;
        }

        if (user.role !== "super_admin") {
          setActiveTab("sector-emails");
        }
      } catch {
        localStorage.removeItem("token");
        localStorage.removeItem("user");
        router.replace("/login");
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    void initialize();
    return () => {
      cancelled = true;
    };
  }, [router]);

  useEffect(() => {
    if (!isSuperAdmin) return;

    setLoading(true);
    loadUsers()
      .catch((reason) =>
        setError(reason instanceof Error ? reason.message : "Erreur"),
      )
      .finally(() => setLoading(false));
  }, [isSuperAdmin]);

  const filteredUsers = useMemo(() => {
    const needle = search.trim().toLowerCase();
    if (!needle) return users;
    return users.filter((user) =>
      `${user.username} ${user.email ?? ""}`.toLowerCase().includes(needle),
    );
  }, [search, users]);

  function openPermissions(user: AdminUser) {
    setEditingUser(user);
    setPermissions(permissionsFromUser(user));
    setAllSectors(user.all_sectors);
    setSectorIds(user.sectors.map((item) => item.sector.id));
    setAllEstablishments(user.all_establishments);
    setEstablishmentIds(
      user.establishments.map((item) => item.establishment.id),
    );
    setAllCategories(user.all_categories);
    setSelectedCategories(user.categories.map((item) => item.category));
    setAllContractTypes(user.all_contract_types);
    setContractTypeIds(
      user.contract_types.map((item) => item.contract_type.id),
    );
    setError(null);
    setMessage(null);
  }

  function updatePermission(
    module: AppModule,
    field: "canRead" | "canWrite",
    checked: boolean,
  ) {
    setPermissions((current) =>
      current.map((permission) => {
        if (permission.module !== module) return permission;
        if (field === "canWrite" && checked) {
          return { ...permission, canRead: true, canWrite: true };
        }
        if (field === "canRead" && !checked) {
          return { ...permission, canRead: false, canWrite: false };
        }
        return { ...permission, [field]: checked };
      }),
    );
  }

  async function savePermissions() {
    if (!editingUser) return;

    setSaving(true);
    setError(null);

    try {
      const response = await api(
        `/api/admin/users/${editingUser.id}/permissions`,
        {
          method: "PATCH",
          body: JSON.stringify({
            allSectors,
            sectorIds: allSectors ? [] : sectorIds,
            allEstablishments,
            establishmentIds: allEstablishments ? [] : establishmentIds,
            allCategories,
            categories: allCategories ? [] : selectedCategories,
            allContractTypes,
            contractTypeIds: allContractTypes ? [] : contractTypeIds,
            permissions,
          }),
        },
      );
      const data = await readJson(response);

      if (!response.ok)
        throw new Error(data.message ?? "Enregistrement impossible");

      await loadUsers();
      setEditingUser(null);
      setMessage(data.message);
    } catch (reason) {
      setError(reason instanceof Error ? reason.message : "Erreur");
    } finally {
      setSaving(false);
    }
  }

  async function toggleAccount(user: AdminUser) {
    const response = await api(`/api/admin/users/${user.id}`, {
      method: "PATCH",
      body: JSON.stringify({ is_active: !user.is_active }),
    });
    const data = await readJson(response);

    if (!response.ok) {
      setError(data.message ?? "Modification impossible");
      return;
    }

    await loadUsers();
  }

  async function openSignature(user: AdminUser) {
    setSignatureUser(user);
    setSignature(null);
    setSignatureError(null);
    setSignatureLoading(true);
    try {
      const response = await api(`/api/admin/users/${user.id}/signature`);
      const data = await readJson(response);
      if (!response.ok) {
        throw new Error(data.message ?? "Chargement de la signature impossible");
      }
      setSignature(data.item as UserEmailSignature);
    } catch (reason) {
      setSignatureError(reason instanceof Error ? reason.message : "Erreur");
    } finally {
      setSignatureLoading(false);
    }
  }

  async function saveSignature() {
    if (!signatureUser || !signature) return;
    setSignatureSaving(true);
    setSignatureError(null);
    try {
      const response = await api(
        `/api/admin/users/${signatureUser.id}/signature`,
        { method: "PUT", body: JSON.stringify(signature) },
      );
      const data = await readJson(response);
      if (!response.ok) {
        throw new Error(
          data.issues?.[0]?.message ??
            data.message ??
            "Enregistrement de la signature impossible",
        );
      }
      setSignatureUser(null);
      setSignature(null);
      setMessage(data.message ?? "La signature e-mail a été enregistrée.");
    } catch (reason) {
      setSignatureError(reason instanceof Error ? reason.message : "Erreur");
    } finally {
      setSignatureSaving(false);
    }
  }

  if (loading || !currentUser || !canReadSettings) {
    return <main className="min-h-screen bg-slate-100 p-8">Chargement…</main>;
  }

  const tabs: Array<{ id: SettingsTab; label: string }> = [
    ...(isSuperAdmin
      ? [{ id: "users" as const, label: "Utilisateurs et habilitations" }]
      : []),
    { id: "sector-emails", label: "Emails par secteur" },
    ...(isSuperAdmin || currentUser.access.permissions.impressions.canWrite
      ? [{ id: "document-templates" as const, label: "Mod\u00e8les de documents" }]
      : []),
    ...(isSuperAdmin
      ? [{ id: "references" as const, label: "Tables et valeurs" }]
      : []),
    { id: "general", label: "Paramètres généraux" },
  ];

  return (
    <main className="min-h-screen bg-slate-100 p-4 text-slate-900">
      <header className="mb-4 flex items-center justify-between rounded-lg bg-white p-4 shadow">
        <div>
          <h1 className="text-2xl font-bold text-blue-700">
            Paramètres et administration
          </h1>
          <p className="text-sm text-slate-500">
            Gère les accès et la configuration de RH Connect.
          </p>
        </div>
        <button
          className="rounded border border-blue-500 px-4 py-2 font-semibold text-blue-600"
          onClick={() => router.push("/dashboard")}
        >
          Retour au tableau de bord
        </button>
      </header>

      <nav className="mb-4 flex flex-wrap gap-2 rounded-lg bg-white p-3 shadow">
        <button
          className="rounded bg-slate-100 px-4 py-2 text-sm font-semibold"
          onClick={() => router.push("/parametres/alertes-mails")}
        >
          Emails automatiques
        </button>
        {tabs.map((tab) => (
          <button
            key={tab.id}
            onClick={() => setActiveTab(tab.id)}
            className={`rounded px-4 py-2 text-sm font-semibold ${activeTab === tab.id ? "bg-blue-600 text-white" : "bg-slate-100"}`}
          >
            {tab.label}
          </button>
        ))}
      </nav>

      {error && (
        <p className="mb-3 rounded bg-red-50 p-3 text-red-700">{error}</p>
      )}
      {message && (
        <p className="mb-3 rounded bg-green-50 p-3 text-green-700">{message}</p>
      )}

      {activeTab === "users" && isSuperAdmin ? (
        <section className="rounded-lg bg-white p-4 shadow">
          <div className="mb-4 flex items-end justify-between gap-4">
            <div>
              <h2 className="text-xl font-bold">
                Utilisateurs et habilitations
              </h2>
              <p className="text-sm text-slate-500">
                Les droits sont appliqués côté API et par secteur.
              </p>
            </div>
            <input
              value={search}
              onChange={(event) => setSearch(event.target.value)}
              placeholder="Rechercher…"
              className="rounded border px-3 py-2"
            />
          </div>
          <div className="overflow-x-auto">
            <table className="w-full min-w-[900px] border-collapse text-sm">
              <thead>
                <tr className="bg-sky-100 text-left">
                  <th className="border p-2">Utilisateur</th>
                  <th className="border p-2">Email</th>
                  <th className="border p-2">Connexion</th>
                  <th className="border p-2">Compte</th>
                  <th className="border p-2">Dernière connexion</th>
                  <th className="border p-2">Action</th>
                </tr>
              </thead>
              <tbody>
                {filteredUsers.map((user) => {
                  const protectedUser = user.role === "super_admin";
                  return (
                    <tr key={user.id} className="even:bg-slate-50">
                      <td className="border p-2 font-medium">
                        {user.username}
                      </td>
                      <td className="border p-2">{user.email ?? "-"}</td>
                      <td className="border p-2">
                        {user.provider ?? "Locale"}
                      </td>
                      <td className="border p-2">
                        <button
                          disabled={protectedUser}
                          onClick={() => void toggleAccount(user)}
                          className={`rounded px-2 py-1 ${user.is_active ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"}`}
                        >
                          {user.is_active ? "Actif" : "Désactivé"}
                        </button>
                      </td>
                      <td className="border p-2">
                        {formatDate(user.last_login_at)}
                      </td>
                      <td className="border p-2">
                        <div className="flex flex-wrap gap-2">
                          <button
                            onClick={() => void openSignature(user)}
                            className="rounded bg-slate-700 px-3 py-2 font-semibold text-white"
                          >
                            Signature e-mail
                          </button>
                          {protectedUser ? (
                            <span className="self-center text-slate-500">
                              Accès total — protégé
                            </span>
                          ) : (
                            <button
                              onClick={() => openPermissions(user)}
                              className="rounded bg-blue-600 px-3 py-2 font-semibold text-white"
                            >
                              Modifier les habilitations
                            </button>
                          )}
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </section>
      ) : activeTab === "sector-emails" ? (
        <SectorEmailsPanel />
      ) : activeTab === "document-templates" ? (
        <DocumentTemplatesPanel />
      ) : activeTab === "references" && isSuperAdmin ? (
        <DatabaseTablesPanel />
      ) : activeTab === "general" && isSuperAdmin ? (
        <ProcedureRhRecipientsPanel />
      ) : (
        <section className="rounded-lg bg-white p-8 text-center shadow">
          <h2 className="text-xl font-bold">
            {tabs.find((tab) => tab.id === activeTab)?.label}
          </h2>
          <p className="mt-2 text-slate-500">
            Cet écran sera raccordé à l’étape suivante.
          </p>
        </section>
      )}

      {editingUser && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
          role="dialog"
          aria-modal="true"
        >
          <section className="max-h-[92vh] w-full max-w-6xl overflow-y-auto rounded-lg bg-white p-5 shadow-xl">
            <div className="mb-4 flex items-start justify-between">
              <div>
                <h2 className="text-xl font-bold">
                  Habilitations de {editingUser.email ?? editingUser.username}
                </h2>
                <p className="text-sm text-slate-500">
                  Écriture implique automatiquement lecture.
                </p>
              </div>
              <button onClick={() => setEditingUser(null)} className="text-2xl">
                ×
              </button>
            </div>
            <div className="grid gap-6 lg:grid-cols-2">
              <div>
                <h3 className="mb-2 font-bold">Onglets et actions</h3>
                <table className="w-full border-collapse text-sm">
                  <thead>
                    <tr className="bg-sky-100">
                      <th className="border p-2 text-left">Module</th>
                      <th className="border p-2">Lire</th>
                      <th className="border p-2">Écrire</th>
                    </tr>
                  </thead>
                  <tbody>
                    {permissions.map((permission) => (
                      <tr key={permission.module}>
                        <td className="border p-2">
                          {
                            MODULES.find(
                              ([module]) => module === permission.module,
                            )?.[1]
                          }
                        </td>
                        <td className="border p-2 text-center">
                          <input
                            type="checkbox"
                            checked={permission.canRead}
                            onChange={(event) =>
                              updatePermission(
                                permission.module,
                                "canRead",
                                event.target.checked,
                              )
                            }
                          />
                        </td>
                        <td className="border p-2 text-center">
                          <input
                            type="checkbox"
                            checked={permission.canWrite}
                            onChange={(event) =>
                              updatePermission(
                                permission.module,
                                "canWrite",
                                event.target.checked,
                              )
                            }
                          />
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <div>
                <h3 className="mb-2 font-bold">Périmètre des salariés</h3>
                <div className="space-y-4">
                  <fieldset className="rounded border p-3">
                    <legend className="px-1 font-semibold">
                      Entreprises / établissements
                    </legend>
                    <label className="mb-3 flex items-center gap-2 rounded bg-blue-50 p-2">
                      <input
                        type="checkbox"
                        checked={allEstablishments}
                        onChange={(event) =>
                          setAllEstablishments(event.target.checked)
                        }
                      />
                      Tous, y compris les futurs
                    </label>
                    <div
                      className={`grid max-h-40 gap-2 overflow-y-auto sm:grid-cols-2 ${allEstablishments ? "opacity-40" : ""}`}
                    >
                      {establishments.map((establishment) => (
                        <label
                          key={establishment.id}
                          className="flex items-center gap-2 rounded border p-2"
                        >
                          <input
                            type="checkbox"
                            disabled={allEstablishments}
                            checked={establishmentIds.includes(
                              establishment.id,
                            )}
                            onChange={(event) =>
                              setEstablishmentIds((current) =>
                                event.target.checked
                                  ? [...current, establishment.id]
                                  : current.filter(
                                      (id) => id !== establishment.id,
                                    ),
                              )
                            }
                          />
                          <span>
                            {establishment.name}
                            {establishment.company &&
                            establishment.company !== establishment.name
                              ? ` — ${establishment.company}`
                              : ""}
                          </span>
                        </label>
                      ))}
                    </div>
                  </fieldset>

                  <fieldset className="rounded border p-3">
                    <legend className="px-1 font-semibold">Secteurs</legend>
                    <label className="mb-3 flex items-center gap-2 rounded bg-blue-50 p-2">
                      <input
                        type="checkbox"
                        checked={allSectors}
                        onChange={(event) =>
                          setAllSectors(event.target.checked)
                        }
                      />
                      Tous, y compris les futurs
                    </label>
                    <div
                      className={`grid max-h-40 gap-2 overflow-y-auto sm:grid-cols-2 ${allSectors ? "opacity-40" : ""}`}
                    >
                      {sectors.map((sector) => (
                        <label
                          key={sector.id}
                          className="flex items-center gap-2 rounded border p-2"
                        >
                          <input
                            type="checkbox"
                            disabled={allSectors}
                            checked={sectorIds.includes(sector.id)}
                            onChange={(event) =>
                              setSectorIds((current) =>
                                event.target.checked
                                  ? [...current, sector.id]
                                  : current.filter((id) => id !== sector.id),
                              )
                            }
                          />
                          {sector.name}
                        </label>
                      ))}
                    </div>
                  </fieldset>

                  <fieldset className="rounded border p-3">
                    <legend className="px-1 font-semibold">
                      Catégories professionnelles
                    </legend>
                    <label className="mb-3 flex items-center gap-2 rounded bg-blue-50 p-2">
                      <input
                        type="checkbox"
                        checked={allCategories}
                        onChange={(event) =>
                          setAllCategories(event.target.checked)
                        }
                      />
                      Toutes, y compris les futures
                    </label>
                    <div
                      className={`grid max-h-40 gap-2 overflow-y-auto sm:grid-cols-2 ${allCategories ? "opacity-40" : ""}`}
                    >
                      {categories.map((category) => (
                        <label
                          key={category}
                          className="flex items-center gap-2 rounded border p-2"
                        >
                          <input
                            type="checkbox"
                            disabled={allCategories}
                            checked={selectedCategories.includes(category)}
                            onChange={(event) =>
                              setSelectedCategories((current) =>
                                event.target.checked
                                  ? [...current, category]
                                  : current.filter((item) => item !== category),
                              )
                            }
                          />
                          {category}
                        </label>
                      ))}
                    </div>
                  </fieldset>

                  <fieldset className="rounded border p-3">
                    <legend className="px-1 font-semibold">
                      Types de contrat
                    </legend>
                    <label className="mb-3 flex items-center gap-2 rounded bg-blue-50 p-2">
                      <input
                        type="checkbox"
                        checked={allContractTypes}
                        onChange={(event) =>
                          setAllContractTypes(event.target.checked)
                        }
                      />
                      Tous, y compris les futurs
                    </label>
                    <div
                      className={`grid max-h-40 gap-2 overflow-y-auto sm:grid-cols-2 ${allContractTypes ? "opacity-40" : ""}`}
                    >
                      {contractTypes.map((contractType) => (
                        <label
                          key={contractType.id}
                          className="flex items-center gap-2 rounded border p-2"
                        >
                          <input
                            type="checkbox"
                            disabled={allContractTypes}
                            checked={contractTypeIds.includes(contractType.id)}
                            onChange={(event) =>
                              setContractTypeIds((current) =>
                                event.target.checked
                                  ? [...current, contractType.id]
                                  : current.filter(
                                      (id) => id !== contractType.id,
                                    ),
                              )
                            }
                          />
                          {contractType.name}
                        </label>
                      ))}
                    </div>
                  </fieldset>
                </div>
              </div>
            </div>
            <div className="mt-5 flex justify-end gap-3">
              <button
                onClick={() => setEditingUser(null)}
                className="rounded border px-4 py-2"
              >
                Annuler
              </button>
              <button
                disabled={saving}
                onClick={() => void savePermissions()}
                className="rounded bg-green-600 px-4 py-2 font-semibold text-white disabled:opacity-50"
              >
                {saving ? "Enregistrement…" : "Enregistrer les habilitations"}
              </button>
            </div>
          </section>
        </div>
      )}

      {signatureUser && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
          role="dialog"
          aria-modal="true"
        >
          <section className="max-h-[92vh] w-full max-w-4xl overflow-y-auto rounded-lg bg-white p-5 shadow-xl">
            <div className="mb-4 flex items-start justify-between">
              <div>
                <h2 className="text-xl font-bold">
                  Signature e-mail de {signatureUser.email ?? signatureUser.username}
                </h2>
                <p className="text-sm text-slate-500">
                  Cette signature sera ajoutée automatiquement aux e-mails envoyés par ce compte.
                </p>
              </div>
              <button onClick={() => setSignatureUser(null)} className="text-2xl">×</button>
            </div>

            {signatureError && (
              <p className="mb-3 rounded bg-red-50 p-3 text-red-700">{signatureError}</p>
            )}
            {signatureLoading || !signature ? (
              <p className="p-6 text-center text-slate-500">Chargement…</p>
            ) : (
              <>
                <label className="mb-4 flex items-center gap-2 rounded border border-blue-200 bg-blue-50 p-3 font-semibold">
                  <input
                    type="checkbox"
                    checked={signature.enabled}
                    onChange={(event) => setSignature((value) => value ? ({ ...value, enabled: event.target.checked }) : value)}
                  />
                  Activer la signature automatique
                </label>
                <div className="grid gap-4 md:grid-cols-2">
                  <div className="grid gap-3">
                    <label><span className="mb-1 block font-semibold">Nom affiché *</span><input value={signature.displayName} onChange={(event) => setSignature({ ...signature, displayName: event.target.value })} className="w-full rounded border px-3 py-2" /></label>
                    <label><span className="mb-1 block font-semibold">Fonction</span><input value={signature.jobTitle} onChange={(event) => setSignature({ ...signature, jobTitle: event.target.value })} className="w-full rounded border px-3 py-2" /></label>
                    <label><span className="mb-1 block font-semibold">Téléphone</span><input value={signature.phone} onChange={(event) => setSignature({ ...signature, phone: event.target.value })} className="w-full rounded border px-3 py-2" /></label>
                    <label><span className="mb-1 block font-semibold">Société</span><input value={signature.company} onChange={(event) => setSignature({ ...signature, company: event.target.value })} className="w-full rounded border px-3 py-2" /></label>
                    <label><span className="mb-1 block font-semibold">Adresse</span><input value={signature.address} onChange={(event) => setSignature({ ...signature, address: event.target.value })} className="w-full rounded border px-3 py-2" /></label>
                    <label><span className="mb-1 block font-semibold">Site web</span><input type="text" placeholder="www.groupevitaminet.com" value={signature.website} onChange={(event) => setSignature({ ...signature, website: event.target.value })} onBlur={(event) => setSignature({ ...signature, website: normalizeWebsite(event.target.value) })} className="w-full rounded border px-3 py-2" /><span className="mt-1 block text-xs text-slate-500">https:// est ajouté automatiquement si nécessaire.</span></label>
                    <label><span className="mb-1 block font-semibold">Logo</span><select value={signature.logo} onChange={(event) => setSignature({ ...signature, logo: event.target.value as UserEmailSignature["logo"] })} className="w-full rounded border bg-white px-3 py-2"><option value="ENVIE_2E">Envie 2e — Déchets électriques et électroniques</option><option value="ENVIE_MAGASINS">Envie — Électroménager rénové garanti</option><option value="NONE">Aucun logo</option></select></label>
                  </div>
                  <div>
                    <h3 className="mb-2 font-bold">Aperçu simplifié</h3>
                    <div className="rounded border bg-white p-5 text-[#1d5d9b] shadow-sm">
                      <p className="mb-4">Cordialement,</p>
                      <p className="text-lg font-bold">{signature.displayName || "Nom de l’utilisateur"}</p>
                      {signature.jobTitle && <p>{signature.jobTitle}</p>}
                      {signature.phone && <p>{signature.phone}</p>}
                      {signature.logo !== "NONE" && <p className="my-4 text-2xl font-bold text-green-600">envie<span className="text-base">2e</span></p>}
                      {signature.company && <p>{signature.company}</p>}
                      {signature.address && <p>{signature.address}</p>}
                      {signature.website && <p className="font-semibold underline">{signature.website.replace(/^https?:\/\//, "")}</p>}
                    </div>
                  </div>
                </div>
                <div className="mt-5 flex justify-end gap-3">
                  <button onClick={() => setSignatureUser(null)} className="rounded border px-4 py-2">Annuler</button>
                  <button disabled={signatureSaving || (signature.enabled && !signature.displayName.trim())} onClick={() => void saveSignature()} className="rounded bg-green-600 px-4 py-2 font-semibold text-white disabled:opacity-50">{signatureSaving ? "Enregistrement…" : "Enregistrer la signature"}</button>
                </div>
              </>
            )}
          </section>
        </div>
      )}
    </main>
  );
}