'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useAuth } from '@/contexts/AuthContext';
import { useRegion } from '@/contexts/RegionContext';
import { Button } from '@/components/ui/button';
import { RegionPicker } from '@/components/layout/RegionPicker';
import { Briefcase, Users, MapPin } from 'lucide-react';
import { NotificationBell } from '@/components/notifications/NotificationBell';
import { useLanguage } from '@/contexts/LanguageContext';
import { DEFAULT_REGION_SLUG } from '@/lib/region';
import { shouldHidePublicChrome } from '@/lib/publicChrome';
import { JOBS_FEATURE_ENABLED } from '@/lib/features';
import { buildPostJobAuthUrl } from '@/lib/createJob';
import { BrandLogo } from '@/components/brand/BrandLogo';
import { cn } from '@/lib/utils';

export function Header() {
  const pathname = usePathname();
  const { user } = useAuth();
  const { homePath, regionPath, slug } = useRegion();
  const { t } = useLanguage();

  if (shouldHidePublicChrome(pathname)) return null;

  const useRegionalLinks = slug !== DEFAULT_REGION_SLUG;
  const jobsHref = useRegionalLinks ? regionPath('/jobs') : '/jobs';
  const workersHref = useRegionalLinks ? regionPath('/workers') : '/workers';
  const mapHref = useRegionalLinks ? regionPath('/map') : '/map';

  const dashboardHref =
    user?.role === 'WORKER'
      ? '/worker/dashboard'
      : user?.role === 'ADMIN'
        ? '/admin'
        : '/customer/dashboard';

  const isActive = (href: string) =>
    pathname === href || pathname.startsWith(`${href}/`);

  return (
    <header className="site-header">
      <div className="mx-auto flex h-14 max-w-7xl items-center gap-3 px-4">
        <BrandLogo
          variant="header"
          href={homePath()}
          tagline={
            JOBS_FEATURE_ENABLED
              ? t('Jobs & Workers', 'Trabaho at Workers')
              : t('Workers Directory', 'Direktoryo ng Workers')
          }
        />

        <RegionPicker className="shrink-0" variant="dark" />

        <nav className="hidden md:flex flex-1 items-center gap-0.5">
          {JOBS_FEATURE_ENABLED && (
            <Link
              href={jobsHref}
              data-active={isActive(jobsHref)}
              className="site-header-nav-link"
            >
              <Briefcase className="h-4 w-4" />
              {t('Find Jobs', 'Hanapin ang Jobs')}
            </Link>
          )}
          <Link
            href={workersHref}
            data-active={isActive(workersHref)}
            className="site-header-nav-link"
          >
            <Users className="h-4 w-4" />
            {t('Find Workers', 'Hanapin ang Workers')}
          </Link>
          <Link
            href={mapHref}
            data-active={isActive(mapHref)}
            className="site-header-nav-link"
          >
            <MapPin className="h-4 w-4" />
            {t('Map', 'Mapa')}
          </Link>
          <Link
            href="/categories"
            data-active={isActive('/categories')}
            className="site-header-nav-link"
          >
            {t('Trades', 'Mga Trabaho')}
          </Link>
        </nav>

        <div className="ml-auto flex items-center gap-2">
          {!user && JOBS_FEATURE_ENABLED && (
            <Link href={buildPostJobAuthUrl()} className="hidden sm:block">
              <Button
                size="sm"
                className="rounded-none bg-[var(--home-amber)] text-white hover:bg-[var(--home-amber-soft)] hover:text-white shadow-none"
              >
                {t('Post a Job', 'Mag-post ng Trabaho')}
              </Button>
            </Link>
          )}
          {!user && !JOBS_FEATURE_ENABLED && (
            <Link href="/become-worker" className="hidden sm:block">
              <Button
                size="sm"
                className="rounded-none bg-[var(--home-amber)] text-white hover:bg-[var(--home-amber-soft)] hover:text-white shadow-none"
              >
                {t('Become a Worker', 'Maging Worker')}
              </Button>
            </Link>
          )}
          {user ? (
            <>
              <NotificationBell
                buttonClassName="text-slate-300 hover:bg-white/10 hover:text-white"
              />
              <Link href={dashboardHref}>
                <div
                  className={cn(
                    'flex h-9 w-9 items-center justify-center font-semibold text-sm',
                    'bg-[var(--home-amber)] text-white'
                  )}
                >
                  {user.firstName.charAt(0)}
                  {user.lastName.charAt(0)}
                </div>
              </Link>
            </>
          ) : (
            <>
              <Link href="/login" className="hidden sm:block">
                <Button
                  variant="ghost"
                  size="sm"
                  className="rounded-none text-slate-300 hover:bg-white/10 hover:text-white"
                >
                  {t('Sign in', 'Mag-sign in')}
                </Button>
              </Link>
              <Link href="/register" className="hidden sm:block">
                <Button
                  size="sm"
                  variant="outline"
                  className="rounded-none border-white/25 bg-transparent text-white hover:bg-white/10 hover:text-white hover:border-white/40"
                >
                  {t('Register', 'Mag-register')}
                </Button>
              </Link>
            </>
          )}
        </div>
      </div>
    </header>
  );
}