'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Languages } from 'lucide-react';
import { useApp } from '@/providers/app-provider';
import { PLATFORM_NAME_AR, PLATFORM_NAME_EN } from '@sot/shared/constants';

const NAV = [
  { href: '/auth', labelKey: 'step.auth' as const },
  { href: '/seller', labelKey: 'nav.dashboard' as const },
  { href: '/company/approval', labelKey: 'step.company_approval' as const },
];

export function SiteHeader() {
  const { language, setLanguage, t } = useApp();
  const pathname = usePathname();
  const title = language === 'ar' ? PLATFORM_NAME_AR : PLATFORM_NAME_EN;

  return (
    <header className="sticky top-0 z-40 border-b border-black/5 bg-white/90 backdrop-blur-md">
      <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-3 sm:px-6">
        <div>
          <p className="text-xs font-semibold uppercase tracking-wide text-brand-600">SOT · v1</p>
          <h1 className="text-sm font-extrabold tracking-tight sm:text-base">{title}</h1>
        </div>
        <nav className="hidden items-center gap-1 md:flex">
          {NAV.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={`rounded-xl px-3 py-2 text-sm font-medium transition ${
                pathname.startsWith(item.href)
                  ? 'bg-brand-500 text-black'
                  : 'text-black/70 hover:bg-brand-500/20'
              }`}
            >
              {t(item.labelKey)}
            </Link>
          ))}
        </nav>
        <button
          type="button"
          onClick={() => setLanguage(language === 'ar' ? 'en' : 'ar')}
          className="apple-btn-secondary gap-2 !px-3 !py-2"
        >
          <Languages className="h-4 w-4" />
          {t('lang.toggle')}
        </button>
      </div>
    </header>
  );
}