"use client"

import { useRef, useState } from "react"
import Link from "next/link"
import { Icon } from "@iconify/react"
import { AccountAvatar } from "@/components/suite/account-avatar"
import { AccountSwitcherDropdown } from "@/components/suite/account-switcher-dropdown"
import { SuiteFavoritesMenu } from "@/components/suite/suite-favorites-menu"
import { Button } from "@/components/ui/button"
import { useChromeIdentity } from "@/lib/hooks/use-chrome-identity"
import { getAuthentikEnrollmentUrl } from "@/lib/auth/oidc-config"
import { cn } from "@/lib/utils"

const NAV_LINKS = [
  { label: "Démo", href: "#demo" },
  { label: "Applications", href: "#applications" },
  { label: "Fonctionnalités", href: "#fonctionnalites" },
  { label: "Souveraineté", href: "#souverainete" },
]

export function LandingHeader({ scrolled }: { scrolled: boolean }) {
  const identity = useChromeIdentity()
  const [accountMenuOpen, setAccountMenuOpen] = useState(false)
  const accountMenuRef = useRef<HTMLDivElement>(null)

  return (
    <header
      className={cn(
        "sticky top-0 z-40 transition-[background-color,border-color,box-shadow,backdrop-filter] duration-300",
        scrolled
          ? "landing-glass-strong shadow-[0_8px_30px_-18px_rgba(0,0,0,0.35)]"
          : "border-b border-transparent"
      )}
    >
      <div className="mx-auto flex h-16 w-full max-w-6xl items-center justify-between gap-4 px-4 sm:px-6">
        <Link
          href="/"
          className="flex min-w-0 items-center gap-2.5 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
          aria-label="Ulti Suite — Accueil"
        >
          <img
            src="/ultisuite-mark.svg"
            alt=""
            width={56}
            height={56}
            draggable={false}
            className="h-10 w-10 shrink-0 object-contain select-none"
            aria-hidden
          />
          <span className="truncate text-xl font-semibold tracking-tight">
            Ulti<span className="landing-gradient-text">Suite</span>
          </span>
        </Link>

        <nav className="hidden items-center gap-1 md:flex" aria-label="Sections">
          {NAV_LINKS.map((link) => (
            <a
              key={link.href}
              href={link.href}
              className="rounded-full px-3.5 py-1.5 text-sm font-medium text-[var(--landing-nav-fg)] transition-colors hover:bg-[var(--landing-chip)] hover:text-[var(--landing-fg)]"
            >
              {link.label}
            </a>
          ))}
        </nav>

        <div className="flex shrink-0 items-center gap-2">
          {identity ? (
            <>
              <Link
                href="/mail/inbox"
                className="landing-cta landing-cta--primary hidden h-9 px-4 text-sm sm:inline-flex"
              >
                Ouvrir Ultimail
                <Icon icon="mdi:arrow-right" className="size-4" aria-hidden />
              </Link>
              <SuiteFavoritesMenu onOpen={() => setAccountMenuOpen(false)} />
              <div className="relative" ref={accountMenuRef}>
                <Button
                  variant="ghost"
                  size="icon-lg"
                  className="size-10 overflow-hidden rounded-full p-0"
                  aria-label={`Compte : ${identity.email}`}
                  aria-expanded={accountMenuOpen}
                  aria-haspopup="dialog"
                  onClick={() => setAccountMenuOpen((open) => !open)}
                >
                  <AccountAvatar
                    account={{
                      name: identity.name,
                      email: identity.email,
                      avatarUrl: identity.avatarUrl,
                    }}
                    size="md"
                  />
                </Button>
                <AccountSwitcherDropdown
                  open={accountMenuOpen}
                  onOpenChange={setAccountMenuOpen}
                  containerRef={accountMenuRef}
                />
              </div>
            </>
          ) : (
            <>
              <a
                href={getAuthentikEnrollmentUrl()}
                className="landing-cta landing-cta--ghost hidden h-9 px-4 text-sm sm:inline-flex"
              >
                Créer un compte
              </a>
              <Link
                href="/login"
                className="landing-cta landing-cta--primary h-9 px-4 text-sm"
              >
                Se connecter
              </Link>
            </>
          )}
        </div>
      </div>
    </header>
  )
}