"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { Camera, LogOut, Plus, X } from "lucide-react"
import { AccountAvatar } from "@/components/suite/account-avatar"
import { Button } from "@/components/ui/button"
import { useAuthLogout } from "@/components/auth/auth-provider"
import { useChromeIdentity } from "@/lib/hooks/use-chrome-identity"
import { buildOidcLoginUrl } from "@/lib/auth/login-url"

export function AccountSwitcherPanel({ onClose }: { onClose: () => void }) {
  const pathname = usePathname()
  const identity = useChromeIdentity()
  const signOut = useAuthLogout()

  if (!identity) return null

  const firstName = identity.firstName
  const addAccountHref = buildOidcLoginUrl({
    returnTo: pathname || "/drive",
    intent: "add_account",
  })

  const handleSignOut = () => {
    void signOut()
    onClose()
  }

  return (
    <>
      <div className="relative px-4 pb-3 pt-4">
        <p className="truncate pr-8 text-center text-sm text-foreground">
          {identity.email}
        </p>
        <Button
          type="button"
          variant="ghost"
          size="icon"
          className="absolute right-2 top-2 size-8 text-muted-foreground hover:bg-accent"
          aria-label="Fermer"
          onClick={onClose}
        >
          <X className="size-4" />
        </Button>

        <div className="mt-4 flex flex-col items-center">
          <div className="relative">
            <AccountAvatar
              account={{ name: identity.name, email: identity.email }}
              size="lg"
            />
            <span className="absolute bottom-0 right-0 flex size-7 items-center justify-center rounded-full border-2 border-border bg-background text-muted-foreground shadow-sm">
              <Camera className="size-3.5" aria-hidden />
            </span>
          </div>
          <h2 className="mt-3 text-xl font-normal text-foreground">
            Bonjour {firstName} !
          </h2>
          <Button
            type="button"
            variant="outline"
            className="mt-4 h-9 rounded-full border-border bg-transparent px-5 text-sm font-medium text-primary hover:bg-accent hover:text-primary"
            asChild
          >
            <Link href="/compte" onClick={onClose}>
              Gérer votre compte
            </Link>
          </Button>
        </div>
      </div>

      <div className="px-3 pb-3">
        <div className="overflow-hidden rounded-2xl border border-border bg-background">
          <div className="px-1 py-1">
            <a
              href={addAccountHref}
              onClick={onClose}
              className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left text-sm text-foreground transition-colors hover:bg-accent"
            >
              <span className="flex size-8 items-center justify-center">
                <Plus className="size-5 text-primary" aria-hidden />
              </span>
              Ajouter un compte
            </a>
            <button
              type="button"
              onClick={handleSignOut}
              className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left text-sm text-foreground transition-colors hover:bg-accent"
            >
              <span className="flex size-8 items-center justify-center">
                <LogOut className="size-5 text-muted-foreground" aria-hidden />
              </span>
              Se déconnecter
            </button>
          </div>
        </div>

        <div className="mt-4 flex flex-wrap items-center justify-center gap-1 pb-2 text-center text-xs text-muted-foreground">
          <button type="button" className="hover:underline">
            Règles de confidentialité
          </button>
          <span aria-hidden>·</span>
          <button type="button" className="hover:underline">
            Conditions d&apos;utilisation
          </button>
        </div>
      </div>
    </>
  )
}