"use client"

import { useEffect, useMemo, useState } from "react"
import { useTranslations } from "next-intl"
import { useMe } from "@/src/features/auth/use-me"
import { useAdminGuard } from "@/src/features/auth/use-admin-guard"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { createUser, deleteUser, listUsers, updateUser, type User } from "@/src/lib/api/users"
import { listTenants, type Tenant } from "@/src/lib/api/tenants"
import {
  listMembershipsByUser,
  createMembership,
  updateMembership,
  deleteMembership,
  listRoles,
  type Membership,
  type Role,
} from "@/src/lib/api/memberships"
import {
  Plus, Pencil, Trash2, Shield, Loader2, Building2, X,
  Users, ShieldCheck, Search,
} from "lucide-react"

// ── Palette ──────────────────────────────────────────────────────────────────
const NAVY  = "#1a3578"
const NAVY2 = "#2655b0"
const TEAL  = "#4dba96"
const TEAL2 = "#2d9073"
const GREEN = "#059669"
const RED   = "#dc2626"

type FormState = {
  id?: number
  username: string
  email: string
  first_name: string
  last_name: string
  password: string
  is_active: boolean
  is_staff: boolean
  is_superuser: boolean
  tenant_id: number | ""
  tenant_is_owner: boolean
}

const defaultForm: FormState = {
  username: "", email: "", first_name: "", last_name: "",
  password: "", is_active: true, is_staff: false,
  is_superuser: false, tenant_id: "", tenant_is_owner: false,
}

// ── Helpers visuels ───────────────────────────────────────────────────────────
function UserAvatar({ name, superuser }: { name: string; superuser?: boolean }) {
  return (
    <div
      className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl text-[11px] font-bold text-white"
      style={{
        background: superuser
          ? `linear-gradient(135deg, ${NAVY} 0%, ${NAVY2} 100%)`
          : `linear-gradient(135deg, ${TEAL} 0%, ${TEAL2} 100%)`,
      }}
    >
      {name.slice(0, 2).toUpperCase()}
    </div>
  )
}

function StatusBadge({ active }: { active: boolean }) {
  return (
    <span
      className="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[11px] font-semibold ring-1"
      style={active
        ? { color: GREEN, background: "rgba(5,150,105,0.08)", borderColor: "rgba(5,150,105,0.25)" }
        : { color: "#94a3b8", background: "rgba(148,163,184,0.08)", borderColor: "rgba(148,163,184,0.2)" }}
    >
      <span className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: active ? GREEN : "#94a3b8" }} />
      {active ? "Actif" : "Inactif"}
    </span>
  )
}

