import React, { useState, useRef, useEffect } from 'react';
import { Search, ShoppingBag, Menu, X, ChevronRight, Home, Store, Sparkles, Grid, ChevronDown, Heart, Users, Info, PhoneCall } from 'lucide-react';
import { TimeNLifeLogo } from './TimeNLifeLogo';

export interface NavCategory {
  name: string;
  slug: string;
  icon?: string;
}

export const NAV_CATEGORIES: NavCategory[] = [
  { name: 'Apparel & Accessories', slug: 'apparel-accessories' },
  { name: 'Health & Beauty', slug: 'health-beauty' },
  { name: "Women's Fashion", slug: 'womens-fashion' },
  { name: "Men's Fashion", slug: 'mens-fashion' },
  { name: 'Jewelry', slug: 'jewelry' },
  { name: 'Electronics Accessories', slug: 'electronics-accessories' },
  { name: 'Handbag, Wallets & Cases', slug: 'handbag-wallets-cases' },
  { name: 'Food, Beverages & Tobacco', slug: 'food-beverages-tobacco' },
  { name: 'Home & Garden', slug: 'home-garden' },
];

export interface HeaderProps {
  theme?: 'light' | 'dark';
  currentView?: 'home' | 'shop2' | 'productDetail' | 'categories' | 'admin' | 'infoPage';
  currentInfoPage?: string;
  onNavigate?: (view: 'home' | 'shop2' | 'categories') => void;
  onNavigateInfoPage?: (slug: 'collaborative-team' | 'about-us' | 'contact-us' | 'privacy-policy' | 'shipping-details' | 'terms-conditions' | 'refund-returns-policy' | 'introduction' | 'connect' | 'visit-store') => void;
  onSelectCategory?: (catSlug: string) => void;
  cartCount?: number;
  cartTotal?: number;
  wishlistCount?: number;
  onOpenSearch?: () => void;
  onOpenCart?: () => void;
  onOpenWishlist?: () => void;
  onOpenTracking?: () => void;
}

