towercontrol/components/ui/Header.tsx

'use client';

import { useTheme } from '@/contexts/ThemeContext';
import { useJiraConfig } from '@/contexts/JiraConfigContext';
import { usePathname } from 'next/navigation';
import Link from 'next/link';
import { useState } from 'react';

interface HeaderProps {
  title?: string;
  subtitle?: string;
  syncing?: boolean;
}

export function Header({ title = "TowerControl", subtitle = "Task Management", syncing = false }: HeaderProps) {
  const { theme, toggleTheme } = useTheme();
  const { isConfigured: isJiraConfigured, config: jiraConfig } = useJiraConfig();
  const pathname = usePathname();
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  // 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)]`;
  };

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

  return (
    <header className="relative z-50 bg-[var(--card)]/80 backdrop-blur-sm border-b border-[var(--border)]/50 shadow-lg shadow-[var(--card)]/20">
      <div className="container mx-auto px-4 sm:px-6 py-4">
        {/* Layout mobile/tablette */}
        <div className="lg:hidden">
          <div className="flex items-center justify-between">
            {/* Titre et status */}
            <div className="flex items-center gap-3 sm:gap-4 min-w-0 flex-1">
              <div className={`w-3 h-3 rounded-full shadow-lg flex-shrink-0 ${
                syncing 
                  ? 'bg-yellow-400 animate-spin shadow-yellow-400/50' 
                  : 'bg-cyan-400 animate-pulse shadow-cyan-400/50'
              }`}></div>
              <div className="min-w-0">
                <h1 className="text-xl sm:text-2xl font-mono font-bold text-[var(--foreground)] tracking-wider truncate">
                  {title}
                </h1>
                <p className="text-[var(--muted-foreground)] mt-1 font-mono text-xs sm:text-sm truncate">
                  {subtitle}
                </p>
              </div>
            </div>

            {/* Controls mobile/tablette */}
            <div className="flex items-center gap-2 flex-shrink-0">
              {/* Theme Toggle */}
              <button
                onClick={toggleTheme}
                className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors p-2 rounded-md hover:bg-[var(--card-hover)]"
                title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}
              >
                {theme === 'dark' ? (
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                  </svg>
                ) : (
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                  </svg>
                )}
              </button>

              {/* Menu burger */}
              <button
                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors p-2 rounded-md hover:bg-[var(--card-hover)]"
                title="Toggle menu"
              >
                {mobileMenuOpen ? (
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  </svg>
                ) : (
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
                  </svg>
                )}
              </button>
            </div>
          </div>
        </div>

        {/* Layout desktop - une seule ligne comme avant */}
        <div className="hidden lg:flex items-center justify-between gap-6">
          {/* Titre et status */}
          <div className="flex items-center gap-6">
            <div className="flex items-center gap-4 w-[300px]">
              <div className={`w-3 h-3 rounded-full shadow-lg ${
                syncing 
                  ? 'bg-yellow-400 animate-spin shadow-yellow-400/50' 
                  : 'bg-cyan-400 animate-pulse shadow-cyan-400/50'
              }`}></div>
              <div>
                <h1 className="text-2xl font-mono font-bold text-[var(--foreground)] tracking-wider">
                  {title}
                </h1>
                <p className="text-[var(--muted-foreground)] mt-1 font-mono text-sm">
                  {subtitle}
                </p>
              </div>
            </div>

            {/* Navigation desktop */}
            <nav className="flex items-center gap-2">
              {navLinks.map(({ href, label }) => (
                <Link
                  key={href}
                  href={href}
                  className={getLinkClasses(href)}
                >
                  {label}
                </Link>
              ))}
              
              {/* Theme Toggle desktop */}
              <button
                onClick={toggleTheme}
                className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors p-1 rounded-md hover:bg-[var(--card-hover)]"
                title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}
              >
                {theme === 'dark' ? (
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                  </svg>
                ) : (
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                  </svg>
                )}
              </button>
            </nav>
          </div>

        </div>

      </div>

      {/* Menu mobile/tablette en overlay fixe */}
      {mobileMenuOpen && (
        <>
          {/* Backdrop pour fermer le menu */}
          <div 
            className="lg:hidden fixed inset-0 bg-black/20 backdrop-blur-sm z-[100]"
            onClick={() => setMobileMenuOpen(false)}
          />
          {/* Menu */}
          <div className="lg:hidden fixed top-[80px] left-0 right-0 bg-[var(--card)]/98 backdrop-blur-md border-b border-[var(--border)]/50 shadow-xl z-[101]">
            <nav className="container mx-auto px-4 py-6">
              <div className="space-y-3">
                {navLinks.map(({ href, label }) => (
                  <Link
                    key={href}
                    href={href}
                    className={getMobileLinkClasses(href)}
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {label}
                  </Link>
                ))}
              </div>
            </nav>
          </div>
        </>
      )}
    </header>
  );
}