// ══════════════════════════════════════════════════════════════════════════════
export default function AdminUsersPage() {
  const t  = useTranslations("users")
  const tM = useTranslations("membership")
  const { me } = useMe()
  const { checking } = useAdminGuard()

  const [items,    setItems]    = useState<User[]>([])
  const [loading,  setLoading]  = useState(true)
  const [saving,   setSaving]   = useState(false)
  const [error,    setError]    = useState<string | null>(null)

  const [q,        setQ]        = useState("")
  const [open,     setOpen]     = useState(false)
  const [form,     setForm]     = useState<FormState>(defaultForm)

  // Membership modal
  const [openM,        setOpenM]        = useState(false)
  const [selectedUser, setSelectedUser] = useState<User | null>(null)
  const [tenants,      setTenants]      = useState<Tenant[]>([])
  const [roles,        setRoles]        = useState<Role[]>([])
  const [memberships,  setMemberships]  = useState<Membership[]>([])
  const [loadingM,     setLoadingM]     = useState(false)
  const [tenantId,     setTenantId]     = useState<number | "">("")
  const [roleIds,      setRoleIds]      = useState<number[]>([])
  const [mStatus,      setMStatus]      = useState<"invited" | "active" | "suspended">("active")
  const [isOwner,      setIsOwner]      = useState(false)

  const canManage = !!me?.is_superuser

  function getTenantId(m: Membership): number | null {
    const tAny: any = (m as any).tenant
    if (typeof tAny === "number") return tAny
    if (tAny && typeof tAny === "object") return tAny.id ?? null
    return null
  }

  function normalizeError(msg: string): string {
    const s = (msg ?? "").toLowerCase()
    if (s.includes("unique") && s.includes("tenant") && s.includes("user")) {
      try { return tM("errors.already_member") } catch { return "Déjà membre de ce tenant." }
    }
    return msg
  }

  // ── Chargement ───────────────────────────────────────────────────────────
  async function load() {
    setError(null); setLoading(true)
    try { setItems(await listUsers()) }
    catch (e: any) { setError(e?.message ?? "Erreur") }
    finally { setLoading(false) }
  }

  useEffect(() => {
    if (!checking) {
      load()
      listTenants().then(setTenants).catch(() => {})
      listRoles().then(setRoles).catch(() => {})
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [checking])

  // ── Filtres ──────────────────────────────────────────────────────────────
  const filtered = useMemo(() => {
    const s = q.trim().toLowerCase()
    if (!s) return items
    return items.filter((u) =>
      [u.username, u.email, u.first_name ?? "", u.last_name ?? ""].join(" ").toLowerCase().includes(s)
    )
  }, [items, q])

  const superAdmins  = useMemo(() => filtered.filter((u) => u.is_superuser || u.is_staff), [filtered])
  const tenantUsers  = useMemo(() => filtered.filter((u) => !u.is_superuser && !u.is_staff), [filtered])

  // ── CRUD utilisateur ─────────────────────────────────────────────────────
  function openCreate(asAdmin = false) {
    setForm({ ...defaultForm, is_superuser: asAdmin, is_staff: asAdmin })
    setError(null); setOpen(true)
  }
  function openEdit(u: User) {
    setForm({
      id: u.id, username: u.username ?? "", email: u.email ?? "",
      first_name: u.first_name ?? "", last_name: u.last_name ?? "",
      password: "", is_active: !!u.is_active, is_staff: !!u.is_staff,
      is_superuser: !!u.is_superuser, tenant_id: "", tenant_is_owner: false,
    })
    setError(null); setOpen(true)
  }

  async function onSave() {
    setError(null); setSaving(true)
    try {
      if (!form.username || !form.email) { setError(t("errors.required")); return }
      if (!form.id && !form.password)    { setError(t("errors.password_required")); return }

      if (!form.id) {
        const newUser = await createUser({
          username: form.username, email: form.email, password: form.password,
          first_name: form.first_name || undefined, last_name: form.last_name || undefined,
          is_active: form.is_active, is_staff: form.is_staff, is_superuser: form.is_superuser,
        })
        if (form.tenant_id) {
          await createMembership({ tenant: Number(form.tenant_id), user: newUser.id, status: "active", is_owner: form.tenant_is_owner, roles: [] })
        }
      } else {
        await updateUser(form.id, {
          username: form.username, email: form.email,
          first_name: form.first_name || undefined, last_name: form.last_name || undefined,
          is_active: form.is_active, is_staff: form.is_staff, is_superuser: form.is_superuser,
          ...(form.password ? { password: form.password } : {}),
        })
      }
      setOpen(false); await load()
    } catch (e: any) { setError(e?.message ?? "Erreur") }
    finally { setSaving(false) }
  }

  async function onDelete(id: number) {
    if (!confirm(t("confirm_delete"))) return
    try { await deleteUser(id); await load() }
    catch (e: any) { setError(e?.message ?? "Erreur") }
  }

  // ── Modal memberships ────────────────────────────────────────────────────
  async function openMembershipModal(u: User) {
    setSelectedUser(u); setOpenM(true); setError(null); setLoadingM(true)
    try {
      const [ts, rs, ms] = await Promise.all([listTenants(), listRoles(), listMembershipsByUser(u.id)])
      setTenants(ts); setRoles(rs); setMemberships(ms)
      setTenantId(""); setRoleIds([]); setMStatus("active"); setIsOwner(false)
    } catch (e: any) { setError(e?.message ?? "Erreur") }
    finally { setLoadingM(false) }
  }

  async function onAddMembership() {
    if (!selectedUser || !tenantId) { setError(tM("errors.select_tenant")); return }
    setError(null); setSaving(true)
    try {
      const tid      = Number(tenantId)
      const existing = memberships.find((m) => getTenantId(m) === tid)
      if (existing) {
        await updateMembership(existing.id, { roles: roleIds, status: mStatus, is_owner: isOwner })
      } else {
        await createMembership({ tenant: tid, user: selectedUser.id, roles: roleIds, status: mStatus, is_owner: isOwner })
      }
      setMemberships(await listMembershipsByUser(selectedUser.id))
      setTenantId(""); setRoleIds([]); setMStatus("active"); setIsOwner(false)
    } catch (e: any) { setError(normalizeError(e?.message ?? "Erreur")) }
    finally { setSaving(false) }
  }

  async function onUpdateMembership(m: Membership) {
    setError(null); setSaving(true)
    try {
      await updateMembership(m.id, { roles: m.roles, status: m.status, is_owner: m.is_owner })
      if (selectedUser) setMemberships(await listMembershipsByUser(selectedUser.id))
    } catch (e: any) { setError(e?.message ?? "Erreur") }
    finally { setSaving(false) }
  }

  async function onDeleteMembership(id: number) {
    if (!confirm(tM("confirm_delete"))) return
    setSaving(true)
    try {
      await deleteMembership(id)
      if (selectedUser) setMemberships(await listMembershipsByUser(selectedUser.id))
    } catch (e: any) { setError(e?.message ?? "Erreur") }
    finally { setSaving(false) }
  }

  // ── Loading guard ────────────────────────────────────────────────────────
  if (checking) return (
    <div className="p-6 inline-flex items-center gap-2 text-sm text-slate-400">
      <Loader2 className="h-4 w-4 animate-spin" /> {t("loading")}
    </div>
  )

  // ── Render ───────────────────────────────────────────────────────────────
  const inputCls = "w-full rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm outline-none focus:border-teal-400 focus:ring-2 focus:ring-teal-400/20 transition"

  return (
    <div className="space-y-6">

      {/* En-tête */}
      <div className="flex flex-wrap items-end justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold text-slate-900">{t("title")}</h1>
          <p className="text-sm text-slate-500">{t("subtitle")}</p>
        </div>
        {/* Barre de recherche globale */}
        <div className="relative">
          <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
          <input
            className="h-9 w-64 rounded-xl border border-slate-200 bg-white pl-9 pr-3 text-sm outline-none focus:border-teal-400 focus:ring-2 focus:ring-teal-400/20 transition"
            placeholder={t("search")}
            value={q}
            onChange={(e) => setQ(e.target.value)}
          />
        </div>
      </div>

      {error && !open && !openM && (
        <div className="rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">
          {error}
        </div>
      )}

      {/* ══════════════════════════════════════════════════════════════════ */}
      {/* SECTION 1 — Super Administrateurs                                 */}
      {/* ══════════════════════════════════════════════════════════════════ */}
      <div className="rounded-2xl border bg-white shadow-sm overflow-hidden">

        {/* En-tête section */}
        <div
          className="flex items-center justify-between gap-3 px-5 py-4 border-b"
          style={{ background: `${NAVY}05` }}
        >
          <div className="flex items-center gap-3">
            <div
              className="flex h-9 w-9 items-center justify-center rounded-xl"
              style={{ background: `linear-gradient(135deg, ${NAVY} 0%, ${NAVY2} 100%)` }}
            >
              <ShieldCheck className="h-4 w-4 text-white" />
            </div>
            <div>
              <p className="font-bold text-slate-800">Super Administrateurs</p>
              <p className="text-xs text-slate-500">
                Accès complet à la plateforme ACX ·{" "}
                <span className="font-semibold" style={{ color: NAVY }}>
                  {superAdmins.length} utilisateur{superAdmins.length > 1 ? "s" : ""}
                </span>
              </p>
            </div>
          </div>
          <button
            onClick={() => openCreate(true)}
            disabled={!canManage}
            className="flex items-center gap-1.5 rounded-xl px-3 py-2 text-xs font-bold text-white shadow-sm transition hover:opacity-90 active:scale-95 disabled:opacity-40"
            style={{ background: `linear-gradient(135deg, ${NAVY} 0%, ${NAVY2} 100%)` }}
          >
            <Plus className="h-3.5 w-3.5" /> Ajouter un admin
          </button>
        </div>

        {/* Tableau super-admins */}
        {loading ? (
          <div className="flex items-center gap-2 px-5 py-8 text-sm text-slate-400">
            <Loader2 className="h-4 w-4 animate-spin" /> {t("loading")}
          </div>
        ) : superAdmins.length === 0 ? (
          <div className="flex flex-col items-center gap-2 py-10">
            <ShieldCheck className="h-9 w-9 text-slate-200" />
            <p className="text-sm text-slate-400">Aucun super administrateur trouvé</p>
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b bg-slate-50/60">
                  {["Utilisateur", "Email", "Rôle plateforme", "Statut", "Actions"].map((h) => (
                    <th key={h} className="px-5 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-400 last:text-right">{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-50">
                {superAdmins.map((u) => {
                  const name = [u.first_name, u.last_name].filter(Boolean).join(" ") || u.username
                  const roleLabel = u.is_superuser ? "Super Admin" : "Staff"
                  const roleColor = u.is_superuser ? NAVY : NAVY2
                  return (
                    <tr key={u.id} className="hover:bg-slate-50/60 transition-colors">
                      <td className="px-5 py-3.5">
                        <div className="flex items-center gap-2.5">
                          <UserAvatar name={name} superuser />
                          <div>
                            <p className="font-semibold text-slate-800">{name}</p>
                            <p className="font-mono text-[11px] text-slate-400">@{u.username}</p>
                          </div>
                        </div>
                      </td>
                      <td className="px-5 py-3.5 text-slate-600">{u.email}</td>
                      <td className="px-5 py-3.5">
                        <span
                          className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-[11px] font-bold ring-1"
                          style={{ color: roleColor, background: `${roleColor}10`, borderColor: `${roleColor}25` }}
                        >
                          <Shield className="h-3 w-3" /> {roleLabel}
                        </span>
                      </td>
                      <td className="px-5 py-3.5"><StatusBadge active={!!u.is_active} /></td>
                      <td className="px-5 py-3.5">
                        <div className="flex items-center justify-end gap-2">
                          <button
                            onClick={() => openEdit(u)}
                            disabled={!canManage}
                            className="flex h-8 w-8 items-center justify-center rounded-xl border bg-white shadow-sm transition hover:bg-slate-50 disabled:opacity-40"
                            title={t("edit")}
                          >
                            <Pencil className="h-3.5 w-3.5 text-slate-500" />
                          </button>
                          <button
                            onClick={() => onDelete(u.id)}
                            disabled={!canManage}
                            className="flex h-8 w-8 items-center justify-center rounded-xl border border-red-100 bg-red-50 transition hover:bg-red-100 disabled:opacity-40"
                            title={t("delete")}
                          >
                            <Trash2 className="h-3.5 w-3.5 text-red-500" />
                          </button>
                        </div>
                      </td>
                    </tr>
                  )
                })}
              </tbody>
            </table>
          </div>
        )}
        <div className="border-t px-5 py-2.5 text-[11px] text-slate-400">
          {superAdmins.length} super admin{superAdmins.length > 1 ? "s" : ""} · {items.filter(u => u.is_superuser || u.is_staff).length} au total
        </div>
      </div>

      {/* ══════════════════════════════════════════════════════════════════ */}
      {/* SECTION 2 — Utilisateurs Tenants                                  */}
      {/* ══════════════════════════════════════════════════════════════════ */}
      <div className="rounded-2xl border bg-white shadow-sm overflow-hidden">

        {/* En-tête section */}
        <div
          className="flex items-center justify-between gap-3 px-5 py-4 border-b"
          style={{ background: `${TEAL}08` }}
        >
          <div className="flex items-center gap-3">
            <div
              className="flex h-9 w-9 items-center justify-center rounded-xl"
              style={{ background: `linear-gradient(135deg, ${TEAL} 0%, ${TEAL2} 100%)` }}
            >
              <Users className="h-4 w-4 text-white" />
            </div>
            <div>
              <p className="font-bold text-slate-800">Utilisateurs Tenants</p>
              <p className="text-xs text-slate-500">
                Rattachés aux organisations clients ·{" "}
                <span className="font-semibold" style={{ color: TEAL2 }}>
                  {tenantUsers.length} utilisateur{tenantUsers.length > 1 ? "s" : ""}
                </span>
              </p>
            </div>
          </div>
          <button
            onClick={() => openCreate(false)}
            disabled={!canManage}
            className="flex items-center gap-1.5 rounded-xl px-3 py-2 text-xs font-bold text-white shadow-sm transition hover:opacity-90 active:scale-95 disabled:opacity-40"
            style={{ background: `linear-gradient(135deg, ${TEAL} 0%, ${TEAL2} 100%)` }}
          >
            <Plus className="h-3.5 w-3.5" /> Ajouter un utilisateur
          </button>
        </div>

        {/* Tableau utilisateurs tenant */}
        {loading ? (
          <div className="flex items-center gap-2 px-5 py-8 text-sm text-slate-400">
            <Loader2 className="h-4 w-4 animate-spin" /> {t("loading")}
          </div>
        ) : tenantUsers.length === 0 ? (
          <div className="flex flex-col items-center gap-2 py-10">
            <Users className="h-9 w-9 text-slate-200" />
            <p className="text-sm text-slate-400">Aucun utilisateur tenant trouvé</p>
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b bg-slate-50/60">
                  {["Utilisateur", "Email", "Statut", "Organisations", "Actions"].map((h) => (
                    <th key={h} className="px-5 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-400 last:text-right">{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-50">
                {tenantUsers.map((u) => {
                  const name = [u.first_name, u.last_name].filter(Boolean).join(" ") || u.username
                  return (
                    <tr key={u.id} className="hover:bg-slate-50/60 transition-colors">
                      <td className="px-5 py-3.5">
                        <div className="flex items-center gap-2.5">
                          <UserAvatar name={name} />
                          <div>
                            <p className="font-semibold text-slate-800">{name}</p>
                            <p className="font-mono text-[11px] text-slate-400">@{u.username}</p>
                          </div>
                        </div>
                      </td>
                      <td className="px-5 py-3.5 text-slate-600">{u.email}</td>
                      <td className="px-5 py-3.5"><StatusBadge active={!!u.is_active} /></td>
                      <td className="px-5 py-3.5">
                        {u.tenants && u.tenants.length > 0 ? (
                          <div className="flex flex-wrap gap-1">
                            {u.tenants.map((tn) => (
                              <span
                                key={tn.id}
                                className="inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-medium"
                                style={{ color: TEAL2, borderColor: `${TEAL}30`, background: `${TEAL}08` }}
                              >
                                <Building2 className="h-2.5 w-2.5" /> {tn.name}
                              </span>
                            ))}
                          </div>
                        ) : (
                          <span className="text-xs italic text-slate-400">Aucun tenant</span>
                        )}
                      </td>
                      <td className="px-5 py-3.5">
                        <div className="flex items-center justify-end gap-2">
                          <button
                            onClick={() => openMembershipModal(u)}
                            disabled={!canManage}
                            className="flex h-8 w-8 items-center justify-center rounded-xl border bg-white shadow-sm transition hover:bg-slate-50 disabled:opacity-40"
                            title={tM("manage")}
                          >
                            <Building2 className="h-3.5 w-3.5" style={{ color: TEAL2 }} />
                          </button>
                          <button
                            onClick={() => openEdit(u)}
                            disabled={!canManage}
                            className="flex h-8 w-8 items-center justify-center rounded-xl border bg-white shadow-sm transition hover:bg-slate-50 disabled:opacity-40"
                            title={t("edit")}
                          >
                            <Pencil className="h-3.5 w-3.5 text-slate-500" />
                          </button>
                          <button
                            onClick={() => onDelete(u.id)}
                            disabled={!canManage}
                            className="flex h-8 w-8 items-center justify-center rounded-xl border border-red-100 bg-red-50 transition hover:bg-red-100 disabled:opacity-40"
                            title={t("delete")}
                          >
                            <Trash2 className="h-3.5 w-3.5 text-red-500" />
                          </button>
                        </div>
                      </td>
                    </tr>
                  )
                })}
              </tbody>
            </table>
          </div>
        )}
        <div className="border-t px-5 py-2.5 text-[11px] text-slate-400">
          {tenantUsers.length} utilisateur{tenantUsers.length > 1 ? "s" : ""} tenant · {items.filter(u => !u.is_superuser && !u.is_staff).length} au total
        </div>
      </div>

      {/* ── Modal créer / modifier utilisateur ───────────────────────────── */}
      {open && (
        <div className="fixed inset-0 z-[10000]">
          <div className="absolute inset-0 bg-black/50" onClick={() => !saving && setOpen(false)} />
          <div className="absolute left-1/2 top-1/2 w-[92vw] max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-2xl border bg-white p-6 shadow-2xl">

            {/* En-tête modal */}
            <div className="mb-5 flex items-start justify-between gap-4">
              <div>
                <div
                  className="mb-1 inline-flex items-center gap-2 rounded-xl px-3 py-1 text-xs font-bold text-white"
                  style={{
                    background: form.is_superuser
                      ? `linear-gradient(135deg, ${NAVY} 0%, ${NAVY2} 100%)`
                      : `linear-gradient(135deg, ${TEAL} 0%, ${TEAL2} 100%)`,
                  }}
                >
                  {form.is_superuser ? <ShieldCheck className="h-3 w-3" /> : <Users className="h-3 w-3" />}
                  {form.is_superuser ? "Super Administrateur" : "Utilisateur Tenant"}
                </div>
                <h2 className="text-lg font-bold text-slate-900">
                  {form.id ? t("edit_title") : t("create_title")}
                </h2>
                <p className="text-xs text-slate-500">{form.id ? t("edit_subtitle") : t("create_subtitle")}</p>
              </div>
              <button onClick={() => setOpen(false)} disabled={saving}
                className="flex h-8 w-8 items-center justify-center rounded-xl border bg-slate-50 transition hover:bg-slate-100">
                <X className="h-4 w-4 text-slate-500" />
              </button>
            </div>

            <div className="space-y-3">
              <div className="grid grid-cols-2 gap-3">
                <input className={inputCls} placeholder={t("fields.username")} value={form.username}
                  onChange={(e) => setForm((s) => ({ ...s, username: e.target.value }))} disabled={saving} />
                <input className={inputCls} placeholder={t("fields.email")} value={form.email}
                  onChange={(e) => setForm((s) => ({ ...s, email: e.target.value }))} disabled={saving} />
              </div>
              <div className="grid grid-cols-2 gap-3">
                <input className={inputCls} placeholder={t("fields.first_name")} value={form.first_name}
                  onChange={(e) => setForm((s) => ({ ...s, first_name: e.target.value }))} disabled={saving} />
                <input className={inputCls} placeholder={t("fields.last_name")} value={form.last_name}
                  onChange={(e) => setForm((s) => ({ ...s, last_name: e.target.value }))} disabled={saving} />
              </div>
              <input className={inputCls} type="password"
                placeholder={form.id ? t("fields.password_optional") : t("fields.password")}
                value={form.password} onChange={(e) => setForm((s) => ({ ...s, password: e.target.value }))} disabled={saving} />

              {/* Flags */}
              <div className="flex flex-wrap gap-4 rounded-xl border border-slate-100 bg-slate-50 px-4 py-3">
                {([
                  { key: "is_active",    label: t("fields.is_active") },
                  { key: "is_staff",     label: t("fields.is_staff") },
                  { key: "is_superuser", label: t("fields.is_superuser") },
                ] as const).map(({ key, label }) => (
                  <label key={key} className="flex items-center gap-2 text-sm font-medium text-slate-700 cursor-pointer">
                    <input type="checkbox" className="rounded"
                      checked={form[key] as boolean}
                      onChange={(e) => setForm((s) => ({ ...s, [key]: e.target.checked }))}
                      disabled={saving} />
                    {label}
                  </label>
                ))}
              </div>

              {/* Assignation tenant — création uniquement + non-admin */}
              {!form.id && !form.is_superuser && (
                <div className="rounded-xl border border-slate-100 bg-slate-50 p-3 space-y-2">
                  <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Assigner à un tenant</p>
                  <select
                    className={inputCls}
                    value={form.tenant_id}
                    onChange={(e) => setForm((s) => ({ ...s, tenant_id: e.target.value ? Number(e.target.value) : "" }))}
                    disabled={saving}
                  >
                    <option value="">— Aucun tenant (optionnel) —</option>
                    {tenants.map((tn) => <option key={tn.id} value={tn.id}>{tn.name}</option>)}
                  </select>
                  {form.tenant_id && (
                    <label className="flex items-center gap-2 text-sm text-slate-700 cursor-pointer">
                      <input type="checkbox" checked={form.tenant_is_owner}
                        onChange={(e) => setForm((s) => ({ ...s, tenant_is_owner: e.target.checked }))} disabled={saving} />
                      Administrateur du tenant (propriétaire)
                    </label>
                  )}
                </div>
              )}

              {error && (
                <div className="rounded-xl border border-red-100 bg-red-50 px-3 py-2 text-sm text-red-700">{error}</div>
              )}

              <div className="flex justify-end pt-1">
                <button
                  onClick={onSave} disabled={saving}
                  className="flex items-center gap-2 rounded-xl px-5 py-2.5 text-sm font-bold text-white shadow-sm transition hover:opacity-90 disabled:opacity-50"
                  style={{
                    background: form.is_superuser
                      ? `linear-gradient(135deg, ${NAVY} 0%, ${NAVY2} 100%)`
                      : `linear-gradient(135deg, ${TEAL} 0%, ${TEAL2} 100%)`,
                  }}
                >
                  {saving ? <><Loader2 className="h-4 w-4 animate-spin" /> {t("saving")}</> : t("save")}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* ── Modal memberships ─────────────────────────────────────────────── */}
      {openM && selectedUser && (
        <div className="fixed inset-0 z-[10000] flex items-start justify-center overflow-y-auto py-8">
          <div className="fixed inset-0 bg-black/50" onClick={() => !saving && setOpenM(false)} />
          <div className="relative w-[94vw] max-w-2xl rounded-2xl border bg-white shadow-2xl">

            <div className="sticky top-0 z-10 flex items-start justify-between gap-4 rounded-t-2xl border-b bg-white px-5 py-4">
              <div>
                <p className="text-lg font-bold text-slate-900">{tM("title", { username: selectedUser.username })}</p>
                <p className="text-xs text-slate-500">{tM("subtitle")}</p>
              </div>
              <button onClick={() => setOpenM(false)} disabled={saving}
                className="flex h-8 w-8 items-center justify-center rounded-xl border bg-slate-50 transition hover:bg-slate-100">
                <X className="h-4 w-4 text-slate-500" />
              </button>
            </div>

            <div className="p-5">
              {loadingM ? (
                <div className="flex items-center gap-2 py-8 text-sm text-slate-400">
                  <Loader2 className="h-4 w-4 animate-spin" /> {tM("loading")}
                </div>
              ) : (
                <div className="space-y-4">
                  {error && (
                    <div className="flex items-center gap-2 rounded-xl border border-red-100 bg-red-50 px-3 py-2 text-sm text-red-700">
                      <span>⚠</span><span className="flex-1">{error}</span>
                      <button className="text-xs underline" onClick={() => setError(null)}>Fermer</button>
                    </div>
                  )}

                  {/* Ajouter membership */}
                  <div className="rounded-2xl border bg-slate-50 p-4 space-y-3">
                    <p className="text-sm font-bold text-slate-700">{tM("add")}</p>
                    <div className="grid grid-cols-2 gap-3">
                      <select className={inputCls} value={tenantId}
                        onChange={(e) => setTenantId(e.target.value ? Number(e.target.value) : "")} disabled={saving}>
                        <option value="">{tM("select_tenant")}</option>
                        {tenants.map((x) => <option key={x.id} value={x.id}>{x.name} ({x.status})</option>)}
                      </select>
                      <select className={inputCls} value={mStatus}
                        onChange={(e) => setMStatus(e.target.value as any)} disabled={saving}>
                        <option value="active">{tM("status.active")}</option>
                        <option value="invited">{tM("status.invited")}</option>
                        <option value="suspended">{tM("status.suspended")}</option>
                      </select>
                    </div>
                    <div className="grid grid-cols-2 gap-3">
                      <div className="rounded-xl border bg-white p-3">
                        <p className="text-[10px] font-semibold uppercase tracking-wider text-slate-400 mb-2">{tM("roles")}</p>
                        <div className="space-y-1.5">
                          {roles.map((r) => (
                            <label key={r.id} className="flex items-center gap-2 text-sm cursor-pointer">
                              <input type="checkbox" checked={roleIds.includes(r.id)} disabled={saving}
                                onChange={(e) => setRoleIds((p) => e.target.checked ? [...p, r.id] : p.filter((x) => x !== r.id))} />
                              {r.label}
                            </label>
                          ))}
                        </div>
                      </div>
                      <div className="rounded-xl border bg-white p-3">
                        <p className="text-[10px] font-semibold uppercase tracking-wider text-slate-400 mb-2">{tM("flags")}</p>
                        <label className="flex items-center gap-2 text-sm cursor-pointer">
                          <input type="checkbox" checked={isOwner} disabled={saving}
                            onChange={(e) => setIsOwner(e.target.checked)} />
                          {tM("is_owner")}
                        </label>
                        <p className="mt-1.5 text-[10px] text-slate-400">{tM("owner_hint")}</p>
                      </div>
                    </div>
                    <div className="flex justify-end">
                      <button onClick={onAddMembership} disabled={saving}
                        className="flex items-center gap-2 rounded-xl px-4 py-2 text-sm font-bold text-white transition hover:opacity-90 disabled:opacity-50"
                        style={{ background: `linear-gradient(135deg, ${TEAL} 0%, ${TEAL2} 100%)` }}>
                        {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Plus className="h-4 w-4" />}
                        {saving ? tM("saving") : tM("add_btn")}
                      </button>
                    </div>
                  </div>

                  {/* Liste memberships */}
                  <div className="rounded-2xl border bg-white p-4 space-y-3">
                    <p className="text-sm font-bold text-slate-700">{tM("current")}</p>
                    {memberships.length === 0 ? (
                      <p className="text-sm text-slate-400">{tM("empty")}</p>
                    ) : (
                      memberships.map((m) => (
                        <div key={m.id} className="rounded-xl border bg-slate-50 p-4 space-y-3">
                          <div className="flex items-start justify-between gap-3">
                            <div>
                              <p className="font-semibold text-slate-800">
                                {typeof (m as any).tenant === "object" && (m as any).tenant?.name
                                  ? (m as any).tenant.name
                                  : `Tenant #${getTenantId(m) ?? "?"}`}
                              </p>
                              <p className="text-xs text-slate-500">
                                {tM("membership_status")}: {tM(`status.${m.status}`)} · {m.is_owner ? tM("owner") : tM("not_owner")}
                              </p>
                            </div>
                            <div className="flex gap-2">
                              <button onClick={() => onUpdateMembership(m)} disabled={saving}
                                className="flex h-8 w-8 items-center justify-center rounded-xl border bg-white transition hover:bg-slate-100 disabled:opacity-50">
                                <Pencil className="h-3.5 w-3.5 text-slate-500" />
                              </button>
                              <button onClick={() => onDeleteMembership(m.id)} disabled={saving}
                                className="flex h-8 w-8 items-center justify-center rounded-xl border border-red-100 bg-red-50 transition hover:bg-red-100 disabled:opacity-50">
                                <Trash2 className="h-3.5 w-3.5 text-red-500" />
                              </button>
                            </div>
                          </div>
                          <div className="grid grid-cols-2 gap-3">
                            <select className={inputCls} value={m.status} disabled={saving}
                              onChange={(e) => setMemberships((p) => p.map((x) => x.id === m.id ? { ...x, status: e.target.value as any } : x))}>
                              <option value="active">{tM("status.active")}</option>
                              <option value="invited">{tM("status.invited")}</option>
                              <option value="suspended">{tM("status.suspended")}</option>
                            </select>
                            <label className="flex h-10 cursor-pointer items-center gap-2 rounded-xl border bg-white px-3 text-sm">
                              <input type="checkbox" checked={m.is_owner} disabled={saving}
                                onChange={(e) => setMemberships((p) => p.map((x) => x.id === m.id ? { ...x, is_owner: e.target.checked } : x))} />
                              {tM("is_owner")}
                            </label>
                          </div>
                          <div className="rounded-xl border bg-white p-3">
                            <p className="text-[10px] font-semibold uppercase tracking-wider text-slate-400 mb-2">{tM("roles")}</p>
                            <div className="grid grid-cols-2 gap-1.5">
                              {roles.map((r) => (
                                <label key={r.id} className="flex items-center gap-2 text-sm cursor-pointer">
                                  <input type="checkbox" checked={m.roles.includes(r.id)} disabled={saving}
                                    onChange={(e) => setMemberships((p) => p.map((x) => {
                                      if (x.id !== m.id) return x
                                      return { ...x, roles: e.target.checked ? [...new Set([...x.roles, r.id])] : x.roles.filter((id) => id !== r.id) }
                                    }))} />
                                  {r.label}
                                </label>
                              ))}
                            </div>
                            <p className="mt-1.5 text-[10px] text-slate-400">{tM("save_hint")}</p>
                          </div>
                        </div>
                      ))
                    )}
                  </div>

                  <div className="flex justify-end">
                    <button onClick={() => setOpenM(false)} disabled={saving}
                      className="rounded-xl border px-4 py-2 text-sm font-semibold text-slate-600 transition hover:bg-slate-50">
                      {tM("close")}
                    </button>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  )
}