'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { useCartStore } from '@/hooks/use-shopify-cart';
import CartDrawer from '@/components/shopify/cart-drawer';
import { RiShoppingCartLine, RiCloseLine, RiMenu3Line } from '@remixicon/react';

const CartIcon: React.FC = () => {
  const toggleCart = useCartStore((s) => s.toggleCart);
  const cart = useCartStore((s) => s.cart);
  const itemCount =
    cart?.lines?.edges?.reduce((sum, { node }) => sum + node.quantity, 0) ?? 0;

  return (
    <button
      onClick={toggleCart}
      className="relative p-2.5 text-foreground hover:text-primary transition-all duration-200 rounded-full hover:bg-secondary"
    >
      <RiShoppingCartLine size={20} />
      {itemCount > 0 && (
        <span className="absolute -top-0.5 -right-0.5 bg-primary text-primary-foreground text-[10px] font-mono rounded-full w-5 h-5 flex items-center justify-center font-semibold shadow">
          {itemCount > 99 ? '99+' : itemCount}
        </span>
      )}
    </button>
  );
};

export interface NavLink {
  label: string;
  url: string;
}

interface HeaderProps {
  storeName?: string;
  logoUrl?: string;
  links?: NavLink[];
}

const Header: React.FC<HeaderProps> = ({
  storeName = 'STRIDE',
  logoUrl,
  links = [
    { label: 'Shop', url: '/' },
    { label: 'Collections', url: '/collections' },
  ],
}) => {
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <nav className="bg-white/95 backdrop-blur-md border-b border-border sticky top-0 z-50">
      <div className="max-w-screen-2xl mx-auto px-8">
        <div className="flex justify-between items-center h-20">
          {/* Logo */}
          <Link href="/" className="flex items-center group">
            {logoUrl ? (
              <img
                src={logoUrl}
                alt={storeName}
                className="h-9 w-auto object-contain"
              />
            ) : (
              <span className="text-4xl font-semibold tracking-tighter font-poppins text-foreground group-hover:text-primary transition-colors">
                {storeName}
              </span>
            )}
          </Link>

          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center gap-x-10 text-sm font-medium">
            {links.map((link, index) => (
              <Link
                key={index}
                href={link.url}
                className="text-foreground hover:text-primary relative after:absolute after:bottom-[-2px] after:left-0 after:h-[2px] after:w-0 after:bg-primary after:transition-all hover:after:w-full"
              >
                {link.label}
              </Link>
            ))}
          </div>

          {/* Actions */}
          <div className="flex items-center gap-x-2">
            <CartIcon />

            {/* Mobile hamburger */}
            <button
              onClick={() => setMenuOpen(!menuOpen)}
              className="md:hidden p-2.5 text-foreground hover:text-primary transition-all rounded-full hover:bg-secondary"
              aria-label="Toggle menu"
            >
              {menuOpen ? <RiCloseLine size={28} /> : <RiMenu3Line size={28} />}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Menu */}
      {menuOpen && (
        <div className="md:hidden border-t bg-white">
          <div className="max-w-screen-2xl mx-auto px-8 py-8 flex flex-col gap-y-6 text-lg font-medium">
            {links.map((link, index) => (
              <Link
                key={index}
                href={link.url}
                onClick={() => setMenuOpen(false)}
                className="text-foreground hover:text-primary transition-colors py-1"
              >
                {link.label}
              </Link>
            ))}
            <div className="pt-4 border-t text-xs text-muted-foreground font-mono tracking-widest">
              PROFESSIONAL • CLEAN • MODERN
            </div>
          </div>
        </div>
      )}

      <CartDrawer />
    </nav>
  );
};

export default Header;