"use client";

import React, { useState, useEffect, useRef } from "react";
import Link from "next/link";
import { useCart } from "@/context/CartContext";
import { Product, Category } from "@/types";
import { LogoMark } from "@/components/Logo";
import {
  Search,
  ShoppingCart,
  Heart,
  User,
  Truck,
  PhoneCall,
  Menu,
  X,
  ChevronDown,
  Sparkles,
  BookOpen,
  ListChecks,
  PackageCheck,
  FileText,
  ShieldCheck,
  Building2,
  GraduationCap,
  Percent,
} from "lucide-react";

interface HeaderProps {
  categories: Category[];
  onSelectCategory: (categoryId: string) => void;
  selectedCategory: string;
}

export const Header: React.FC<HeaderProps> = ({
  categories,
  onSelectCategory,
  selectedCategory,
}) => {
  const {
    totalCartItemsCount,
    wishlist,
    setIsCartOpen,
    setIsTrackerOpen,
    setIsQuoteModalOpen,
    subtotal,
    openProductModal,
  } = useCart();

  const [searchQuery, setSearchQuery] = useState("");
  const [searchResults, setSearchResults] = useState<Product[]>([]);
  const [isSearching, setIsSearching] = useState(false);
  const [showSearchDropdown, setShowSearchDropdown] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const searchContainerRef = useRef<HTMLDivElement>(null);

  // Debounced search logic
  useEffect(() => {
    if (!searchQuery.trim()) {
      setSearchResults([]);
      setShowSearchDropdown(false);
      return;
    }

    const timer = setTimeout(async () => {
      setIsSearching(true);
      try {
        const res = await fetch(`/api/products?query=${encodeURIComponent(searchQuery)}`);
        const data = await res.json();
        if (data.products) {
          setSearchResults(data.products.slice(0, 6));
          setShowSearchDropdown(true);
        }
      } catch (err) {
        console.error("Search error:", err);
      } finally {
        setIsSearching(false);
      }
    }, 250);

    return () => clearTimeout(timer);
  }, [searchQuery]);

  // Close dropdown on click outside
  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (searchContainerRef.current && !searchContainerRef.current.contains(e.target as Node)) {
        setShowSearchDropdown(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  return (
    <header className="sticky top-0 z-40 bg-white border-b border-slate-200 shadow-sm">
      {/* Top Announcement Bar */}
      <div className="bg-slate-900 text-slate-100 text-xs sm:text-sm py-2 px-4">
        <div className="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-center gap-2">
          <div className="flex items-center gap-2 font-medium">
            <span className="inline-flex items-center gap-1.5 bg-amber-500/20 text-amber-300 px-2 py-0.5 rounded-full text-xs font-semibold border border-amber-500/30">
              <Truck className="w-3.5 h-3.5" /> Fast SA Delivery
            </span>
            <span className="hidden md:inline text-slate-300">
              Free Courier Delivery on orders over <strong className="text-white">R750</strong>!
            </span>
            <span className="md:hidden text-slate-300">Free SA Courier over R750</span>
          </div>

          <div className="flex items-center gap-4 text-xs">
            <Link
              href="/catalogue"
              className="hidden sm:flex items-center gap-1 hover:text-amber-400 transition-colors cursor-pointer text-slate-200 font-medium"
            >
              <BookOpen className="w-3.5 h-3.5 text-amber-400" />
              <span>Catalogue</span>
            </Link>
            <span className="hidden sm:inline text-slate-600">|</span>
            <Link
              href="/price-list"
              className="hidden sm:flex items-center gap-1 hover:text-amber-400 transition-colors cursor-pointer text-slate-200 font-medium"
            >
              <ListChecks className="w-3.5 h-3.5 text-amber-400" />
              <span>Price List</span>
            </Link>
            <span className="hidden sm:inline text-slate-600">|</span>
            <button
              onClick={() => setIsQuoteModalOpen(true)}
              className="flex items-center gap-1 hover:text-amber-400 transition-colors cursor-pointer text-slate-200 font-medium"
            >
              <FileText className="w-3.5 h-3.5 text-amber-400" />
              <span>Bulk Quotes</span>
            </button>
            <span className="hidden sm:inline text-slate-600">|</span>
            <button
              onClick={() => setIsTrackerOpen(true)}
              className="flex items-center gap-1 hover:text-amber-400 transition-colors cursor-pointer text-slate-200 font-medium"
            >
              <PackageCheck className="w-3.5 h-3.5 text-amber-400" />
              <span>Track Order</span>
            </button>
            <span className="hidden sm:inline text-slate-600">|</span>
            <a
              href="https://wa.me/27712345678?text=Hi%20Diverse%20Stationery,%20I%20have%20an%20inquiry%20about%20stationery%20supplies"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-1 text-emerald-400 hover:text-emerald-300 font-semibold transition-colors"
            >
              <span>WhatsApp Us</span>
            </a>
          </div>
        </div>
      </div>

      {/* Main Navigation Header */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3.5">
        <div className="flex items-center justify-between gap-4">
          {/* Logo */}
          <div className="flex items-center gap-3">
            <button
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              className="lg:hidden text-slate-700 hover:text-slate-900 p-1"
              aria-label="Toggle menu"
            >
              {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>

            <Link href="/" className="flex items-center gap-2.5 group">
              <LogoMark className="w-11 h-11 sm:w-12 sm:h-12 group-hover:scale-105 transition-transform" />
              <div className="flex flex-col leading-none">
                <span className="font-black text-lg sm:text-xl tracking-tight" style={{ color: "#0E9C8E" }}>
                  DIVERSE
                </span>
                <span className="font-black tracking-[0.16em] text-[10px] sm:text-[11px]" style={{ color: "#C9B79C" }}>
                  STATIONERY
                </span>
              </div>
            </Link>
          </div>

          {/* Search Bar with Dropdown */}
          <div ref={searchContainerRef} className="relative flex-1 max-w-2xl hidden md:block">
            <div className="relative">
              <input
                type="text"
                placeholder="Search pens, Typek paper, calculators, lever arch files..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                onFocus={() => {
                  if (searchResults.length > 0) setShowSearchDropdown(true);
                }}
                className="w-full pl-11 pr-10 py-2.5 bg-slate-100 hover:bg-slate-100/80 focus:bg-white text-slate-900 placeholder-slate-400 border border-slate-300 focus:border-blue-800 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-800/20 transition-all shadow-inner"
              />
              <Search className="absolute left-4 top-3 w-4 h-4 text-slate-400" />
              {searchQuery && (
                <button
                  onClick={() => setSearchQuery("")}
                  className="absolute right-3 top-3 text-slate-400 hover:text-slate-600 text-xs bg-slate-200 rounded-full p-0.5"
                >
                  <X className="w-3.5 h-3.5" />
                </button>
              )}
            </div>

            {/* Instant Search Results Dropdown */}
            {showSearchDropdown && (
              <div className="absolute left-0 right-0 top-full mt-2 bg-white rounded-2xl shadow-2xl border border-slate-200 z-50 overflow-hidden divide-y divide-slate-100 max-h-[420px] overflow-y-auto">
                <div className="p-3 bg-slate-50 text-xs font-semibold text-slate-500 flex justify-between items-center">
                  <span>Product Search Results ({searchResults.length})</span>
                  {isSearching && <span className="animate-pulse text-blue-600">Searching...</span>}
                </div>
                {searchResults.length === 0 ? (
                  <div className="p-6 text-center text-slate-500 text-sm">
                    No products found matching &ldquo;{searchQuery}&rdquo;. Try another search term like &ldquo;BIC&rdquo; or &ldquo;Paper&rdquo;.
                  </div>
                ) : (
                  searchResults.map((product) => (
                    <div
                      key={product.id}
                      onClick={() => {
                        openProductModal(product);
                        setShowSearchDropdown(false);
                      }}
                      className="p-3 hover:bg-blue-50/70 transition-colors flex items-center gap-3 cursor-pointer group"
                    >
                      <img
                        src={product.image}
                        alt={product.name}
                        className="w-12 h-12 object-cover rounded-lg border border-slate-200"
                      />
                      <div className="flex-1 min-w-0">
                        <div className="text-xs font-semibold text-amber-700 uppercase tracking-wider">
                          {product.brandName} &bull; {product.categoryName}
                        </div>
                        <h4 className="text-sm font-medium text-slate-800 truncate group-hover:text-blue-900">
                          {product.name}
                        </h4>
                        <div className="text-xs text-slate-500 truncate">SKU: {product.sku}</div>
                      </div>
                      <div className="text-right">
                        <div className="font-bold text-slate-900 text-sm">
                          R{Number(product.price).toFixed(2)}
                        </div>
                        <span className="text-[10px] text-emerald-600 font-semibold bg-emerald-50 px-1.5 py-0.5 rounded">
                          In Stock
                        </span>
                      </div>
                    </div>
                  ))
                )}
              </div>
            )}
          </div>

          {/* Action Buttons */}
          <div className="flex items-center gap-2 sm:gap-4">
            {/* Quick Bulk Quote CTA */}
            <button
              onClick={() => setIsQuoteModalOpen(true)}
              className="hidden lg:flex items-center gap-2 bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-600 hover:to-amber-700 text-slate-950 px-3.5 py-2 rounded-xl text-xs font-bold shadow-sm transition-all cursor-pointer"
            >
              <FileText className="w-4 h-4" />
              <span>Get Bulk Quote</span>
            </button>

            {/* Track Order Button */}
            <button
              onClick={() => setIsTrackerOpen(true)}
              className="hidden sm:flex items-center gap-1.5 text-slate-700 hover:text-blue-900 p-2 rounded-xl hover:bg-slate-100 transition-colors text-xs font-semibold"
              title="Track Order Status"
            >
              <PackageCheck className="w-5 h-5 text-slate-600" />
              <span className="hidden xl:inline">Track Order</span>
            </button>

            {/* Wishlist Button */}
            <button
              onClick={() => {
                if (wishlist.length > 0) {
                  openProductModal(wishlist[0]);
                } else {
                  alert("Your wishlist is empty! Click the heart icon on any product to save it.");
                }
              }}
              className="relative p-2 text-slate-700 hover:text-rose-600 rounded-xl hover:bg-slate-100 transition-colors"
              title="Wishlist"
            >
              <Heart className="w-5 h-5" />
              {wishlist.length > 0 && (
                <span className="absolute -top-1 -right-1 bg-rose-600 text-white text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center animate-scaleIn">
                  {wishlist.length}
                </span>
              )}
            </button>

            {/* Shopping Cart Button */}
            <button
              onClick={() => setIsCartOpen(true)}
              className="flex items-center gap-2.5 bg-blue-950 hover:bg-slate-900 text-white px-3.5 py-2 rounded-xl transition-all shadow-md group cursor-pointer"
            >
              <div className="relative">
                <ShoppingCart className="w-5 h-5 text-amber-400 group-hover:scale-110 transition-transform" />
                {totalCartItemsCount > 0 && (
                  <span className="absolute -top-2 -right-2.5 bg-amber-500 text-slate-950 font-black text-[11px] w-5 h-5 rounded-full flex items-center justify-center border-2 border-blue-950">
                    {totalCartItemsCount}
                  </span>
                )}
              </div>
              <div className="hidden sm:flex flex-col text-left">
                <span className="text-[10px] text-slate-300 font-medium uppercase leading-tight">
                  Cart
                </span>
                <span className="text-xs font-bold text-amber-300 leading-tight">
                  R{subtotal.toFixed(2)}
                </span>
              </div>
            </button>
          </div>
        </div>

        {/* Mobile Search Input */}
        <div className="mt-3 md:hidden">
          <div className="relative">
            <input
              type="text"
              placeholder="Search products..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full pl-10 pr-8 py-2 bg-slate-100 text-slate-900 text-xs rounded-lg border border-slate-300 focus:outline-none focus:ring-1 focus:ring-blue-800"
            />
            <Search className="absolute left-3 top-2.5 w-4 h-4 text-slate-400" />
            {searchQuery && (
              <button
                onClick={() => setSearchQuery("")}
                className="absolute right-3 top-2.5 text-slate-400 text-xs"
              >
                <X className="w-3.5 h-3.5" />
              </button>
            )}
          </div>
        </div>
      </div>

      {/* Category Links Navigation Bar */}
      <div className="bg-slate-900 border-t border-slate-800 text-white hidden lg:block">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center gap-1 overflow-x-auto no-scrollbar py-1">
          <button
            onClick={() => onSelectCategory("all")}
            className={`px-3.5 py-2 text-xs font-semibold rounded-lg transition-colors whitespace-nowrap flex items-center gap-1.5 cursor-pointer ${
              selectedCategory === "all"
                ? "bg-amber-500 text-slate-950 shadow-sm"
                : "text-slate-200 hover:text-amber-400 hover:bg-slate-800"
            }`}
          >
            <Sparkles className="w-3.5 h-3.5" /> All Products
          </button>

          {categories.map((cat) => (
            <button
              key={cat.id}
              onClick={() => onSelectCategory(cat.id)}
              className={`px-3 py-2 text-xs font-medium rounded-lg transition-colors whitespace-nowrap cursor-pointer ${
                selectedCategory === cat.id
                  ? "bg-amber-500 text-slate-950 font-bold"
                  : "text-slate-300 hover:text-amber-300 hover:bg-slate-800/80"
              }`}
            >
              {cat.name}
            </button>
          ))}

          <button
            onClick={() => onSelectCategory("special_offers")}
            className="ml-auto px-3 py-1.5 text-xs font-bold text-amber-400 hover:text-amber-300 bg-amber-400/10 hover:bg-amber-400/20 rounded-lg flex items-center gap-1 border border-amber-400/30 transition-all cursor-pointer"
          >
            <Percent className="w-3.5 h-3.5" /> Special Deals & Clearance
          </button>
        </div>
      </div>

      {/* Mobile Sidebar Navigation Drawer */}
      {mobileMenuOpen && (
        <div className="lg:hidden fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-sm flex">
          <div className="bg-white w-4/5 max-w-sm h-full shadow-2xl flex flex-col p-5 overflow-y-auto">
            <div className="flex items-center justify-between pb-4 border-b border-slate-200">
              <div className="flex items-center gap-2">
                <LogoMark className="w-9 h-9" />
                <span className="font-black text-base tracking-tight" style={{ color: "#0E9C8E" }}>
                  DIVERSE<span style={{ color: "#C9B79C" }}>STATIONERY</span>
                </span>
              </div>
              <button
                onClick={() => setMobileMenuOpen(false)}
                className="p-1 rounded-lg text-slate-500 hover:bg-slate-100"
              >
                <X className="w-6 h-6" />
              </button>
            </div>

            <div className="py-4 space-y-1">
              <p className="text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-2">
                Browse Categories
              </p>
              <button
                onClick={() => {
                  onSelectCategory("all");
                  setMobileMenuOpen(false);
                }}
                className={`w-full text-left px-3 py-2.5 rounded-lg text-sm font-semibold transition-colors ${
                  selectedCategory === "all"
                    ? "bg-blue-900 text-white"
                    : "text-slate-700 hover:bg-slate-100"
                }`}
              >
                All Products
              </button>
              {categories.map((cat) => (
                <button
                  key={cat.id}
                  onClick={() => {
                    onSelectCategory(cat.id);
                    setMobileMenuOpen(false);
                  }}
                  className={`w-full text-left px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
                    selectedCategory === cat.id
                      ? "bg-blue-900 text-white"
                      : "text-slate-700 hover:bg-slate-100"
                  }`}
                >
                  {cat.name}
                </button>
              ))}
            </div>

            <div className="mt-auto pt-4 border-t border-slate-200 space-y-2">
              <div className="grid grid-cols-2 gap-2">
                <Link
                  href="/catalogue"
                  onClick={() => setMobileMenuOpen(false)}
                  className="py-2.5 bg-teal-600 hover:bg-teal-700 text-white font-bold text-xs rounded-xl flex items-center justify-center gap-1.5"
                >
                  <BookOpen className="w-4 h-4" /> Catalogue
                </Link>
                <Link
                  href="/price-list"
                  onClick={() => setMobileMenuOpen(false)}
                  className="py-2.5 bg-slate-800 hover:bg-slate-900 text-white font-bold text-xs rounded-xl flex items-center justify-center gap-1.5"
                >
                  <ListChecks className="w-4 h-4" /> Price List
                </Link>
              </div>
              <button
                onClick={() => {
                  setIsQuoteModalOpen(true);
                  setMobileMenuOpen(false);
                }}
                className="w-full py-2.5 bg-amber-500 hover:bg-amber-600 text-slate-950 font-bold text-sm rounded-xl flex items-center justify-center gap-2"
              >
                <FileText className="w-4 h-4" /> Get Bulk Quote
              </button>
              <button
                onClick={() => {
                  setIsTrackerOpen(true);
                  setMobileMenuOpen(false);
                }}
                className="w-full py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-semibold text-sm rounded-xl flex items-center justify-center gap-2"
              >
                <PackageCheck className="w-4 h-4 text-blue-900" /> Track My Order
              </button>
            </div>
          </div>
          <div className="flex-1" onClick={() => setMobileMenuOpen(false)} />
        </div>
      )}
    </header>
  );
};