path: root/frontend/src/components/header.tsx

"use client";

import { useState, useEffect, useRef } from "react";
import Link from "next/link";
import Image from "next/image";
import { useTheme } from "next-themes";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
import { ThemeToggle } from "@/components/theme-toggle";
import {
  Search,
  ShoppingBag,
  Heart,
  User,
  Menu,
  Phone,
  Truck,
  RefreshCw,
  Shield,
  Globe,
  Sun,
  Moon,
} from "lucide-react";

export function Header() {
  const [cartItems] = useState(3);
  const [wishlistItems] = useState(5);
  const [isMounted, setIsMounted] = useState(false);
  const [sheetError, setSheetError] = useState(false);
  const sheetRef = useRef<HTMLDivElement>(null);
  const { setTheme, theme } = useTheme();
  
  const categories = [
    {
      title: "Women",
      items: [
        { name: "Dresses", href: "/women/dresses" },
        { name: "Tops & Blouses", href: "/women/tops" },
        { name: "Pants & Jeans", href: "/women/pants" },
        { name: "Outerwear", href: "/women/outerwear" },
        { name: "Accessories", href: "/women/accessories" },
      ],
    },
    {
      title: "Men",
      items: [
        { name: "T-Shirts", href: "/men/tshirts" },
        { name: "Shirts", href: "/men/shirts" },
        { name: "Pants & Jeans", href: "/men/pants" },
        { name: "Jackets", href: "/men/jackets" },
        { name: "Accessories", href: "/men/accessories" },
      ],
    },
    {
      title: "Kids",
      items: [
        { name: "Boys", href: "/kids/boys" },
        { name: "Girls", href: "/kids/girls" },
        { name: "Baby", href: "/kids/baby" },
        { name: "Shoes", href: "/kids/shoes" },
      ],
    },
  ];

  // Preload both logo variants to ensure smooth loading
  useEffect(() => {
    setIsMounted(true);
    
    // Add global error handler for scroll-related errors
    const handleError = (event: ErrorEvent) => {
      if (event.error?.message?.includes('parameter 1 is not of type \'Node\'') ||
          event.error?.message?.includes('handleScroll') ||
          event.error?.message?.includes('RemoveScrollSideCar') ||
          event.error?.message?.includes('shouldCancelEvent') ||
          event.error?.message?.includes('shouldPrevent')) {
        console.warn('Scroll handling error caught and suppressed:', event.error);
        event.preventDefault();
        setSheetError(true);
        return false;
      }
    };
    
    // Also add an unhandled rejection handler for async scroll errors
    const handleUnhandledRejection = (event: PromiseRejectionEvent) => {
      if (event.reason?.message?.includes('handleScroll') ||
          event.reason?.message?.includes('RemoveScrollSideCar') ||
          event.reason?.message?.includes('parameter 1 is not of type \'Node\'')) {
        console.warn('Scroll promise rejection caught and suppressed:', event.reason);
        event.preventDefault();
        setSheetError(true);
        return false;
      }
    };
    
    window.addEventListener('error', handleError);
    window.addEventListener('unhandledrejection', handleUnhandledRejection);
    
    const preloadLogos = () => {
      if (typeof window !== 'undefined') {
        const lightLogo = new window.Image();
        const darkLogo = new window.Image();
        lightLogo.src = '/black-logo.png';
        darkLogo.src = '/white-logo.png';
      }
    };
    
    preloadLogos();
    
    return () => {
      window.removeEventListener('error', handleError);
      window.removeEventListener('unhandledrejection', handleUnhandledRejection);
    };
  }, []);

  // Add scroll error prevention
  useEffect(() => {
    const sheetElement = sheetRef.current;
    if (sheetElement) {
      const handleScroll = (event: Event) => {
        try {
          // Allow default scroll behavior but catch any errors
        } catch (error) {
          console.warn('Sheet scroll error caught:', error);
          event.preventDefault();
        }
      };
      
      sheetElement.addEventListener('scroll', handleScroll, { passive: false });
      
      return () => {
        sheetElement.removeEventListener('scroll', handleScroll);
      };
    }
  }, [isMounted]);

  // Prevent hydration issues with Sheet component
  if (!isMounted) {
    return (
      <header className="sticky top-0 z-50 w-full bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        {/* Top banner */}
        <div className="bg-black text-white text-center py-2 px-4">
          <p className="text-sm font-medium">
            FREE SHIPPING ON ORDERS OVER $100 • NEW ARRIVALS EVERY WEEK
          </p>
        </div>

        {/* Announcement bar */}
        <div className="bg-neutral-100 dark:bg-neutral-800 text-center py-2 px-4">
          <p className="text-sm">
            🔥 <span className="font-semibold">WINTER SALE</span> - Up to 50% off on selected items
          </p>
        </div>

        {/* Main header */}
        <div className="border-b dark:border-neutral-800">
          <div className="container mx-auto px-3 sm:px-4 lg:px-6">
            <div className="flex h-14 sm:h-16 items-center justify-between gap-2 sm:gap-4 md:justify-between">
              {/* Mobile menu placeholder */}
              <Button 
                variant="ghost" 
                size="icon" 
                className="md:hidden nav-button-transparent backdrop-blur-sm"
                disabled
              >
                <Menu className="h-5 w-5" />
              </Button>

              {/* Logo */}
              <div className="flex items-center flex-1 md:flex-initial justify-center md:justify-start">
                <Link href="/" className="flex items-center space-x-2 ml-8 md:ml-0">
                  <Image
                    src="/black-logo.png"
                    alt="blcklst"
                    width={120}
                    height={40}
                    className="h-8 w-auto block dark:hidden"
                    priority
                  />
                  <Image
                    src="/white-logo.png"
                    alt="blcklst"
                    width={120}
                    height={40}
                    className="h-8 w-auto hidden dark:block"
                    priority
                  />
                </Link>
              </div>

              {/* Simplified action buttons for SSR */}
              <div className="flex items-center space-x-1 sm:space-x-2">
                <Button 
                  variant="ghost" 
                  size="icon" 
                  className="lg:hidden nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]"
                  disabled
                >
                  <Search className="h-5 w-5" />
                </Button>
                
                <Button 
                  variant="ghost" 
                  size="icon" 
                  className="relative nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]"
                  disabled
                >
                  <ShoppingBag className="h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground flex-shrink-0" />
                </Button>
              </div>
            </div>
          </div>
        </div>
      </header>
    );
  }

  return (
    <header className="sticky top-0 z-50 w-full bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      {/* Top banner */}
      <div className="bg-black text-white text-center py-2 px-4">
        <p className="text-sm font-medium">
          FREE SHIPPING ON ORDERS OVER $100 • NEW ARRIVALS EVERY WEEK
        </p>
      </div>

      {/* Announcement bar */}
      <div className="bg-neutral-100 dark:bg-neutral-800 text-center py-2 px-4">
        <p className="text-sm">
          🔥 <span className="font-semibold">WINTER SALE</span> - Up to 50% off on selected items
        </p>
      </div>

      {/* Main header */}
      <div className="border-b dark:border-neutral-800">
        <div className="container mx-auto px-3 sm:px-4 lg:px-6">
          <div className="flex h-14 sm:h-16 items-center justify-between gap-2 sm:gap-4 md:justify-between">
            {/* Mobile menu */}
            {!sheetError ? (
              <Sheet>
                <SheetTrigger asChild>
                  <Button 
                    variant="ghost" 
                    size="icon" 
                    className="md:hidden nav-button-transparent backdrop-blur-sm"
                  >
                    <Menu className="h-5 w-5" />
                  </Button>
                </SheetTrigger>
                <SheetContent 
                  ref={sheetRef}
                  side="left" 
                  className="w-[280px] xs:w-[320px] sm:w-[380px] p-0 border-r dark:border-neutral-800"
                  onOpenAutoFocus={(event) => {
                    // Prevent auto focus to avoid scroll handling issues
                    event.preventDefault();
                  }}
                  onCloseAutoFocus={(event) => {
                    // Prevent auto focus to avoid scroll handling issues
                    event.preventDefault();
                  }}
                  onEscapeKeyDown={(event) => {
                    // Handle escape key gracefully
                    try {
                      // Default behavior
                    } catch (error) {
                      console.warn('Escape key handling error:', error);
                      event.preventDefault();
                      setSheetError(true);
                    }
                  }}
                  onPointerDownOutside={(event) => {
                    // Handle pointer events gracefully
                    try {
                      // Default behavior
                    } catch (error) {
                      console.warn('Pointer down outside error:', error);
                      event.preventDefault();
                      setSheetError(true);
                    }
                  }}
                  onInteractOutside={(event) => {
                    // Additional interaction handler
                    try {
                      // Default behavior
                    } catch (error) {
                      console.warn('Interact outside error:', error);
                      event.preventDefault();
                      setSheetError(true);
                    }
                  }}
                  onFocusOutside={(event) => {
                    // Additional focus handler
                    try {
                      // Default behavior
                    } catch (error) {
                      console.warn('Focus outside error:', error);
                      event.preventDefault();
                      setSheetError(true);
                    }
                  }}
                >
                  <div className="flex flex-col h-full">
                    {/* Header Section */}
                    <SheetHeader className="px-6 py-4 border-b dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900">
                      <SheetTitle className="text-left text-lg font-semibold">
                        Menu
                      </SheetTitle>
                    </SheetHeader>

                    {/* Navigation Section */}
                    <div className="flex-1 overflow-y-auto mobile-nav-scroll">
                      <nav className="px-4 py-6 space-y-6">
                        {categories.map((category) => (
                          <div key={category.title} className="space-y-3">
                            {/* Category Header */}
                            <h3 className="px-2 text-sm font-semibold text-foreground uppercase tracking-wider border-b border-neutral-200 dark:border-neutral-700 pb-2">
                              {category.title}
                            </h3>
                            
                            {/* Category Items */}
                            <div className="space-y-1">
                              {category.items.map((item) => (
                                <Link
                                  key={item.name}
                                  href={item.href}
                                  className="flex items-center px-3 py-3 text-sm text-muted-foreground hover:text-foreground hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors touch-manipulation min-h-[44px]"
                                >
                                  <span className="flex-1">{item.name}</span>
                                  <svg 
                                    className="w-4 h-4 opacity-40" 
                                    fill="none" 
                                    stroke="currentColor" 
                                    viewBox="0 0 24 24"
                                  >
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                                  </svg>
                                </Link>
                              ))}
                            </div>
                          </div>
                        ))}

                        {/* Sale Section */}
                        <div className="space-y-3 pt-4 border-t border-neutral-200 dark:border-neutral-700">
                          <h3 className="px-2 text-sm font-semibold text-red-600 uppercase tracking-wider">
                            Special
                          </h3>
                          <Link
                            href="/sale"
                            className="flex items-center px-3 py-3 text-sm font-medium text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-lg transition-colors touch-manipulation min-h-[44px]"
                          >
                            <span className="flex-1">Sale Items</span>
                            <svg 
                              className="w-4 h-4" 
                              fill="none" 
                              stroke="currentColor" 
                              viewBox="0 0 24 24"
                            >
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                            </svg>
                          </Link>
                        </div>
                      </nav>
                    </div>

                    {/* Footer Section */}
                    <div className="border-t dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900 px-4 py-4">
                      <div className="grid grid-cols-2 gap-3">
                        {/* Search Button */}
                        <Button 
                          variant="outline" 
                          size="sm" 
                          className="flex items-center justify-center gap-2 h-10 text-xs font-medium"
                        >
                          <Search className="h-4 w-4" />
                          Search
                        </Button>
                        
                        {/* Account Button */}
                        <Button 
                          variant="outline" 
                          size="sm" 
                          className="flex items-center justify-center gap-2 h-10 text-xs font-medium"
                        >
                          <User className="h-4 w-4" />
                          Account
                        </Button>
                      </div>
                      
                      {/* Quick Actions */}
                      <div className="grid grid-cols-4 gap-1 mt-4 pt-3 border-t border-neutral-200 dark:border-neutral-700">
                        <button className="flex flex-col items-center justify-center space-y-2 p-3 rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all duration-200 touch-manipulation group min-h-[72px] border border-transparent hover:border-neutral-200 dark:hover:border-neutral-700">
                          <div className="relative">
                            <Heart className="h-5 w-5 text-muted-foreground group-hover:text-foreground transition-colors flex-shrink-0" />
                            {wishlistItems > 0 && (
                              <Badge className="absolute -top-2 -right-2 h-4 w-4 rounded-full p-0 text-[10px] leading-none">
                                {wishlistItems}
                              </Badge>
                            )}
                          </div>
                          <span className="text-[10px] text-muted-foreground group-hover:text-foreground transition-colors text-center leading-tight font-medium">Wishlist</span>
                        </button>
                        
                        <button className="flex flex-col items-center justify-center space-y-2 p-3 rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all duration-200 touch-manipulation group min-h-[72px] border border-transparent hover:border-neutral-200 dark:hover:border-neutral-700">
                          <div className="relative">
                            <ShoppingBag className="h-5 w-5 text-muted-foreground group-hover:text-foreground transition-colors flex-shrink-0" />
                            {cartItems > 0 && (
                              <Badge className="absolute -top-2 -right-2 h-4 w-4 rounded-full p-0 text-[10px] leading-none">
                                {cartItems}
                              </Badge>
                            )}
                          </div>
                          <span className="text-[10px] text-muted-foreground group-hover:text-foreground transition-colors text-center leading-tight font-medium">Cart</span>
                        </button>
                        
                        {/* Theme Toggle in Mobile Menu */}
                        <button 
                          onClick={() => {
                            if (theme === 'dark') {
                              setTheme('light');
                            } else {
                              setTheme('dark');
                            }
                          }}
                          className="flex flex-col items-center justify-center space-y-2 p-3 rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all duration-200 touch-manipulation group min-h-[72px] border border-transparent hover:border-neutral-200 dark:hover:border-neutral-700"
                        >
                          <div className="relative">
                            {theme === 'dark' ? (
                              <Moon className="h-5 w-5 text-muted-foreground group-hover:text-foreground transition-colors flex-shrink-0" />
                            ) : (
                              <Sun className="h-5 w-5 text-muted-foreground group-hover:text-foreground transition-colors flex-shrink-0" />
                            )}
                          </div>
                          <span className="text-[10px] text-muted-foreground group-hover:text-foreground transition-colors text-center leading-tight font-medium">Theme</span>
                        </button>
                        
                        <button className="flex flex-col items-center justify-center space-y-2 p-3 rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all duration-200 touch-manipulation group min-h-[72px] border border-transparent hover:border-neutral-200 dark:hover:border-neutral-700">
                          <div className="relative">
                            <Globe className="h-5 w-5 text-muted-foreground group-hover:text-foreground transition-colors flex-shrink-0" />
                          </div>
                          <span className="text-[10px] text-muted-foreground group-hover:text-foreground transition-colors text-center leading-tight font-medium">USD</span>
                        </button>
                      </div>
                    </div>
                  </div>
                </SheetContent>
              </Sheet>
            ) : (
              <Button 
                variant="ghost" 
                size="icon" 
                className="md:hidden nav-button-transparent backdrop-blur-sm"
              >
                <Menu className="h-5 w-5" />
              </Button>
            )}

            {/* Logo */}
            <div className="flex items-center flex-1 md:flex-initial justify-center md:justify-start">
              <Link href="/" className="flex items-center space-x-2 ml-8 md:ml-0">
                <Image
                  src="/black-logo.png"
                  alt="blcklst"
                  width={120}
                  height={40}
                  className="h-8 w-auto block dark:hidden"
                  priority
                />
                <Image
                  src="/white-logo.png"
                  alt="blcklst"
                  width={120}
                  height={40}
                  className="h-8 w-auto hidden dark:block"
                  priority
                />
              </Link>
            </div>

            {/* Desktop Navigation */}
            <NavigationMenu className="hidden md:flex">
              <NavigationMenuList>
                {categories.map((category) => (
                  <NavigationMenuItem key={category.title}>
                    <NavigationMenuTrigger 
                      className="font-medium nav-button-transparent backdrop-blur-sm"
                    >
                      {category.title}
                    </NavigationMenuTrigger>
                    <NavigationMenuContent>
                      <div className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] nav-dropdown-transparent">
                        {category.items.map((item) => (
                          <NavigationMenuLink key={item.name} asChild>
                            <Link
                              href={item.href}
                              className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors nav-dropdown-item backdrop-blur-sm"
                            >
                              <div className="text-sm font-medium leading-none">{item.name}</div>
                            </Link>
                          </NavigationMenuLink>
                        ))}
                      </div>
                    </NavigationMenuContent>
                  </NavigationMenuItem>
                ))}
                <NavigationMenuItem>
                  <NavigationMenuLink asChild>
                    <Link href="/sale" className="font-medium text-red-600 hover:text-red-700 px-4 py-2 rounded-md nav-button-transparent backdrop-blur-sm transition-colors">
                      Sale
                    </Link>
                  </NavigationMenuLink>
                </NavigationMenuItem>
              </NavigationMenuList>
            </NavigationMenu>

            {/* Search Bar */}
            <div className="hidden lg:flex flex-1 max-w-sm mx-8">
              <div className="relative w-full">
                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <Input
                  placeholder="Search products..."
                  className="pl-10 pr-4"
                />
              </div>
            </div>

            {/* Action buttons */}
            <div className="flex items-center space-x-1 sm:space-x-2 flex-shrink-0">
              {/* Search icon for mobile */}
              <Button 
                variant="ghost" 
                size="icon" 
                className="lg:hidden nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]"
              >
                <Search className="h-5 w-5" />
              </Button>

              {/* Theme toggle */}
              <div className="hidden sm:block">
                <ThemeToggle />
              </div>

              {/* User menu - Hidden on small mobile, visible on larger screens */}
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button 
                    variant="ghost" 
                    size="icon" 
                    className="hidden sm:flex nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]"
                  >
                    <User className="h-5 w-5" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="w-56 nav-dropdown-transparent">
                  <DropdownMenuItem className="nav-dropdown-item">
                    <User className="mr-2 h-4 w-4" />
                    My Account
                  </DropdownMenuItem>
                  <DropdownMenuItem className="nav-dropdown-item">
                    <Truck className="mr-2 h-4 w-4" />
                    Orders
                  </DropdownMenuItem>
                  <DropdownMenuItem className="nav-dropdown-item">
                    <Heart className="mr-2 h-4 w-4" />
                    Wishlist
                  </DropdownMenuItem>
                  <DropdownMenuSeparator className="bg-white/20 dark:bg-neutral-800/50" />
                  <DropdownMenuItem className="nav-dropdown-item">
                    Sign In
                  </DropdownMenuItem>
                  <DropdownMenuItem className="nav-dropdown-item">
                    Create Account
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>

              {/* Wishlist - Hidden on small mobile */}
              <Button 
                variant="ghost" 
                size="icon" 
                className="relative hidden xs:flex nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]"
              >
                <Heart className="h-5 w-5" />
                {wishlistItems > 0 && (
                  <Badge className="absolute -top-1 -right-1 h-5 w-5 rounded-full p-0 text-xs">
                    {wishlistItems}
                  </Badge>
                )}
              </Button>

              {/* Cart - Always visible */}
              <Button 
                variant="ghost" 
                size="icon" 
                className="relative nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]"
              >
                <ShoppingBag className="h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground flex-shrink-0" />
                {cartItems > 0 && (
                  <Badge className="absolute -top-1 -right-1 h-5 w-5 rounded-full p-0 text-xs">
                    {cartItems}
                  </Badge>
                )}
              </Button>

              {/* Language/Currency - Hidden on mobile */}
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button 
                    variant="ghost" 
                    size="icon" 
                    className="hidden md:flex nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]"
                  >
                    <Globe className="h-5 w-5" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="nav-dropdown-transparent">
                  <DropdownMenuItem className="nav-dropdown-item">🇺🇸 USD</DropdownMenuItem>
                  <DropdownMenuItem className="nav-dropdown-item">🇪🇺 EUR</DropdownMenuItem>
                  <DropdownMenuItem className="nav-dropdown-item">🇬🇧 GBP</DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </div>
        </div>
      </div>

      {/* Service features */}
      <div className="hidden md:block border-b dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-4 gap-4 py-2 text-xs text-muted-foreground">
            <div className="flex items-center justify-center space-x-1">
              <Truck className="h-3 w-3" />
              <span>Free Shipping</span>
            </div>
            <div className="flex items-center justify-center space-x-1">
              <RefreshCw className="h-3 w-3" />
              <span>30-Day Returns</span>
            </div>
            <div className="flex items-center justify-center space-x-1">
              <Shield className="h-3 w-3" />
              <span>Secure Payment</span>
            </div>
            <div className="flex items-center justify-center space-x-1">
              <Phone className="h-3 w-3" />
              <span>24/7 Support</span>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}