"use client";

import { useState } from "react";
import { Search } from "lucide-react";
import { useTranslation } from "react-i18next";
import { useAuth } from "@/context/helpers/auth/AuthContext";
import NavbarLogo from "@/components/layout/parts/header/navbar/NavbarLogo";
import NavIconLink from "@/components/layout/parts/header/navbar/NavIconLink";
import SearchModal from "@/components/layout/parts/header/navbar/SearchModal";
import { Button } from "@/components/ui/button";
import Layout15MobileMenu from "@/layouts/layout-15/components/MobileMenu";
import Layout15Branches from "@/layouts/layout-15/components/Layout15Branches";
import { Layout15LanguageGlobeDesktop } from "@/layouts/layout-15/components/Layout15LanguageGlobe";
import { Layout15NavItem } from "@/layouts/layout-15/components/Layout15NavItem";
import { handmadeNavBadgeClass } from "@/components/shared/handmadeNavStyles";

const ICONS = {
  cart: "/images/layout-10/header/cart.svg",
  wishlist: "/images/layout-10/header/wishlist.svg",
  login: "/images/layout-10/header/login.svg",
  compare: "/images/layout-10/header/compare.svg",
};

const handmadeNavIconLinkClass =
  "flex flex-col items-center justify-end gap-1 min-w-[48px] xl:min-h-[56px] p-0 text-[#2c4a52] hover:text-[#ff6b35] cursor-pointer [&_p]:hidden xl:[&_p]:block [&_p]:text-[10px] [&_p]:leading-none [&_p]:text-center [&_p]:whitespace-nowrap";

/**
 * Shared navbar for layouts 15, 17, and 19 (handmade / beach-treasures theme).
 */
export default function HandmadeNavbar({ MobileBottomNav }) {
  const { t, i18n } = useTranslation("header");
  const { user } = useAuth();
  const [isSearchOpen, setIsSearchOpen] = useState(false);
  const isRtl = i18n.language?.startsWith("ar");

  return (
    <header className="w-full overflow-x-clip">
      <div className="bg-[#fff9f0] border-[#f0e6d6] border-b">
        <div
          dir={isRtl ? "rtl" : "ltr"}
          className="flex justify-between items-center gap-3 mx-auto px-[clamp(1rem,4vw,5rem)] py-3 max-w-[1440px]"
        >
          <div className="flex items-center gap-2 shrink-0">
            <Layout15MobileMenu />
            <NavbarLogo />
          </div>

          <div className="hidden md:flex flex-wrap justify-end items-end gap-x-3 gap-y-2 md:gap-x-5">
            <Layout15NavItem label={t("nav.search")}>
              <Button
                variant="ghost"
                size="icon"
                className="hover:bg-transparent p-0 w-6 h-6 text-[#2c4a52] hover:text-[#ff6b35]"
                onClick={() => setIsSearchOpen(true)}
                aria-label={t("nav.search")}
              >
                <Search className="w-5 h-5" />
              </Button>
            </Layout15NavItem>

            <Layout15Branches />

            <NavIconLink
              href={user ? "/account" : "/account/login"}
              iconSrc={ICONS.login}
              label={user ? t("nav.account") : t("nav.login")}
              iconAlt={t("nav.account")}
              className={handmadeNavIconLinkClass}
              badgeClassName={handmadeNavBadgeClass}
              badgeOnIcon
            />
            <NavIconLink
              href="/wishlist"
              iconSrc={ICONS.wishlist}
              label={t("nav.wishlist")}
              iconAlt={t("nav.wishlist")}
              className={handmadeNavIconLinkClass}
              badgeClassName={handmadeNavBadgeClass}
              badgeOnIcon
            />
            <NavIconLink
              href="/compare"
              iconSrc={ICONS.compare}
              label={t("nav.compare")}
              iconAlt={t("nav.compare")}
              className={handmadeNavIconLinkClass}
              badgeClassName={handmadeNavBadgeClass}
              badgeOnIcon
            />

            <div className="hidden sm:flex">
              <Layout15LanguageGlobeDesktop
                badgeClassName={handmadeNavBadgeClass}
                iconClassName="text-[#2c4a52]"
                buttonClassName="text-[#2c4a52] hover:text-[#ff6b35]"
              />
            </div>

            <NavIconLink
              href="/cart"
              iconSrc={ICONS.cart}
              label={t("nav.cart")}
              iconAlt={t("nav.cart")}
              className={handmadeNavIconLinkClass}
              badgeClassName={handmadeNavBadgeClass}
              badgeOnIcon
            />
          </div>
        </div>
      </div>

      <SearchModal open={isSearchOpen} onOpenChange={setIsSearchOpen} />

      {MobileBottomNav ? (
        <MobileBottomNav onSearchOpen={() => setIsSearchOpen(true)} />
      ) : null}
    </header>
  );
}