'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';
import { Theme, THEME_CONFIG, getThemeIcon } from '@/lib/ui-config';
import { useKeyboardShortcutsModal } from '@/contexts/KeyboardShortcutsContext';
import { AuthButton } from '@/components/AuthButton';
import { useSession, signOut } from 'next-auth/react';

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

export function Header({ title = "TowerControl", subtitle = "Task Management", syncing = false }: HeaderProps) {
  const { theme, setTheme } = useTheme();
  const { isConfigured: isJiraConfigured, config: jiraConfig } = useJiraConfig();
  const pathname = usePathname();
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [themeDropdownOpen, setThemeDropdownOpen] = useState(false);
  const { openModal: openShortcutsModal } = useKeyboardShortcutsModal();
  const { data: session } = useSession();

  // Liste des thèmes disponibles avec leurs labels et icônes
  const themes: { value: Theme; label: string; icon: string }[] = THEME_CONFIG.allThemes.map(themeValue => {
    return {
      value: themeValue,
      label: themeValue.charAt(0).toUpperCase() + themeValue.slice(1).replace('_', ' '),
      icon: getThemeIcon(themeValue)
    };
  });

  // 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-manager', label: 'Weekly' },
    ...(isJiraConfigured ? [{ href: '/jira-dashboard', label: `Jira${jiraConfig?.projectKey ? ` (${jiraConfig.projectKey})` : ''}` }] : []),
    { href: '/settings', label: 'Settings' }
  ];

  return (
    <header className="relative z-50 bg-[var(--card)]/80 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">
              {/* Keyboard Shortcuts */}
              <button
                onClick={openShortcutsModal}
                className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors p-2 rounded-md hover:bg-[var(--card-hover)]"
                title="Raccourcis clavier (Cmd+?)"
              >
                ⌨️
              </button>
              
              {/* Theme Dropdown */}
              <div className="relative">
                <button
                  onClick={() => setThemeDropdownOpen(!themeDropdownOpen)}
                  className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors p-2 rounded-md hover:bg-[var(--card-hover)]"
                  title="Select theme"
                >
                  {themes.find(t => t.value === theme)?.icon || '🎨'}
                </button>
                
                {themeDropdownOpen && (
                  <>
                    {/* Backdrop */}
                    <div 
                      className="fixed inset-0 z-[200]"
                      onClick={() => setThemeDropdownOpen(false)}
                    />
                    {/* Dropdown */}
                    <div className="absolute right-0 top-full mt-2 w-48 bg-[var(--card)] border border-[var(--border)] rounded-lg shadow-lg z-[201] overflow-hidden">
                      <div className="py-2">
                        {themes.map((themeOption) => (
                          <button
                            key={themeOption.value}
                            onClick={() => {
                              setTheme(themeOption.value);
                              setThemeDropdownOpen(false);
                            }}
                            className={`w-full text-left px-4 py-2 text-sm transition-colors flex items-center gap-3 ${
                              theme === themeOption.value
                                ? 'text-[var(--primary)] bg-[var(--primary)]/10'
                                : 'text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:bg-[var(--card-hover)]'
                            }`}
                          >
                            <span className="text-base">{themeOption.icon}</span>
                            <span className="font-mono">{themeOption.label}</span>
                            {theme === themeOption.value && (
                              <svg className="w-4 h-4 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                              </svg>
                            )}
                          </button>
                        ))}
                      </div>
                    </div>
                  </>
                )}
              </div>

              {/* 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>

          {/* Auth controls à droite mobile */}
          <div className="flex items-center gap-1">
            <AuthButton />
          </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>
              ))}
              
              {/* Keyboard Shortcuts desktop */}
              <button
                onClick={openShortcutsModal}
                className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors p-1 rounded-md hover:bg-[var(--card-hover)]"
                title="Raccourcis clavier (Cmd+?)"
              >
                ⌨️
              </button>
              
              {/* Theme Dropdown desktop */}
              <div className="relative">
                <button
                  onClick={() => setThemeDropdownOpen(!themeDropdownOpen)}
                  className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors p-1 rounded-md hover:bg-[var(--card-hover)]"
                  title="Select theme"
                >
                  {themes.find(t => t.value === theme)?.icon || '🎨'}
                </button>
                
                {themeDropdownOpen && (
                  <>
                    {/* Backdrop */}
                    <div 
                      className="fixed inset-0 z-[200]"
                      onClick={() => setThemeDropdownOpen(false)}
                    />
                    {/* Dropdown */}
                    <div className="absolute right-0 top-full mt-2 w-48 bg-[var(--card)] border border-[var(--border)] rounded-lg shadow-lg z-[201] overflow-hidden">
                      <div className="py-2">
                        {themes.map((themeOption) => (
                          <button
                            key={themeOption.value}
                            onClick={() => {
                              setTheme(themeOption.value);
                              setThemeDropdownOpen(false);
                            }}
                            className={`w-full text-left px-4 py-2 text-sm transition-colors flex items-center gap-3 ${
                              theme === themeOption.value
                                ? 'text-[var(--primary)] bg-[var(--primary)]/10'
                                : 'text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:bg-[var(--card-hover)]'
                            }`}
                          >
                            <span className="text-base">{themeOption.icon}</span>
                            <span className="font-mono">{themeOption.label}</span>
                            {theme === themeOption.value && (
                              <svg className="w-4 h-4 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                              </svg>
                            )}
                          </button>
                        ))}
                      </div>
                    </div>
                  </>
                )}
              </div>

            </nav>
          </div>

          {/* Contrôles à droite */}
          <div className="flex items-center gap-2">
            <AuthButton />
          </div>

        </div>

      </div>

      {/* Menu mobile/tablette en modal */}
      {mobileMenuOpen && (
        <div className="lg:hidden fixed inset-0 z-[9999] flex items-start justify-center pt-20">
          {/* Backdrop */}
          <div 
            className="absolute inset-0 bg-black/50"
            onClick={() => setMobileMenuOpen(false)}
          />
          
          {/* Modal content */}
          <div className="relative bg-[var(--card)] border border-[var(--border)] rounded-lg shadow-xl mx-4 w-full max-w-sm">
            <nav className="p-6">
              <div className="space-y-3">
                {navLinks.map(({ href, label }) => (
                  <Link
                    key={href}
                    href={href}
                    className={getMobileLinkClasses(href)}
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {label}
                  </Link>
                ))}
                
                {/* Séparateur */}
                {session && (
                  <>
                    <div className="border-t border-[var(--border)]/30 my-4"></div>
                    
                    {/* Lien profil */}
                    <Link
                      href="/profile"
                      className={getMobileLinkClasses('/profile')}
                      onClick={() => setMobileMenuOpen(false)}
                    >
                      👤 Profil
                    </Link>
                    
                    {/* Bouton déconnexion */}
                    <button
                      onClick={() => {
                        signOut({ callbackUrl: '/login' });
                        setMobileMenuOpen(false);
                      }}
                      className="font-mono text-sm uppercase tracking-wider transition-colors px-4 py-3 rounded-md block w-full text-left text-[var(--destructive)] hover:text-[var(--destructive)] hover:bg-[var(--destructive)]/10"
                    >
                      🚪 Déconnexion
                    </button>
                  </>
                )}
              </div>
            </nav>
          </div>
        </div>
      )}
    </header>
  );
}