"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, FaWhatsapp } 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 });


const digitsOnly = (v) => String(v || "").replace(/[^\d]/g, "");

const buildWhatsappUrl = (num) => {
  if (!num) return null;
  const d = digitsOnly(num);
  return d ? `https://wa.me/${d}` : null;
};


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

  const waHref = buildWhatsappUrl(settingsData.whatsapp_number);


  // ====== 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(`/shop?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-three">
        <div className="container">
          <div className="header-wrap">
            {/* Hamburger */}
            <label
              htmlFor="drawerToggle"
              className="hamburger"
              aria-label="Menu"
            >
              <BsList />
            </label>

            {/* Logo */}
            <Link href="/" className="logo">
              <Image
                src={settingsData?.header_logo || "/logo.svg"}
                alt="Logo"
                width={100}
                height={100}
                priority
              />
            </Link>

            {/* 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>
                    </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>

        {/* 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>
      </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>

        {waHref && (
          <li className="whatsapp">
            <Link
              href={waHref}
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Chat on WhatsApp"
            >
              <FaWhatsapp />
            </Link>
          </li>
        )}

        {/* {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" }}>
                  Campaigns
                </span>
              </div>
            </Link>
          </div>
        )} */}

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