"use client";

import { useState } from "react";
import Link from "next/link";
import { useSession, signOut } from "next-auth/react";
import { useCartStore } from "@/lib/store";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import {
  Search,
  ShoppingCart,
  User,
  Menu,
  Heart,
  Package,
  Settings,
  LogOut,
  LayoutDashboard,
} from "lucide-react";

const categories = [
  { id: "food", name: "Food & Grocery", icon: "🍎", color: "bg-green-500" },
  { id: "tech", name: "Technology", icon: "💻", color: "bg-blue-500" },
  { id: "education", name: "Education", icon: "📚", color: "bg-purple-500" },
  { id: "virtual", name: "Virtual Products", icon: "🎮", color: "bg-pink-500" },
  { id: "fashion", name: "Fashion", icon: "👗", color: "bg-rose-500" },
  { id: "health", name: "Health & Beauty", icon: "💄", color: "bg-amber-500" },
];

interface HeaderProps {
  onAuthClick?: () => void;
  onCategoryClick?: (categorySlug: string) => void;
  onProductsClick?: () => void;
}

export function Header({ onAuthClick, onCategoryClick, onProductsClick }: HeaderProps) {
  const { data: session } = useSession();
  const { items, toggleCart, getTotalItems } = useCartStore();
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [searchQuery, setSearchQuery] = useState("");
  const totalItems = getTotalItems();

  const handleCategoryClick = (categoryId: string) => {
    if (onCategoryClick) {
      onCategoryClick(categoryId);
    }
    setMobileMenuOpen(false);
  };

  return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container mx-auto px-4">
        {/* Top bar */}
        <div className="flex items-center justify-between py-2 text-sm border-b">
          <div className="hidden md:flex items-center gap-4">
            <span>📞 +880 1700-000000</span>
            <span>📧 support@bdshop.com</span>
          </div>
          <div className="flex items-center gap-2 ml-auto">
            <span className="hidden sm:inline text-muted-foreground">Free shipping on orders over ৳1000</span>
          </div>
        </div>

        {/* Main header */}
        <div className="flex items-center justify-between py-4 gap-4">
          {/* Logo */}
          <Link href="/" className="flex items-center gap-2 font-bold text-2xl">
            <span className="text-primary">BD</span>
            <span>Shop</span>
          </Link>

          {/* Search bar */}
          <div className="hidden md:flex flex-1 max-w-xl mx-4">
            <div className="relative w-full">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                type="search"
                placeholder="Search products..."
                className="pl-10 pr-4 w-full"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
          </div>

          {/* Actions */}
          <div className="flex items-center gap-2">
            {/* Mobile search */}
            <Button variant="ghost" size="icon" className="md:hidden">
              <Search className="h-5 w-5" />
            </Button>

            {/* View All Products */}
            {onProductsClick && (
              <Button variant="ghost" onClick={onProductsClick} className="hidden lg:flex">
                All Products
              </Button>
            )}

            {/* Wishlist */}
            <Button variant="ghost" size="icon" className="hidden sm:flex">
              <Heart className="h-5 w-5" />
            </Button>

            {/* Cart */}
            <Button variant="ghost" size="icon" onClick={toggleCart} className="relative">
              <ShoppingCart className="h-5 w-5" />
              {totalItems > 0 && (
                <Badge className="absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center p-0 text-xs">
                  {totalItems}
                </Badge>
              )}
            </Button>

            {/* User menu */}
            {session ? (
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="icon">
                    <User className="h-5 w-5" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="w-56">
                  <div className="px-2 py-1.5">
                    <p className="font-medium">{session.user?.name}</p>
                    <p className="text-sm text-muted-foreground">{session.user?.email}</p>
                  </div>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem asChild>
                    <Link href="/orders" className="flex items-center gap-2">
                      <Package className="h-4 w-4" />
                      My Orders
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem asChild>
                    <Link href="/wishlist" className="flex items-center gap-2">
                      <Heart className="h-4 w-4" />
                      Wishlist
                    </Link>
                  </DropdownMenuItem>
                  {session.user?.role === "admin" && (
                    <DropdownMenuItem asChild>
                      <Link href="/admin" className="flex items-center gap-2">
                        <LayoutDashboard className="h-4 w-4" />
                        Admin Dashboard
                      </Link>
                    </DropdownMenuItem>
                  )}
                  <DropdownMenuItem asChild>
                    <Link href="/settings" className="flex items-center gap-2">
                      <Settings className="h-4 w-4" />
                      Settings
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem onClick={() => signOut()} className="text-red-600">
                    <LogOut className="h-4 w-4 mr-2" />
                    Sign Out
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            ) : (
              <Button onClick={onAuthClick}>Sign In</Button>
            )}

            {/* Mobile menu */}
            <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
              <SheetTrigger asChild>
                <Button variant="ghost" size="icon" className="md:hidden">
                  <Menu className="h-5 w-5" />
                </Button>
              </SheetTrigger>
              <SheetContent side="left" className="w-80">
                <SheetHeader>
                  <SheetTitle>Menu</SheetTitle>
                </SheetHeader>
                <div className="mt-6 space-y-4">
                  <div className="relative">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                    <Input
                      type="search"
                      placeholder="Search products..."
                      className="pl-10"
                    />
                  </div>
                  {onProductsClick && (
                    <Button 
                      variant="outline" 
                      className="w-full"
                      onClick={() => {
                        onProductsClick();
                        setMobileMenuOpen(false);
                      }}
                    >
                      View All Products
                    </Button>
                  )}
                  <div className="space-y-2">
                    <p className="font-medium text-sm text-muted-foreground">Categories</p>
                    {categories.map((cat) => (
                      <button
                        key={cat.id}
                        className="flex items-center gap-3 p-2 rounded-lg hover:bg-muted w-full text-left"
                        onClick={() => handleCategoryClick(cat.id)}
                      >
                        <span className="text-xl">{cat.icon}</span>
                        <span>{cat.name}</span>
                      </button>
                    ))}
                  </div>
                </div>
              </SheetContent>
            </Sheet>
          </div>
        </div>

        {/* Categories nav */}
        <nav className="hidden md:flex items-center gap-1 py-2 overflow-x-auto">
          {categories.map((cat) => (
            <button
              key={cat.id}
              className="flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium hover:bg-muted transition-colors whitespace-nowrap"
              onClick={() => onCategoryClick?.(cat.id)}
            >
              <span>{cat.icon}</span>
              <span>{cat.name}</span>
            </button>
          ))}
        </nav>
      </div>
    </header>
  );
}