"use client"

import { ExternalLink } from "lucide-react"
import { SettingsSectionHeader } from "@/components/gmail/settings/settings-section-header"
import { SettingsSyncBanner } from "@/components/gmail/settings/settings-sync-banner"
import { useCurrentUser } from "@/lib/api/hooks/use-current-user"
import { useChromeIdentity } from "@/lib/hooks/use-chrome-identity"
import { authentikUserSettingsUrl } from "@/lib/auth/authentik-user-url"

const ROLE_LABELS: Record<string, string> = {
  admin: "Administrateur",
  user: "Utilisateur",
  guest: "Invité",
  suspended: "Suspendu",
}

export function ComptePersonalInfoSection() {
  const identity = useChromeIdentity()
  const { data: user, isFetching, isError, refetch } = useCurrentUser()
  const idpUrl = authentikUserSettingsUrl()

  const name = user?.name || identity?.name || "—"
  const email = user?.email || identity?.email || "—"

  return (
    <>
      <SettingsSectionHeader
        title="Informations personnelles"
        description="Informations de votre compte Ulti, partagées par toutes les applications de la suite."
      />
      <SettingsSyncBanner
        isFetching={isFetching}
        isError={isError}
        onRetry={() => refetch()}
      />

      <div className="overflow-hidden rounded-2xl border border-border">
        <InfoRow label="Nom" value={name} />
        <InfoRow label="Adresse e-mail" value={email} />
        <InfoRow label="Identifiant" value={user?.sub ?? "—"} mono />
        {user ? (
          <InfoRow label="Rôle" value={ROLE_LABELS[user.role] ?? user.role} />
        ) : null}
        {user?.groups?.length ? (
          <InfoRow label="Groupes" value={user.groups.join(", ")} />
        ) : null}
      </div>

      <p className="mt-4 text-sm text-muted-foreground">
        Votre identité est gérée par le fournisseur d&apos;identité de votre
        organisation. Pour modifier votre nom ou votre adresse e-mail,
        rapprochez-vous de votre administrateur
        {idpUrl ? " ou utilisez le portail d'identité" : ""}.
      </p>
      {idpUrl ? (
        <a
          href={idpUrl}
          target="_blank"
          rel="noreferrer"
          className="mt-2 inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
        >
          Ouvrir le portail d&apos;identité
          <ExternalLink className="size-3.5" aria-hidden />
        </a>
      ) : null}
    </>
  )
}

function InfoRow({
  label,
  value,
  mono = false,
}: {
  label: string
  value: string
  mono?: boolean
}) {
  return (
    <div className="flex flex-col gap-0.5 border-b border-border px-4 py-3 last:border-b-0 sm:flex-row sm:items-center sm:gap-4">
      <span className="w-40 shrink-0 text-xs font-medium uppercase tracking-wide text-muted-foreground">
        {label}
      </span>
      <span
        className={
          mono
            ? "min-w-0 break-all font-mono text-xs text-foreground"
            : "min-w-0 truncate text-sm text-foreground"
        }
      >
        {value}
      </span>
    </div>
  )
}