"use client"

import Link from "next/link"
import { ChevronRight, ShieldCheck, UserRound } from "lucide-react"
import { AccountAvatar } from "@/components/suite/account-avatar"
import { CompteSettingsCard } from "@/components/compte/compte-settings-card"
import { useChromeIdentity } from "@/lib/hooks/use-chrome-identity"
import { cn } from "@/lib/utils"

const CARDS = [
  {
    href: "/compte/informations",
    icon: UserRound,
    title: "Informations personnelles",
    description:
      "Consultez votre nom, votre adresse e-mail et votre identifiant Ulti.",
  },
  {
    href: "/compte/securite",
    icon: ShieldCheck,
    title: "Sécurité",
    description:
      "Gérez votre mot de passe, la validation en deux étapes et vos sessions.",
  },
] as const

export function CompteHomeSection() {
  const identity = useChromeIdentity()

  return (
    <>
      <header className="mb-8 flex flex-col items-center text-center">
        {identity ? (
          <AccountAvatar
            account={{
              name: identity.name,
              email: identity.email,
              avatarUrl: identity.avatarUrl,
            }}
            size="lg"
          />
        ) : (
          <div className="size-20 rounded-full bg-muted" aria-hidden />
        )}
        <h2 className="mt-4 text-2xl font-normal text-foreground">
          {identity ? `Bonjour ${identity.firstName} !` : "Votre compte Ulti"}
        </h2>
        <p className="mt-1 text-sm text-muted-foreground">
          Gérez vos informations et la sécurité de votre compte sur l&apos;ensemble
          de la suite Ulti.
        </p>
        {identity ? (
          <p className="mt-1 text-sm text-muted-foreground">{identity.email}</p>
        ) : null}
      </header>

      <div className="grid gap-4 sm:grid-cols-2">
        {CARDS.map((card) => {
          const Icon = card.icon
          return (
            <Link key={card.href} href={card.href} className="group block">
              <CompteSettingsCard
                className={cn(
                  "h-full transition-colors hover:bg-accent/40",
                  "group-focus-visible:ring-2 group-focus-visible:ring-ring"
                )}
              >
                <Icon className="size-6 text-muted-foreground" aria-hidden />
                <span className="mt-3 flex items-center gap-1 text-sm font-medium text-foreground">
                  {card.title}
                  <ChevronRight
                    className="size-4 text-muted-foreground transition-transform group-hover:translate-x-0.5"
                    aria-hidden
                  />
                </span>
                <span className="mt-1 block text-sm text-muted-foreground">
                  {card.description}
                </span>
              </CompteSettingsCard>
            </Link>
          )
        })}
      </div>
    </>
  )
}