'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useUserPreferences } from '@/contexts/UserPreferencesContext';

interface HeaderNavigationProps {
  variant: 'desktop' | 'mobile';
  className?: string;
  onLinkClick?: () => void;
}

export function HeaderNavigation({
  variant,
  className = '',
  onLinkClick,
}: HeaderNavigationProps) {
  const { preferences } = useUserPreferences();
  const pathname = usePathname();

  // Vérifier si Jira est configuré depuis les préférences utilisateur
  const isJiraConfigured = Boolean(
    preferences.jiraConfig?.enabled &&
      preferences.jiraConfig?.baseUrl &&
      preferences.jiraConfig?.email &&
      preferences.jiraConfig?.apiToken &&
      preferences.jiraConfig?.projectKey
  );

  // Liste des liens de navigation
  const navLinks = [
    { href: '/', label: 'Dashboard' },
    { href: '/kanban', label: 'Kanban' },
    { href: '/daily', label: 'Daily' },
    { href: '/weekly-manager', label: 'Weekly' },
    { href: '/notes', label: 'Notes' },
    ...(isJiraConfigured
      ? [
          {
            href: '/jira-dashboard',
            label: `Jira${preferences.jiraConfig?.projectKey ? ` (${preferences.jiraConfig.projectKey})` : ''}`,
          },
        ]
      : []),
    { href: '/settings', label: 'Settings' },
  ];

  // Fonction pour déterminer si un lien est actif
  const isActiveLink = (href: string) => {
    if (href === '/') {
      return pathname === '/';
    }
    return pathname.startsWith(href);
  };

  // Fonction pour obtenir les classes CSS d'un lien (desktop)
  const getLinkClasses = (href: string) => {
    const baseClasses =
      'font-mono text-sm uppercase tracking-wider transition-colors px-3 py-1.5 rounded-md';

    if (isActiveLink(href)) {
      return `${baseClasses} text-[var(--primary)] bg-[var(--primary)]/10 border border-[var(--primary)]/30`;
    }

    return `${baseClasses} text-[var(--muted-foreground)] hover:text-[var(--primary)] hover:bg-[var(--card-hover)]`;
  };

  // Fonction pour obtenir les classes CSS d'un lien (mobile)
  const getMobileLinkClasses = (href: string) => {
    const baseClasses =
      'font-mono text-sm uppercase tracking-wider transition-colors px-4 py-3 rounded-md block w-full text-left';

    if (isActiveLink(href)) {
      return `${baseClasses} text-[var(--primary)] bg-[var(--primary)]/10 border border-[var(--primary)]/30`;
    }

    return `${baseClasses} text-[var(--muted-foreground)] hover:text-[var(--primary)] hover:bg-[var(--card-hover)]`;
  };

  if (variant === 'mobile') {
    return (
      <nav className={`space-y-3 ${className}`}>
        {navLinks.map(({ href, label }) => (
          <Link
            key={href}
            href={href}
            className={getMobileLinkClasses(href)}
            onClick={onLinkClick}
          >
            {label}
          </Link>
        ))}
      </nav>
    );
  }

  // Desktop version
  return (
    <nav className={`flex items-center gap-1 xl:gap-2 flex-wrap ${className}`}>
      {navLinks.slice(0, 5).map(({ href, label }) => (
        <Link
          key={href}
          href={href}
          className={`${getLinkClasses(href)} text-xs xl:text-sm`}
        >
          {label}
        </Link>
      ))}

      {/* Plus d'éléments sur très grands écrans */}
      <div className="hidden xl:flex items-center gap-1">
        {navLinks.slice(5).map(({ href, label }) => (
          <Link key={href} href={href} className={getLinkClasses(href)}>
            {label}
          </Link>
        ))}
      </div>
    </nav>
  );
}
