"use client"

import { KeyRound, LogOut, MonitorSmartphone, ShieldCheck, Smartphone } from "lucide-react"
import { CompteAuthentikPanel } from "@/components/compte/compte-authentik-panel"
import { SettingsSectionHeader } from "@/components/gmail/settings/settings-section-header"
import { Button } from "@/components/ui/button"
import { useAuthLogout } from "@/components/auth/auth-provider"
import {
  AUTHENTIK_SELF_SERVICE_FLOWS,
} from "@/lib/auth/authentik-user-url"

export function CompteSecuritySection() {
  const signOut = useAuthLogout()

  return (
    <>
      <SettingsSectionHeader
        title="Sécurité"
        description="Mot de passe, validation en deux étapes, sessions actives et déconnexion."
      />

      <div className="space-y-4">
        <CompteAuthentikPanel
          icon={<KeyRound className="size-5" aria-hidden />}
          title="Mot de passe"
          description="Changez le mot de passe de votre compte Ulti."
          flowSlug={AUTHENTIK_SELF_SERVICE_FLOWS.passwordChange}
          actionLabel="Changer le mot de passe"
        />

        <CompteAuthentikPanel
          icon={<Smartphone className="size-5" aria-hidden />}
          title="Validation en deux étapes"
          description="Ajoutez ou retirez des appareils TOTP, clés de sécurité WebAuthn ou codes de secours."
          tab="mfa"
          actionLabel="Gérer la validation"
        />

        <CompteAuthentikPanel
          icon={<MonitorSmartphone className="size-5" aria-hidden />}
          title="Sessions et appareils"
          description="Consultez les sessions actives et déconnectez un appareil distant."
          tab="sessions"
          actionLabel="Gérer les sessions"
        />

        <CompteAuthentikPanel
          icon={<ShieldCheck className="size-5" aria-hidden />}
          title="Services connectés"
          description="Liez ou déliez des comptes externes (Google, GitHub, etc.) si votre organisation les propose."
          tab="sources"
          actionLabel="Gérer les connexions"
        />

        <div className="flex flex-col gap-3 rounded-lg border border-mail-border bg-mail-surface p-5 shadow-sm dark:bg-mail-surface-elevated sm:flex-row sm:items-center sm:justify-between">
          <div className="min-w-0">
            <h3 className="text-sm font-medium text-foreground">
              Session sur cet appareil
            </h3>
            <p className="mt-0.5 text-sm text-muted-foreground">
              Met fin à votre session Ulti sur ce navigateur. Vous devrez vous reconnecter.
            </p>
          </div>
          <Button
            type="button"
            variant="outline"
            className="h-9 shrink-0 rounded-full px-4 text-sm font-medium"
            onClick={() => void signOut()}
          >
            <LogOut className="size-4" aria-hidden />
            Se déconnecter
          </Button>
        </div>
      </div>
    </>
  )
}