export const Header: React.FC<HeaderProps> = ({
  theme = 'light',
  currentView = 'home',
  currentInfoPage,
  onNavigate,
  onNavigateInfoPage,
  onSelectCategory,
  cartCount = 0,
  cartTotal = 0,
  wishlistCount = 0,
  onOpenSearch,
  onOpenCart,
  onOpenWishlist,
  onOpenTracking,
}) => {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [categoriesDropdownOpen, setCategoriesDropdownOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);
  const isDark = theme === 'dark';

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setCategoriesDropdownOpen(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  const handleCategoryClick = (catSlug: string) => {
    setCategoriesDropdownOpen(false);
    setMobileMenuOpen(false);
    if (onSelectCategory) {
      onSelectCategory(catSlug);
    } else {
      onNavigate?.('shop2');
    }
  };

  return (
    <header
      className={`sticky top-0 z-40 w-full transition-colors duration-300 border-b ${
        isDark
          ? 'bg-[#12100E]/95 backdrop-blur-md border-amber-950/40 text-white'
          : 'bg-[#FFFBF7]/95 backdrop-blur-md border-[#F2E8DF] text-slate-800'
      }`}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-20">
          
          {/* Left Actions: Search & Quick Nav */}
          <div className="flex items-center gap-2 sm:gap-4">
            <button
              onClick={onOpenSearch}
              className={`p-2.5 rounded-full transition-all duration-200 ${
                isDark
                  ? 'hover:bg-amber-900/30 text-amber-100/90'
                  : 'hover:bg-rose-50 text-slate-700'
              }`}
              aria-label="Search"
              title="Search Catalog"
            >
              <Search className="w-5 h-5 stroke-[2.2]" />
            </button>

            {/* Navigation Pills (Desktop) */}
            <div className="hidden lg:flex items-center gap-1 bg-[#FAF5F0] dark:bg-amber-950/30 p-1 rounded-xl border border-[#E8D9CC] dark:border-amber-900/40 text-xs font-bold">
              <button
                onClick={() => onNavigate?.('home')}
                className={`px-3 py-1.5 rounded-lg transition-all cursor-pointer flex items-center gap-1.5 ${
                  currentView === 'home'
                    ? 'bg-[#C81E3D] text-white shadow-xs'
                    : 'text-slate-700 dark:text-amber-100 hover:text-[#C81E3D]'
                }`}
              >
                <Home className="w-3.5 h-3.5" />
                <span>Home</span>
              </button>

              {/* Categories Navigation Button */}
              <button
                onClick={() => onNavigate?.('categories')}
                className={`px-3 py-1.5 rounded-lg transition-all cursor-pointer flex items-center gap-1.5 ${
                  currentView === 'categories'
                    ? 'bg-[#C81E3D] text-white shadow-xs'
                    : 'text-slate-700 dark:text-amber-100 hover:text-[#C81E3D]'
                }`}
              >
                <Grid className="w-3.5 h-3.5" />
                <span>Categories</span>
              </button>

              {/* Categories Quick Dropdown */}
              <div className="relative" ref={dropdownRef}>
                <button
                  onClick={() => setCategoriesDropdownOpen(!categoriesDropdownOpen)}
                  className={`px-2 py-1.5 rounded-lg transition-all cursor-pointer flex items-center gap-1 text-slate-700 dark:text-amber-100 hover:text-[#C81E3D] ${
                    categoriesDropdownOpen ? 'bg-amber-100/60 dark:bg-amber-900/40 text-[#C81E3D]' : ''
                  }`}
                  title="Quick Category List"
                >
                  <ChevronDown className={`w-3.5 h-3.5 transition-transform ${categoriesDropdownOpen ? 'rotate-180' : ''}`} />
                </button>

                {categoriesDropdownOpen && (
                  <div className={`absolute top-full left-0 mt-2 w-64 rounded-2xl shadow-xl border p-2 z-50 animate-in fade-in slide-in-from-top-1 duration-150 ${
                    isDark ? 'bg-[#1a1714] border-amber-900/40 text-amber-100' : 'bg-white border-[#E8D9CC] text-slate-800'
                  }`}>
                    <div className="flex items-center justify-between px-3 py-2 border-b border-slate-100 dark:border-amber-900/30 mb-1">
                      <span className="text-[10px] font-extrabold uppercase tracking-wider text-[#C81E3D]">
                        Quick Categories
                      </span>
                      <button
                        onClick={() => {
                          setCategoriesDropdownOpen(false);
                          onNavigate?.('categories');
                        }}
                        className="text-[10px] font-bold text-[#C81E3D] hover:underline"
                      >
                        All Categories Page →
                      </button>
                    </div>
                    <div className="max-h-80 overflow-y-auto space-y-0.5">
                      {NAV_CATEGORIES.map((cat) => (
                        <button
                          key={cat.slug}
                          onClick={() => handleCategoryClick(cat.slug)}
                          className={`w-full flex items-center justify-between px-3 py-2 rounded-xl text-left text-xs font-semibold transition-colors cursor-pointer ${
                            isDark ? 'hover:bg-amber-900/30 text-amber-100' : 'hover:bg-rose-50 text-slate-700'
                          }`}
                        >
                          <span>{cat.name}</span>
                          <ChevronRight className="w-3.5 h-3.5 text-slate-400 opacity-60" />
                        </button>
                      ))}
                    </div>
                  </div>
                )}
              </div>

              <button
                onClick={() => onNavigate?.('shop2')}
                className={`px-3 py-1.5 rounded-lg transition-all cursor-pointer flex items-center gap-1.5 ${
                  currentView === 'shop2'
                    ? 'bg-[#C81E3D] text-white shadow-xs font-bold'
                    : 'text-slate-700 dark:text-amber-100 hover:text-[#C81E3D]'
                }`}
              >
                <Store className="w-3.5 h-3.5" />
                <span>Shop Catalog</span>
              </button>

              {/* Collaborative Team Link */}
              <button
                onClick={() => onNavigateInfoPage?.('collaborative-team')}
                className={`px-3 py-1.5 rounded-lg transition-all cursor-pointer flex items-center gap-1.5 ${
                  currentView === 'infoPage' && currentInfoPage === 'collaborative-team'
                    ? 'bg-[#C81E3D] text-white shadow-xs font-bold'
                    : 'text-slate-700 dark:text-amber-100 hover:text-[#C81E3D]'
                }`}
                title="Our Collaborative Team"
              >
                <Users className="w-3.5 h-3.5" />
                <span>Our Team</span>
              </button>

              {/* About Us Link */}
              <button
                onClick={() => onNavigateInfoPage?.('about-us')}
                className={`px-3 py-1.5 rounded-lg transition-all cursor-pointer flex items-center gap-1.5 ${
                  currentView === 'infoPage' && currentInfoPage === 'about-us'
                    ? 'bg-[#C81E3D] text-white shadow-xs font-bold'
                    : 'text-slate-700 dark:text-amber-100 hover:text-[#C81E3D]'
                }`}
                title="About Time N Life"
              >
                <Info className="w-3.5 h-3.5" />
                <span>About Us</span>
              </button>

              {/* Contact Us Link */}
              <button
                onClick={() => onNavigateInfoPage?.('contact-us')}
                className={`px-3 py-1.5 rounded-lg transition-all cursor-pointer flex items-center gap-1.5 ${
                  currentView === 'infoPage' && currentInfoPage === 'contact-us'
                    ? 'bg-[#C81E3D] text-white shadow-xs font-bold'
                    : 'text-slate-700 dark:text-amber-100 hover:text-[#C81E3D]'
                }`}
                title="Contact Customer Support"
              >
                <PhoneCall className="w-3.5 h-3.5" />
                <span>Contact Us</span>
              </button>

              <button
                onClick={onOpenTracking}
                className="px-3 py-1.5 rounded-lg text-slate-700 dark:text-amber-100 hover:text-[#C81E3D] transition-all cursor-pointer flex items-center gap-1.5"
                title="Track Leopards Courier Shipment"
              >
                <Sparkles className="w-3.5 h-3.5 text-amber-500" />
                <span>Track Order</span>
              </button>
            </div>
          </div>

          {/* Center Brand Logo */}
          <div
            onClick={() => onNavigate?.('home')}
            className="flex justify-center flex-1 sm:flex-initial cursor-pointer"
          >
            <TimeNLifeLogo variant={theme} size="md" />
          </div>

          {/* Right Actions: Wishlist, Cart Badge & Menu Toggle */}
          <div className="flex items-center gap-1.5 sm:gap-3">
            
            {/* Wishlist Button */}
            <button
              onClick={onOpenWishlist}
              className={`relative p-2 rounded-full transition-all cursor-pointer ${
                isDark ? 'hover:bg-amber-900/30 text-amber-100' : 'hover:bg-rose-50 text-slate-700'
              }`}
              title="View Wishlist"
            >
              <Heart className="w-5 h-5" />
              {wishlistCount > 0 && (
                <span className="absolute -top-0.5 -right-0.5 bg-[#C81E3D] text-white text-[10px] font-extrabold w-4 h-4 rounded-full flex items-center justify-center border-2 border-white dark:border-[#12100E] animate-in zoom-in">
                  {wishlistCount}
                </span>
              )}
            </button>

            {/* Cart Button with Total */}
            <div
              onClick={onOpenCart}
              className="flex items-center gap-2 cursor-pointer group py-1.5 px-3 rounded-full hover:bg-rose-500/10 transition-colors border border-transparent hover:border-[#C81E3D]/20"
            >
              <span className={`hidden sm:inline font-bold text-xs sm:text-sm ${isDark ? 'text-amber-100/90' : 'text-slate-800'}`}>
                Rs {cartTotal.toLocaleString('en-PK')}
              </span>
              <div className="relative p-1.5">
                <ShoppingBag className={`w-5 h-5 ${isDark ? 'text-amber-100' : 'text-slate-800'}`} />
                <span className="absolute -top-1 -right-1 bg-[#C81E3D] text-white text-[10px] font-extrabold w-4 h-4 rounded-full flex items-center justify-center border-2 border-white dark:border-[#12100E]">
                  {cartCount}
                </span>
              </div>
            </div>

            {/* Mobile / Navigation Menu Toggle */}
            <button
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              className={`p-2 rounded-lg border transition-all ${
                isDark
                  ? 'border-amber-800/40 text-amber-200 hover:bg-amber-900/30'
                  : 'border-[#E5DACE] text-slate-700 hover:bg-rose-50/50'
              }`}
              aria-label="Toggle Navigation Menu"
            >
              {mobileMenuOpen ? (
                <X className="w-5 h-5" />
              ) : (
                <Menu className="w-5 h-5" />
              )}
            </button>
          </div>
        </div>
      </div>

      {/* Navigation Drawer Layout */}
      {mobileMenuOpen && (
        <div className={`border-t animate-in fade-in slide-in-from-top-2 duration-200 ${
          isDark ? 'bg-[#181512] border-amber-900/30 text-amber-100' : 'bg-[#FFF9F4] border-[#F0E6DD] text-slate-800'
        }`}>
          <div className="max-w-7xl mx-auto px-4 py-6 space-y-5">
            
            {/* Quick Page Switcher inside Drawer */}
            <div className="p-3 bg-[#FAF0E6] dark:bg-amber-950/50 rounded-2xl border border-[#E8D9CC] dark:border-amber-900/40 space-y-2">
              <div className="text-[10px] uppercase font-extrabold tracking-widest text-[#C81E3D]">
                Page Navigation
              </div>
              <div className="grid grid-cols-2 gap-2 text-xs font-bold">
                <button
                  onClick={() => {
                    onNavigate?.('home');
                    setMobileMenuOpen(false);
                  }}
                  className={`p-2.5 rounded-xl border flex items-center justify-center gap-2 ${
                    currentView === 'home'
                      ? 'bg-[#C81E3D] text-white border-[#C81E3D]'
                      : 'bg-white dark:bg-amber-900/30 border-slate-200 text-slate-800 dark:text-amber-100'
                  }`}
                >
                  <Home className="w-4 h-4" />
                  <span>Homepage</span>
                </button>

                <button
                  onClick={() => {
                    onNavigate?.('categories');
                    setMobileMenuOpen(false);
                  }}
                  className={`p-2.5 rounded-xl border flex items-center justify-center gap-2 ${
                    currentView === 'categories'
                      ? 'bg-[#C81E3D] text-white border-[#C81E3D]'
                      : 'bg-white dark:bg-amber-900/30 border-slate-200 text-slate-800 dark:text-amber-100'
                  }`}
                >
                  <Grid className="w-4 h-4" />
                  <span>Categories</span>
                </button>

                <button
                  onClick={() => {
                    onNavigate?.('shop2');
                    setMobileMenuOpen(false);
                  }}
                  className={`p-2.5 rounded-xl border flex items-center justify-center gap-2 ${
                    currentView === 'shop2'
                      ? 'bg-[#C81E3D] text-white border-[#C81E3D]'
                      : 'bg-white dark:bg-amber-900/30 border-slate-200 text-slate-800 dark:text-amber-100'
                  }`}
                >
                  <Store className="w-4 h-4" />
                  <span>Shop Catalog</span>
                </button>

                <button
                  onClick={() => {
                    onNavigateInfoPage?.('collaborative-team');
                    setMobileMenuOpen(false);
                  }}
                  className={`p-2.5 rounded-xl border flex items-center justify-center gap-2 ${
                    currentView === 'infoPage' && currentInfoPage === 'collaborative-team'
                      ? 'bg-[#C81E3D] text-white border-[#C81E3D]'
                      : 'bg-white dark:bg-amber-900/30 border-slate-200 text-slate-800 dark:text-amber-100 hover:bg-rose-50'
                  }`}
                >
                  <Users className="w-4 h-4" />
                  <span>Our Team</span>
                </button>

                <button
                  onClick={() => {
                    onNavigateInfoPage?.('about-us');
                    setMobileMenuOpen(false);
                  }}
                  className={`p-2.5 rounded-xl border flex items-center justify-center gap-2 ${
                    currentView === 'infoPage' && currentInfoPage === 'about-us'
                      ? 'bg-[#C81E3D] text-white border-[#C81E3D]'
                      : 'bg-white dark:bg-amber-900/30 border-slate-200 text-slate-800 dark:text-amber-100 hover:bg-rose-50'
                  }`}
                >
                  <Info className="w-4 h-4" />
                  <span>About Us</span>
                </button>

                <button
                  onClick={() => {
                    onNavigateInfoPage?.('contact-us');
                    setMobileMenuOpen(false);
                  }}
                  className={`p-2.5 rounded-xl border flex items-center justify-center gap-2 ${
                    currentView === 'infoPage' && currentInfoPage === 'contact-us'
                      ? 'bg-[#C81E3D] text-white border-[#C81E3D]'
                      : 'bg-white dark:bg-amber-900/30 border-slate-200 text-slate-800 dark:text-amber-100 hover:bg-rose-50'
                  }`}
                >
                  <PhoneCall className="w-4 h-4" />
                  <span>Contact Us</span>
                </button>

                <button
                  onClick={() => {
                    onOpenTracking?.();
                    setMobileMenuOpen(false);
                  }}
                  className="p-2.5 rounded-xl border bg-white dark:bg-amber-900/30 border-slate-200 text-slate-800 dark:text-amber-100 hover:bg-rose-50 flex items-center justify-center gap-2"
                >
                  <Sparkles className="w-4 h-4 text-amber-600" />
                  <span>Track Order</span>
                </button>
              </div>
            </div>

            <div className="text-xs uppercase tracking-widest text-[#C81E3D] font-bold px-2">
              Explore Categories & Catalog
            </div>
            <nav className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm font-medium">
              {NAV_CATEGORIES.map((cat) => (
                <button
                  key={cat.slug}
                  onClick={() => handleCategoryClick(cat.slug)}
                  className={`flex items-center justify-between p-3 rounded-lg transition-colors text-left cursor-pointer ${
                    isDark ? 'hover:bg-amber-900/20 text-slate-200' : 'hover:bg-rose-50 text-slate-700'
                  }`}
                >
                  <span>{cat.name}</span>
                  <ChevronRight className="w-4 h-4 text-slate-400" />
                </button>
              ))}
            </nav>

            <div className="pt-4 border-t border-slate-200/20 flex items-center justify-between px-2 text-xs">
              <span className="text-slate-400">Time N Life E-Commerce Sync</span>
              <span
                onClick={() => {
                  onNavigate?.('shop2');
                  setMobileMenuOpen(false);
                }}
                className="text-[#C81E3D] font-semibold cursor-pointer underline"
              >
                Browse Shop Catalog
              </span>
            </div>

          </div>
        </div>
      )}
    </header>
  );
};