"use client";

import { useRef } from "react";
import { useCartUI } from "@/components/cart/CartUIContext";
import { useCart } from "@/lib/cart/useCart";
import { useCartSessionId } from "@/lib/cart/useCartSessionId";
import { useWishlistCount } from "@/lib/wishlist/useWishlistCount";
import Link from "next/link";
import { HeaderUserAction } from "./HeaderUserAction";
import { BrandLogo } from "@/components/layout/BrandLogo";
import { HeaderSearchBar } from "@/components/layout/header/HeaderSearchBar";

export function CoreBrandBar() {
  const { isOpen: isCartOpen, openCart, closeCart } = useCartUI();
  const cartButtonRef = useRef<HTMLButtonElement>(null);
  const sessionId = useCartSessionId();
  const { items } = useCart(sessionId);
  const cartItemCount = items.reduce((sum, i) => sum + i.quantity, 0);
  const wishlistCount = useWishlistCount();

  return (
    <div className="w-full bg-white">
      <div className="mx-auto flex max-w-[1400px] items-center justify-between gap-8 px-6 py-4">
        {/* Logo */}
        <BrandLogo size={56} />

        {/* Search Bar */}
        <HeaderSearchBar variant="desktop" />

        {/* User Actions */}
        <div className="flex shrink-0 items-center gap-6">
          <HeaderUserAction />

          {/* Wishlist */}
          <Link
            href="/wishlist"
            className="group relative flex flex-col items-center gap-1"
            aria-label={`Wishlist${wishlistCount > 0 ? `, ${wishlistCount} items` : ""}`}
          >
            <div className="relative">
              <svg
                width="22"
                height="22"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="text-[#3d5554] transition-colors group-hover:text-[#f2705a]"
              >
                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
              </svg>
              {wishlistCount > 0 && (
                <span className="absolute -right-2 -top-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[#f2705a] text-[9px] font-bold text-white">
                  {wishlistCount > 99 ? "99+" : wishlistCount}
                </span>
              )}
            </div>
            <span className="text-[10px] font-medium tracking-wide text-[#3d5554] transition-colors group-hover:text-[#f2705a]">
              Wishlist
            </span>
          </Link>

          {/* Cart */}
          <button
            ref={cartButtonRef}
            type="button"
            onClick={() =>
              isCartOpen
                ? closeCart()
                : openCart(cartButtonRef.current ?? undefined)
            }
            className="group relative flex flex-col items-center gap-1"
            aria-label={`Cart${cartItemCount > 0 ? `, ${cartItemCount} items` : ""}`}
          >
            <div className="relative">
              <svg
                width="22"
                height="22"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="text-[#3d5554] transition-colors group-hover:text-[#236f6b]"
              >
                <circle cx="9" cy="21" r="1" />
                <circle cx="20" cy="21" r="1" />
                <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" />
              </svg>
              {cartItemCount > 0 && (
                <span className="absolute -right-2 -top-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[#f2705a] text-[9px] font-bold text-white">
                  {cartItemCount > 99 ? "99+" : cartItemCount}
                </span>
              )}
            </div>
            <span className="text-[10px] font-medium tracking-wide text-[#3d5554] transition-colors group-hover:text-[#236f6b]">
              Cart
            </span>
          </button>
        </div>
      </div>
    </div>
  );
}
