'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { useRouter, usePathname } from 'next/navigation';
import { useSelector, useDispatch } from 'react-redux';
import { RootState } from '@/store';
import { logout } from '@/store/authSlice';
import { BrandLogo } from '@/components/common/BrandLogo';
import { PublisherLogo } from '@/components/common/PublisherLogo';
import {
  BookOpen,
  ShoppingBag,
  User,
  Search,
  Menu,
  X,
  LogOut,
  Shield,
  ChevronDown,
  Sparkles,
  Flame,
  Globe,
  Award,
  Bookmark,
} from 'lucide-react';

import { setCurrency, CurrencyCode } from '@/store/cartSlice';
import { formatPrice } from '@/lib/currency';
import api from '@/lib/api';
import { bookCoverUrl } from '@/lib/bookImage';

export function Header() {
  const router = useRouter();
  const pathname = usePathname();
  const dispatch = useDispatch();
  const { user, isAuthenticated } = useSelector((state: RootState) => state.auth);
  const { totalQuantity, subtotal, currency } = useSelector((state: RootState) => state.cart);

  const [mounted, setMounted] = React.useState(false);
  const [search, setSearch] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('All');
  const [menuOpen, setMenuOpen] = useState(false);
  const [megaMenuOpen, setMegaMenuOpen] = useState(false);
  const [isListening, setIsListening] = useState(false);
  const [autocompleteResults, setAutocompleteResults] = useState<any[]>([]);

  React.useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return null;

  // Hide public storefront header on admin and seller dashboard routes
  if (pathname && (pathname.startsWith('/admin') || pathname.startsWith('/seller'))) {
    return null;
  }

  const handleVoiceSearch = () => {
    if (typeof window !== 'undefined' && ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window)) {
      const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
      const recognition = new SpeechRecognition();
      recognition.lang = 'en-IN';
      recognition.onstart = () => setIsListening(true);
      recognition.onresult = (event: any) => {
        const transcript = event.results[0][0].transcript;
        setSearch(transcript);
        setIsListening(false);
        router.push(`/books?search=${encodeURIComponent(transcript)}`);
      };
      recognition.onerror = () => setIsListening(false);
      recognition.onend = () => setIsListening(false);
      recognition.start();
    } else {
      alert('Voice Search is not supported on this browser.');
    }
  };

  const handleSearchChange = async (val: string) => {
    setSearch(val);
    if (val.trim().length > 1) {
      try {
        const res = await api.get(`/search/autocomplete?q=${encodeURIComponent(val)}`);
        setAutocompleteResults(res.data.data.suggestions || []);
      } catch {
        setAutocompleteResults([]);
      }
    } else {
      setAutocompleteResults([]);
    }
  };

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    if (search.trim()) {
      router.push(`/books?search=${encodeURIComponent(search.trim())}&category=${encodeURIComponent(selectedCategory)}`);
    }
  };

  const handleLogout = () => {
    dispatch(logout());
    router.push('/login');
  };

  return (
    <header className="sticky top-0 z-50 bg-white dark:bg-zinc-950 transition-colors shadow-sm">
      {/* Top Utility Bar matching exact image layout */}
      <div className="bg-[#701a08] text-white text-[11px] font-semibold py-1.5 px-4 sm:px-8 border-b border-[#581406]">
        <div className="max-w-[1400px] mx-auto flex items-center justify-between">
          {/* Left Currency Selector */}
          <div className="relative group">
            <button className="flex items-center gap-1 hover:text-amber-200 transition-colors uppercase font-bold py-0.5">
              {currency} <ChevronDown className="w-3 h-3 text-red-300" />
            </button>
            <div className="absolute top-full left-0 mt-1 w-28 bg-white dark:bg-zinc-900 text-zinc-800 dark:text-zinc-200 shadow-xl border border-zinc-200 dark:border-zinc-800 rounded-lg py-1.5 hidden group-hover:block z-50">
              {(['INR', 'USD', 'EUR', 'GBP'] as CurrencyCode[]).map((code) => (
                <button
                  key={code}
                  onClick={() => dispatch(setCurrency(code))}
                  className={`block w-full text-left px-3 py-1 text-[11px] font-bold hover:bg-zinc-100 dark:hover:bg-zinc-800 ${
                    currency === code ? 'text-[#701a08] bg-rose-50 dark:bg-rose-950/40' : ''
                  }`}
                >
                  {code} ({code === 'INR' ? '₹' : code === 'USD' ? '$' : code === 'EUR' ? '€' : '£'})
                </button>
              ))}
            </div>
          </div>

          {/* Right Utility Links & Google Language Selector */}
          <div className="flex items-center gap-4 text-[11px]">
            {/* Google Translate Widget & Trigger */}
            <div className="hidden sm:flex items-center bg-white text-zinc-800 px-2 py-0.5 rounded border border-zinc-300 gap-1 text-[11px] font-bold relative">
              <span className="text-[#4285F4] font-black">G</span>
              <select
                onChange={(e) => {
                  const lang = e.target.value;
                  const gtCombo = document.querySelector('.goog-te-combo') as HTMLSelectElement;
                  if (gtCombo) {
                    gtCombo.value = lang;
                    gtCombo.dispatchEvent(new Event('change'));
                  }
                }}
                className="bg-transparent text-zinc-800 focus:outline-none cursor-pointer text-[11px] font-semibold"
              >
                <option value="en">Select Language</option>
                <option value="hi">Hindi (हिंदी)</option>
                <option value="sa">Sanskrit (संस्कृतम्)</option>
                <option value="bn">Bengali (বাংলা)</option>
                <option value="ta">Tamil (தமிழ்)</option>
                <option value="es">Spanish</option>
                <option value="fr">French</option>
                <option value="de">German</option>
              </select>
              <div id="google_translate_element" className="hidden" />
            </div>

            <Link href="/books" className="hover:text-amber-200 transition-colors hidden md:inline">
              Online Book Store
            </Link>
            <Link href="/tracking" className="hover:text-amber-200 transition-colors flex items-center gap-1 font-bold text-amber-300">
              Track Order
            </Link>
            <Link href="/user/dashboard" className="hover:text-amber-200 transition-colors">
              Wishlist
            </Link>
            <Link href="/blogs" className="hover:text-amber-200 transition-colors">
              Blogs
            </Link>
            <Link href="/publish-with-us" className="hover:text-amber-200 transition-colors hidden sm:inline">
              Contact Us
            </Link>

            {isAuthenticated && user ? (
              <Link href="/user/dashboard" className="hover:text-amber-200 transition-colors font-bold text-amber-200">
                My Account
              </Link>
            ) : (
              <Link href="/login" className="hover:text-amber-200 transition-colors font-bold">
                Login / Register
              </Link>
            )}
          </div>
        </div>
      </div>

      {/* Main Header Bar - Catchy, Premium & Attractive */}
      <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-between gap-4 border-b border-[#701a08]">
        {/* Official Brand Logo */}
        <BrandLogo />

        {/* Center Search Bar matching screenshot */}
        <form onSubmit={handleSearch} className="hidden md:flex flex-1 max-w-lg items-center border-2 border-[#701a08] rounded-md overflow-hidden bg-white dark:bg-zinc-900 shadow-sm relative transition-all">
          <input
            type="text"
            placeholder="Search entire store here..."
            value={search}
            onChange={(e) => handleSearchChange(e.target.value)}
            className="w-full px-4 py-2 text-xs text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none"
          />

          {/* Voice Mic Button */}
          <button
            type="button"
            onClick={handleVoiceSearch}
            title="Voice Search"
            className={`px-2 text-zinc-400 hover:text-[#701a08] transition-colors ${
              isListening ? 'animate-pulse text-red-500' : ''
            }`}
          >
            🎤
          </button>

          <button type="submit" className="px-5 py-2 bg-[#701a08] hover:bg-[#581406] text-white text-xs font-bold flex items-center gap-1.5 transition-colors shrink-0">
            <Search className="w-3.5 h-3.5" /> Search
          </button>

          {/* Instant Autocomplete Suggestions Box */}
          {autocompleteResults.length > 0 && (
            <div className="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-zinc-900 rounded-2xl shadow-2xl border border-zinc-200 dark:border-zinc-800 py-2 z-50 overflow-hidden">
              <span className="text-[10px] font-extrabold uppercase tracking-wider text-zinc-400 px-4 py-1 block">
                Instant Suggestions
              </span>
              {autocompleteResults.map((item) => (
                <Link
                  key={item.id}
                  href={`/books/${item.slug}`}
                  onClick={() => setAutocompleteResults([])}
                  className="flex items-center gap-3 px-4 py-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
                >
                  <img src={bookCoverUrl(item.coverImage)} alt={item.title} className="w-8 h-10 object-cover rounded" />
                  <div>
                    <h5 className="text-xs font-bold text-zinc-900 dark:text-zinc-100 line-clamp-1">{item.title}</h5>
                    <span className="text-[10px] text-zinc-400">{item.authorName} • ₹{item.price}</span>
                  </div>
                </Link>
              ))}
            </div>
          )}
        </form>

        {/* Publisher Crest / Seal (Standard Publishers Bharat) matching user image */}
        <div className="hidden xl:block border-l border-zinc-200 dark:border-zinc-800 pl-4">
          <PublisherLogo />
        </div>

        {/* Right Shopping Cart Summary & Auth Actions */}
        <div className="flex items-center gap-4">
          {/* Shopping Cart Summary Widget */}
          <Link href="/cart" className="flex items-center gap-2.5 p-2 rounded-xl hover:bg-zinc-100 dark:hover:bg-zinc-900 transition-colors border border-zinc-200 dark:border-zinc-800">
            <div className="relative">
              <ShoppingBag className="w-6 h-6 text-[#701a08]" />
              <span className="absolute -top-1.5 -right-2 w-5 h-5 bg-[#701a08] text-white text-[10px] font-extrabold rounded-full flex items-center justify-center border-2 border-white dark:border-zinc-950">
                {totalQuantity}
              </span>
            </div>
            <div className="hidden sm:flex flex-col text-left">
              <span className="text-[10px] font-bold text-zinc-500 leading-none">
                Shopping Cart
              </span>
              <span className="text-xs font-extrabold text-[#701a08] leading-none mt-1">
                {formatPrice(subtotal || 0, currency)}
              </span>
            </div>
          </Link>

          {/* Auth State */}
          {isAuthenticated && user ? (
            <div className="relative group">
              <button className="flex items-center gap-2 p-1.5 rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-900 border border-zinc-200 dark:border-zinc-800">
                <div className="w-7 h-7 rounded-full bg-[#701a08] text-white font-bold flex items-center justify-center text-xs">
                  {user.firstName[0]}
                </div>
                <span className="text-xs font-semibold hidden lg:inline pr-2">{user.firstName}</span>
                <ChevronDown className="w-3.5 h-3.5 text-zinc-400 hidden lg:inline" />
              </button>

              <div className="absolute right-0 mt-2 w-52 bg-white dark:bg-zinc-900 rounded-2xl shadow-2xl border border-zinc-200 dark:border-zinc-800 py-2 hidden group-hover:block transition-all z-50">
                <div className="px-4 py-2 border-b border-zinc-100 dark:border-zinc-800">
                  <p className="text-xs font-bold text-zinc-900 dark:text-zinc-100">{user.firstName} {user.lastName}</p>
                  <p className="text-[10px] text-zinc-500">{user.email}</p>
                </div>
                
                <Link href="/user/dashboard" className="flex items-center gap-2.5 px-4 py-2 text-xs font-medium hover:bg-zinc-100 dark:hover:bg-zinc-800">
                  <User className="w-4 h-4 text-[#701a08]" /> My Account & Orders
                </Link>

                {user.role === 'ADMIN' && (
                  <Link href="/admin/dashboard" className="flex items-center gap-2.5 px-4 py-2 text-xs font-bold text-[#701a08] hover:bg-zinc-100 dark:hover:bg-zinc-800">
                    <Shield className="w-4 h-4" /> Admin Console
                  </Link>
                )}

                <button
                  onClick={handleLogout}
                  className="w-full flex items-center gap-2.5 px-4 py-2 text-xs font-semibold text-red-600 hover:bg-red-50 dark:hover:bg-red-950/30 text-left border-t border-zinc-100 dark:border-zinc-800 mt-1"
                >
                  <LogOut className="w-4 h-4" /> Sign Out
                </button>
              </div>
            </div>
          ) : (
            <div className="flex items-center gap-2">
              <Link href="/login" className="text-xs font-bold text-zinc-800 dark:text-zinc-200 hover:text-[#701a08] transition-colors px-2">
                Sign In
              </Link>
              <Link href="/register" className="text-xs font-bold px-4 py-2 rounded-xl bg-[#701a08] hover:bg-[#581406] text-white shadow-md transition-colors">
                Register
              </Link>
            </div>
          )}

          {/* Mobile Menu Toggle */}
          <button onClick={() => setMenuOpen(!menuOpen)} className="md:hidden p-2 rounded-xl hover:bg-zinc-100 dark:hover:bg-zinc-900">
            {menuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
          </button>
        </div>
      </div>

      {/* Sub-Header Navigation Bar matching exact full-width image styling */}
      <nav className="w-full bg-[#701a08] text-white py-2.5 px-4 shadow-md hidden lg:block relative">
        <div className="max-w-[1400px] mx-auto flex items-center justify-between text-xs uppercase font-extrabold tracking-wider">
          {/* Left White Subjects Box */}
          <div
            onMouseEnter={() => setMegaMenuOpen(true)}
            onMouseLeave={() => setMegaMenuOpen(false)}
            className="relative"
          >
            <button
              onClick={() => setMegaMenuOpen(!megaMenuOpen)}
              className="bg-white text-[#701a08] px-4 py-2 flex items-center gap-2 font-black uppercase text-xs shadow-sm hover:bg-zinc-100 transition-colors cursor-pointer"
            >
              <Menu className="w-4 h-4 text-[#701a08]" /> SUBJECTS <ChevronDown className="w-3.5 h-3.5 text-[#701a08]" />
            </button>

            {/* Subjects 3-Column Dropdown matching user screenshot */}
            {megaMenuOpen && (
              <div
                onMouseEnter={() => setMegaMenuOpen(true)}
                onMouseLeave={() => setMegaMenuOpen(false)}
                className="absolute top-full left-0 mt-1 w-[880px] bg-white dark:bg-zinc-950 text-zinc-800 dark:text-zinc-200 shadow-2xl border border-zinc-200 dark:border-zinc-800 p-6 grid grid-cols-3 gap-x-8 gap-y-1.5 z-50 rounded-2xl max-h-[540px] overflow-y-auto"
              >
                <div className="space-y-2">
                  {[
                    'Agriculture',
                    'Ayurveda',
                    'Children Books',
                    'Computer',
                    'Engineering & Technology',
                    'Food & Home Science',
                    'Hindi',
                    'Home Science',
                    'Journalism / Mass Communication',
                    'Library & Information Science',
                    'Mathematics',
                    'Political Science',
                    'Religion',
                    'School Book',
                    'Tourism',
                    'Yoga / Sports / Health',
                  ].map((sub) => (
                    <Link
                      key={sub}
                      href={`/books?subject=${encodeURIComponent(sub)}`}
                      onClick={() => setMegaMenuOpen(false)}
                      className="block text-xs font-semibold text-[#701a08] hover:text-amber-600 transition-colors py-0.5"
                    >
                      {sub}
                    </Link>
                  ))}
                </div>

                <div className="space-y-2">
                  {[
                    'Anthropology',
                    'Biography',
                    'Commerce / Economics / Management',
                    'Education',
                    'English Literature / Language',
                    'Geography',
                    'History',
                    'Hospital Management',
                    'Journals',
                    'Life Sciences / Biotechnology',
                    'Medical/Nursing/Hospital/Pharmaceutical',
                    'Psychology',
                    'Research Method',
                    'Social Work',
                    'Water Science',
                    'Yoga',
                  ].map((sub) => (
                    <Link
                      key={sub}
                      href={`/books?subject=${encodeURIComponent(sub)}`}
                      onClick={() => setMegaMenuOpen(false)}
                      className="block text-xs font-semibold text-[#701a08] hover:text-amber-600 transition-colors py-0.5"
                    >
                      {sub}
                    </Link>
                  ))}
                </div>

                <div className="space-y-2">
                  {[
                    'Architecture',
                    'Chemistry',
                    'Competition / Placement',
                    'Encyclopedia / Reference / General',
                    'Environmental Science',
                    'Geology',
                    'Home Page Book',
                    'Indian Knowledge System',
                    'Law',
                    'Material Science',
                    'Physics',
                    'Rare Books',
                    'Sanskrit / Indology',
                    'Sociology',
                    'Women Studies',
                  ].map((sub) => (
                    <Link
                      key={sub}
                      href={`/books?subject=${encodeURIComponent(sub)}`}
                      onClick={() => setMegaMenuOpen(false)}
                      className="block text-xs font-semibold text-[#701a08] hover:text-amber-600 transition-colors py-0.5"
                    >
                      {sub}
                    </Link>
                  ))}
                </div>
              </div>
            )}
          </div>

          {/* Right Navigation Bar Links matching user image */}
          <div className="flex items-center gap-4 text-[11px] tracking-wider text-white font-extrabold">
            <Link href="/" className="hover:text-amber-200 transition-colors">HOME</Link>
            
            {/* SUBJECTS Dropdown Trigger */}
            <div className="relative group py-2">
              <button className="flex items-center gap-1 hover:text-amber-200 transition-colors uppercase font-extrabold cursor-pointer">
                SUBJECTS <ChevronDown className="w-3 h-3 text-red-300" />
              </button>
              
              <div className="absolute left-0 mt-1 w-56 bg-white dark:bg-zinc-900 text-zinc-800 dark:text-zinc-200 shadow-2xl border border-zinc-200 dark:border-zinc-800 rounded-2xl py-3 hidden group-hover:block z-50 text-[11px]">
                {[
                  { name: 'Vedic & Spiritual', href: '/books?category=Vedic%20%26%20Spiritual' },
                  { name: 'Fiction & Classics', href: '/books?category=Fiction%20%26%20Classics' },
                  { name: 'History & Heritage', href: '/books?category=History%20%26%20Heritage' },
                  { name: 'Sanskrit & Indology', href: '/books?subject=Sanskrit%20%2F%20Indology' },
                  { name: 'Indian Knowledge System', href: '/books?subject=Indian%20Knowledge%20System' },
                  { name: 'All Subjects / Catalog', href: '/books' },
                ].map((cat) => (
                  <Link
                    key={cat.name}
                    href={cat.href}
                    className="block px-4 py-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-[#701a08] transition-colors font-bold"
                  >
                    {cat.name}
                  </Link>
                ))}
              </div>
            </div>

            <Link href="/about" className="hover:text-amber-200 transition-colors">ABOUT</Link>
            <Link href="/new-arrivals" className="hover:text-amber-200 transition-colors">NEW RELEASES</Link>
            <Link href="/institutions" className="hover:text-amber-200 transition-colors">INSTITUTION / UNIVERSITIES / COLLEGES</Link>
            <Link href="/publish-with-us" className="hover:text-amber-200 transition-colors">PUBLISH WITH US</Link>
            <Link href="/authors" className="hover:text-amber-200 transition-colors">AUTHORS</Link>
          </div>
        </div>
      </nav>
    </header>
  );
}