"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { getCartCount } from "../lib/cart";


import {
  LuSparkles,
  LuStethoscope,
  LuHeartPulse,
  LuBaby,
  LuPill,
  LuHandHeart,
  LuPillBottle,

} from "react-icons/lu";
import {
  FiPhone,
  FiUser,
  FiHeart,
  FiShoppingCart,


} from "react-icons/fi";



const categories = [
  {
    name: "Medicines",
    icon: LuPill,
    subCategories: [
      "Pain Relief",
      "Antibiotics",
      "Diabetes",
      "Cold & Flu",
    ],
  },
  {
    name: "Health Care",
    icon: LuHeartPulse,
    subCategories: [
      "Vitamins",
      "Supplements",
      "Protein",
      "Immunity",
    ],
  },




  {
    name: "Health Care",
    icon: LuSparkles,
    subCategories: [
      "Vitamins",
      "Supplements",
      "Protein",
      "Immunity",
    ],
  },
  {
    name: "Health Care",
    icon: LuStethoscope,
    subCategories: [
      "Vitamins",
      "Supplements",
      "Protein",
      "Immunity",
    ],
  },
  {
    name: "Health Care",
    icon: LuHandHeart,
    subCategories: [
      "Vitamins",
      "Supplements",
      "Protein",
      "Immunity",
    ],
  },
  {
    name: "Health Care",
    icon: LuPillBottle,
    subCategories: [
      "Vitamins",
      "Supplements",
      "Protein",
      "Immunity",
    ],
  },

  {
    name: "Baby Care",
    icon: LuBaby,
    subCategories: [
      "Baby Milk",
      "Baby Food",
      "Diapers",
      "Wipes",
    ],
  },

];



