/**
 * Header Component
 *
 * Premium consumer beauty-services marketplace navigation with full dark mode support.
 * Strict customer discovery focus with provider onboarding link and high z-index stacking.
 * navCategories are fetched in layout.tsx (RSC) and passed here → MegaMenu / MobileMenu.
 */

import Link from 'next/link';
import { getTranslations } from 'next-intl/server';
import { ServicesMegaMenu } from './ServicesMegaMenu';
import { LanguageSwitcher } from './LanguageSwitcher';
import { ThemeToggle } from '@/components/ui/theme-toggle';
import { MobileMenu } from './MobileMenu';
import { HeaderAuthButton } from './HeaderAuthButton';
import { HeaderVisibilityWrapper } from './HeaderVisibilityWrapper';
import type { User, Category } from '@shinecode/api-client/types';

interface HeaderProps {
  locale: string;
  user?: User | null;
  /** API categories passed from layout RSC — used by mega menu and mobile menu */
  navCategories?: Category[];
}

export async function Header({ locale, user, navCategories = [] }: HeaderProps) {
  const tNav = await getTranslations({ locale, namespace: 'navigation' });

  return (
    <HeaderVisibilityWrapper>
      {/* Skip to main content link for accessibility */}
      <a
        href="#main-content"
        className="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:inset-inline-start-2 focus:z-[110] focus:px-4 focus:py-2 focus:bg-brand-500 focus:text-white focus:rounded-lg shadow-elevated"
      >
        {tNav('skipToContent')}
      </a>

      <header className="sticky top-0 z-50 w-full bg-white/95 dark:bg-zinc-950/95 backdrop-blur-md border-b border-slate-200/80 dark:border-zinc-800 transition-colors duration-200">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="flex items-center justify-between h-18">
            {/* Left: ShineCode Logo */}
            <div className="flex items-center gap-8">
              <Link
                href={`/${locale}`}
                className="flex items-center gap-0.5 text-2xl font-black text-slate-950 dark:text-white hover:opacity-90 transition-opacity tracking-tight"
                aria-label="ShineCode Home"
              >
                <span>Shine</span>
                <span className="text-brand-500">code</span>
              </Link>

              {/* Desktop Primary Navigation */}
              <nav className="hidden md:flex items-center gap-6" aria-label="Primary marketplace navigation">
                {/* Services Mega Menu — receives live API categories */}
                <ServicesMegaMenu locale={locale} categories={navCategories} />

                {/* How it works */}
                <Link
                  href={`/${locale}#how-it-works`}
                  className="text-sm font-semibold text-slate-700 dark:text-zinc-300 hover:text-brand-500 dark:hover:text-brand-400 transition-colors py-2"
                >
                  {tNav('howItWorks')}
                </Link>

                {/* Become a Partner */}
                <Link
                  href={`/${locale}/partner`}
                  className="inline-flex items-center gap-1.5 text-sm font-semibold text-slate-700 dark:text-zinc-300 hover:text-brand-500 dark:hover:text-brand-400 transition-colors py-2"
                >
                  <span>{tNav('becomePartner')}</span>
                  <span className="text-[10px] font-extrabold text-brand-500 bg-brand-50 dark:bg-brand-950/50 border border-brand-200 dark:border-brand-900/50 px-2 py-0.5 rounded-full">
                    Pros
                  </span>
                </Link>
              </nav>
            </div>

            {/* Right: Utilities & Primary Booking CTA */}
            <div className="hidden md:flex items-center gap-3">
              {/* Language Selector */}
              <LanguageSwitcher currentLocale={locale} />

              {/* Theme Toggle */}
              <ThemeToggle />

              {/* Log in */}
              <HeaderAuthButton loginText={tNav('login')} user={user} locale={locale} />

              {/* Primary Customer CTA */}
              <Link
                href={`/${locale}/services`}
                className="px-5 py-2.5 bg-zinc-900 hover:bg-black active:bg-zinc-800 dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-100 text-white text-sm font-bold rounded-full shadow-sm transition-all duration-200 hover:-translate-y-0.5 flex items-center gap-2"
              >
                <span>{tNav('bookService')}</span>
                <span className="text-xs rtl:rotate-180">→</span>
              </Link>
            </div>

            {/* Mobile Header Controls */}
            <div className="flex md:hidden items-center">
              <MobileMenu locale={locale} categories={navCategories} />
            </div>
          </div>
        </div>
      </header>
    </HeaderVisibilityWrapper>
  );
}

export default Header;