import { ArrowUpRight, Heart, Menu, Search, ShoppingBag, Sparkles, UserRound } from "lucide-react";
import { Brand } from "./brand";
import { collections } from "@/data/storefront";
import Link from "next/link";
import { shopHref } from "@/data/catalog";
import { useSiteSettings } from './site-settings';
import { navigationLinks } from '@/lib/site-settings';

type Props = { onOpen: (panel: "search" | "wishlist" | "bag" | "menu") => void; activeCollection?: string; homeActive: boolean; bagCount: number; wishlistCount: number };

export function Header({ onOpen, activeCollection, homeActive, bagCount, wishlistCount }: Props) {
  const { header } = useSiteSettings();
  const navigation = header ? navigationLinks(header.navigation) : null;
  return (
    <>
      {(!header || header.visible) && <div className="announcement-bar">
        <span><Sparkles size={12} /> {header?.announcement ?? 'A little style. A little everyday joy.'}</span>
        <span className="announcement-center">{header?.center ?? 'Thoughtfully chosen. Effortlessly you.'}</span>
        <Link href={header?.link_path ?? '/shop'}>{header?.link_label ?? 'DISCOVER THE COLLECTION'} <ArrowUpRight size={12} /></Link>
      </div>}
      <header className="site-header">
        <button type="button" className="icon-button mobile-menu-button" aria-label="Open navigation" onClick={() => onOpen("menu")}><Menu size={22} /></button>
        <Brand />
        <nav className="desktop-navigation" aria-label="Main navigation">
          {navigation ? navigation.map((item, index) => <Link key={`${item.href}-${index}`} href={item.href}>{item.label}</Link>) : <>
          <Link href="/" className={homeActive ? "nav-active" : ""} aria-current={homeActive ? "page" : undefined}>Home</Link>
          {collections.map((item) => <Link key={item.id} href={shopHref(item.id)} className={activeCollection === item.name ? "nav-active" : ""} aria-current={activeCollection === item.name ? "page" : undefined}>{item.name}</Link>)}
          <Link href="/shop" className={activeCollection === "All" ? "nav-active" : ""} aria-current={activeCollection === "All" ? "page" : undefined}>Shop all</Link>
          </>}
        </nav>
        <div className="header-actions">
          <Link href="/account/portal" className="header-action account-action" aria-label="My account"><UserRound size={21} /><span>Account</span></Link>
          <button type="button" className="header-action" aria-label="Search products" onClick={() => onOpen("search")}><Search size={21} /><span>Search</span></button>
          <button type="button" className="header-action wishlist-action" aria-label={`Open wishlist, ${wishlistCount} items`} onClick={() => onOpen("wishlist")}><Heart size={21} fill={wishlistCount ? "currentColor" : "none"} /><span>Wishlist{wishlistCount ? ` (${wishlistCount})` : ""}</span></button>
          <button type="button" className="header-action" aria-label={`Open shopping bag, ${bagCount} items`} onClick={() => onOpen("bag")}><span className="bag-icon"><ShoppingBag size={21} /><span className="bag-count">{bagCount}</span></span><span>Bag</span></button>
        </div>
      </header>
    </>
  );
}