import React, { useEffect } from 'react';
import { usePage } from '@inertiajs/react';
import { Link, router } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import i18n from '@/i18n';
import { useAppearance } from '@/hooks/use-appearance';
import { Button } from '@/components/ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, navigationMenuTriggerStyle } from '@/components/ui/navigation-menu';
import { Sun, Moon } from 'lucide-react';
import { cn } from '@/lib/utils';
import { marketing as marketingRoute, packages as packagesRoute, blog as blogRoute, kontakt as kontaktRoute, login as loginRoute, register as registerRoute, anlaesseType } from '@/routes';

const Header: React.FC = () => {
  useEffect(() => {
    console.log('Header mounted - Inertia initialized?', typeof window.Inertia !== 'undefined' ? 'Yes' : 'No');
    console.log('Inertia links on page:', document.querySelectorAll('a[data-inertia]').length);
  }, []);
  const { auth, locale } = usePage().props as any;
  const { t } = useTranslation('auth');
  const { appearance, updateAppearance } = useAppearance();

  const toggleTheme = () => {
    const newAppearance = appearance === 'dark' ? 'light' : 'dark';
    updateAppearance(newAppearance);
  };

  const handleLanguageChange = (value: string) => {
    router.post(
      '/set-locale',
      { locale: value },
      {
        preserveState: true,
        replace: true,
        onSuccess: () => {
          i18n.changeLanguage(value);
        },
      },
    );
  };

  const handleLogout = () => {
    router.post('/logout');
  };

  const occasionUrl = (typeKey: 'hochzeit' | 'geburtstag' | 'firmenevent') =>
    `/anlaesse/${typeKey}`;

  return (
    <header className="fixed top-0 z-50 w-full bg-white/95 dark:bg-gray-900/95 backdrop-blur-md shadow-lg border-b border-gray-200/50 dark:border-gray-700/50">
      <div className="container mx-auto px-4 py-3">
        <div className="flex justify-between items-center">
          <Link
            href={marketingRoute().url}
            className="text-2xl font-bold text-gray-800 dark:text-gray-200 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200"
          >
            Fotospiel
          </Link>
          <NavigationMenu className="hidden md:flex">
            <NavigationMenuList className="space-x-1">
              <NavigationMenuItem>
                <NavigationMenuLink href={marketingRoute().url} className={cn(
                  navigationMenuTriggerStyle(),
                  "text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg bg-transparent hover:bg-pink-50 dark:hover:bg-pink-900/20 rounded-md px-3 py-2 transition-all duration-200"
                )}>
                  {t('header.home', 'Home')}
                </NavigationMenuLink>
              </NavigationMenuItem>
              <NavigationMenuItem>
                <NavigationMenuLink href={packagesRoute().url} className={cn(
                  navigationMenuTriggerStyle(),
                  "text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg bg-transparent hover:bg-pink-50 dark:hover:bg-pink-900/20 rounded-md px-3 py-2 transition-all duration-200"
                )}>
                  {t('header.packages', 'Pakete')}
                </NavigationMenuLink>
              </NavigationMenuItem>
              <NavigationMenuItem>
                <NavigationMenuLink href={blogRoute().url} className={cn(
                  navigationMenuTriggerStyle(),
                  "text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg bg-transparent hover:bg-pink-50 dark:hover:bg-pink-900/20 rounded-md px-3 py-2 transition-all duration-200"
                )}>
                  {t('header.blog', 'Blog')}
                </NavigationMenuLink>
              </NavigationMenuItem>
              <NavigationMenuItem>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg bg-transparent hover:bg-pink-50 dark:hover:bg-pink-900/20 rounded-md px-3 py-2 transition-all duration-200">
                      Anlässe
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent className="w-56 bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 shadow-lg rounded-xl">
                    <DropdownMenuItem asChild>
                      <Link href={occasionUrl('hochzeit')} className="w-full hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200">
                        {t('header.occasions.wedding', 'Hochzeit')}
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuItem asChild>
                      <Link href={occasionUrl('geburtstag')} className="w-full hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200">
                        {t('header.occasions.birthday', 'Geburtstag')}
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuItem asChild>
                      <Link href={occasionUrl('firmenevent')} className="w-full hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200">
                        {t('header.occasions.corporate', 'Firmenevent')}
                      </Link>
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </NavigationMenuItem>
              <NavigationMenuItem>
                <NavigationMenuLink href={kontaktRoute().url} className={cn(
                  navigationMenuTriggerStyle(),
                  "text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg bg-transparent hover:bg-pink-50 dark:hover:bg-pink-900/20 rounded-md px-3 py-2 transition-all duration-200"
                )}>
                  {t('header.contact', 'Kontakt')}
                </NavigationMenuLink>
              </NavigationMenuItem>
            </NavigationMenuList>
          </NavigationMenu>
          <div className="flex items-center space-x-4">
            <Button
              variant="ghost"
              size="icon"
              onClick={toggleTheme}
              className="h-8 w-8 hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200"
            >
              <Sun className={cn("h-4 w-4", appearance === "dark" && "hidden")} />
              <Moon className={cn("h-4 w-4", appearance !== "dark" && "hidden")} />
              <span className="sr-only">Theme Toggle</span>
            </Button>
            <Select value={locale} onValueChange={handleLanguageChange}>
              <SelectTrigger className="w-[70px] h-8 border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:bg-pink-50 dark:hover:bg-pink-900/20">
                <SelectValue placeholder="DE" />
              </SelectTrigger>
              <SelectContent className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
                <SelectItem value="de">DE</SelectItem>
                <SelectItem value="en">EN</SelectItem>
              </SelectContent>
            </Select>
            {auth.user ? (
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" className="relative h-8 w-8 rounded-full hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200">
                    <Avatar className="h-8 w-8">
                      <AvatarImage src={auth.user?.avatar} alt={auth.user?.name || 'User'} />
                      <AvatarFallback className="bg-pink-100 dark:bg-pink-900 text-pink-600 dark:text-pink-400">{(auth.user?.name || auth.user?.email || 'U').charAt(0)}</AvatarFallback>
                    </Avatar>
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent className="w-56 bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 shadow-lg rounded-xl" align="end" forceMount>
                  <DropdownMenuLabel className="font-normal">
                    <div className="flex flex-col space-y-1">
                      <p className="text-sm font-medium leading-none text-gray-900 dark:text-gray-100">{auth.user?.name || auth.user?.email || 'User'}</p>
                      <p className="text-xs leading-none text-gray-500 dark:text-gray-400">{auth.user?.email || ''}</p>
                    </div>
                  </DropdownMenuLabel>
                  <DropdownMenuSeparator className="bg-gray-200 dark:bg-gray-700" />
                  <DropdownMenuItem asChild>
                    <Link href="/profile" className="hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200">
                      Profil
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem asChild>
                    <Link href="/profile/orders" className="hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200">
                      Bestellungen
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuSeparator className="bg-gray-200 dark:bg-gray-700" />
                  <DropdownMenuItem onClick={handleLogout} className="hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200">
                    Abmelden
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            ) : (
              <>
                <Link
                  href={loginRoute().url}
                  className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white hover:bg-pink-50 dark:hover:bg-pink-900/20 px-3 py-2 rounded-md transition-all duration-200"
                >
                  {t('header.login')}
                </Link>
                <Link
                  href={registerRoute().url}
                  className="bg-pink-500 hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700 text-white px-4 py-2 rounded-md transition-all duration-200 shadow-md hover:shadow-lg"
                >
                  {t('header.register')}
                </Link>
              </>
            )}
          </div>
        </div>
      </div>
    </header>
  );
};

export default Header;