"use client";

import dynamic from "next/dynamic";
import Link from "next/link";
import Image from "next/image";
import { usePathname, useRouter } from "next/navigation";
import { useSelector } from "react-redux";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { motion } from "framer-motion";
import { FaCartShopping, FaMagnifyingGlass } from "react-icons/fa6";
import {
  BsBag,
  BsChevronDown,
  BsEnvelope,
  BsFileText,
  BsGrid,
  BsHouse,
  BsJournalText,
  BsPeople,
  BsPerson,
  BsShieldCheck,
  BsShop,
  BsList,
  BsX,
} from "react-icons/bs";

import useDebounce from "@/lib/hooks/useDebounce";
import { getDatas } from "@/lib/api/common";
import { useSettings } from "../../providers/SettingsProvider";
import CartSidebar from "../../cart/CartSidebar";
import "../MainHeader.css";

// ⚡️ Dynamic import to reduce initial JS (client-only widgets)
const Cascader = dynamic(() => import("antd/es/cascader"), { ssr: false });
const TreeSelect = dynamic(() => import("antd/es/tree-select"), { ssr: false });

export default function HeaderTwo() {
  const settingsData = useSettings();
  const router = useRouter();
  const pathname = usePathname();

  // ====== App state ======
  const { isLoggedIn, user } = useSelector((s) => s.auth);
  const cartCount = useSelector((s) => s.cart.totalQuantity);

  // ====== Local UI state ======
  const [mounted, setMounted] = useState(false); // hydration-safe gate
  const [cartOpen, setCartOpen] = useState(false);

  const [categories, setCategories] = useState([]);
  const [selectedCategory, setSelectedCategory] = useState(null);

  const [searchQuery, setSearchQuery] = useState("");
  const debouncedSearchQuery = useDebounce(searchQuery, 500);
  const [searchResults, setSearchResults] = useState([]);
  const [isSearching, setIsSearching] = useState(false);
  const [showSuggestions, setShowSuggestions] = useState(false);
  const [showModalSuggestions, setShowModalSuggestions] = useState(false);

  const [campaigns, setCampaigns] = useState([]);
  const [desktopTreeOpen, setDesktopTreeOpen] = useState(false);
  const [isClient, setIsClient] = useState(false);
  const [open, setOpen] = useState(false);

  // ====== Refs ======
  const desktopSearchRef = useRef(null);
  const modalSearchRef = useRef(null);
  const searchAbortRef = useRef(null);
  const skipNextWrapClickRef = useRef(false);
  const drawerToggleRef = useRef(null);
  const categoriesTabRef = useRef(null);
  const hoverTimerRef = useRef(null);
  const desktopTreeWrapRef = useRef(null);

  // ====== Effects: mount & cleanup ======
  useEffect(() => {
    setMounted(true);
    setIsClient(true);
    return () => {
      if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
    };
  }, []);

  // Path change → reset selected category path
  useEffect(() => {
    setSelectedCategory(null);
  }, [pathname]);

  // Close drawer helper
  const closeDrawer = () => {
    if (drawerToggleRef.current) drawerToggleRef.current.checked = false;
  };

  // ====== Desktop Cascader hover handlers ======
  const handleDesktopWrapMouseEnter = () => {
    if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
    setDesktopTreeOpen(true);
  };
  const handleDesktopWrapMouseLeave = () => {
    if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
    hoverTimerRef.current = setTimeout(() => setDesktopTreeOpen(false), 150);
  };

  // ====== Build options for Cascader / TreeSelect ======
  const buildCascaderOptions = (cats = []) =>
    cats.map((cat) => ({
      label: cat.name,
      value: `c-${cat.id}`,
      children: (cat.sub_categories || []).map((sub) => ({
        label: sub.name,
        value: `s-${sub.id}`,
        children: (sub.sub_sub_categories || []).map((ss) => ({
          label: ss.name,
          value: `ss-${ss.id}`,
        })),
      })),
    }));

  const buildTreeData = (cats = []) =>
    cats.map((cat) => ({
      title: cat.name,
      value: `c-${cat.id}`,
      key: `c-${cat.id}`,
      children: (cat.sub_categories || []).map((sub) => ({
        title: sub.name,
        value: `s-${sub.id}`,
        key: `s-${sub.id}`,
        children: (sub.sub_sub_categories || []).map((ss) => ({
          title: ss.name,
          value: `ss-${ss.id}`,
          key: `ss-${ss.id}`,
          isLeaf: true,
        })),
      })),
    }));

  const cascaderOptions = useMemo(
    () => buildCascaderOptions(categories),
    [categories]
  );
  const treeData = useMemo(() => buildTreeData(categories), [categories]);

  // ====== Category navigation ======
  const routeByValue = (val) => {
    const [level, idStr] = String(val).split("-");
    const id = Number(idStr);
    if (level === "c") router.push(`/shop?category_id=${id}`);
    else if (level === "s") router.push(`/shop?sub_category_id=${id}`);
    else if (level === "ss") router.push(`/shop?sub_sub_category_id=${id}`);
    else router.push("/shop");
  };

  const handleCascaderChange = (pathVals) => {
    skipNextWrapClickRef.current = true;
    setSelectedCategory(pathVals);
    if (!Array.isArray(pathVals) || pathVals.length === 0) {
      router.push("/shop");
      return;
    }
    routeByValue(pathVals[pathVals.length - 1]);
  };

  const handleDesktopWrapClick = (e) => {
    if (skipNextWrapClickRef.current) {
      skipNextWrapClickRef.current = false;
      return;
    }
    const target = e.target;
    const inDropdown = !!target?.closest?.(
      ".ant-select-dropdown, .ant-cascader-dropdown"
    );
    const inSelector = !!target?.closest?.(".ant-select, .ant-cascader");
    if (inDropdown) return;

    if (inSelector) {
      if (!desktopTreeOpen) {
        e.preventDefault();
        router.push("/shop");
      }
      return;
    }
    e.preventDefault();
    router.push("/shop");
  };

  const handleCategoryChange = (newVal) => {
    skipNextWrapClickRef.current = true;
    if (drawerToggleRef.current) drawerToggleRef.current.checked = false;

    if (!newVal) {
      router.push("/shop");
      return;
    }
    routeByValue(newVal);
  };

  // ====== Mobile drawer open ======
  const openMobileCategories = (e) => {
    e?.preventDefault();
    if (drawerToggleRef.current) drawerToggleRef.current.checked = true;
    if (categoriesTabRef.current) categoriesTabRef.current.checked = true;
    requestAnimationFrame(() => {
      const el = document.getElementById("mobileCategoryPopup");
      if (el) el.scrollTop = el.scrollTop;
    });
  };

  // ====== Search ======
  const searchProducts = useCallback(
    async (query) => {
      if (!query.trim()) {
        setSearchResults([]);
        setShowSuggestions(false);
        setShowModalSuggestions(false);
        return;
      }
      try {
        setIsSearching(true);
        if (searchAbortRef.current) searchAbortRef.current.abort();
        const controller = new AbortController();
        searchAbortRef.current = controller;

        const res = await getDatas(
          `products?search_key=${encodeURIComponent(query)}`,
          undefined,
          { signal: controller.signal }
        );
        const products = Array.isArray(res?.result?.data)
          ? res.result.data
          : [];
        setSearchResults(products.slice(0, 5));

        if (open) {
          setShowModalSuggestions(true);
          setShowSuggestions(false);
        } else {
          setShowSuggestions(true);
          setShowModalSuggestions(false);
        }
      } catch (e) {
        if (e?.name === "CanceledError" || e?.name === "AbortError") return;
        console.error("Search error:", e);
        setSearchResults([]);
      } finally {
        setIsSearching(false);
      }
    },
    [open]
  );

  useEffect(() => {
    if (!debouncedSearchQuery && (showSuggestions || showModalSuggestions)) {
      setSearchResults([]);
      setShowSuggestions(false);
      setShowModalSuggestions(false);
      return;
    }
    searchProducts(debouncedSearchQuery);
  }, [debouncedSearchQuery, searchProducts]);

  const handleSearchChange = (e) => {
    const value = e.target.value;
    setSearchQuery(value);
    if (value.trim() === "") {
      setSearchResults([]);
      setShowSuggestions(false);
      setShowModalSuggestions(false);
    }
  };

  const handleSearchSubmit = (e) => {
    e.preventDefault();
    if (searchQuery.trim()) {
      router.push(`/products?search_key=${encodeURIComponent(searchQuery)}`);
    }
  };

  const handleSuggestionClick = (product) => {
    setSearchQuery("");
    setShowSuggestions(false);
    setShowModalSuggestions(false);
    router.push(`/product/${product.slug}`);
  };

  // ====== Doc click to close suggest ======
  useEffect(() => {
    function handleDocClick(e) {
      const insideDesktop = desktopSearchRef.current?.contains(e.target);
      const insideModal = modalSearchRef.current?.contains(e.target);
      if (insideDesktop || insideModal) return;
      setShowSuggestions(false);
      setShowModalSuggestions(false);
    }
    document.addEventListener("mousedown", handleDocClick);
    return () => {
      document.removeEventListener("mousedown", handleDocClick);
      if (searchAbortRef.current) searchAbortRef.current.abort();
    };
  }, []);

  // ====== Categories & Campaigns (sessionStorage fallback) ======
  useEffect(() => {
    let alive = true;
    const cached = sessionStorage.getItem("categoriesData");
    if (cached) {
      setCategories(JSON.parse(cached));
    } else {
      (async () => {
        try {
          const res = await getDatas("categories");
          const list = Array.isArray(res?.result?.data) ? res.result.data : [];
          if (!alive) return;
          setCategories(list);
          sessionStorage.setItem("categoriesData", JSON.stringify(list));
        } catch (err) {
          console.error("categories fetch failed", err);
        }
      })();
    }
    return () => {
      alive = false;
    };
  }, []);

  useEffect(() => {
    let alive = true;
    const cached = sessionStorage.getItem("campaignsData");
    if (cached) {
      setCampaigns(JSON.parse(cached));
    } else {
      (async () => {
        try {
          const res = await getDatas("campaigns");
          const data = Array.isArray(res?.result?.data) ? res.result.data : [];
          const sorted = data.sort((a, b) => a.id - b.id);
          if (!alive) return;
          setCampaigns(sorted);
          sessionStorage.setItem("campaignsData", JSON.stringify(sorted));
        } catch (err) {
          console.error("campaigns fetch failed", err);
        }
      })();
    }
    return () => {
      alive = false;
    };
  }, []);

  // ====== Handlers ======
  const toggleCart = () => setCartOpen(true);

  // ====== Render ======
  return (
    <>
      {/* Drawer toggle input */}
      <input id="drawerToggle" ref={drawerToggleRef} className="drawer-toggle" type="checkbox" />

      <div className="main-header main-header-two">
        <div className="container">
          <div className="header-wrap">
            {/* Hamburger */}
            <label htmlFor="drawerToggle" className="hamburger" aria-label="Menu">
              <BsList />
            </label>

            {/* Logo */}
            <div>
              <Link href="/" className="logo">
                {/* header_logo remote হলে next.config.js images.remotePatterns-এ allow করুন */}
                <Image
                  src={settingsData?.header_logo || "/logo.svg"}
                  alt="Logo"
                  width={100}
                  height={100}
                  priority
                />
              </Link>
            </div>

                {/* Main nav */}
        <nav className="main-nav">
          <ul className="menu container">
            <li>
              <Link href="/">Home</Link>
            </li>

            {/* Category Cascader (desktop) */}
            <li className="has-dropdown">
              {isClient ? (
                <div
                  id="desktopTreeWrap"
                  ref={desktopTreeWrapRef}
                  className="category-selector"
                  onMouseEnter={handleDesktopWrapMouseEnter}
                  onMouseLeave={handleDesktopWrapMouseLeave}
                  onClick={handleDesktopWrapClick}
                >
                  <Cascader
                    options={cascaderOptions}
                    open={desktopTreeOpen}
                    onOpenChange={(o) => setDesktopTreeOpen(o)}
                    expandTrigger="hover"
                    changeOnSelect
                    placeholder="All Products"
                    onChange={handleCascaderChange}
                    value={selectedCategory}
                    showSearch={false}
                    getPopupContainer={() => document.getElementById("desktopTreeWrap") || document.body}
                    suffixIcon={<BsChevronDown aria-hidden />}
                    styles={{ popup: { root: { maxHeight: 400, overflow: "auto", color: "#222" } } }}
                    style={{ width: "auto", minWidth: "unset", padding: 0 }}
                  />

                </div>
              ) : (
                <div className="category-selector skeleton-select">
                  <span>All Products</span>
                </div>
              )}
            </li>

            {/* Campaign badge (desktop) */}
            {campaigns.length > 0 && (
              <motion.li
                key={campaigns.at(-1).id}
                initial={{ scale: 0.8, opacity: 0 }}
                animate={{ scale: 1, opacity: 1, boxShadow: "0 0 8px #007cc9ff" }}
                whileHover={{ boxShadow: "0 0 15px #007addff" }}
                transition={{ type: "spring", stiffness: 200, damping: 12 }}
                className="font-bold text-red-600 campaign-text"
              >
                <Link href="/campaigns">
                  <svg fill="currentColor" width="20" height="20" viewBox="0 0 24 24">
                    <g>
                      <path d="M15.5,4a.5.5,0,0,0,.5-.5v-1a.5.5,0,0,0-1,0v1A.5.5,0,0,0,15.5,4Z" />
                      <path d="M20.5,9h1a.5.5,0,0,0,0-1h-1a.5.5,0,0,0,0,1Z" />
                      <path d="M18.5,6a.47.47,0,0,0,.35-.15l1-1a.49.49,0,1,0-.7-.7l-1,1a.48.48,0,0,0,0,.7A.47.47,0,0,0,18.5,6Z" />
                      <path d="M16.94,7.06a23.4,23.4,0,0,0-5.46-4.2c-1.89-1-3.28-1.13-4-.39A1.74,1.74,0,0,0,7,3.75v6.51A2.55,2.55,0,0,1,6.27,12L3.19,15.11a4,4,0,0,0,0,5.7,4,4,0,0,0,5.7,0l.11-.1.53.52a2.57,2.57,0,0,0,1.85.77A2.63,2.63,0,0,0,14,19.38a2.57,2.57,0,0,0-.77-1.85l-.36-.37a2.58,2.58,0,0,1,.87-.16H20.5a.54.54,0,0,0,.21-.05,1.47,1.47,0,0,0,.82-.42c.74-.73.6-2.12-.39-4A23.4,23.4,0,0,0,16.94,7.06Z" />
                    </g>
                  </svg>
                  {campaigns.at(-1).title}
                </Link>
              </motion.li>
            )}

            <li><Link href="/blog">Blog</Link></li>
            <li><Link href="/about">About</Link></li>
            <li><Link href="/contact">Contact</Link></li>
          </ul>
        </nav>

            {/* Desktop Search */}
            <div className="search-wrap" ref={desktopSearchRef}>
              <form className="search-form" onSubmit={handleSearchSubmit}>
                <input
                  className="search-input"
                  type="text"
                  placeholder="Search Here"
                  aria-label="Search"
                  value={searchQuery}
                  onChange={handleSearchChange}
                  onFocus={() => searchQuery && setShowSuggestions(true)}
                />
                <button className="search-btn" type="submit" aria-label="Search">
                  <FaMagnifyingGlass />
                </button>
              </form>

              {showSuggestions && (
                <div
                  className="search-suggest"
                  role="listbox"
                  aria-label="Search suggestions"
                >
                  <ul className="suggest-list">
                    {isSearching ? (
                      <li>
                        <div className="suggest-item">
                          <span className="suggest-title">Searching...</span>
                        </div>
                      </li>
                    ) : searchResults.length > 0 ? (
                      searchResults.map((product) => {
                        let displayPrice = "00";
                        if (
                          product.variation_price_range?.min_price &&
                          product.variation_price_range?.max_price
                        ) {
                          const min = parseFloat(product.variation_price_range.min_price);
                          const max = parseFloat(product.variation_price_range.max_price);
                          displayPrice = min === max
                            ? `${min.toFixed(2)} Tk`
                            : `${min.toFixed(2)} Tk - ${max.toFixed(2)} Tk`;
                        } else {
                          const price =
                            parseFloat(product.offer_price || 0) > 0
                              ? parseFloat(product.offer_price)
                              : parseFloat(product.sell_price || 0);
                          displayPrice = price > 0 ? `${price.toFixed(2)} Tk` : "00";
                        }

                        return (
                          <li key={product.id}>
                            {/* anchor → button to avoid unwanted navigation */}
                            <button
                              type="button"
                              className="suggest-item"
                              onClick={() => handleSuggestionClick(product)}
                            >
                              <span className="suggest-thumb">
                                {/* use <img> so we can hard-fallback onError */}
                                <img
                                  src={
                                    product.image ||
                                    "https://images.unsplash.com/photo-1512621776951-a57141f2eefd?q=80&w=600&auto=format&fit=crop"
                                  }
                                  alt={product.name}
                                  onError={(e) => {
                                    e.currentTarget.src =
                                      "https://images.unsplash.com/photo-1512621776951-a57141f2eefd?q=80&w=600&auto=format&fit=crop";
                                  }}
                                />
                              </span>
                              <span className="suggest-meta">
                                <span className="suggest-title">{product.name}</span>
                                <span className="suggest-category">
                                  Category : {product.category_name || "All Products"}
                                  <span className="suggest-price">
                                    {product.mrp > product.sell_price && (
                                      <del className="old-price">{product.mrp} tk</del>
                                    )}
                                    <span className="new-price">{displayPrice}</span>
                                  </span>
                                </span>
                              </span>
                              {product.offer_percent > 0 && (
                                <span className="discount-tag">
                                  {product.offer_percent}% off
                                </span>
                              )}
                            </button>
                          </li>
                        );
                      })
                    ) : searchQuery.trim() ? (
                      <li>
                        <div className="suggest-item">
                          <span className="suggest-title">No products found</span>
                        </div>
                      </li>
                    ) : null}
                  </ul>
                </div>
              )}
            </div>

            {/* Header Right: Cart + User */}
            <div className="header-right">
              <div className="cart" onClick={toggleCart} style={{ cursor: "pointer" }}>
                <span className="cart-ico">
                  <FaCartShopping />
                  {/* hydration-safe badge: always render same DOM */}
                  <span
                    className="cart-badge"
                    aria-label="Items in cart"
                    hidden={!mounted || cartCount <= 0}
                  >
                    <span suppressHydrationWarning>
                      {mounted ? (cartCount > 99 ? "99+" : cartCount) : "0"}
                    </span>
                  </span>
                </span>
              </div>

              {isLoggedIn ? (
                // আপনার UserMenu আগের মতোই
                <div className="user-icon">
                  <Link href="/user">
                    <Image src="/images/user-icon.png" alt="User" width={40} height={40} />
                  </Link>
                </div>
              ) : (
                <div className="user-icon">
                  <Link href="/login">
                    <Image src="/images/user-icon.png" alt="User" width={40} height={40} />
                  </Link>
                </div>
              )}
            </div>

            {/* Mobile Search Modal trigger */}
            <div className="header-right-modal">
              <button
                className="modal-search"
                type="button"
                aria-label="Open search"
                onClick={() => {
                  setOpen(true);
                }}
              >
                <FaMagnifyingGlass />
              </button>

              {/* Modal */}
              {open && (
                <div
                  ref={modalSearchRef}
                  style={{
                    position: "fixed",
                    top: 0,
                    left: 0,
                    width: "100vw",
                    height: "100vh",
                    background: "rgba(0,0,0,0.4)",
                    zIndex: 9999,
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "flex-start",
                    paddingTop: "109px",
                  }}
                  onClick={(e) => {
                    if (e.target === e.currentTarget) {
                      setOpen(false);
                      setShowModalSuggestions(false);
                    }
                  }}
                >
                  <div
                    style={{
                      maxWidth: "500px",
                      background: "#fff",
                      borderRadius: "16px",
                      padding: "5px",
                      display: "flex",
                      flexDirection: "column",
                      gap: "10px",
                    }}
                  >
                    {/* Header: input + search */}
                    <div style={{ display: "flex", gap: "8px" }}>
                      <form className="search-form-mobile" onSubmit={handleSearchSubmit}>
                        <input
                          className="search-input-mobile"
                          type="text"
                          placeholder="Search Here"
                          aria-label="Search"
                          value={searchQuery}
                          onChange={handleSearchChange}
                          onFocus={() =>
                            searchQuery && setShowModalSuggestions(true)
                          }
                        />
                        <button className="search-btn-mobile" type="submit" aria-label="Search">
                          <FaMagnifyingGlass />
                        </button>
                      </form>
                      <button
                        type="button"
                        aria-label="Close search"
                        onClick={() => {
                          setOpen(false);
                          setShowModalSuggestions(false);
                        }}
                        style={{ padding: "8px 12px" }}
                      >
                        <BsX />
                      </button>
                    </div>

                    {/* Search Suggestions (mobile) */}
                    {showModalSuggestions && (
                      <div
                        className="search-suggest-mobile"
                        role="listbox"
                        aria-label="Search suggestions"
                      >
                        <ul className="suggest-list-mobile">
                          {isSearching ? (
                            <li>
                              <div className="suggest-item">
                                <span className="suggest-title">Searching...</span>
                              </div>
                            </li>
                          ) : searchResults.length > 0 ? (
                            searchResults.map((product) => {
                              let displayPrice = "00";
                              if (
                                product.variation_price_range?.min_price &&
                                product.variation_price_range?.max_price
                              ) {
                                const min = parseFloat(
                                  product.variation_price_range.min_price
                                );
                                const max = parseFloat(
                                  product.variation_price_range.max_price
                                );
                                displayPrice =
                                  min === max
                                    ? `${min.toFixed(2)} Tk`
                                    : `${min.toFixed(2)} Tk - ${max.toFixed(2)} Tk`;
                              } else {
                                const price =
                                  parseFloat(product.offer_price || 0) > 0
                                    ? parseFloat(product.offer_price)
                                    : parseFloat(product.sell_price || 0);
                                displayPrice =
                                  price > 0 ? `${price.toFixed(2)} Tk` : "00";
                              }

                              return (
                                <li key={product.id}>
                                  <button
                                    className="suggest-item"
                                    type="button"
                                    role="option"
                                    onClick={() => handleSuggestionClick(product)}
                                  >
                                    <span className="suggest-thumb">
                                      <img
                                        src={
                                          product.image ||
                                          "https://images.unsplash.com/photo-1512621776951-a57141f2eefd?q=80&w=1200&auto=format&fit=crop"
                                        }
                                        alt={product.name}
                                        onError={(e) => {
                                          e.currentTarget.src =
                                            "https://images.unsplash.com/photo-1512621776951-a57141f2eefd?q=80&w=1200&auto=format&fit=crop";
                                        }}
                                      />
                                    </span>
                                    <span className="suggest-meta">
                                      <span className="suggest-title">
                                        {product.name}
                                      </span>
                                      <span className="suggest-category">
                                        Category :{" "}
                                        {product.category_name || "All Products"}
                                        <span className="suggest-price">
                                          {product.mrp > product.sell_price && (
                                            <del className="old-price">
                                              {product.mrp} tk
                                            </del>
                                          )}
                                          <span className="new-price">
                                            {displayPrice}
                                          </span>
                                        </span>
                                      </span>
                                    </span>
                                    {product.offer_percent > 0 && (
                                      <span className="discount-tag">
                                        {product.offer_percent}% off
                                      </span>
                                    )}
                                  </button>
                                </li>
                              );
                            })
                          ) : searchQuery.trim() ? (
                            <li>
                              <div className="suggest-item">
                                <span className="suggest-title">No products found</span>
                              </div>
                            </li>
                          ) : null}
                        </ul>
                      </div>
                    )}
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>

    
      </div>

      {/* Overlay (label) */}
      <label htmlFor="drawerToggle" className="drawer-overlay" aria-hidden="true" />

      {/* Drawer */}
      <aside className="drawer" aria-label="Site navigation">
        <input
          id="drawerTabCategories"
          ref={categoriesTabRef}
          className="drawer-tab"
          type="radio"
          name="drawerTab"
          defaultChecked
        />
        <input id="drawerTabMenu" className="drawer-tab" type="radio" name="drawerTab" />

        <div className="drawer-header">
          <a href="/" className="drawer-logo">Testy Food</a>
          <label htmlFor="drawerToggle" className="drawer-close" aria-label="Close">
            <BsX />
          </label>
        </div>

        <div className="drawer-tabs">
          <label htmlFor="drawerTabCategories" className="tab">CATEGORIES</label>
          <label htmlFor="drawerTabMenu" className="tab">MENU</label>
          <span className="active-bar" />
        </div>

        <div className="drawer-panels">
          <div className="panel panel-categories">
            <div id="mobileCategoryPopup" className="mobile-tree-select">
              {isClient && (
                <TreeSelect
                  open
                  showSearch={false}
                  placeholder=""
                  allowClear={false}
                  treeData={treeData}
                  styles={{ popup: { root: { maxHeight: 420, overflow: "auto", color: "#222" } } }}
                  popupMatchSelectWidth={false}
                  onChange={handleCategoryChange}
                  suffixIcon={<BsChevronDown aria-hidden />}
                  switcherIcon={<BsChevronDown className="switcher-icon" aria-hidden />}
                  treeLine
                  getPopupContainer={() => document.getElementById("mobileCategoryPopup") || document.body}
                />
              )}
            </div>
          </div>

          <div className="panel panel-menu">
            <nav className="drawer-nav">
              <Link href="/" className="drawer-link" onClick={closeDrawer}>
                <span className="row-left">
                  <span className="row-icon"><BsHouse /></span>
                  <span className="row-text">Home</span>
                </span>
              </Link>
              <Link href="/shop" className="drawer-link" onClick={closeDrawer}>
                <span className="row-left">
                  <span className="row-icon"><BsShop /></span>
                  <span className="row-text">Shop</span>
                </span>
              </Link>
              <Link href="/about" className="drawer-link" onClick={closeDrawer}>
                <span className="row-left">
                  <span className="row-icon"><BsPeople /></span>
                  <span className="row-text">About Us</span>
                </span>
              </Link>
              <Link href="/contact" className="drawer-link" onClick={closeDrawer}>
                <span className="row-left">
                  <span className="row-icon"><BsEnvelope /></span>
                  <span className="row-text">Contact Us</span>
                </span>
              </Link>
              <Link href="/blog" className="drawer-link" onClick={closeDrawer}>
                <span className="row-left">
                  <span className="row-icon"><BsJournalText /></span>
                  <span className="row-text">Our Blog</span>
                </span>
              </Link>
              <Link href="/privacy-policy" className="drawer-link" onClick={closeDrawer}>
                <span className="row-left">
                  <span className="row-icon"><BsShieldCheck /></span>
                  <span className="row-text">Privacy Policy</span>
                </span>
              </Link>
              <Link href="/terms-conditions" className="drawer-link" onClick={closeDrawer}>
                <span className="row-left">
                  <span className="row-icon"><BsFileText /></span>
                  <span className="row-text">Terms &amp; Conditions</span>
                </span>
              </Link>
            </nav>
          </div>
        </div>
      </aside>

      {/* Cart Sidebar */}
      <CartSidebar isOpen={cartOpen} onClose={() => setCartOpen(false)} />

      {/* Mobile bottom nav */}
      <nav className="mobile-tabbar" aria-label="Mobile navigation">
        <Link href="/" className="tab-item" aria-label="Home">
          <BsHouse />
          <span>Home</span>
        </Link>

        <button
          type="button"
          className="tab-item"
          aria-label="Categories"
          onClick={openMobileCategories}
          aria-controls="drawerToggle"
        >
          <BsGrid />
          <span>Categories</span>
        </button>

        <button
          type="button"
          className="tab-item cart-link"
          aria-label="Cart"
          onClick={toggleCart}
          style={{ cursor: "pointer" }}
        >
          <div className="cart-icon-wrapper">
            <BsBag className="cart-icon" />
            <span className="cart-badge" hidden={!mounted || cartCount <= 0}>
              <span suppressHydrationWarning>
                {mounted ? (cartCount > 99 ? "99+" : cartCount) : "0"}
              </span>
            </span>
          </div>
          <span style={{ fontSize: "12px" }}>Cart</span>
        </button>

        {campaigns.length > 0 && (
          <div
            key={campaigns.at(-1).id}
            className="campaign-btn"
          >
            <Link href="/campaigns">
              <div>
                <svg fill="currentColor" width="30" height="30" viewBox="0 0 24 24" className="me-1" color="red">
                  <g>
                    <path d="M15.5,4a.5.5,0,0,0,.5-.5v-1a.5.5,0,0,0-1,0v1A.5.5,0,0,0,15.5,4Z" />
                    <path d="M20.5,9h1a.5.5,0,0,0,0-1h-1a.5.5,0,0,0,0,1Z" />
                    <path d="M18.5,6a.47.47,0,0,0,.35-.15l1-1a.49.49,0,1,0-.7-.7l-1,1a.48.48,0,0,0,0,.7A.47.47,0,0,0,18.5,6Z" />
                    <path d="M16.94,7.06a23.4,23.4,0,0,0-5.46-4.2c-1.89-1-3.28-1.13-4-.39A1.74,1.74,0,0,0,7,3.75v6.51A2.55,2.55,0,0,1,6.27,12L3.19,15.11a4,4,0,0,0,0,5.7,4,4,0,0,0,5.7,0l.11-.1.53.52a2.57,2.57,0,0,0,1.85.77A2.63,2.63,0,0,0,14,19.38a2.57,2.57,0,0,0-.77-1.85l-.36-.37a2.58,2.58,0,0,1,.87-.16H20.5a.54.54,0,0,0,.21-.05,1.47,1.47,0,0,0,.82-.42c.74-.73.6-2.12-.39-4A23.4,23.4,0,0,0,16.94,7.06Z" />
                  </g>
                </svg>
                <span style={{ fontSize: "11px", color: "#252525ff" }}>Categories</span>
              </div>
            </Link>
          </div>
        )}

        <Link href={isLoggedIn ? "/user" : "/login"} className="tab-item" aria-label="Account">
          <BsPerson />
          <span>Account</span>
        </Link>
      </nav>
    </>
  );
}