import { Search, Bell, Ticket, Loader2, Moon, Sun, StickyNote, Settings, User, LogOut, Key } from "lucide-react";
import { SidebarTrigger } from "@/Components/ui/sidebar";
import { useState, useEffect, useRef } from "react";
import { router, usePage, Link } from "@inertiajs/react";
import { NotesPanel } from "./NotesPanel";
import { SettingsModal } from "./SettingsModal";
import { UpdateProfileModal } from "./UpdateProfileModal";
import { UpdatePasswordModal } from "./UpdatePasswordModal";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/Components/ui/dropdown-menu";
import { Avatar, AvatarFallback, AvatarImage } from "@/Components/ui/avatar";

export function DashboardHeader() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState<any[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isOpen, setIsOpen] = useState(false);
  const [isDark, setIsDark] = useState(false);
  const [isNotesOpen, setIsNotesOpen] = useState(false);
  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
  const [isProfileOpen, setIsProfileOpen] = useState(false);
  const [isPasswordOpen, setIsPasswordOpen] = useState(false);
  const { auth } = usePage<any>().props;
  const isAdmin = auth?.user?.role === 'admin';
  const wrapperRef = useRef<HTMLDivElement>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    // Check if dark mode is enabled in HTML or prefer-color-scheme
    const isDarkSaved = localStorage.getItem("theme") === "dark" || 
      (!localStorage.getItem("theme") && document.documentElement.classList.contains("dark"));
    if (isDarkSaved) {
      document.documentElement.classList.add("dark");
      setIsDark(true);
    }
  }, []);

  const toggleTheme = () => {
    const newDark = !isDark;
    setIsDark(newDark);
    if (newDark) {
      document.documentElement.classList.add("dark");
      localStorage.setItem("theme", "dark");
    } else {
      document.documentElement.classList.remove("dark");
      localStorage.setItem("theme", "light");
    }
  };

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  useEffect(() => {
    if (!query.trim()) {
      setResults([]);
      setIsOpen(false);
      return;
    }

    const delayDebounceFn = setTimeout(() => {
      setIsLoading(true);
      fetch(`/api/search?q=${encodeURIComponent(query)}`)
        .then(res => res.json())
        .then(data => {
          setResults(data);
          setIsOpen(true);
        })
        .finally(() => setIsLoading(false));
    }, 300);

    return () => clearTimeout(delayDebounceFn);
  }, [query]);

  const handleSelect = (drawSlug: string) => {
    setIsOpen(false);
    setQuery("");
    router.visit(`/tirages/${drawSlug}`);
  };

  return (
    <header className="sticky top-0 z-10 border-b border-border bg-background/80 backdrop-blur-xl">
      {/* Sidebar Trigger placed exactly on the border between sidebar and content */}
      <div className="absolute left-0 top-1/2 -translate-x-1/2 -translate-y-1/2 z-20 hidden md:block">
        <SidebarTrigger className="h-8 w-8 rounded-full border border-border bg-background shadow-md hover:bg-muted" />
      </div>

      <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-4 sm:px-6">
        <div className="flex items-center gap-3">
          <div className="md:hidden">
            <SidebarTrigger className="h-9 w-9 shrink-0" />
          </div>
        </div>

        <div className="relative hidden flex-1 md:block md:max-w-sm" ref={wrapperRef}>
          <div className="flex items-center gap-2 rounded-xl border border-border bg-card px-3 py-2">
            <Search className="h-4 w-4 text-muted-foreground" />
            <input
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              onFocus={() => {
                if (query.trim() && results.length > 0) setIsOpen(true);
              }}
              placeholder="Rechercher un tirage, un numéro…"
              className="w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"
            />
            {isLoading && <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />}
          </div>

          {isOpen && (
            <div className="absolute top-full mt-2 w-full overflow-hidden rounded-xl border border-border bg-card shadow-lg">
              {results.length > 0 ? (
                <ul className="max-h-80 overflow-y-auto py-2">
                  {results.map((draw) => (
                    <li 
                      key={draw.id} 
                      onClick={() => handleSelect(draw.slug || draw.id)}
                      className="cursor-pointer px-4 py-2 hover:bg-muted"
                    >
                      <div className="flex items-center justify-between">
                        <span className="font-semibold text-primary">{draw.name}</span>
                      </div>
                      <div className="mt-1 flex gap-1 text-xs font-medium">
                        {Array.isArray(draw.winning_numbers) 
                          ? draw.winning_numbers.join(' - ') 
                          : typeof draw.winning_numbers === 'string'
                            ? JSON.parse(draw.winning_numbers).join(' - ')
                            : 'N/A'}
                      </div>
                    </li>
                  ))}
                </ul>
              ) : (
                <div className="px-4 py-3 text-sm text-muted-foreground">
                  Aucun résultat trouvé.
                </div>
              )}
            </div>
          )}
        </div>

        <div className="flex items-center gap-3">
          <button 
            onClick={toggleTheme}
            className="flex h-10 w-10 items-center justify-center rounded-xl border border-border bg-card text-foreground transition-colors hover:bg-muted"
            title="Basculer le thème"
          >
            {isDark ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
          </button>
          
          <button 
            className="flex h-10 w-10 items-center justify-center rounded-xl border border-border bg-card text-foreground transition-colors hover:bg-muted"
            onClick={() => setIsNotesOpen(true)}
            title="Notes autocollantes"
          >
            <StickyNote className="h-5 w-5" />
          </button>

          <button className="relative flex h-10 w-10 items-center justify-center rounded-xl border border-border bg-card text-foreground transition-colors hover:bg-muted">
            <Bell className="h-5 w-5" />
            <span className="absolute right-2.5 top-2.5 h-2 w-2 rounded-full bg-primary" />
          </button>
          
          {auth?.user ? (
            <div className="flex items-center gap-2">
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <button className="flex items-center gap-2.5 rounded-full border border-border/50 bg-card/50 py-1.5 pl-1.5 pr-4 transition-colors hover:bg-muted outline-none">
                    <Avatar className="h-8 w-8 rounded-full">
                      <AvatarImage src={auth?.user?.avatar} alt={auth?.user?.name} />
                      <AvatarFallback className="rounded-full bg-[#10b981] text-white text-sm font-bold">
                        {auth?.user?.name?.substring(0, 2).toUpperCase() || 'KA'}
                      </AvatarFallback>
                    </Avatar>
                    <span className="hidden text-sm font-medium sm:block">{auth?.user?.name || 'Admin'}</span>
                  </button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="w-72 rounded-xl p-0 overflow-hidden shadow-lg border-border">
                  <div className="flex items-center gap-4 p-4 bg-muted/20">
                    <Avatar className="h-14 w-14 rounded-lg shadow-sm">
                      <AvatarImage src={auth?.user?.avatar} alt={auth?.user?.name} />
                      <AvatarFallback className="rounded-lg gradient-green text-lg font-bold text-secondary-foreground">
                        {auth?.user?.name?.substring(0, 2).toUpperCase() || 'AD'}
                      </AvatarFallback>
                    </Avatar>
                    <div className="flex flex-col items-start text-left">
                      <p className="text-sm font-medium leading-none text-foreground">{auth?.user?.name}</p>
                      <p className="text-xs text-muted-foreground mt-1 mb-2">{auth?.user?.email}</p>
                      <input 
                        type="file" 
                        accept="image/*" 
                        className="hidden" 
                        ref={fileInputRef} 
                        onChange={(e) => {
                          if (e.target.files && e.target.files[0]) {
                            const formData = new FormData();
                            formData.append('avatar', e.target.files[0]);
                            router.post('/profile/avatar', formData, { preserveScroll: true });
                          }
                        }} 
                      />
                      <button 
                        onClick={() => fileInputRef.current?.click()}
                        className="text-xs rounded-full bg-red-500 text-white px-3 py-1 hover:bg-red-600 transition-colors shadow-sm font-medium"
                      >
                        Mettre à jour l'avatar
                      </button>
                    </div>
                  </div>
                  <DropdownMenuSeparator className="m-0" />
                  <div className="p-1">
                    <DropdownMenuItem onClick={() => setIsProfileOpen(true)} className="cursor-pointer py-2.5 rounded-lg text-sm text-foreground/80 focus:bg-muted focus:text-foreground">
                      <User className="mr-2 h-4 w-4" />
                      <span>Mettre à jour mon profil</span>
                    </DropdownMenuItem>
                    <DropdownMenuItem onClick={() => setIsPasswordOpen(true)} className="cursor-pointer py-2.5 rounded-lg text-sm text-foreground/80 focus:bg-muted focus:text-foreground">
                      <Key className="mr-2 h-4 w-4" />
                      <span>Mettre à jour le mot de passe</span>
                    </DropdownMenuItem>
                  </div>
                  <DropdownMenuSeparator className="m-0" />
                  <div className="p-1">
                    <DropdownMenuItem onClick={() => router.post('/logout')} className="cursor-pointer py-2.5 rounded-lg text-sm text-red-500 focus:bg-red-50 focus:text-red-600">
                      <LogOut className="mr-2 h-4 w-4" />
                      <span>Déconnexion</span>
                    </DropdownMenuItem>
                  </div>
                </DropdownMenuContent>
              </DropdownMenu>

              <button 
                className="flex h-10 w-10 items-center justify-center rounded-xl border border-border bg-card text-foreground transition-colors hover:bg-muted"
                onClick={() => setIsSettingsOpen(true)}
                title="Paramètres"
              >
                <Settings className="h-5 w-5" />
              </button>
            </div>
          ) : (
            <Link 
              href="/login"
              className="flex h-10 px-4 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-[var(--shadow-glow)] hover:opacity-90 transition-opacity text-sm font-semibold"
            >
              Connexion
            </Link>
          )}
        </div>
      </div>
      <NotesPanel isOpen={isNotesOpen} onClose={() => setIsNotesOpen(false)} />
      <SettingsModal isOpen={isSettingsOpen} onClose={() => setIsSettingsOpen(false)} />
      <UpdateProfileModal isOpen={isProfileOpen} onClose={() => setIsProfileOpen(false)} user={auth?.user} />
      <UpdatePasswordModal isOpen={isPasswordOpen} onClose={() => setIsPasswordOpen(false)} />
    </header>
  );
}