/**
 * Header global affiché sur toutes les pages PUBLIQUES (hors /admin qui a son
 * propre shell). Charge la session côté serveur pour adapter les liens.
 */

import Link from "next/link";

import { auth } from "@/auth";
import { UserRole } from "@/generated/prisma/enums";

import { SignOutButton } from "./SignOutButton";

export async function SiteHeader() {
  const session = await auth();
  const u = session?.user;
  const isAdmin = u?.role === UserRole.ADMIN;
  const isOwner = u?.role === UserRole.OWNER || isAdmin;

  return (
    <header className="sticky top-0 z-30 border-b border-zinc-200 bg-white/85 backdrop-blur supports-[backdrop-filter]:bg-white/70">
      <div className="mx-auto flex h-12 max-w-7xl items-center justify-between gap-4 px-4">
        <Link href="/" className="flex items-center gap-2 text-base font-semibold text-zinc-900">
          <span className="inline-flex h-6 w-6 items-center justify-center rounded-md bg-emerald-600 text-xs font-bold text-white">
            K
          </span>
          Karbé
        </Link>

        <nav className="hidden items-center gap-5 text-sm text-zinc-700 sm:flex">
          <Link href="/decouvrir" className="hover:text-zinc-900">
            Au fil de l&apos;eau
          </Link>
          <Link href="/carbets" className="hover:text-zinc-900">
            Catalogue
          </Link>
          <Link href="/comment-ca-marche" className="hover:text-zinc-900">
            Comment ça marche
          </Link>
        </nav>

        <div className="flex items-center gap-3 text-sm">
          {u ? (
            <>
              <Link href="/mes-favoris" className="hidden text-zinc-700 hover:text-zinc-900 sm:inline">
                Favoris
              </Link>
              <Link href="/mes-reservations" className="hidden text-zinc-700 hover:text-zinc-900 sm:inline">
                Mes réservations
              </Link>
              <Link href="/mon-compte" className="hidden text-zinc-700 hover:text-zinc-900 sm:inline">
                Mon compte
              </Link>
              {isOwner ? (
                <Link href="/espace-hote" className="hidden text-zinc-700 hover:text-zinc-900 sm:inline">
                  Espace hôte
                </Link>
              ) : null}
              {isAdmin ? (
                <Link href="/admin" className="hidden rounded-md bg-zinc-900 px-2.5 py-1 text-xs font-semibold text-white hover:bg-zinc-800 sm:inline-block">
                  Admin
                </Link>
              ) : null}
              <span className="hidden max-w-[14ch] truncate text-xs text-zinc-500 md:inline" title={u.email ?? ""}>
                {u.name || u.email}
              </span>
              <SignOutButton />
            </>
          ) : (
            <>
              <Link href="/connexion" className="text-zinc-700 hover:text-zinc-900">
                Connexion
              </Link>
              <Link
                href="/inscription"
                className="rounded-md bg-zinc-900 px-3 py-1 text-xs font-semibold text-white hover:bg-zinc-800"
              >
                Créer un compte
              </Link>
            </>
          )}
        </div>
      </div>
    </header>
  );
}
