import { Link, useLocation } from "react-router-dom";
import { useTranslation } from "react-i18next";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { Menu } from "lucide-react";
import { cn } from "@/lib/utils";
import soulsAtWorkLogo from "@/assets/saw-logo-white-transparent.png";
import { LanguageSwitcher } from "./LanguageSwitcher";

export const Navigation = () => {
  const location = useLocation();
  const { t, i18n } = useTranslation('navigation');
  const isDanish = i18n.language?.startsWith('da');

  const eventsItems = [
    { name: isDanish ? "Masterclass i Hybrid ledelse for ledere" : "Hybrid Leadership Masterclass for leaders", href: "/hybrid-leadership" },
    { name: isDanish ? "Hybrid ledelse for teams" : "Hybrid Leadership for teams", href: "/remote-leadership" },
  ];

  const navigationItems = [
    { name: t('home'), href: "/" },
    { name: t('about'), href: "/about" },
    { name: t('focusAreas'), href: "/focus-areas" },
    { name: t('services'), href: "/services" },
    { name: t('insights'), href: "/blog" },
    { name: t('contact'), href: "/contact" },
  ];

  const isEventsActive = eventsItems.some((i) => location.pathname === i.href);

  return (
    <header className="sticky top-0 z-50 w-full border-b bg-[#3B6D11] backdrop-blur supports-[backdrop-filter]:bg-[#3B6D11]/95">
      <div className="container flex h-24 items-center justify-between">
        <Link to="/" className="flex items-center -ml-8" onClick={() => window.scrollTo(0, 0)}>
          <img 
            src={soulsAtWorkLogo} 
            alt="Souls at Work" 
            className="h-32 w-auto"
            style={{ aspectRatio: '4/1' }}
          />
        </Link>
        
        <div className="hidden md:flex items-center space-x-4">
          <NavigationMenu>
            <NavigationMenuList>
              {navigationItems.map((item) => (
                <NavigationMenuItem key={item.name}>
                  <NavigationMenuLink asChild>
                    <Link 
                      to={item.href}
                      className={cn(
                        navigationMenuTriggerStyle(),
                        "text-white bg-[#3B6D11] hover:text-white hover:bg-white/20",
                        location.pathname === item.href && "bg-white/30 text-white"
                      )}
                      onClick={() => window.scrollTo(0, 0)}
                    >
                      {item.name}
                    </Link>
                  </NavigationMenuLink>
                </NavigationMenuItem>
              ))}
            </NavigationMenuList>
          </NavigationMenu>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <button
                className={cn(
                  navigationMenuTriggerStyle(),
                  "text-white bg-[#3B6D11] hover:text-white hover:bg-white/20 data-[state=open]:bg-white/20",
                  isEventsActive && "bg-white/30 text-white"
                )}
              >
                Workshops
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent
              align="start"
              sideOffset={8}
              className="w-64 bg-white border border-gray-200 shadow-lg"
            >
              {eventsItems.map((item) => (
                <DropdownMenuItem key={item.href} asChild>
                  <Link
                    to={item.href}
                    onClick={() => window.scrollTo(0, 0)}
                    className={cn(
                      "w-full px-3 py-2 text-sm hover:bg-gray-100 cursor-pointer",
                      location.pathname === item.href && "bg-gray-100 font-medium"
                    )}
                  >
                    {item.name}
                  </Link>
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>
          <LanguageSwitcher />
        </div>

        {/* Mobile menu */}
        <div className="md:hidden flex items-center space-x-2">
          <LanguageSwitcher />
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button 
                variant="ghost" 
                size="icon" 
                className="text-white hover:bg-white/20"
              >
                <Menu className="h-6 w-6" />
                <span className="sr-only">Open menu</span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent 
              align="start" 
              className="w-56 bg-white border border-gray-200 shadow-lg"
            >
              {navigationItems.map((item) => (
                <DropdownMenuItem key={item.name} asChild>
                  <Link 
                    to={item.href} 
                    className={cn(
                      "w-full px-4 py-2 text-left hover:bg-gray-100",
                      location.pathname === item.href && "bg-gray-100 font-medium"
                    )}
                    onClick={() => window.scrollTo(0, 0)}
                  >
                    {item.name}
                  </Link>
                </DropdownMenuItem>
              ))}
              <div className="px-4 pt-3 pb-1 text-xs font-semibold uppercase text-muted-foreground">
                Workshops
              </div>
              {eventsItems.map((item) => (
                <DropdownMenuItem key={item.href} asChild>
                  <Link
                    to={item.href}
                    className={cn(
                      "w-full px-4 py-2 text-left hover:bg-gray-100",
                      location.pathname === item.href && "bg-gray-100 font-medium"
                    )}
                    onClick={() => window.scrollTo(0, 0)}
                  >
                    {item.name}
                  </Link>
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
    </header>
  );
};