'use client';

import { localizedPath, routeIdFromPathname, type Locale } from '@/lib/localization/config';
import { usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';
import styles from './SiteHeader.module.css';

export type HeaderNavId = 'product' | 'workflow' | 'modules' | 'pricing' | 'faq';

interface HeaderNavigationProps {
  locale: Locale;
  label: string;
  labels: Record<HeaderNavId, string>;
  onNavigate?: () => void;
  mobile?: boolean;
}

const navigationIds: HeaderNavId[] = ['product', 'workflow', 'modules', 'pricing', 'faq'];

export function HeaderNavigation({
  locale,
  label,
  labels,
  onNavigate,
  mobile = false,
}: HeaderNavigationProps) {
  const pathname = usePathname();
  const currentRoute = routeIdFromPathname(pathname);
  const [currentHash, setCurrentHash] = useState('');

  useEffect(() => {
    const updateHash = () => setCurrentHash(window.location.hash.replace(/^#/, ''));
    updateHash();
    window.addEventListener('hashchange', updateHash);
    return () => window.removeEventListener('hashchange', updateHash);
  }, []);

  const home = localizedPath('home', locale);

  return (
    <nav aria-label={label} className={mobile ? styles.drawerNavigation : styles.navigation}>
      <ul>
        {navigationIds.map((id) => (
          <li key={id}>
            <a
              href={`${home}#${id}`}
              aria-current={currentRoute === 'home' && currentHash === id ? 'location' : undefined}
              onClick={onNavigate}
            >
              {labels[id]}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
}
