
import React, { useState } from 'react';
import { Menu, Bell, Search, User, ChevronDown, Briefcase, Calculator, Sun, Moon } from 'lucide-react';
import { cn } from '@/lib/utils';
import { 
  DropdownMenu, 
  DropdownMenuContent, 
  DropdownMenuItem, 
  DropdownMenuLabel, 
  DropdownMenuSeparator, 
  DropdownMenuTrigger 
} from '@/components/ui/dropdown-menu';
import { useModule, MODULE_GESTION, MODULE_COMPTABILITE } from '@/context/ModuleContext';
import Cookies from 'js-cookie';
import { ACCESS_TOKEN, REFRESH_TOKEN } from '@/lib/data';
import { useNavigate } from 'react-router-dom';
import { useAppDispatch, useAppSelector } from '@/store/hooks';
import { resetApp } from '@/store/resetAction';
import { useTheme } from '@/contexts/ThemeContext';
import { getuserConnected } from '@/store/features/user/selectors';
import NotificationCenter from './NotificationCenter';

const PremiumHeader = ({ onMenuClick, onAnnouncementsClick }) => {
  const { currentModule, changeModule } = useModule();
  const [showNotifications, setShowNotifications] = useState(false);
  const navigate = useNavigate();
  const userConnected = useAppSelector(getuserConnected);
  
  const { isDark, toggleTheme } = useTheme();
  const dispatch = useAppDispatch()
  
  const handleLogout = () => {
    Cookies.remove(ACCESS_TOKEN);
    Cookies.remove(REFRESH_TOKEN);

    dispatch(resetApp()); 

    navigate('/login')
  };

  
  return (
    <header className="h-16 bg-white dark:bg-gray-950 border-b border-gray-200 dark:border-gray-800 px-4 lg:px-6 flex items-center justify-between sticky top-0 z-40 transition-colors duration-200">
      
      {/* Left: Menu & Mobile Toggle */}
      <div className="flex items-center gap-4">
        <button 
          onClick={onMenuClick}
          className="lg:hidden p-2 -ml-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg text-gray-600 dark:text-gray-300"
        >
          <Menu className="w-5 h-5" />
        </button>

        {/* Module Switcher (Gesco / Compta) - Now primary element on left */}
        <div className="flex bg-gray-100 dark:bg-gray-900 p-1 rounded-lg border border-gray-200 dark:border-gray-800">
          <button
            onClick={() => changeModule(MODULE_GESTION)}
            className={cn(
              "flex items-center gap-2 px-3 py-1.5 rounded-md text-xs font-bold transition-all duration-200",
              currentModule === MODULE_GESTION
                ? "bg-white dark:bg-gray-800 text-[#2A6F4F] shadow-sm ring-1 ring-gray-200 dark:ring-gray-700"
                : "text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
            )}
          >
            <Briefcase className="w-3.5 h-3.5" />
            <span className="hidden md:inline">Gesco</span>
          </button>
          <button
            onClick={() => changeModule(MODULE_COMPTABILITE)}
            className={cn(
              "flex items-center gap-2 px-3 py-1.5 rounded-md text-xs font-bold transition-all duration-200",
              currentModule === MODULE_COMPTABILITE
                ? "bg-white dark:bg-gray-800 text-[#2A6F4F] shadow-sm ring-1 ring-gray-200 dark:ring-gray-700"
                : "text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
            )}
          >
            <Calculator className="w-3.5 h-3.5" />
            <span className="hidden md:inline">Compta</span>
          </button>
        </div>
      </div>

      {/* Right: Actions & Search */}
      <div className="flex items-center gap-2 sm:gap-4">
        
        {/* Search */}
        {/* <div className="hidden md:flex relative group">
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 group-focus-within:text-[#2A6F4F] transition-colors" />
           <input 
             type="text" 
             placeholder="Rechercher..." 
             className="h-9 w-48 lg:w-64 bg-gray-50 dark:bg-gray-900 border-none rounded-full pl-9 pr-4 text-sm focus:ring-2 focus:ring-[#2A6F4F]/20 focus:bg-white dark:focus:bg-gray-800 transition-all outline-none"
           />
        </div> */}

        {/* Announcements Trigger */}
        <button
            onClick={toggleTheme}
            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-colors"
            title={isDark ? "Mode clair" : "Mode sombre"}
          >
            {isDark ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
          </button>
        <button 
           onClick={() => setShowNotifications(!showNotifications)}
          className={`relative p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition-colors text-gray-500 hover:text-[#2A6F4F] ${showNotifications && "bg-[#2a6f4f43]"}`}
          title="Nouveautés & Évolutions"
        >
          <Bell className="w-5 h-5" />
          <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-green-800 rounded-full border-2 border-white dark:border-gray-950"></span>
           {showNotifications && (
              <NotificationCenter onClose={() => setShowNotifications(false)} />
            )}
        </button>

        <div className="h-6 w-px bg-gray-200 dark:bg-gray-800 hidden md:block" />

        {/* User Menu */}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <button className="flex items-center gap-2 p-1 pl-2 hover:bg-gray-50 dark:hover:bg-gray-900 rounded-full border border-transparent hover:border-gray-200 dark:hover:border-gray-800 transition-all">
              <div className="text-right hidden sm:block">
                <p className="text-sm font-bold text-gray-900 dark:text-white leading-none">{userConnected ? userConnected.prenom + " " +userConnected.nom : "User"}</p>
                <p className="text-[10px] text-gray-500 dark:text-gray-400 leading-none mt-1">{userConnected ? userConnected.role : "Adminisateur"}</p>
              </div>
              <div className="w-8 h-8 rounded-full bg-[#2A6F4F] flex items-center justify-center text-white shadow-md shadow-[#2A6F4F]/20">
                <User className="w-4 h-4" />
              </div>
              <ChevronDown className="w-3 h-3 text-gray-400 mr-1" />
            </button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-56">
            <DropdownMenuLabel>Mon Compte</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem>Profil</DropdownMenuItem>
            <DropdownMenuItem>Paramètres</DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem className="text-red-600" onClick={handleLogout}>Déconnexion</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </header>
  );
};

export default PremiumHeader;
