'use client';

import { usePathname } from 'next/navigation';
import Link from 'next/link';
import {
  LayoutDashboard,
  Boxes,
  ShoppingCart,
  UtensilsCrossed,
  Sparkles,
  Settings,
  Heart,
  LogOut,
} from 'lucide-react';
import { toast } from 'sonner';

export function Navbar() {
  const pathname = usePathname();

  const navLinks = [
    { href: '/dashboard', label: 'Übersicht', icon: LayoutDashboard },
    { href: '/inventory', label: 'Vorrat', icon: Boxes },
    { href: '/shopping', label: 'Einkauf', icon: ShoppingCart },
    { href: '/recipes', label: 'Rezepte', icon: UtensilsCrossed },
    { href: '/ai-assistant', label: 'KI-Küche', icon: Sparkles },
  ];

  const handleLogout = () => {
    document.cookie = 'kitchenstock_user=; path=/; max-age=0;';
    toast.info('Abgemeldet');
    window.location.href = '/login';
  };

  return (
    <>
      {/* Top Header - Desktop & Tablet */}
      <header className="sticky top-0 z-40 w-full border-b border-emerald-100/80 bg-white/90 backdrop-blur-md transition-all shadow-2xs">
        <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
          {/* Logo & Household Badge */}
          <Link href="/dashboard" className="flex items-center gap-3 group">
            <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-gradient-to-tr from-emerald-600 to-teal-500 text-white font-bold text-lg shadow-md shadow-emerald-500/20 group-hover:scale-105 transition-transform">
              🌱
            </div>
            <div>
              <span className="font-extrabold text-lg tracking-tight text-foreground group-hover:text-emerald-600 transition-colors">
                KitchenStock
              </span>
              <span className="hidden sm:flex items-center gap-1 text-[11px] font-bold text-emerald-700">
                <Heart className="h-3 w-3 fill-current text-pink-500" /> Amy & Mandys Küche
              </span>
            </div>
          </Link>

          {/* Desktop Navigation Pills */}
          <nav className="hidden md:flex items-center gap-1 rounded-2xl border border-emerald-100 bg-emerald-50/50 p-1.5 shadow-2xs">
            {navLinks.map(link => {
              const Icon = link.icon;
              const isActive = pathname === link.href;
              return (
                <Link
                  key={link.href}
                  href={link.href}
                  className={`flex items-center gap-2 rounded-xl px-3.5 py-2 text-xs font-bold transition-all ${
                    isActive
                      ? 'bg-emerald-600 text-white shadow-sm'
                      : 'text-muted-foreground hover:bg-white hover:text-emerald-800'
                  }`}
                >
                  <Icon className={`h-4 w-4 ${isActive ? 'text-white' : 'text-emerald-600'}`} />
                  <span>{link.label}</span>
                </Link>
              );
            })}
          </nav>

          {/* Right Actions */}
          <div className="flex items-center gap-2">
            <div className="hidden sm:flex items-center gap-1 rounded-xl bg-emerald-50 border border-emerald-200/60 px-3 py-1.5 text-xs font-extrabold text-emerald-800">
              🌱 100% Vegan
            </div>
            <Link
              href="/settings"
              className="rounded-xl border border-emerald-200/70 bg-white p-2 text-muted-foreground hover:bg-emerald-50 hover:text-emerald-700 transition-colors shadow-2xs"
              title="Einstellungen"
            >
              <Settings className="h-4 w-4" />
            </Link>
            <button
              onClick={handleLogout}
              className="rounded-xl border border-rose-200/70 bg-white p-2 text-muted-foreground hover:bg-rose-50 hover:text-rose-600 transition-colors shadow-2xs"
              title="Abmelden"
            >
              <LogOut className="h-4 w-4" />
            </button>
          </div>
        </div>
      </header>

      {/* Mobile Bottom Navigation Bar */}
      <nav className="fixed bottom-0 left-0 right-0 z-40 flex h-16 items-center justify-around border-t border-emerald-100 bg-white/95 backdrop-blur-md md:hidden px-2 shadow-lg">
        {navLinks.slice(0, 4).map(link => {
          const Icon = link.icon;
          const isActive = pathname === link.href;
          return (
            <Link
              key={link.href}
              href={link.href}
              className={`flex flex-col items-center justify-center gap-0.5 py-1 px-3 rounded-2xl transition-all ${
                isActive ? 'text-emerald-700 font-bold scale-105' : 'text-muted-foreground font-medium'
              }`}
            >
              <Icon className={`h-5 w-5 ${isActive ? 'text-emerald-600' : 'text-muted-foreground'}`} />
              <span className="text-[10px]">{link.label}</span>
            </Link>
          );
        })}
      </nav>
    </>
  );
}