import React, { useState } from 'react';
import Link from 'next/link';
import MadeDreamsCartDrawer from './MadeDreamsCartDrawer';
import useMadeDreamsCart from '../hooks/useMadeDreamsCart';

export default function MadeDreamsStoreHeader() {
  const [isCartOpen, setIsCartOpen] = useState(false);
  const { items, totals, updateQuantity, removeItem, clearCart } = useMadeDreamsCart();

  return (
    <header className="sticky top-0 z-30 border-b border-[#e5d5c4]/80 bg-[#f8f1e8]/90 backdrop-blur-xl">
      <div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-4 lg:px-8">
        <Link href="/" className="group flex items-center gap-3" aria-label="Made Dreams home">
          <span className="grid h-10 w-10 place-items-center rounded-full bg-[#201713] text-lg font-semibold text-[#f8f1e8] shadow-lg shadow-[#201713]/20">
            MD
          </span>
          <span>
            <span className="block font-serif text-xl tracking-[0.18em] text-[#201713]">Made Dreams</span>
            <span className="text-xs uppercase tracking-[0.32em] text-[#8b6f57]">Painted personally</span>
          </span>
        </Link>

        <nav className="hidden items-center gap-8 text-sm font-medium text-[#4e3b31] md:flex">
          <Link className="transition hover:text-[#a0672a]" href="/#collections">
            Collections
          </Link>
          <Link className="transition hover:text-[#a0672a]" href="/#generator">
            Custom generator
          </Link>
          <Link className="transition hover:text-[#a0672a]" href="/#products">
            Products
          </Link>
          <Link className="transition hover:text-[#a0672a]" href="/#faq">
            FAQ
          </Link>
        </nav>

        <div className="flex items-center gap-3">
          <button
            type="button"
            className="rounded-full border border-[#dcc5ad] px-4 py-2 text-xs font-bold uppercase tracking-[0.2em] text-[#6d5546] transition hover:border-[#a0672a] hover:text-[#201713]"
            onClick={() => setIsCartOpen(true)}
          >
            Cart {totals.itemCount}
          </button>
          <Link
            href="/login"
            className="hidden rounded-full bg-[#201713] px-4 py-2 text-sm font-semibold text-[#fffaf3] shadow-lg shadow-[#201713]/15 transition hover:-translate-y-0.5 hover:bg-[#3a2921] focus:outline-none focus:ring-2 focus:ring-[#c99455] focus:ring-offset-2 focus:ring-offset-[#f8f1e8] sm:inline-flex"
          >
            Admin login
          </Link>
        </div>
      </div>

      <MadeDreamsCartDrawer
        open={isCartOpen}
        items={items}
        totals={totals}
        onClose={() => setIsCartOpen(false)}
        onQuantityChange={updateQuantity}
        onRemove={removeItem}
        onClear={clearCart}
      />
    </header>
  );
}
