'use client';

import React, { useState, useEffect } from 'react';
import api from '@/lib/api';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/context/AuthContext';
import { useCart } from '@/context/CartContext';
import { useSiteSettings } from '@/context/SiteSettingsContext';
import { 
  ShoppingCart, 
  User, 
  LogOut, 
  Search, 
  Menu, 
  X, 
  LayoutDashboard, 
  Phone, 
  Truck, 
  Heart,
  ChevronDown
} from 'lucide-react';



interface HeaderProps {
  onCartToggle?: () => void;
}

export const Header: React.FC<HeaderProps> = ({ onCartToggle }) => {
  const { user, logout } = useAuth();
  const { cartCount, setCartOpen } = useCart();
  const { settings, loading } = useSiteSettings();
  const router = useRouter();
  const [searchQuery, setSearchQuery] = useState('');
  const [menuOpen, setMenuOpen] = useState(false);
  const [profileOpen, setProfileOpen] = useState(false);
  const [expandedCategories, setExpandedCategories] = useState<Record<string, boolean>>({});

  useEffect(() => {
    const handleToggle = () => setMenuOpen(prev => !prev);
    window.addEventListener('toggle-mobile-menu', handleToggle);
    return () => window.removeEventListener('toggle-mobile-menu', handleToggle);
  }, []);

  // Resolved mobile nav items: prefer Menu Builder mobile items, fallback to categories
  const mobileNavItems = (settings?.navigation?.mobile && settings.navigation.mobile.length > 0)
    ? settings.navigation.mobile
    : (settings?.categories || []).map((cat: any) => ({
        id: cat.id,
        name: cat.name,
        link_url: `/shop?categorySlug=${cat.slug}`,
        children: [],
      }));

  const toggleCategory = (slug: string) => {
    setExpandedCategories(prev => ({
      ...prev,
      [slug]: !prev[slug]
    }));
  };

  const handleSearchSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (searchQuery.trim()) {
      router.push(`/shop?search=${encodeURIComponent(searchQuery.trim())}`);
    }
  };

  const logoUrl = settings?.settings?.store_logo 
    ? (settings.settings.store_logo.startsWith('http') 
        ? settings.settings.store_logo 
        : `${process.env.NEXT_PUBLIC_API_URL || 'http://127.0.0.1:8000'}/storage/${settings.settings.store_logo}`)
    : null;

  const activeAnnouncement = settings?.announcements
    ? settings.announcements.find(a => a.is_active)
    : null;

  return (
    <header className="w-full bg-white">
      {/* 0. Top Announcement Bar */}
      {activeAnnouncement && (
        <div 
          style={{ 
            backgroundColor: activeAnnouncement.bg_color || 'var(--color-primary-dark)', 
            color: activeAnnouncement.text_color || '#ffffff' 
          }} 
          className="w-full text-center text-xs py-2 px-4 font-bold relative z-50 flex items-center justify-center transition-all duration-300"
        >
          {activeAnnouncement.link_url ? (
            <Link href={activeAnnouncement.link_url} className="hover:underline">
              {activeAnnouncement.text}
            </Link>
          ) : (
            <span>{activeAnnouncement.text}</span>
          )}
        </div>
      )}

      {/* 1. Top Green Information Bar */}
      {/* 1. Top Green Information Bar */}
      {(() => {
        const showDesktop = settings?.settings?.show_top_bar_desktop !== '0';
        const showMobile = settings?.settings?.show_top_bar_mobile === '1';
        
        if (!showDesktop && !showMobile) return null;

        const topBarLinks = settings?.navigation?.top_bar || [];

        return (
          <div className={`w-full bg-primary text-white text-xs py-2 ${showDesktop ? 'sm:block' : 'sm:hidden'} ${showMobile ? 'block' : 'hidden'}`}>
            <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8 flex flex-col sm:flex-row justify-between items-center gap-2">
              <div className="flex items-center gap-2 font-medium">
                <Phone className="h-3.5 w-3.5 text-orange-400" />
                <span>{settings?.settings?.store_hotline_text || `Hotline: ${settings?.settings?.store_phone || '+880 1700-000000'} (9 AM - 10 PM)`}</span>
              </div>
              <div className="flex items-center gap-6 font-medium">
                {topBarLinks.map((link: any, index: number) => (
                  <Link 
                    key={index} 
                    href={link.link_url} 
                    className={`hover:text-orange-300 transition-colors ${link.is_bold || link.name === 'সহায়তা' || link.name === 'Help' || link.name === 'Support' ? 'font-semibold' : ''}`}
                  >
                    {link.name}
                  </Link>
                ))}
              </div>
            </div>
          </div>
        );
      })()}

      <div className="w-full border-b border-slate-100 py-2">
        <div className="header-branding-container mx-auto max-w-7xl px-3 sm:px-6 lg:px-8">
          <div className="flex flex-col lg:flex-row items-center justify-between gap-3 lg:gap-4">
            
            {/* Logo and Mobile controls */}
            <div className="flex w-full lg:w-auto items-center justify-between">
              {/* Hamburger Menu Toggle (mobile only) */}
              <button
                onClick={() => setMenuOpen(!menuOpen)}
                className="p-0 text-secondary lg:hidden cursor-pointer focus:outline-none"
              >
                <div className="flex flex-col gap-1 w-5 h-3.5 justify-center">
                  <span className="w-5 h-0.5 bg-primary rounded-full"></span>
                  <span className="w-3.5 h-0.5 bg-primary rounded-full ml-auto"></span>
                  <span className="w-5 h-0.5 bg-primary rounded-full"></span>
                </div>
              </button>

              {/* Logo Link */}
              <div className="flex-1 flex items-center justify-center lg:flex-initial lg:items-center lg:justify-start">
                <Link href="/" className="flex items-center gap-2.5">
                  {logoUrl ? (
                    <img 
                      src={logoUrl} 
                      alt={settings?.settings?.site_name || "Sawdabazar Logo"} 
                      className="h-9 w-auto object-contain max-w-[130px] md:max-w-[140px] block my-auto" 
                      onError={(e) => {
                        e.currentTarget.style.display = 'none'; // if image fails, fallback to custom text logo
                        const parent = e.currentTarget.parentElement;
                        if (parent) {
                          const fallback = parent.querySelector('.fallback-logo');
                          if (fallback) fallback.classList.remove('hidden');
                        }
                      }}
                    />
                  ) : null}
                  <div className={`fallback-logo flex items-center gap-2.5 ${logoUrl ? 'hidden' : ''}`}>
                    {/* Logo Leaf/Organic Icon */}
                    <div className="h-9 w-9 rounded-full bg-primary flex items-center justify-center text-white font-black shadow-sm">
                      {settings?.settings?.site_name ? (
                        <span className="text-lg text-orange-400">
                          {settings.settings.site_name.charAt(0).toUpperCase()}
                        </span>
                      ) : (
                        <span className="text-lg text-orange-400">S</span>
                      )}
                    </div>
                    <div className="flex flex-col text-left">
                      <span className="text-xl font-black tracking-tight text-secondary leading-none">
                        {settings?.settings?.site_name ? (
                          <>
                            {settings.settings.site_name.slice(0, 4)}
                            <span className="text-secondary">{settings.settings.site_name.slice(4)}</span>
                          </>
                        ) : (
                          <>Sawd<span className="text-secondary">abazar</span></>
                        )}
                      </span>
                      <span className="text-[9px] text-slate-500 font-bold tracking-wider uppercase mt-0.5">
                        {settings?.settings?.site_slogan || "Pure & Safe Food"}
                      </span>
                    </div>
                  </div>
                </Link>
                      <div className="flex items-center gap-3 lg:hidden">
              {/* Mobile Cart Button (mobile only) */}
              <button
                onClick={() => setCartOpen(true)}
                className="relative p-0 text-slate-600 lg:hidden cursor-pointer"
              >
                <ShoppingCart className="h-6 w-6 text-secondary" />
                {cartCount > 0 && (
                  <span className="absolute -top-1.5 -right-1.5 flex h-4.5 w-4.5 items-center justify-center rounded-full bg-secondary text-[9px] font-bold text-white shadow-sm ring-1 ring-white">
                    {cartCount}
                  </span>
                )}
              </button>
            </div>
              </div>

            </div>

            {/* Centered Search Bar */}
            <form 
              onSubmit={handleSearchSubmit} 
              className="hidden lg:flex w-full lg:max-w-xl items-center bg-white border-2 border-primary rounded-md overflow-hidden shadow-sm"
            >
              <input
                type="text"
                placeholder="Search any product"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full text-sm py-2 px-4 focus:outline-none placeholder:text-slate-400 text-slate-700"
              />
              <button 
                type="submit" 
                className="bg-primary hover:bg-primary-medium text-white px-6 py-2.5 transition-colors flex items-center gap-1 font-open-sans font-normal text-[14px]"
              >
                <Search className="h-4 w-4" />
                <span className="hidden sm:inline">Search</span>
              </button>
            </form>

            {/* Desktop Navigation Icons */}
            <div className="hidden lg:flex items-center gap-6">
              
              {/* Order Track */}
              <Link 
                href="/track-order" 
                className="flex flex-col items-center text-slate-700 hover:text-secondary transition-colors group"
              >
                <div className="relative p-1 rounded-full bg-slate-50 group-hover:bg-emerald-50 transition-colors">
                  <Truck className="h-[22px] w-[22px] text-slate-600 group-hover:text-secondary" />
                </div>
                <span className="font-open-sans text-[14px] font-normal mt-1">Track Order</span>
              </Link>

              {/* Wishlist */}
              <Link 
                href="/dashboard" 
                className="flex flex-col items-center text-slate-700 hover:text-secondary transition-colors group"
              >
                <div className="relative p-1 rounded-full bg-slate-50 group-hover:bg-emerald-50 transition-colors">
                  <Heart className="h-[22px] w-[22px] text-slate-600 group-hover:text-secondary" />
                </div>
                <span className="font-open-sans text-[14px] font-normal mt-1">Wishlist</span>
              </Link>

              {/* User Account / Profile */}
              <div className="relative">
                {user ? (
                  <div className="relative">
                    <button
                      onClick={() => setProfileOpen(!profileOpen)}
                      className="flex flex-col items-center text-slate-700 hover:text-secondary focus:outline-none group"
                    >
                      <div className="h-8 w-8 rounded-full bg-emerald-100 flex items-center justify-center text-secondary font-black text-sm border border-emerald-200">
                        {user.name.charAt(0).toUpperCase()}
                      </div>
                      <span className="font-open-sans text-[14px] font-normal mt-1 flex items-center gap-0.5">
                        Profile <ChevronDown className="h-3 w-3" />
                      </span>
                    </button>

                    {profileOpen && (
                      <div className="absolute right-0 mt-2 w-48 rounded-lg border border-slate-100 bg-white p-1 shadow-lg ring-1 ring-black/5 z-50">
                        <div className="px-3 py-2 border-b border-slate-100">
                          <p className="font-open-sans text-[14px] font-normal text-slate-900 truncate">{user.name}</p>
                          <p className="font-open-sans text-[14px] font-normal text-slate-500 truncate">{user.email}</p>
                        </div>
                        <Link
                          href="/dashboard"
                          onClick={() => setProfileOpen(false)}
                          className="flex items-center gap-2 px-3 py-2 font-open-sans text-[14px] font-normal text-slate-700 hover:bg-slate-50 hover:text-secondary rounded-md transition-colors"
                        >
                          <LayoutDashboard className="h-4 w-4" />
                          Dashboard
                        </Link>
                        <button
                          onClick={() => {
                            setProfileOpen(false);
                            logout();
                          }}
                          className="flex w-full items-center gap-2 px-3 py-2 font-open-sans text-[14px] font-normal text-rose-600 hover:bg-rose-50 rounded-md transition-colors text-left"
                        >
                          <LogOut className="h-4 w-4" />
                          Log Out
                        </button>
                      </div>
                    )}
                  </div>
                ) : (
                  <Link 
                    href="/login" 
                    className="flex flex-col items-center text-slate-700 hover:text-secondary transition-colors group"
                  >
                    <div className="p-1 rounded-full bg-slate-50 group-hover:bg-emerald-50 transition-colors">
                      <User className="h-[22px] w-[22px] text-slate-600 group-hover:text-secondary" />
                    </div>
                    <span className="font-open-sans text-[14px] font-normal mt-1">Profile</span>
                  </Link>
                )}
              </div>

              {/* Cart Trigger */}
              <button
                onClick={() => setCartOpen(true)}
                className="flex flex-col items-center text-slate-700 hover:text-secondary transition-colors group relative"
              >
                <div className="relative p-1 rounded-full bg-slate-50 group-hover:bg-emerald-50 transition-colors">
                  <ShoppingCart className="h-[22px] w-[22px] text-slate-600 group-hover:text-secondary" />
                  {cartCount > 0 && (
                    <span className="absolute -top-1.5 -right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-secondary text-[10px] font-bold text-white shadow-sm ring-2 ring-white">
                      {cartCount}
                    </span>
                  )}
                </div>
                <span className="font-open-sans text-[14px] font-normal mt-1">Cart</span>
              </button>

            </div>

          </div>
        </div>
      </div>

      {/* 3. Forest Green Categories Navigation Bar */}
      {!loading && settings?.settings?.show_category_on_header !== 'off' && (
        <div className="w-full bg-primary-medium text-white shadow-sm hidden lg:block">
          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <nav className="flex items-center justify-between">
              <div className="flex items-center gap-1 font-open-sans text-[14px] font-normal">
                {!(settings?.navigation?.header && settings.navigation.header.length > 0) && (
                  <Link href="/" className="px-4 py-3 bg-secondary hover:bg-secondary-dark text-white transition-colors">Home</Link>
                )}
                {settings?.navigation?.header && settings.navigation.header.length > 0 ? (
                  settings.navigation.header.map((item) => (
                    item.children && item.children.length > 0 ? (
                      <div key={item.id} className="relative group/menu py-3">
                        <button className="px-4 py-1.5 flex items-center gap-1 hover:text-orange-400 transition-colors">
                          <span>{item.name}</span>
                          <ChevronDown className="h-3 w-3" />
                        </button>
                        <div className="absolute left-0 mt-3 hidden group-hover/menu:block bg-white text-slate-800 border border-slate-100 rounded-lg shadow-lg py-2 w-48 z-50">
                          {item.children.map((child) => (
                            <Link
                              key={child.id}
                              href={child.link_url}
                              className="block px-4 py-2 text-xs hover:bg-emerald-50 hover:text-secondary font-bold"
                            >
                              {child.name}
                            </Link>
                          ))}
                        </div>
                      </div>
                    ) : (
                      <Link
                        key={item.id}
                        href={item.link_url}
                        className={
                          item.link_url === '/'
                            ? "px-4 py-3 bg-secondary hover:bg-secondary-dark text-white transition-colors"
                            : item.link_url === '/shop'
                            ? "px-4 py-3 hover:bg-primary-dark transition-colors text-orange-400"
                            : "px-4 py-3 hover:bg-primary-dark transition-colors"
                        }
                      >
                        {item.name}
                      </Link>
                    )
                  ))
                ) : (
                  (settings?.categories || []).map((cat) => (
                    <Link
                      key={cat.id}
                      href={`/shop?categorySlug=${cat.slug}`}
                      className="px-4 py-3 hover:bg-primary-dark transition-colors"
                    >
                      {cat.name}
                    </Link>
                  ))
                )}
                {!(settings?.navigation?.header && settings.navigation.header.length > 0) && (
                  <Link href="/shop" className="px-4 py-3 hover:bg-primary-dark transition-colors text-orange-400">Shop</Link>
                )}
              </div>
            </nav>
          </div>
        </div>
      )}

      {/* Mobile Drawer (Left-sliding Navigation Menu) */}
      <div 
        className={`fixed inset-0 z-50 flex lg:hidden bg-black/50 backdrop-blur-xs transition-opacity duration-300 ${
          menuOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'
        }`}
        onClick={() => setMenuOpen(false)}
      >
        {/* The Drawer Panel sliding from left */}
        <div 
          className={`w-80 max-w-[85vw] bg-white h-screen flex flex-col p-4 shadow-2xl overflow-y-auto transition-transform duration-300 ease-out ${
            menuOpen ? 'translate-x-0' : '-translate-x-full'
          }`}
          onClick={(e) => e.stopPropagation()}
        >
          {/* Account Card (Mockup Style) */}
          <div className="bg-secondary text-white p-4 rounded-xl flex items-center justify-between shadow-sm mb-3">
            <div className="flex items-center gap-3">
              <div className="h-10 w-10 rounded-full bg-white flex items-center justify-center text-slate-400 flex-shrink-0">
                {user ? (
                  <span className="text-base font-black text-secondary uppercase">
                    {user.name.charAt(0)}
                  </span>
                ) : (
                  <User className="h-6 w-6 stroke-slate-400 fill-slate-100" />
                )}
              </div>
              <div className="flex flex-col text-left">
                <span className="text-xs font-medium text-orange-100">Hello there!</span>
                {user ? (
                  <span className="text-sm font-bold truncate max-w-[130px]">{user.name}</span>
                ) : (
                  <Link 
                    href="/login" 
                    onClick={() => setMenuOpen(false)} 
                    className="text-sm font-bold hover:underline"
                  >
                    Signin
                  </Link>
                )}
              </div>
            </div>
            {user && (
              <div className="flex gap-2">
                <Link
                  href="/dashboard"
                  onClick={() => setMenuOpen(false)}
                  className="p-1 rounded hover:bg-orange-600/50 text-white transition-colors"
                  title="Dashboard"
                >
                  <LayoutDashboard className="h-4 w-4" />
                </Link>
                <button
                  onClick={() => {
                    setMenuOpen(false);
                    logout();
                  }}
                  className="p-1 rounded hover:bg-orange-600/50 text-white transition-colors"
                  title="Logout"
                >
                  <LogOut className="h-4 w-4" />
                </button>
              </div>
            )}
          </div>

          {/* Mobile Navigation Menu */}
          <div className="mt-2 pb-6">
            <div className="bg-[#f8f9fa] border border-slate-100 rounded-2xl px-4 py-1 flex flex-col divide-y divide-slate-200/50 text-left">
              {/* Home link */}
              {!(settings?.navigation?.mobile && settings.navigation.mobile.length > 0) && (
                <Link 
                  href="/" 
                  onClick={() => setMenuOpen(false)} 
                  className="block text-xs font-semibold text-slate-700 py-3.5 hover:text-secondary transition-colors"
                >
                  Home
                </Link>
              )}

              {/* Dynamic Mobile Menu Items (from Menu Builder) with optional sub-menus */}
              {mobileNavItems.map((item: any) => (
                item.children && item.children.length > 0 ? (
                  <div key={item.id}>
                    <button
                      onClick={() => toggleCategory(String(item.id))}
                      className="w-full flex items-center justify-between text-xs font-semibold text-slate-700 py-3.5 hover:text-secondary transition-colors"
                    >
                      <span>{item.name}</span>
                      <ChevronDown className={`h-3.5 w-3.5 transition-transform ${expandedCategories[String(item.id)] ? 'rotate-180' : ''}`} />
                    </button>
                    {expandedCategories[String(item.id)] && (
                      <div className="pl-3 pb-2 flex flex-col gap-1">
                        {item.children.map((child: any) => (
                          <Link
                            key={child.id}
                            href={child.link_url}
                            onClick={() => setMenuOpen(false)}
                            className="block text-xs font-medium text-slate-550 py-2 hover:text-secondary transition-colors border-l-2 border-slate-200 pl-3"
                          >
                            {child.name}
                          </Link>
                        ))}
                      </div>
                    )}
                  </div>
                ) : (
                  <Link
                    key={item.id}
                    href={item.link_url}
                    onClick={() => setMenuOpen(false)}
                    className={
                      item.link_url === '/shop'
                        ? "block text-xs font-bold text-secondary py-3.5 transition-colors"
                        : "block text-xs font-semibold text-slate-700 py-3.5 hover:text-secondary transition-colors"
                    }
                  >
                    {item.name}
                  </Link>
                )
              ))}

              {!(settings?.navigation?.mobile && settings.navigation.mobile.length > 0) && (
                <Link 
                  href="/shop" 
                  onClick={() => setMenuOpen(false)} 
                  className="block text-xs font-bold text-secondary py-3.5 transition-colors"
                >
                  Shop
                </Link>
              )}
            </div>
          </div>
        </div>

        {/* Backdrop Close Button (Top Right next to Drawer) */}
        <div className="flex-1 flex justify-start p-4 md:p-6 self-start">
          <button 
            onClick={() => setMenuOpen(false)}
            className="h-10 w-10 flex items-center justify-center rounded-full bg-white/20 text-white hover:bg-white/30 cursor-pointer focus:outline-none transition-colors"
          >
            <X className="h-6 w-6" />
          </button>
        </div>
      </div>
    </header>
  );
};