"use client";

import { useEffect, useMemo, useState } from "react";
import { useTranslations } from "next-intl";
import { Eye, EyeOff, X, Globe, CheckCircle, Crown, MapPin, RefreshCw } from "lucide-react";

function Field({
  label,
  required,
  error,
  children,
  full,
}: {
  label: string;
  required?: boolean;
  error?: string;
  children: React.ReactNode;
  full?: boolean;
}) {
  return (
    <div className={cx("space-y-1.5", full && "col-span-2")}>
      <label className="text-xs font-semibold text-neutral-500 uppercase tracking-wide">
        {label}
        {required && <span className="text-red-500 ml-0.5">*</span>}
      </label>
      {children}
      {error && <p className="text-xs text-red-600">{error}</p>}
    </div>
  );
}

import {
  listTenantUsers,
  createTenantUser,
  updateTenantUser,
  toggleTenantUserActive,
  updateTenantMembership,
  removeTenantUser,
  type TenantUser,
} from "@/src/lib/api/tenant-users";
import {
  listTenantCountries,
  listUserCountries,
  saveUserCountries,
  assignAllCountriesToUser,
  type TenantCountry,
} from "@/src/lib/api/countries";
import { useCountry } from "@/src/contexts/CountryContext";

type ModalKind = "create" | "edit" | "roles" | "countries" | null;

function cx(...classes: Array<string | false | null | undefined>) {
  return classes.filter(Boolean).join(" ");
}

function initials(u: TenantUser) {
  const a = (u.first_name || "").trim();
  const b = (u.last_name || "").trim();
  const s = `${a} ${b}`.trim();
  if (!s) return (u.username || "?").slice(0, 2).toUpperCase();
  return s
    .split(/\s+/)
    .slice(0, 2)
    .map((x) => x[0]?.toUpperCase() || "")
    .join("");
}

