"use client";

import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";
import { CartDrawer } from "@/app/components/cart-drawer";
import { ProductsMegaMenu } from "@/app/components/products-mega-menu";
import { UserMenu } from "@/app/components/user-menu";
import { useCart } from "@/app/providers/cart-provider";
import { site } from "@/lib/site-data";
import type { Category } from "@/lib/meshkee/types";

const navLinks = [
  { label: "درباره ما", href: "/about-us" },
  { label: "تماس با ما", href: "/contactus" },
  { label: "مجله دکوراسیون", href: "/blog" },
];

export function Header({ categories }: { categories: Category[] }) {
  const [isScrolled, setIsScrolled] = useState(false);
  const { itemCount, setOpen } = useCart();

  useEffect(() => {
    const updateHeader = () => setIsScrolled(window.scrollY > 12);
    updateHeader();
    window.addEventListener("scroll", updateHeader, { passive: true });
    return () => window.removeEventListener("scroll", updateHeader);
  }, []);

  return (
    <>
      <header className={`header ${isScrolled ? "is-scrolled" : ""}`}>
        <div className="container header-inner">
          <Link className="brand" href="/" aria-label={site.name}>
            <Image src={site.logo} alt={site.name} width={291} height={50} priority />
          </Link>
          <nav className="nav" aria-label="ناوبری اصلی">
            <ProductsMegaMenu categories={categories} />
            {navLinks.map((item) => (
              <Link key={item.href} href={item.href}>
                {item.label}
              </Link>
            ))}
            <div className="nav-icons">
              <button
                type="button"
                className="header-icon-btn cart-trigger"
                aria-label="سبد خرید"
                onClick={() => setOpen(true)}
              >
                <CartIcon />
                {itemCount > 0 ? (
                  <span className="cart-badge ltr-number" dir="ltr" lang="en">
                    {itemCount}
                  </span>
                ) : null}
              </button>
              <UserMenu />
            </div>
          </nav>
          <div className="header-actions">
            <a
              className="phone-pill"
              href={`tel:${site.phone.replaceAll("-", "")}`}
              aria-label={`شماره تماس ${site.phone}`}
            >
              <PhoneIcon />
              <span className="ltr-number" dir="ltr" lang="en">
                {site.phone}
              </span>
            </a>
          </div>
        </div>
      </header>
      <CartDrawer />
    </>
  );
}

function CartIcon() {
  return (
    <svg viewBox="0 0 24 24" width="20" height="20" fill="none" aria-hidden="true">
      <path
        d="M6.4 8.25h11.2l-.72 10.1a1.6 1.6 0 0 1-1.6 1.5H8.72a1.6 1.6 0 0 1-1.6-1.5L6.4 8.25Z"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinejoin="round"
      />
      <path
        d="M9.1 8.25V7a2.9 2.9 0 0 1 5.8 0v1.25"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function PhoneIcon() {
  return (
    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" aria-hidden="true">
      <path
        d="M8.2 3.8h2.3l1.1 3.3-1.5 1.1a11.4 11.4 0 0 0 4.7 4.7l1.1-1.5 3.3 1.1v2.3a1.8 1.8 0 0 1-1.8 1.8A13.8 13.8 0 0 1 3.8 5.6 1.8 1.8 0 0 1 5.6 3.8Z"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinejoin="round"
      />
    </svg>
  );
}