/**
 * Merchant-controlled site header.
 *
 * The merchant configures the header in the Brainerce dashboard under
 *   Sell → Content → Header
 *
 * Sticky, translucent warm-white bar: brand (serif) at the start, nav in the
 * middle (desktop), actions at the end (language / account / cart / mobile
 * menu). Everything is generic — nav labels and logo come from the dashboard.
 * If `header` is null we render the same chrome with just brand + actions so
 * the layout never collapses.
 */
import * as React from 'react';
import { Link } from '@/core/lib/navigation';
import type { Content } from 'brainerce';
import { HeaderAccount } from './header-account';
import { HeaderCart } from './header-cart';
import { HeaderSearch } from './header-search';
<% if (i18nEnabled) { %>
import { LanguageSwitcher } from '@/ui/layout/language-switcher';
<% } %>
import { RegionSwitcher } from '@/ui/layout/region-switcher';
import { IconMenu } from '@/ui/shared/icons';
import { resolveNavUrl } from '@/ui/layout/nav-url';

interface SiteHeaderProps {
  /** Pre-fetched header payload (server-side). `null` triggers static fallback. */
  header: Content<'HEADER'> | null;
  /** Fallback brand label when the merchant hasn't uploaded a logo yet. */
  storeName?: string;
}

function Brand({
  logo,
  brandLabel,
}: {
  logo?: { src: string; alt: string } | null;
  brandLabel: string;
}) {
  return (
    <Link
      href="/"
      aria-label={brandLabel}
      className="flex shrink-0 items-center gap-2 rounded-lg"
    >
      {logo ? (
        // eslint-disable-next-line @next/next/no-img-element -- merchant-supplied URL, dynamic optimization handled by CDN
        <img src={logo.src} alt={logo.alt} className="h-9 w-auto object-contain" />
      ) : (
        <span className="font-display text-xl font-semibold leading-none text-foreground sm:text-2xl">
          {brandLabel}
        </span>
      )}
    </Link>
  );
}

export function SiteHeader({ header, storeName }: SiteHeaderProps) {
  const data = header?.data;
  const logo = data?.logo;
  const navItems = data?.navItems ?? [];
  const cta = data?.cta;
  const brandLabel = logo?.alt || storeName || 'Store';

  return (
    <header className="sticky top-0 z-40 border-b bg-background/90 backdrop-blur supports-[backdrop-filter]:bg-background/80">
      <div className="container-page flex h-16 items-center justify-between gap-4 sm:h-[4.5rem]">
        <Brand logo={logo ?? null} brandLabel={brandLabel} />

        {navItems.length > 0 && (
          <nav aria-label="Main" className="hidden md:block">
            <ul className="flex items-center gap-1">
              {navItems.map((item, idx) => (
                <li key={`${item.url}-${idx}`}>
                  <a
                    href={resolveNavUrl(item.url)}
                    className="rounded-full px-4 py-2 text-sm font-medium text-foreground/80 transition-colors hover:bg-secondary hover:text-foreground"
                  >
                    {item.label}
                  </a>
                </li>
              ))}
            </ul>
          </nav>
        )}

        <div className="flex items-center gap-1 sm:gap-2">
          {/* Collapses to an icon button below `sm` — see header-search.tsx. */}
          <HeaderSearch />
          {cta ? (
            <a href={resolveNavUrl(cta.url)} className="btn-primary btn-sm hidden lg:inline-flex">
              {cta.label}
            </a>
          ) : null}
<% if (i18nEnabled) { %>

          <LanguageSwitcher />
<% } %>
          <RegionSwitcher />
          <HeaderAccount />
          <HeaderCart />

          {navItems.length > 0 && (
            <details className="group relative md:hidden">
              <summary
                className="flex h-10 w-10 cursor-pointer list-none items-center justify-center rounded-full text-foreground transition-colors hover:bg-secondary [&::-webkit-details-marker]:hidden"
                aria-label="Menu"
              >
                <IconMenu size={20} />
              </summary>
              <nav
                aria-label="Mobile"
                className="absolute end-0 top-12 z-50 w-56 rounded-xl border bg-background p-2 shadow-lg"
              >
                <ul className="flex flex-col">
                  {navItems.map((item, idx) => (
                    <li key={`m-${item.url}-${idx}`}>
                      <a
                        href={resolveNavUrl(item.url)}
                        className="block rounded-lg px-3 py-2.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary"
                      >
                        {item.label}
                      </a>
                    </li>
                  ))}
                  {cta ? (
                    <li className="mt-1 border-t pt-2">
                      <a
                        href={resolveNavUrl(cta.url)}
                        className="block rounded-lg px-3 py-2.5 text-sm font-semibold text-primary transition-colors hover:bg-secondary"
                      >
                        {cta.label}
                      </a>
                    </li>
                  ) : null}
                </ul>
              </nav>
            </details>
          )}
        </div>
      </div>
    </header>
  );
}