import React, { useState } from 'react';
import { ShoppingCart, Heart, User, Search, Menu, ChevronDown, Flame, Phone, Clock } from 'lucide-react';

interface NavbarProps {
  toggleTheme?: () => void;
  isDarkMode?: boolean;
  cartCount: number;
  onCartClick: () => void;
  logo?: string;
  onNavigate: (view: any) => void;
  currentView: string;
  contactPhone?: string;
}

const Navbar: React.FC<NavbarProps> = ({ cartCount, onCartClick, logo, onNavigate, currentView, contactPhone, settings }) => {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  
  let homeConfig: any = {};
  if (settings?.homePageJson) {
    try { homeConfig = JSON.parse(settings.homePageJson); } catch(e) {}
  }
  const navConfig = homeConfig.navbar || {
    countdownValue: '57:08:35:11',
    countdownLabel: 'Until the end of the sale',
    saleBadgeText: 'Almost Finished',
    saleBadgeHighlight: 'SALE'
  };

  const mainLinks = [
    { name: 'Home', id: 'home' },
    { name: 'Shop', id: 'shop' },
    { name: 'Fruits & Vegetables', id: 'fruits' },
    { name: 'Beverages', id: 'beverages' },
    { name: 'Blog', id: 'blog' },
    { name: 'Contact', id: 'contact' },
  ];

  const handleLinkClick = (e: React.MouseEvent, id: string) => {
    e.preventDefault();
    setIsMobileMenuOpen(false);
    onNavigate(id);
  };

  return (
    <div className="w-full bg-white shadow-sm font-sans flex flex-col z-50 relative">
      {/* Top promotional & utility bar */}
      <div className="bg-[#634C9F] text-white text-[11px] md:text-xs font-medium py-2 px-4 shadow-inner">
        <div className="container mx-auto flex flex-col md:flex-row justify-between items-center gap-2">
          
          <div className="flex items-center gap-4">
            <span className="hidden md:inline-block">FREE delivery. Discount code placed. Place your order now</span>
            {/* Countdown placeholder */}
            <div className="flex items-center gap-1.5 ml-0 md:ml-4 bg-white/20 px-2 py-0.5 rounded text-white font-bold opacity-90 tracking-widest text-[10px]">
              <Clock size={12} />
              {navConfig.countdownLabel && <span className="mr-1">{navConfig.countdownLabel}:</span>}
              {navConfig.countdownValue.split(':').map((num: string, i: number) => (
                <React.Fragment key={i}>
                  <span>{num}</span>
                  {i < navConfig.countdownValue.split(':').length - 1 && <span>:</span>}
                </React.Fragment>
              ))}
            </div>
          </div>
          
          <div className="flex items-center gap-4 md:gap-6 ml-auto w-full md:w-auto justify-between md:justify-end text-[11px]">
            <div className="flex items-center gap-2">
              <span className="opacity-80">Call us online 24/7</span>
              <span className="font-bold flex items-center gap-1">
                <Phone size={12} /> {contactPhone || '+880 1790-014219'}
              </span>
            </div>
            <div className="flex items-center gap-3">
              <button className="hover:text-amber-200 transition-colors flex items-center gap-1">English <ChevronDown size={10} /></button>
              <button className="hover:text-amber-200 transition-colors flex items-center gap-1">USD <ChevronDown size={10} /></button>
            </div>
          </div>
        </div>
      </div>

      {/* Middle Header (Logo, Search, Icons) */}
      <div className="border-b border-gray-100">
        <div className="container mx-auto px-4 py-4 md:py-6 flex flex-wrap md:flex-nowrap items-center justify-between gap-4">
          
          {/* Logo & Mobile Menu Toggle */}
          <div className="flex items-center gap-3">
            <button 
              className="md:hidden p-1 text-gray-700" 
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            >
              <Menu size={24} />
            </button>
            
            <div 
              onClick={() => onNavigate('home')}
              className="flex items-center gap-2 cursor-pointer"
            >
              {logo ? (
                <img src={logo} alt="Logo" className="w-auto h-10 md:h-12 object-contain" />
              ) : (
                <div className="flex items-center gap-2">
                  <div className="w-10 h-10 bg-[#634C9F] rounded-xl flex items-center justify-center text-white">
                    <ShoppingCart className="w-6 h-6" />
                  </div>
                  <span className="text-xl md:text-2xl font-black tracking-tight text-[#202342]">
                    Shop<span className="text-[#634C9F] font-bold">Store</span>
                  </span>
                </div>
              )}
            </div>
          </div>

          {/* Search Bar - Hidden on small mobile, visible on sm+ */}
          <div className="hidden sm:flex flex-1 max-w-3xl ml-4 mr-4">
            <div className="w-full flex rounded-full border border-gray-300 bg-gray-50 overflow-hidden focus-within:border-[#634C9F] focus-within:ring-1 focus-within:ring-[#634C9F] transition-all">
              <div className="hidden md:flex items-center px-4 border-r border-gray-300 bg-white text-gray-600 text-sm font-medium whitespace-nowrap cursor-pointer hover:bg-gray-50">
                All Categories <ChevronDown size={14} className="ml-1" />
              </div>
              <input 
                type="text" 
                placeholder="Search for products, categories or brands..."
                className="flex-1 bg-transparent border-none px-4 py-2.5 text-sm outline-none text-[#202342] w-full"
              />
              <button className="bg-transparent text-gray-500 px-4 hover:text-[#634C9F] transition-colors">
                <Search size={20} />
              </button>
            </div>
          </div>

          {/* Utility Icons */}
          <div className="flex items-center gap-5">
            <button className="flex flex-col items-center justify-center text-[#202342] hover:text-[#634C9F] transition-colors group">
              <User size={24} strokeWidth={1.5} className="group-hover:scale-105 transition-transform" />
            </button>
            
            <button className="flex flex-col items-center justify-center text-[#202342] hover:text-[#634C9F] transition-colors relative group">
              <Heart size={24} strokeWidth={1.5} className="group-hover:scale-105 transition-transform" />
              <span className="absolute -top-1.5 -right-1.5 bg-red-600 text-white text-[10px] font-bold w-4.5 h-4.5 rounded-full flex items-center justify-center border-2 border-white">0</span>
            </button>
            
            <button 
              onClick={onCartClick}
              className="flex items-center gap-2 group cursor-pointer text-[#202342] hover:text-[#634C9F]"
            >
              <div className="relative">
                <ShoppingCart size={26} strokeWidth={1.5} className="group-hover:scale-110 transition-transform" />
                {cartCount > 0 && (
                  <span className="absolute -top-1.5 -right-1.5 bg-red-600 text-white text-[10px] font-bold w-4.5 h-4.5 rounded-full flex items-center justify-center border-2 border-white">
                    {cartCount}
                  </span>
                )}
              </div>
              <div className="flex flex-col items-start hidden lg:flex ml-1">
                <span className="text-sm font-bold text-[#202342] leading-tight">৳ ০.০০</span>
              </div>
            </button>
          </div>

          {/* Mobile Search - Visible only on xs */}
          <div className="w-full sm:hidden mt-2">
            <div className="flex rounded-full border border-gray-300 bg-gray-50 overflow-hidden focus-within:border-[#634C9F]">
              <input 
                type="text" 
                placeholder="Search..."
                className="flex-1 bg-transparent border-none px-4 py-2 text-sm outline-none w-full"
              />
              <button className="text-gray-500 px-4">
                <Search size={18} />
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom Main Navigation */}
      <div className="container mx-auto px-4 hidden md:flex items-center gap-6 py-0 relative">
        {/* Categories Button */}
        <div className="relative group">
          <button className="bg-transparent border border-gray-200 border-b-0 text-[#202342] px-5 py-3.5 flex items-center gap-3 font-bold rounded-t-xl min-w-[240px] hover:bg-gray-50 transition-colors shadow-sm">
            <Menu size={20} />
            All Categories
          </button>
        </div>

        {/* Main Links */}
        <div className="flex items-center gap-3 lg:gap-5 flex-1">
          {mainLinks.map((link) => (
             <button
              key={link.id}
              onClick={(e) => handleLinkClick(e, link.id)}
              className={`font-semibold text-[13px] lg:text-sm py-4 transition-colors hover:text-[#634C9F] ${currentView === link.id ? 'text-[#634C9F]' : 'text-[#202342]'}`}
            >
              {link.name}
            </button>
          ))}
        </div>

        {/* Right side trending */}
        <div className="flex items-center gap-5 text-sm font-semibold">
          <button className="text-[#202342] hover:text-[#634C9F] transition-colors flex items-center gap-1 font-bold text-[13px]">
            Trending Products <ChevronDown size={14} />
          </button>
          <button className="text-red-600 hover:text-red-700 transition-colors flex items-center font-bold text-[13px] gap-1">
            {navConfig.saleBadgeText} <span className="bg-red-600 text-white text-[10px] px-1.5 py-0.5 rounded-sm uppercase tracking-wider">{navConfig.saleBadgeHighlight}</span>
          </button>
        </div>
      </div>

      {/* Mobile Drawer-like Menu */}
      {isMobileMenuOpen && (
        <div className="md:hidden absolute top-full left-0 right-0 bg-white shadow-2xl border-t border-gray-100 z-50">
          <div className="flex flex-col">
            {mainLinks.map((link) => (
              <button 
                key={link.id} 
                onClick={(e) => handleLinkClick(e, link.id)} 
                className={`text-left text-sm font-bold px-6 py-4 border-b border-gray-50 transition-colors ${currentView === link.id ? 'text-[#634C9F] bg-purple-50' : 'text-[#202342]'}`}
              >
                {link.name}
              </button>
            ))}
            <div className="p-6 bg-gray-50">
               <p className="text-gray-500 text-xs font-bold uppercase mb-2">Need Help?</p>
               <a href={`tel:${contactPhone || '+880 1790-014219'}`} className="text-[#634C9F] font-bold text-lg block hover:underline">
                 {contactPhone || '+880 1790-014219'}
               </a>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Navbar;
