'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { useShopifyCart } from '@/hooks/use-shopify-cart';
import config from '@/lib/config.json';
import { RiSearchLine, RiShoppingBagLine } from '@remixicon/react';
import SearchDialog from './search-dialog';

const CartIcon: React.FC = () => {
  const { toggleCart, itemCount } = useShopifyCart();

  return (
    <button
      onClick={toggleCart}
      className="relative p-1 text-black hover:text-gray-600 transition-colors"
    >
      <RiShoppingBagLine size={20} />
      {itemCount > 0 && (
        <span className="absolute -top-1 -right-1 bg-black text-white text-[10px] rounded-full w-4 h-4 flex items-center justify-center font-medium">
          {itemCount > 99 ? '99+' : itemCount}
        </span>
      )}
    </button>
  );
};

const Header: React.FC = () => {
  const [searchOpen, setSearchOpen] = useState(false);

  return (
    <nav className="bg-white/70 backdrop-blur-md border-b border-gray-200/60 sticky top-0 z-30 h-14">
      <div className="container mx-auto px-4 h-full">
        <div className="flex justify-between items-center h-full">
          {/* Logo */}
          <Link href="/" className="text-lg font-medium text-black font-heading">
            {config.brand.logo.url ? (
              <img
                src={config.brand.logo.url}
                alt={config.brand.logo.alt || 'Store'}
                className="h-8"
              />
            ) : (
              'Store'
            )}
          </Link>

          {/* Navigation Links */}
          <div className="flex items-center space-x-6">
            <Link
              href="/"
              className="text-sm text-black hover:text-gray-600 font-medium transition-colors"
            >
              Products
            </Link>
            <Link
              href="/collections"
              className="text-sm text-black hover:text-gray-600 font-medium transition-colors"
            >
              Collections
            </Link>

            {/* Search + Cart Icons */}
            <div className="flex items-center space-x-2">
              <button
                onClick={() => setSearchOpen(true)}
                className="p-1 text-black hover:text-gray-600 transition-colors"
                aria-label="Search products"
              >
                <RiSearchLine size={20} />
              </button>
              <CartIcon />
            </div>
          </div>
        </div>
      </div>

      <SearchDialog open={searchOpen} onOpenChange={setSearchOpen} />
    </nav>
  );
};

export default Header;