"use client"

import { Icon } from "@iconify/react"

const ACCENT = "#7C3AED"

type Member = {
  initials: string
  name: string
  email: string
  role: string
  roleIcon: string
  groups: string[]
}

const MEMBERS: Member[] = [
  {
    initials: "AD",
    name: "Alice Dupont",
    email: "alice@acme.com",
    role: "Admin",
    roleIcon: "mdi:shield-crown-outline",
    groups: ["Direction", "IT"],
  },
  {
    initials: "BM",
    name: "Bob Martin",
    email: "bob@acme.com",
    role: "Utilisateur",
    roleIcon: "mdi:account-outline",
    groups: ["Ventes"],
  },
  {
    initials: "CL",
    name: "Chloé Leroy",
    email: "chloe@acme.com",
    role: "Utilisateur",
    roleIcon: "mdi:account-outline",
    groups: ["Marketing"],
  },
  {
    initials: "PR",
    name: "Prestataire X",
    email: "ext@partenaire.io",
    role: "Invité",
    roleIcon: "mdi:account-clock-outline",
    groups: ["Externes"],
  },
]

/** Aperçu statique de l'annuaire utilisateurs avec rôles et groupes. */
export function AdminUsersDemo() {
  return (
    <div className="flex flex-col gap-3">
      <div className="landing-glass-strong overflow-hidden rounded-2xl shadow-[0_32px_70px_-36px_rgba(30,40,90,0.45)]">
        <div className="flex items-center gap-2.5 border-b border-[var(--landing-line)] px-4 py-3">
          <Icon icon="mdi:account-group-outline" className="size-5" style={{ color: ACCENT }} aria-hidden />
          <span className="text-sm font-semibold tracking-tight">Utilisateurs & groupes</span>
          <span className="ml-auto flex items-center gap-1 rounded-full bg-[var(--landing-chip)] px-2 py-0.5 text-[11px] font-medium text-[var(--landing-muted)]">
            <Icon icon="mdi:filter-variant" className="size-3" aria-hidden />
            Tous les groupes
          </span>
        </div>

        <ul className="divide-y divide-[var(--landing-line)]">
          {MEMBERS.map((m) => (
            <li key={m.email} className="flex items-center gap-3 px-4 py-2.5">
              <span
                className="flex size-9 shrink-0 items-center justify-center rounded-full text-xs font-semibold text-white"
                style={{ backgroundColor: ACCENT }}
                aria-hidden
              >
                {m.initials}
              </span>
              <div className="min-w-0 flex-1">
                <p className="truncate text-sm font-medium text-[var(--landing-fg)]">{m.name}</p>
                <p className="truncate text-[11px] text-[var(--landing-muted)]">{m.email}</p>
              </div>
              <div className="hidden shrink-0 flex-wrap justify-end gap-1 sm:flex">
                {m.groups.map((g) => (
                  <span
                    key={g}
                    className="rounded-full border border-[var(--landing-line)] bg-[var(--landing-chip)]/50 px-1.5 py-0.5 text-[10px] text-[var(--landing-muted)]"
                  >
                    {g}
                  </span>
                ))}
              </div>
              <span
                className="flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium"
                style={{ backgroundColor: `${ACCENT}1f`, color: ACCENT }}
              >
                <Icon icon={m.roleIcon} className="size-3.5" aria-hidden />
                {m.role}
              </span>
            </li>
          ))}
        </ul>

        <div className="flex items-center gap-2 border-t border-[var(--landing-line)] bg-[var(--landing-bg)]/60 px-4 py-3 text-[11px] text-[var(--landing-muted)]">
          <Icon icon="mdi:cursor-default-click-outline" className="size-3.5" aria-hidden />
          Actions en masse · invitation · rôle · quota · ajout à un groupe
        </div>
      </div>
      <p className="flex items-start gap-2 text-sm text-[var(--landing-muted)]">
        <Icon icon="mdi:incognito" className="mt-0.5 size-4 shrink-0" aria-hidden />
        Aperçu statique — rôles admin/utilisateur/invité, groupes et actions en lot.
      </p>
    </div>
  )
}