"use client";

import { useRef } from "react";
import { MobileNavButtons } from "./MobileNavButtons";
import { MobileHeaderUserAction } from "./MobileHeaderUserAction";
import Link from "next/link";
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 { BrandLogo } from "@/components/layout/BrandLogo";
import { HeaderSearchBar } from "@/components/layout/header/HeaderSearchBar";

export function MobileHeader() {
  const { openCart } = 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 (
    <>
      {/* In-flow: logo row scrolls away with the page */}
      <div className="w-full max-w-full min-w-0 overflow-x-hidden bg-white">
        <div className="flex min-w-0 items-center justify-between gap-2 border-b border-[#e8f7f6] px-4 py-3">
          <BrandLogo size={44} />
          <div className="flex shrink-0 items-center gap-3">
            <Link
              href="/wishlist"
              className="relative p-1 text-[#3d5554] transition-colors hover:text-[#f2705a]"
              aria-label={`Wishlist${wishlistCount > 0 ? `, ${wishlistCount} items` : ""}`}
            >
              <svg
                width="22"
                height="22"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <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-1 -top-0.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>
              )}
            </Link>
            <button
              ref={cartButtonRef}
              type="button"
              onClick={() => openCart(cartButtonRef.current)}
              className="relative flex min-h-[44px] min-w-[44px] items-center justify-center p-1 text-[#3d5554] transition-colors hover:text-[#236f6b]"
              aria-label={cartItemCount > 0 ? `Cart, ${cartItemCount} items` : "Cart"}
            >
              <svg
                width="22"
                height="22"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <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-0 top-0 flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-[#f2705a] px-1 text-[10px] font-bold text-white">
                  {cartItemCount > 99 ? "99+" : cartItemCount}
                </span>
              )}
            </button>
            <MobileHeaderUserAction />
          </div>
        </div>
      </div>

      {/* Sticky: search bar + nav stay at top once they reach the viewport */}
      {/* overflow-x-clip (not hidden) so the absolute results panel can overflow below */}
      <header className="sticky top-0 z-50 w-full max-w-full min-w-0 overflow-x-clip bg-white shadow-sm">
        <div className="min-w-0 px-4 py-2">
          <HeaderSearchBar variant="mobile" />
        </div>
        <MobileNavButtons />
      </header>
    </>
  );
}