export default function TeamPage() {
  const t = useTranslations("tenant.team");
  const tCommon = useTranslations("common");
  const tRoles = useTranslations("tenant.roles");
  const tMs = useTranslations("tenant.membership_status");

  const { selectedCountry } = useCountry();

  const [users, setUsers] = useState<TenantUser[]>([]);
  const [loading, setLoading] = useState(true);
  const [busy, setBusy] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  const [modal, setModal] = useState<ModalKind>(null);
  const [selected, setSelected] = useState<TenantUser | null>(null);

  const [createForm, setCreateForm] = useState({
    username: "",
    email: "",
    first_name: "",
    last_name: "",
    telephone: "",
    departement: "",
    password: "",
    role_ids: [] as number[],
  });

  const [editForm, setEditForm] = useState({
    username: "",
    email: "",
    first_name: "",
    last_name: "",
    telephone: "",
    departement: "",
    password: "",
  });
  const [showEditPwd, setShowEditPwd]     = useState(false);
  const [showCreatePwd, setShowCreatePwd] = useState(false);
  const [editFieldErrors, setEditFieldErrors] = useState<Record<string, string>>({});

  const [memberForm, setMemberForm] = useState({
    role_ids: [] as number[],
    status: "active" as "invited" | "active" | "suspended",
  });

  // role_2 = Personnel ACREMAC : visible uniquement dans l'espace super admin
  const ROLE_IDS = [1, 3, 4, 5] as const;

  const ROLE_LABEL: Record<number, string> = useMemo(
    () => ({
      1: tRoles("role_1"),
      3: tRoles("role_3"),
      4: tRoles("role_4"),
      5: tRoles("role_5"),
    }),
    [tRoles]
  );

  // ── Countries modal state ──────────────────────────────────────────────────
  const [tenantCountries, setTenantCountries] = useState<TenantCountry[]>([]);
  const [userCountryIds, setUserCountryIds] = useState<Set<number>>(new Set());
  const [countriesLoading, setCountriesLoading] = useState(false);
  const [countriesSaving, setCountriesSaving] = useState(false);

  async function refresh(countryCode?: string) {
    setLoading(true);
    setError(null);
    try {
      const data = await listTenantUsers({ country: countryCode });
      setUsers(data);
    } catch (e: any) {
      setError(e?.message || t("errors.load"));
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    refresh(selectedCountry?.country_code);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedCountry?.country_code]);

  const sorted = useMemo(() => {
    return [...users].sort((a, b) => {
      const ao = a.membership?.is_owner ? 0 : 1;
      const bo = b.membership?.is_owner ? 0 : 1;
      if (ao !== bo) return ao - bo;
      return (a.username || "").localeCompare(b.username || "");
    });
  }, [users]);

  function openCreate() {
    setError(null);
    setSelected(null);
    setCreateForm({
      username: "",
      email: "",
      first_name: "",
      last_name: "",
      telephone: "",
      departement: "",
      password: "",
      role_ids: [],
    });
    setModal("create");
  }

  function openEdit(u: TenantUser) {
    setError(null);
    setSelected(u);
    setEditFieldErrors({});
    setShowEditPwd(false);
    setEditForm({
      username: u.username || "",
      email: u.email || "",
      first_name: u.first_name || "",
      last_name: u.last_name || "",
      telephone: u.telephone || "",
      departement: u.departement || "",
      password: "",
    });
    setModal("edit");
  }

  function openRoles(u: TenantUser) {
    setError(null);
    setSelected(u);
    setMemberForm({
      role_ids: u.membership?.role_ids || [],
      status: (u.membership?.status || "active") as any,
    });
    setModal("roles");
  }

  async function openCountries(u: TenantUser) {
    setError(null);
    setSelected(u);
    setModal("countries");
    setCountriesLoading(true);
    try {
      const [all, assigned] = await Promise.all([
        listTenantCountries(),
        listUserCountries(u.id),
      ]);
      setTenantCountries(all);
      setUserCountryIds(new Set(assigned.map((c) => c.id)));
    } catch { /* ignore */ } finally { setCountriesLoading(false); }
  }

  function toggleCountry(id: number) {
    setUserCountryIds((prev) => {
      const next = new Set(prev);
      next.has(id) ? next.delete(id) : next.add(id);
      return next;
    });
  }

  async function onCountriesSave() {
    if (!selected) return;
    setCountriesSaving(true);
    try {
      await saveUserCountries(selected.id, Array.from(userCountryIds));
      closeModal();
    } catch { /* ignore */ } finally { setCountriesSaving(false); }
  }

  async function onAssignAll() {
    if (!selected) return;
    setCountriesSaving(true);
    try {
      const updated = await assignAllCountriesToUser(selected.id);
      setUserCountryIds(new Set(updated.map((c) => c.id)));
    } catch { /* ignore */ } finally { setCountriesSaving(false); }
  }

  function closeModal() {
    setModal(null);
    setSelected(null);
  }

  function toggleRole(roleId: number) {
    setMemberForm((prev) => {
      const has = prev.role_ids.includes(roleId);
      const next = has ? prev.role_ids.filter((x) => x !== roleId) : [...prev.role_ids, roleId];
      next.sort((a, b) => a - b);
      return { ...prev, role_ids: next };
    });
  }

  function toggleCreateRole(roleId: number) {
    setCreateForm((prev) => {
      const has = prev.role_ids.includes(roleId);
      const next = has ? prev.role_ids.filter((x) => x !== roleId) : [...prev.role_ids, roleId];
      next.sort((a, b) => a - b);
      return { ...prev, role_ids: next };
    });
  }

  async function onCreate() {
    setError(null);

    const payload = {
      username: createForm.username.trim(),
      email: createForm.email.trim(),
      first_name: createForm.first_name.trim() || undefined,
      last_name: createForm.last_name.trim() || undefined,
      telephone: createForm.telephone.trim() || undefined,
      departement: createForm.departement.trim() || undefined,
      password: createForm.password || undefined,
      role_ids: createForm.role_ids.length ? createForm.role_ids : undefined,
    };

    if (!payload.username || !payload.email) {
      setError(t("errors.required_username_email"));
      return;
    }

    setBusy("create");
    try {
      await createTenantUser(payload);
      closeModal();
      await refresh();
    } catch (e: any) {
      setError(e?.message || t("errors.create"));
    } finally {
      setBusy(null);
    }
  }

  async function onEditSave() {
    if (!selected) return;
    setError(null);
    setEditFieldErrors({});

    if (!editForm.email.trim()) {
      setError(t("errors.email_required"));
      return;
    }

    const payload: Record<string, string> = {
      username:    editForm.username.trim(),
      email:       editForm.email.trim(),
      first_name:  editForm.first_name.trim(),
      last_name:   editForm.last_name.trim(),
      telephone:   editForm.telephone.trim(),
      departement: editForm.departement.trim(),
    };
    if (editForm.password.trim()) {
      payload.password = editForm.password.trim();
    }

    setBusy(`edit:${selected.id}`);
    try {
      await updateTenantUser(selected.id, payload);
      closeModal();
      await refresh();
    } catch (e: any) {
      const field = e?.field as string | undefined;
      if (field) setEditFieldErrors({ [field]: e?.message ?? t("errors.update") });
      else setError(e?.message || t("errors.update"));
    } finally {
      setBusy(null);
    }
  }

  async function onToggleActive(u: TenantUser) {
    setError(null);
    setBusy(`toggle:${u.id}`);
    try {
      await toggleTenantUserActive(u.id);
      await refresh();
    } catch (e: any) {
      setError(e?.message || t("errors.toggle"));
    } finally {
      setBusy(null);
    }
  }

  async function onMembershipSave() {
    if (!selected) return;
    setError(null);

    setBusy(`roles:${selected.id}`);
    try {
      await updateTenantMembership(selected.id, {
        role_ids: memberForm.role_ids,
        status: memberForm.status,
      });
      closeModal();
      await refresh();
    } catch (e: any) {
      setError(e?.message || t("errors.membership_update"));
    } finally {
      setBusy(null);
    }
  }

  async function onRemove(u: TenantUser) {
    setError(null);

    if (u.membership?.is_owner) {
      setError(t("errors.remove_owner"));
      return;
    }

    const ok = window.confirm(
      t("confirm_remove", { username: u.username })
    );
    if (!ok) return;

    setBusy(`remove:${u.id}`);
    try {
      await removeTenantUser(u.id);
      await refresh();
    } catch (e: any) {
      setError(e?.message || t("errors.remove"));
    } finally {
      setBusy(null);
    }
  }

  return (
    <div className="space-y-4">
      <div className="flex items-start justify-between gap-3">
        <div>
          <h1 className="text-xl font-semibold">{t("title")}</h1>
          <p className="text-neutral-600">{t("subtitle")}</p>
        </div>

        <button
          onClick={openCreate}
          className="rounded-xl px-4 py-2 text-sm font-medium bg-white border shadow-sm hover:bg-neutral-50"
          style={{ borderColor: "rgba(66,33,11,0.15)" }}
        >
          {t("create_button")}
        </button>
      </div>

      {error && (
        <div className="rounded-2xl border bg-white p-4 text-sm text-red-700">
          {error}
        </div>
      )}

      <div className="rounded-2xl border bg-white overflow-hidden">
        <div className="px-5 py-4 border-b">
          <div className="text-sm font-medium">{t("table_title")}</div>
          <div className="text-xs text-neutral-500">
            {t("total", { count: sorted.length })}
          </div>
        </div>

        {loading ? (
          <div className="p-5 text-sm text-neutral-500">{t("loading")}</div>
        ) : sorted.length === 0 ? (
          <div className="p-5 text-sm text-neutral-500">{t("empty")}</div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead className="text-left text-neutral-500 bg-neutral-50">
                <tr className="border-b">
                  <th className="py-2 px-4">{t("cols.user")}</th>
                  <th className="py-2 px-4">{t("cols.email")}</th>
                  <th className="py-2 px-4">{t("cols.phone")}</th>
                  <th className="py-2 px-4">{t("cols.department")}</th>
                  <th className="py-2 px-4">{t("cols.status")}</th>
                  <th className="py-2 px-4">{t("cols.roles")}</th>
                  <th className="py-2 px-4 text-right">{t("cols.actions")}</th>
                </tr>
              </thead>

              <tbody>
                {sorted.map((u) => {
                  const m = u.membership;
                  const isOwner = !!m?.is_owner;
                  const roleIds = m?.role_ids || [];
                  const rolesTxt =
                    roleIds.length === 0 ? t("dash") : roleIds.map((id) => ROLE_LABEL[id] || `Role ${id}`).join(", ");

                  const membershipStatusKey = m?.status || "active";
                  const membershipStatusLabel = tMs(membershipStatusKey);

                  return (
                    <tr key={String(u.id)} className="border-b last:border-b-0">
                      <td className="py-3 px-4">
                        <div className="flex items-center gap-3">
                          <div
                            className="h-9 w-9 rounded-xl flex items-center justify-center text-xs font-semibold ring-1"
                            style={{
                              backgroundColor: "rgba(234,140,33,0.10)",
                              borderColor: "rgba(66,33,11,0.15)",
                              color: "#42210b",
                            }}
                          >
                            {initials(u)}
                          </div>
                          <div className="min-w-0">
                            <div className="font-medium truncate">
                              {u.first_name || u.last_name
                                ? `${u.first_name || ""} ${u.last_name || ""}`.trim()
                                : u.username}
                              {isOwner && (
                                <span
                                  className="ml-2 text-[10px] px-2 py-0.5 rounded-full ring-1"
                                  style={{
                                    color: "#ea8c21",
                                    backgroundColor: "rgba(234,140,33,0.10)",
                                    borderColor: "rgba(234,140,33,0.25)",
                                  }}
                                >
                                  {t("owner_badge")}
                                </span>
                              )}
                            </div>
                            <div className="text-xs text-neutral-500 truncate">@{u.username}</div>
                          </div>
                        </div>
                      </td>

                      <td className="py-3 px-4">{u.email || t("dash")}</td>
                      <td className="py-3 px-4">{u.telephone || t("dash")}</td>
                      <td className="py-3 px-4">{u.departement || t("dash")}</td>

                      <td className="py-3 px-4">
                        <div className="flex items-center gap-2">
                          {/* ✅ Compte: Activé/Désactivé (pas "Actif") */}
                          <span
                            className="text-[11px] px-2 py-0.5 rounded-full ring-1"
                            style={{
                              backgroundColor: u.is_active ? "rgba(16,185,129,0.12)" : "rgba(239,68,68,0.10)",
                              borderColor: u.is_active ? "rgba(16,185,129,0.25)" : "rgba(239,68,68,0.20)",
                              color: u.is_active ? "rgb(5,150,105)" : "rgb(185,28,28)",
                            }}
                          >
                            {u.is_active ? tCommon("enabled") : tCommon("disabled")}
                          </span>

                          {/* Membership: Invité/Actif/Suspendu */}
                          <span
                            className="text-[11px] px-2 py-0.5 rounded-full ring-1"
                            style={{
                              backgroundColor: "rgba(66,33,11,0.06)",
                              borderColor: "rgba(66,33,11,0.12)",
                              color: "#42210b",
                            }}
                            title={t("membership_status_tooltip")}
                          >
                            {membershipStatusLabel}
                          </span>
                        </div>
                      </td>

                      <td className="py-3 px-4">
                        <div className="text-xs text-neutral-700 line-clamp-2">{rolesTxt}</div>
                      </td>

                      <td className="py-3 px-4">
                        <div className="flex items-center justify-end gap-2">
                          <button
                            onClick={() => openEdit(u)}
                            className="rounded-xl px-3 py-1.5 text-xs font-medium border bg-white hover:bg-neutral-50"
                            style={{ borderColor: "rgba(66,33,11,0.15)" }}
                            disabled={busy !== null}
                          >
                            {t("actions.edit")}
                          </button>

                          <button
                            onClick={() => openRoles(u)}
                            className="rounded-xl px-3 py-1.5 text-xs font-medium border bg-white hover:bg-neutral-50"
                            style={{ borderColor: "rgba(66,33,11,0.15)" }}
                            disabled={busy !== null}
                          >
                            {t("actions.roles")}
                          </button>

                          <button
                            onClick={() => openCountries(u)}
                            className="rounded-xl px-3 py-1.5 text-xs font-medium border bg-white hover:bg-neutral-50 flex items-center gap-1"
                            style={{ borderColor: "rgba(66,33,11,0.15)" }}
                            disabled={busy !== null}
                            title="Gérer les pays"
                          >
                            <Globe className="h-3 w-3" />
                            {t("actions.countries")}
                          </button>

                          <button
                            onClick={() => onToggleActive(u)}
                            className={cx(
                              "rounded-xl px-3 py-1.5 text-xs font-medium border bg-white hover:bg-neutral-50",
                              busy === `toggle:${u.id}` && "opacity-60"
                            )}
                            style={{ borderColor: "rgba(66,33,11,0.15)" }}
                            disabled={busy !== null || isOwner}
                            title={isOwner ? t("tooltips.owner_blocked") : ""}
                          >
                            {u.is_active ? t("actions.deactivate") : t("actions.activate")}
                          </button>

                          <button
                            onClick={() => onRemove(u)}
                            className={cx(
                              "rounded-xl px-3 py-1.5 text-xs font-medium border bg-white hover:bg-neutral-50",
                              busy === `remove:${u.id}` && "opacity-60"
                            )}
                            style={{
                              borderColor: "rgba(239,68,68,0.25)",
                              color: "rgb(185,28,28)",
                            }}
                            disabled={busy !== null || isOwner}
                            title={isOwner ? t("tooltips.owner_blocked") : ""}
                          >
                            {t("actions.remove")}
                          </button>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {/* MODALS */}
      {modal && (
        <div className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="w-full max-w-2xl rounded-2xl bg-white shadow-2xl overflow-hidden">

            {/* ── En-tête ──────────────────────────────────────────────────── */}
            <div
              className="flex items-center justify-between px-6 py-4"
              style={{ borderBottom: "1px solid #f0f0f0" }}
            >
              <div>
                <p className="text-base font-semibold text-slate-800">
                  {modal === "create"
                    ? t("modals.create_title")
                    : modal === "edit"
                    ? t("modals.edit_title")
                    : modal === "countries"
                    ? t("modals.countries_title")
                    : t("modals.roles_title")}
                </p>
                <p className="text-xs text-slate-400 mt-0.5">
                  {modal === "create"
                    ? t("modals.create_subtitle")
                    : modal === "edit"
                    ? `@${selected?.username ?? ""}`
                    : modal === "countries"
                    ? t("modals.countries_subtitle", { username: selected?.username ?? "" })
                    : t("modals.roles_subtitle", { username: selected?.username ?? "" })}
                </p>
              </div>
              <button
                onClick={closeModal}
                disabled={busy !== null}
                className="h-8 w-8 rounded-xl flex items-center justify-center text-slate-400 hover:text-slate-600 hover:bg-slate-100 transition-colors"
              >
                <X className="h-4 w-4" />
              </button>
            </div>

            {/* ── Erreur globale ───────────────────────────────────────────── */}
            {error && (
              <div className="mx-6 mt-4 rounded-xl bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700">
                {error}
              </div>
            )}

            {/* ── CREATE ───────────────────────────────────────────────────── */}
            {modal === "create" && (
              <div className="px-6 py-5 space-y-5">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <Field label={t("fields.username")} required>
                    <input
                      className="w-full rounded-xl border bg-slate-50 px-3 py-2.5 text-sm outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition"
                      value={createForm.username}
                      onChange={(e) => setCreateForm({ ...createForm, username: e.target.value })}
                    />
                  </Field>
                  <Field label={t("fields.email")} required>
                    <input
                      type="email"
                      className="w-full rounded-xl border bg-slate-50 px-3 py-2.5 text-sm outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition"
                      value={createForm.email}
                      onChange={(e) => setCreateForm({ ...createForm, email: e.target.value })}
                    />
                  </Field>
                  <Field label={t("fields.first_name")}>
                    <input
                      className="w-full rounded-xl border bg-slate-50 px-3 py-2.5 text-sm outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition"
                      value={createForm.first_name}
                      onChange={(e) => setCreateForm({ ...createForm, first_name: e.target.value })}
                    />
                  </Field>
                  <Field label={t("fields.last_name")}>
                    <input
                      className="w-full rounded-xl border bg-slate-50 px-3 py-2.5 text-sm outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition"
                      value={createForm.last_name}
                      onChange={(e) => setCreateForm({ ...createForm, last_name: e.target.value })}
                    />
                  </Field>
                  <Field label={t("fields.telephone")}>
                    <input
                      className="w-full rounded-xl border bg-slate-50 px-3 py-2.5 text-sm outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition"
                      value={createForm.telephone}
                      onChange={(e) => setCreateForm({ ...createForm, telephone: e.target.value })}
                    />
                  </Field>
                  <Field label={t("fields.departement")}>
                    <input
                      className="w-full rounded-xl border bg-slate-50 px-3 py-2.5 text-sm outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition"
                      value={createForm.departement}
                      onChange={(e) => setCreateForm({ ...createForm, departement: e.target.value })}
                    />
                  </Field>
                  <Field label={t("fields.password_optional")} full>
                    <div className="relative">
                      <input
                        type={showCreatePwd ? "text" : "password"}
                        className="w-full rounded-xl border bg-slate-50 px-3 py-2.5 pr-10 text-sm outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition"
                        value={createForm.password}
                        onChange={(e) => setCreateForm({ ...createForm, password: e.target.value })}
                      />
                      <button
                        type="button"
                        onClick={() => setShowCreatePwd((v) => !v)}
                        className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
                      >
                        {showCreatePwd ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                      </button>
                    </div>
                  </Field>
                </div>

                <div
                  className="rounded-xl p-4 space-y-3"
                  style={{ background: "#f8f9fc", border: "1px solid #e8eaf0" }}
                >
                  <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">{t("roles_block_title")}</p>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                    {ROLE_IDS.map((rid) => (
                      <label key={rid} className="flex items-center gap-2.5 text-sm cursor-pointer group">
                        <input
                          type="checkbox"
                          className="rounded accent-indigo-600"
                          checked={createForm.role_ids.includes(rid)}
                          onChange={() => toggleCreateRole(rid)}
                        />
                        <span className="text-slate-700 group-hover:text-slate-900">{ROLE_LABEL[rid]}</span>
                      </label>
                    ))}
                  </div>
                </div>

                <div className="flex justify-end gap-2 pt-1">
                  <button
                    onClick={closeModal}
                    className="rounded-xl px-4 py-2.5 text-sm border bg-white hover:bg-slate-50 text-slate-600 transition"
                    disabled={busy !== null}
                  >
                    {tCommon("cancel")}
                  </button>
                  <button
                    onClick={onCreate}
                    className="rounded-xl px-5 py-2.5 text-sm font-semibold text-white disabled:opacity-60 transition"
                    style={{ background: "linear-gradient(135deg, #1e1b4b 0%, #312e81 100%)" }}
                    disabled={busy !== null || !createForm.username.trim() || !createForm.email.trim()}
                  >
                    {busy === "create" ? t("busy.creating") : tCommon("create")}
                  </button>
                </div>
              </div>
            )}

            {/* ── EDIT ─────────────────────────────────────────────────────── */}
            {modal === "edit" && selected && (
              <div className="px-6 py-5 space-y-5">
                {/* Identité */}
                <div>
                  <p className="text-[11px] font-semibold uppercase tracking-widest text-slate-400 mb-3">
                    Identité
                  </p>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <Field label={t("fields.username")} required error={editFieldErrors.username}>
                      <input
                        className={cx(
                          "w-full rounded-xl border bg-slate-50 px-3 py-2.5 text-sm outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition",
                          editFieldErrors.username ? "border-red-400 bg-red-50" : ""
                        )}
                        value={editForm.username}
                        onChange={(e) => {
                          setEditForm({ ...editForm, username: e.target.value });
                          setEditFieldErrors((p) => ({ ...p, username: "" }));
                        }}
                      />
                    </Field>
                    <Field label={t("fields.email")} required>
                      <input
                        type="email"
                        className="w-full rounded-xl border bg-slate-50 px-3 py-2.5 text-sm outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition"
                        value={editForm.email}
                        onChange={(e) => setEditForm({ ...editForm, email: e.target.value })}
                      />
                    </Field>
                    <Field label={t("fields.first_name")}>
                      <input
                        className="w-full rounded-xl border bg-slate-50 px-3 py-2.5 text-sm outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition"
                        value={editForm.first_name}
                        onChange={(e) => setEditForm({ ...editForm, first_name: e.target.value })}
                      />
                    </Field>
                    <Field label={t("fields.last_name")}>
                      <input
                        className="w-full rounded-xl border bg-slate-50 px-3 py-2.5 text-sm outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition"
                        value={editForm.last_name}
                        onChange={(e) => setEditForm({ ...editForm, last_name: e.target.value })}
                      />
                    </Field>
                    <Field label={t("fields.telephone")}>
                      <input
                        className="w-full rounded-xl border bg-slate-50 px-3 py-2.5 text-sm outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition"
                        value={editForm.telephone}
                        onChange={(e) => setEditForm({ ...editForm, telephone: e.target.value })}
                      />
                    </Field>
                    <Field label={t("fields.departement")}>
                      <input
                        className="w-full rounded-xl border bg-slate-50 px-3 py-2.5 text-sm outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition"
                        value={editForm.departement}
                        onChange={(e) => setEditForm({ ...editForm, departement: e.target.value })}
                      />
                    </Field>
                  </div>
                </div>

                {/* Sécurité */}
                <div
                  className="rounded-xl p-4"
                  style={{ background: "#f8f9fc", border: "1px solid #e8eaf0" }}
                >
                  <p className="text-[11px] font-semibold uppercase tracking-widest text-slate-400 mb-3">
                    Sécurité
                  </p>
                  <Field label={t("fields.password_reset")}>
                    <div className="relative">
                      <input
                        type={showEditPwd ? "text" : "password"}
                        className="w-full rounded-xl border bg-white px-3 py-2.5 pr-10 text-sm outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition"
                        value={editForm.password}
                        onChange={(e) => setEditForm({ ...editForm, password: e.target.value })}
                      />
                      <button
                        type="button"
                        onClick={() => setShowEditPwd((v) => !v)}
                        className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
                      >
                        {showEditPwd ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                      </button>
                    </div>
                  </Field>
                </div>

                <div className="flex justify-end gap-2 pt-1">
                  <button
                    onClick={closeModal}
                    className="rounded-xl px-4 py-2.5 text-sm border bg-white hover:bg-slate-50 text-slate-600 transition"
                    disabled={busy !== null}
                  >
                    {tCommon("cancel")}
                  </button>
                  <button
                    onClick={onEditSave}
                    className="rounded-xl px-5 py-2.5 text-sm font-semibold text-white disabled:opacity-60 transition"
                    style={{ background: "linear-gradient(135deg, #1e1b4b 0%, #312e81 100%)" }}
                    disabled={busy !== null || !editForm.email.trim() || !editForm.username.trim()}
                  >
                    {busy === `edit:${selected.id}` ? t("busy.saving") : tCommon("save")}
                  </button>
                </div>
              </div>
            )}

            {/* ── ROLES ────────────────────────────────────────────────────── */}
            {modal === "roles" && selected && (
              <div className="px-6 py-5 space-y-4">
                <div
                  className="rounded-xl p-4 space-y-3"
                  style={{ background: "#f8f9fc", border: "1px solid #e8eaf0" }}
                >
                  <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">{t("membership_block_title")}</p>
                  <div className="flex flex-wrap gap-2">
                    {(["invited", "active", "suspended"] as const).map((st) => (
                      <button
                        key={st}
                        onClick={() => setMemberForm((p) => ({ ...p, status: st }))}
                        className={cx(
                          "rounded-xl px-3 py-1.5 text-xs font-medium border transition",
                          memberForm.status === st
                            ? "bg-indigo-50 border-indigo-300 text-indigo-700 ring-1 ring-indigo-300"
                            : "bg-white border-slate-200 text-slate-600 hover:bg-slate-50"
                        )}
                        disabled={busy !== null || selected.membership?.is_owner}
                        title={selected.membership?.is_owner ? t("tooltips.owner_blocked") : ""}
                      >
                        {tMs(st)}
                      </button>
                    ))}
                  </div>
                  {selected.membership?.is_owner && (
                    <p className="text-xs text-slate-400">{t("owner_membership_hint")}</p>
                  )}
                </div>

                <div
                  className="rounded-xl p-4 space-y-3"
                  style={{ background: "#f8f9fc", border: "1px solid #e8eaf0" }}
                >
                  <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">{t("roles_block_title")}</p>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                    {ROLE_IDS.map((rid) => (
                      <label key={rid} className="flex items-center gap-2.5 text-sm cursor-pointer group">
                        <input
                          type="checkbox"
                          className="rounded accent-indigo-600"
                          checked={memberForm.role_ids.includes(rid)}
                          onChange={() => toggleRole(rid)}
                          disabled={busy !== null || selected.membership?.is_owner}
                        />
                        <span className="text-slate-700 group-hover:text-slate-900">{ROLE_LABEL[rid]}</span>
                      </label>
                    ))}
                  </div>
                </div>

                <div className="flex justify-end gap-2 pt-1">
                  <button
                    onClick={closeModal}
                    className="rounded-xl px-4 py-2.5 text-sm border bg-white hover:bg-slate-50 text-slate-600 transition"
                    disabled={busy !== null}
                  >
                    {tCommon("cancel")}
                  </button>
                  <button
                    onClick={onMembershipSave}
                    className="rounded-xl px-5 py-2.5 text-sm font-semibold text-white disabled:opacity-60 transition"
                    style={{ background: "linear-gradient(135deg, #1e1b4b 0%, #312e81 100%)" }}
                    disabled={busy !== null}
                  >
                    {busy === `roles:${selected.id}` ? t("busy.saving") : tCommon("save")}
                  </button>
                </div>
              </div>
            )}

            {/* ── COUNTRIES ─────────────────────────────────────────────── */}
            {modal === "countries" && selected && (
              <div className="px-6 py-5 space-y-4">
                {/* Header info */}
                <div className="flex items-center justify-between">
                  <p className="text-sm text-slate-600">
                    Sélectionnez les pays assignés à{" "}
                    <strong>{selected.first_name || selected.username}</strong>.
                    Il recevra les dossiers correspondants et sera notifié.
                  </p>
                  <button
                    onClick={onAssignAll}
                    disabled={countriesSaving || tenantCountries.length === 0}
                    className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-xl border bg-white hover:bg-slate-50 text-indigo-600 border-indigo-200 transition disabled:opacity-50 whitespace-nowrap ml-4 flex-shrink-0"
                  >
                    <MapPin className="h-3 w-3" />
                    Tout sélectionner
                  </button>
                </div>

                {countriesLoading ? (
                  <div className="flex items-center justify-center py-8 text-slate-400">
                    <RefreshCw className="h-5 w-5 animate-spin mr-2" /> Chargement…
                  </div>
                ) : tenantCountries.length === 0 ? (
                  <div className="text-center py-8 rounded-xl border-2 border-dashed border-slate-200 bg-slate-50">
                    <Globe className="h-8 w-8 text-slate-300 mx-auto mb-2" />
                    <p className="text-sm font-medium text-slate-500">Aucun pays configuré</p>
                    <p className="text-xs text-slate-400 mt-1">
                      Configurez d&apos;abord votre périmètre géographique dans Paramètres → Pays.
                    </p>
                  </div>
                ) : (
                  <div className="grid grid-cols-2 gap-2 max-h-72 overflow-y-auto pr-1">
                    {tenantCountries.map((c) => {
                      const checked = userCountryIds.has(c.id);
                      const isManager = c.manager?.id === selected.id;
                      return (
                        <label
                          key={c.id}
                          className={cx(
                            "flex items-center gap-3 p-3 rounded-xl border cursor-pointer transition group",
                            checked
                              ? "bg-indigo-50 border-indigo-200"
                              : "bg-white border-slate-200 hover:border-slate-300 hover:bg-slate-50",
                            !c.is_active && "opacity-50"
                          )}
                        >
                          <input
                            type="checkbox"
                            className="rounded accent-indigo-600 flex-shrink-0"
                            checked={checked}
                            onChange={() => toggleCountry(c.id)}
                            disabled={countriesSaving}
                          />
                          <span className="text-lg leading-none flex-shrink-0">
                            {c.country_code.toUpperCase().replace(/./g, (ch) =>
                              String.fromCodePoint(ch.charCodeAt(0) + 127397)
                            )}
                          </span>
                          <div className="min-w-0 flex-1">
                            <p className={cx("text-sm font-medium truncate", checked ? "text-indigo-800" : "text-slate-700")}>
                              {c.country_name}
                            </p>
                            {isManager && (
                              <span className="inline-flex items-center gap-0.5 text-[10px] text-amber-600 font-semibold">
                                <Crown className="h-2.5 w-2.5" /> Responsable
                              </span>
                            )}
                          </div>
                          {checked && <CheckCircle className="h-4 w-4 text-indigo-500 flex-shrink-0" />}
                        </label>
                      );
                    })}
                  </div>
                )}

                <p className="text-xs text-slate-400">
                  {userCountryIds.size} pays assigné{userCountryIds.size > 1 ? "s" : ""}
                  {tenantCountries.filter((c) => c.manager?.id === selected.id).length > 0 && (
                    <span className="ml-2 text-amber-600">
                      · Responsable de {tenantCountries.filter((c) => c.manager?.id === selected.id).length} pays
                    </span>
                  )}
                </p>

                <div className="flex justify-end gap-2 pt-1">
                  <button
                    onClick={closeModal}
                    className="rounded-xl px-4 py-2.5 text-sm border bg-white hover:bg-slate-50 text-slate-600 transition"
                    disabled={countriesSaving}
                  >
                    {tCommon("cancel")}
                  </button>
                  <button
                    onClick={onCountriesSave}
                    className="rounded-xl px-5 py-2.5 text-sm font-semibold text-white disabled:opacity-60 transition"
                    style={{ background: "linear-gradient(135deg, #1e1b4b 0%, #312e81 100%)" }}
                    disabled={countriesSaving}
                  >
                    {countriesSaving ? (
                      <span className="flex items-center gap-2"><RefreshCw className="h-3.5 w-3.5 animate-spin" /> Enregistrement…</span>
                    ) : tCommon("save")}
                  </button>
                </div>
              </div>
            )}

          </div>
        </div>
      )}
    </div>
  );
}