import { FaWhatsapp } from "react-icons/fa";
export default function Header() {
  const [mobileMenu, setMobileMenu] = useState(false);
  const [mobileCategory, setMobileCategory] = useState(false);
  const [mobilePages, setMobilePages] = useState(false);

  const [language, setLanguage] = useState(false);
  const [currency, setCurrency] = useState(false);
  const [account, setAccount] = useState(false);
  const [showMenu, setShowMenu] = useState(false);
  const [activeCategory, setActiveCategory] = useState(0);
const [cartCount, setCartCount] = useState(0);

useEffect(() => {
  setCartCount(getCartCount());
}, []);

  return (
    <header className="w-full">

      {/* Top Header */}
      <div className="bg-gray-100 border-b border-[#EEEEEE]">
        <div className="max-w-7xl mx-auto">

          <div className="flex justify-between items-center h-10 text-[#777777] px-3 lg:px-0">

            {/* LEFT (Desktop only: Help + Language + Currency) */}
            <div className="hidden lg:flex items-center gap-6 text-sm text-[#777777]">

              <a href="#" className="hover:text-[#777777]">
                Help
              </a>

              {/* Language */}
              <div className="relative">
                <button
                  onClick={() => setLanguage(!language)}
                  className="hover:text-[#5CAF8B]"
                >
                  English ▼
                </button>

                {language && (
                  <div className="absolute right-0 mt-2 w-32 bg-white border rounded shadow-lg">
                    <button className="block w-full text-left px-4 py-2 hover:bg-gray-100">English</button>
                    <button className="block w-full text-left px-4 py-2 hover:bg-gray-100">Arabic</button>
                    <button className="block w-full text-left px-4 py-2 hover:bg-gray-100">French</button>
                  </div>
                )}
              </div>
              {/* Currency */}
              <div className="relative">
                <button
                  onClick={() => setCurrency(!currency)}
                  className="hover:text-[#EEEEEE]"
                >
                  USD ▼
                </button>

                {currency && (
                  <div className="absolute right-0 mt-2 w-24 bg-white border rounded shadow-lg">
                    <button className="block w-full text-left px-4 py-2 hover:bg-gray-100">USD</button>
                    <button className="block w-full text-left px-4 py-2 hover:bg-gray-100">EUR</button>
                    <button className="block w-full text-left px-4 py-2 hover:bg-gray-100">AED</button>
                  </div>
                )}
              </div>

            </div>

            {/* LEFT (MOBILE ONLY: Language + Currency only) */}
            <div className="flex lg:hidden items-center gap-4 text-sm text-[#777777]">

              <div className="relative">
                <button
                  onClick={() => setLanguage(!language)}
                  className="hover:text-[#5CAF8B]"
                >
                  EN ▼
                </button>
              </div>

              <div className="relative">
                <button
                  onClick={() => setCurrency(!currency)}
                  className="hover:text-[#5CAF8B]"
                >
                  USD ▼
                </button>
              </div>

            </div>

            {/* CENTER TEXT (Desktop only) */}
            <div className="hidden lg:block text-sm text-[#777777]">
              World's Fastest Online Shopping Destination
            </div>

            {/* RIGHT (Desktop + Mobile contact) */}
            <div className="flex items-center gap-4 lg:gap-5 text-sm">

              <Link href="#" className="flex items-center gap-1">
                <FiPhone size={16} />
                <span>+971 123 4567</span>
              </Link>

              <Link href="#" className="flex items-center gap-1">
                <FaWhatsapp size={16} />
                <span>+971 123 4567</span>
              </Link>

            </div>

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

      {/* Main Header */}
      <div className="bg-white">
        <div className="max-w-7xl mx-auto">

          <div className="flex items-center justify-between py-5">

            {/* Mobile Menu Button (smaller + better padding) */}
            <button
              className="lg:hidden ml-2 p-2 text-xl"
              onClick={() => setMobileMenu(!mobileMenu)}
            >
              ☰
            </button>

            {/* Logo */}
            <Link href="/">
              <h1 className="text-4xl font-bold text-[#5CAF8B]">
                Grabit
              </h1>
            </Link>

            {/* Search */}
            <div className="hidden lg:flex flex-1 mx-10">
              <select className="border border-[#EEEEEE] border-r-0 rounded-l-lg px-4 outline-none">
                <option>All Categories</option>
                <option>Vegetables</option>
                <option>Fruits</option>
                <option>Bakery</option>
                <option>Snacks</option>
              </select>

              <input
                type="text"
                placeholder="Search For Items..."
                className="w-full border-t border-b border-[#EEEEEE] outline-none p-3"
              />

              <button className="bg-[#5CAF8B] text-white px-6 rounded-r-lg">
                Search
              </button>
            </div>

            {/* Icons (TEXT HIDDEN ON MOBILE) */}
            <div className="flex items-center gap-4 lg:gap-6 pr-3 lg:pr-0">

              {/* Account */}
              <div className="relative">
                <button
                  onClick={() => setAccount(!account)}
                  className="flex items-center gap-2"
                >
                  <FiUser size={24} />
                  <span className="hidden lg:inline">Account</span>
                </button>

                {account && (
                  <div className="absolute right-0 mt-3 w-40 bg-white border border-[#EEEEEE] rounded shadow-lg">
                    <a href="#" className="block px-4 py-3 hover:bg-gray-100">Login</a>
                    <a href="#" className="block px-4 py-3 hover:bg-gray-100">Register</a>
                    <a href="#" className="block px-4 py-3 hover:bg-gray-100">Profile</a>
                  </div>
                )}
              </div>

              {/* Wishlist */}
              <button className="flex items-center gap-2">
                <FiHeart size={24} />
                <span className="hidden lg:inline">Wishlist</span>
              </button>

             {/* Cart */}
{/* Cart */}
<Link
  href="/cart"
  className="relative flex items-center gap-2"
>
  <div className="relative">
    <FiShoppingCart size={24} />

    {cartCount > 0 && (
      <span className="absolute -right-2 -top-2 flex h-5 min-w-5 items-center justify-center rounded-full bg-[#B570D4] px-1 text-[10px] font-semibold text-white">
        {cartCount}
      </span>
    )}
  </div>

  <span className="hidden lg:inline">Cart</span>
</Link>

            </div>

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

      {/* Mobile Search */}
      <div className="lg:hidden p-4 border-t border-[#EEEEEE]">
        <input
          type="text"
          placeholder="Search..."
          className="w-full border rounded p-3"
        />
      </div>

      {/* Bottom Header */}
      <div className="hidden lg:block border-t border-b border-gray-200 bg-white">
        <div className="max-w-7xl mx-auto">

          <div className="flex items-center justify-between h-16">

            <div className="relative group">
              {/* Button */}
              <button className="flex items-center gap-3 bg-[#5CAF8B] text-white px-6 py-3 rounded">
                <span>☰</span>
                <span>All Categories</span>
              </button>

              {/* Dropdown */}
              <div className="absolute top-full left-0 w-[650px] bg-white border border-gray-200 rounded-lg shadow-lg z-50 hidden group-hover:block">
                <div className="flex">

                  {/* Left Categories */}
                  <div className="w-64 bg-gray-50 p-4 border-r">
                    {categories.map((category, index) => {
                      const Icon = category.icon;

                      return (
                        <button
                          key={index}
                          onMouseEnter={() => setActiveCategory(index)}
                          className={`w-full flex items-center gap-3 p-3 rounded-md text-left mb-2 transition-all duration-200 ${activeCategory === index
                            ? "bg-white border border-[#e5e7eb]"
                            : "hover:bg-white"
                            }`}
                        >
                          <Icon
                            size={20}
                            strokeWidth={1}
                            className="text-[#b570d4]"
                          />
                          <span>{category.name}</span>
                        </button>
                      );
                    })}
                  </div>

                  {/* Right Sub Categories */}
                  <div className="flex-1 p-6">
                    <h4 className="text-[#5CAF8B] font-semibold mb-4">
                      {categories[activeCategory]?.name}
                    </h4>

                    <div className="grid grid-cols-2 gap-3">
                      {categories[activeCategory]?.subCategories?.map(
                        (item, index) => (
                          <a
                            key={index}
                            href="#"
                            className="text-gray-600 hover:text-[#5CAF8B]"
                          >
                            {item}
                          </a>
                        )
                      )}
                    </div>
                  </div>

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

            <nav className="flex items-center gap-8 text-[#777777]">
              <Link href="/" className="font-medium hover:text-[#5CAF8B]">Home</Link>
              <Link href="#" className="font-medium hover:text-[#5CAF8B]">Categories</Link>
              <Link href="#" className="font-medium hover:text-[#5CAF8B]">Products</Link>
              <Link href="#" className="font-medium hover:text-[#5CAF8B]">Pages</Link>
              <Link href="#" className="font-medium hover:text-[#5CAF8B]">Blog</Link>
              <Link href="#" className="font-medium hover:text-[#5CAF8B]">Offers</Link>
            </nav>

            <div className="flex items-center gap-2 text-gray-600">
              <span>📍</span>
              <span>Select Location</span>
            </div>

          </div>

        </div>
      </div>

      {/* Mobile Menu */}
      {mobileMenu && (
        <div className="lg:hidden fixed inset-0 z-50">

          {/* BACKDROP (click to close) */}
          <div
            className="absolute inset-0 bg-black/40"
            onClick={() => setMobileMenu(false)}
          />

          {/* SIDE MENU */}
          <div className="absolute left-0 top-0 h-full w-72 bg-white shadow-lg overflow-y-auto pt-4">

            <div className="py-2">
              <div className="flex justify-end px-4 pb-2">
                <button
                  onClick={() => setMobileMenu(false)}
                  className="text-2xl font-bold text-gray-600"
                >
                  ×
                </button>
              </div>
              <Link
                href="/"
                className="block px-5 py-3 border-b border-[#EEEEEE]"
                onClick={() => setMobileMenu(false)}
              >
                Home
              </Link>

              <button
                className="w-full flex justify-between px-5 py-3 border-b border-[#EEEEEE]"
                onClick={() => setMobileCategory(!mobileCategory)}
              >
                <span>Categories</span>
                <span>{mobileCategory ? "-" : "+"}</span>
              </button>

              {mobileCategory && (
                <div className="bg-gray-50">
                  <Link href="#" onClick={() => setMobileMenu(false)} className="block pl-10 py-3 border-b">Vegetables</Link>
                  <Link href="#" onClick={() => setMobileMenu(false)} className="block pl-10 py-3 border-b">Fruits</Link>
                  <Link href="#" onClick={() => setMobileMenu(false)} className="block pl-10 py-3 border-b">Bakery</Link>
                  <Link href="#" onClick={() => setMobileMenu(false)} className="block pl-10 py-3">Snacks</Link>
                </div>
              )}

              <Link href="#" onClick={() => setMobileMenu(false)} className="block px-5 py-3 border-b">
                Products
              </Link>

              <button
                className="w-full flex justify-between px-5 py-3 border-b"
                onClick={() => setMobilePages(!mobilePages)}
              >
                <span>Pages</span>
                <span>{mobilePages ? "-" : "+"}</span>
              </button>

              {mobilePages && (
                <div className="bg-gray-50">
                  <Link href="#" onClick={() => setMobileMenu(false)} className="block pl-10 py-3 border-b">About</Link>
                  <Link href="#" onClick={() => setMobileMenu(false)} className="block pl-10 py-3 border-b">FAQ</Link>
                  <Link href="#" onClick={() => setMobileMenu(false)} className="block pl-10 py-3 border-b">Shop</Link>
                  <Link href="#" onClick={() => setMobileMenu(false)} className="block pl-10 py-3">Contact</Link>
                </div>
              )}

              <Link href="#" onClick={() => setMobileMenu(false)} className="block px-5 py-3 border-b">
                Blog
              </Link>

              <Link href="#" onClick={() => setMobileMenu(false)} className="block px-5 py-3 border-b">
                Offers
              </Link>

              <Link href="#" onClick={() => setMobileMenu(false)} className="block px-5 py-3">
                Contact
              </Link>

            </div>

          </div>
        </div>
      )}

    </header>
  );
}