'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Workflow } from 'lucide-react';
import { DarkModeToggle } from './dark-mode-toggle';
import { RoleSwitcher } from './role-switcher';
import { Breadcrumbs } from './breadcrumbs';

const NAV_LINKS = [
  { label: 'Learner', href: '/', segment: 'learner' },
  { label: 'Marketplace', href: '/marketplace', segment: 'marketplace' },
  { label: 'Employer', href: '/employer', segment: 'employer' },
  { label: 'Admin', href: '/admin', segment: 'admin' },
];

/** Map the current pathname to the active surface segment. */
function activeSegment(pathname: string): string {
  if (pathname.startsWith('/marketplace')) return 'marketplace';
  if (pathname.startsWith('/employer')) return 'employer';
  if (pathname.startsWith('/admin')) return 'admin';
  return 'learner';
}

export function Header() {
  const pathname = usePathname() ?? '/';
  const active = activeSegment(pathname);

  return (
    <header className="sticky top-0 z-30 border-b border-slate-200 bg-white/80 backdrop-blur dark:border-slate-800 dark:bg-slate-950/80">
      <div className="mx-auto flex h-14 max-w-7xl items-center gap-4 px-4 sm:px-6">
        <Link href="/" className="flex items-center gap-2 font-semibold">
          <span className="flex h-8 w-8 items-center justify-center rounded-md bg-primary-600 text-white">
            <Workflow className="h-4 w-4" />
          </span>
          <span className="text-slate-900 dark:text-slate-100">Nextcraft</span>
        </Link>

        <nav className="ml-4 hidden items-center gap-1 md:flex" aria-label="Primary">
          {NAV_LINKS.map((l) => {
            const isActive = l.segment === active;
            return (
              <Link
                key={l.href}
                href={l.href}
                aria-current={isActive ? 'page' : undefined}
                className={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${
                  isActive
                    ? 'bg-primary-50 text-primary-700 dark:bg-primary-900/30 dark:text-primary-200'
                    : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-slate-100'
                }`}
              >
                {l.label}
              </Link>
            );
          })}
        </nav>

        <div className="ml-auto flex items-center gap-2">
          <RoleSwitcher />
          <DarkModeToggle />
        </div>
      </div>

      {/* Breadcrumb strip — rendered inside the sticky header so it stays
          visible and consistent across all four surfaces. */}
      <Breadcrumbs />
    </header>
  );
}