/**
 * Merchant-controlled site header (bare skeleton).
 *
 * The merchant configures the header in the Brainerce dashboard under
 *   Sell → Content → Header
 *
 * Renders brand (logo or store-name fallback) + nav items + CTA + cart link,
 * with a `<details>` mobile-friendly menu that works without client-side JS.
 * Everything is generic — do NOT hardcode nav labels or logo paths here; the
 * merchant edits them in the dashboard and the change propagates within ~5
 * minutes.
 *
 * If `header` is null (404 from the API, or the merchant deleted the row),
 * we render a minimal static fallback with just the brand label and cart link
 * 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 { HeaderSearch } from './header-search';
<% if (i18nEnabled) { %>
import { LanguageSwitcher } from '@/ui/layout/language-switcher';
<% } %>
import { RegionSwitcher } from '@/ui/layout/region-switcher';

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;
}

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';

  // Static fallback — runs when the Content API returned null (no HEADER row
  // for this store yet, or fetch failed). Keep the brand + cart so the page
  // always has a clickable home link and entry to checkout.
  if (!header) {
    return (
      <header>
        {/* DESIGN ME — site header (fallback branch, no merchant nav yet): brand link + account + cart; data comes pre-fetched from the layout via the Content API. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
        <div className="flex items-center justify-between gap-4">
          <Link href="/" aria-label={brandLabel}>
            {brandLabel}
          </Link>
          <div className="flex items-center gap-2">
            <% if (i18nEnabled) { %>
            <LanguageSwitcher />
            <% } %>
            <RegionSwitcher />
            {/* Search is a MANDATORY feature, not decoration — the island carries the
                debounce, keyboard navigation and ARIA wiring already. */}
            <HeaderSearch />
            <HeaderAccount />
            <Link href="/cart" aria-label="Cart">
              Cart
            </Link>
          </div>
        </div>
      </header>
    );
  }

  return (
    <header>
      {/* DESIGN ME — site header: merchant-configured logo/nav/CTA (Content<'HEADER'> pre-fetched in the layout) + account + cart links. Keep every link working. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
      <div className="flex items-center justify-between gap-4">
        <Link href="/" className="flex items-center gap-2" aria-label={brandLabel}>
          {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} />
          ) : (
            <span>{brandLabel}</span>
          )}
        </Link>

        {navItems.length > 0 ? (
          <nav aria-label="Main">
            <ul className="flex items-center gap-4">
              {navItems.map((item, idx) => (
                <li key={`${item.url}-${idx}`}>
                  <a href={item.url}>{item.label}</a>
                </li>
              ))}
            </ul>
          </nav>
        ) : null}

        <div className="flex items-center gap-2">
          {cta ? <a href={cta.url}>{cta.label}</a> : null}

          <% if (i18nEnabled) { %>
          <LanguageSwitcher />
          <% } %>
          <RegionSwitcher />

          <HeaderSearch />

          <HeaderAccount />

          <Link href="/cart" aria-label="Cart">
            Cart
          </Link>

          {navItems.length > 0 ? (
            <details>
              <summary>Menu</summary>
              <nav aria-label="Mobile">
                <ul>
                  {navItems.map((item, idx) => (
                    <li key={`m-${item.url}-${idx}`}>
                      <a href={item.url}>{item.label}</a>
                    </li>
                  ))}
                </ul>
              </nav>
            </details>
          ) : null}
        </div>
      </div>
    </header>
  );
}