// Header: announcement, topbar, brand, nav, mobile menu, search overlay
const { useEffect, useMemo, useRef, useState } = React;
function Header() {
  const { route, navigate, cartCount, wish, setDrawer, searchOpen, setSearchOpen } = useStore();
  const toast = window.useToast();
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 8);
    fn(); window.addEventListener('scroll', fn);
    return () => window.removeEventListener('scroll', fn);
  }, []);

  const isActive = (group) => route.name === 'category' && route.group === group;
  const showAnnouncement = window.__tweaks?.showAnnouncement ?? true;
  const wishCount = wish ? wish.size : 0;

  return (
    <header>
      {showAnnouncement && (
        <div className="announce">
          Free shipping across Pakistan over Rs 5,000
          <span className="star">✦</span>
          Handmade in Islamabad
          <span className="star">✦</span>
          10 designs only
        </div>
      )}
      <div className="topbar">
        <div className="container topbar-inner">
          <div>
            <span>📍 Ships across Pakistan · HQ Islamabad</span>
            <span className="sep">·</span>
            <span>+92 51 272 8463</span>
          </div>
          <div>
            <a onClick={() => navigate({ name: 'page', slug: 'track' })}>Track Order</a>
            <span className="sep">·</span>
            <a onClick={() => navigate({ name: 'page', slug: 'wishlist' })}>Wishlist</a>
            <span className="sep">·</span>
            <a onClick={() => navigate({ name: 'page', slug: 'account' })}>My Account</a>
            <span className="sep">·</span>
            <a onClick={() => toast('Urdu support coming soon')}>EN ▾</a>
          </div>
        </div>
      </div>
      <div className="header-main">
        <div className="container header-row">
          <div className="left">
            <button className="btn-icon mobile-nav-toggle" onClick={() => setDrawer('menu')} aria-label="Menu"><Ic.menu /></button>
          </div>
          <div className="brand-mark" onClick={() => navigate({ name: 'home' })}>
            <BrandSeal size={42} />
            <div>
              <div className="word">SAANCHA</div>
              <div className="sub">Handmade in Pakistan</div>
            </div>
          </div>
          <div className="right">
            <button className="btn-icon" onClick={() => setSearchOpen(true)} aria-label="Search"><Ic.search /></button>
            <button className="btn-icon" onClick={() => navigate({ name: 'page', slug: 'account' })} aria-label="Account"><Ic.user /></button>
            <button className="btn-icon" onClick={() => navigate({ name: 'page', slug: 'wishlist' })} aria-label="Wishlist" style={{ position: 'relative' }}>
              <Ic.heart />
              {wishCount > 0 && <span style={{ position: 'absolute', top: 6, right: 4, background: 'var(--color-accent)', color: 'var(--color-surface)', borderRadius: '50%', width: 18, height: 18, fontSize: 10, display: 'grid', placeItems: 'center', fontWeight: 600 }}>{wishCount}</span>}
            </button>
            <button className="btn-icon" onClick={() => setDrawer('cart')} aria-label="Cart" style={{ position: 'relative' }}>
              <Ic.bag />
              {cartCount > 0 && <span style={{ position: 'absolute', top: 6, right: 4, background: 'var(--color-accent)', color: 'var(--color-surface)', borderRadius: '50%', width: 18, height: 18, fontSize: 10, display: 'grid', placeItems: 'center', fontWeight: 600 }}>{cartCount}</span>}
            </button>
          </div>
        </div>
        <div className="nav-row">
          <nav className="nav container">
            <div className={'nav-item' + (route.name === 'home' ? ' is-active' : '')} onClick={() => navigate({ name: 'home' })}>Home</div>
            {CATS.map(cat => (
              <div key={cat.group} className={'nav-item has-mega' + (isActive(cat.group) ? ' is-active' : '')} onClick={() => navigate({ name: 'category', group: cat.group })}>
                {cat.label}<span className="caret"><Ic.caret /></span>
                {cat.subs.length > 1 && (
                  <div className="mega">
                    <div className="container mega-grid">
                      <div className="mega-col">
                        <h4>Shop {cat.label}</h4>
                        {cat.subs.map(s => (
                          <div key={s.sub} className="mega-link" onClick={(e) => { e.stopPropagation(); navigate({ name: 'category', group: cat.group, sub: s.sub }); }}>{s.label}</div>
                        ))}
                      </div>
                      <div className="mega-col">
                        <h4>By Style</h4>
                        {CATS[0].subs.map(s => (
                          <div key={s.sub} className="mega-link" onClick={(e) => { e.stopPropagation(); navigate({ name: 'category', group: 'shoes', sub: s.sub }); }}>{s.label}</div>
                        ))}
                      </div>
                      <div className="mega-col">
                        <h4>By Leather</h4>
                        <div className="mega-link" onClick={(e) => { e.stopPropagation(); navigate({ name: 'category', group: 'shoes', preset: 'genuine' }); }}>Genuine Cowhide</div>
                        <div className="mega-link" onClick={(e) => { e.stopPropagation(); navigate({ name: 'category', group: 'shoes', preset: 'leather' }); }}>Genuine Leather</div>
                        <div className="mega-link" onClick={(e) => { e.stopPropagation(); navigate({ name: 'category', group: 'shoes', preset: 'manmade' }); }}>Man-Made Leather</div>
                      </div>
                      <div className="mega-feature">
                        <h5>The Workshop</h5>
                        <p style={{ fontSize: 13, color: 'var(--color-text-mute)', margin: '4px 0 12px' }}>Ten shapes. Handmade in Islamabad. No more, no less.</p>
                        <button className="btn btn-text" style={{ fontSize: 12, letterSpacing: '.14em', textTransform: 'uppercase' }} onClick={(e) => { e.stopPropagation(); navigate({ name: 'page', slug: 'craft' }); }}>See the craft →</button>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            ))}
            <div className="nav-item" onClick={() => navigate({ name: 'page', slug: 'story' })}>Our Story</div>
            
            <div className="nav-item" onClick={() => navigate({ name: 'page', slug: 'contact' })}>Contact</div>
          </nav>
        </div>
      </div>
    </header>
  );
}

// Mobile menu drawer
function MobileMenu() {
  const { drawer, setDrawer, navigate, user } = useStore();
  const open = drawer === 'menu';
  useScrollLock(open);
  useEscape(() => setDrawer(null), open);
  return (
    <>
      <div className={'drawer-backdrop' + (open ? ' is-open' : '')} onClick={() => setDrawer(null)} />
      <aside className={'drawer drawer-left' + (open ? ' is-open' : '')}>
        <div className="drawer-head">
          <h3>Saancha</h3>
          <button className="btn-icon" onClick={() => setDrawer(null)}><Ic.close /></button>
        </div>
        <div className="drawer-body">
          <div className="mobile-menu-list">
            <a onClick={() => navigate({ name: 'home' })}>Home <Ic.arrowR /></a>
            {CATS.map(c => (
              <a key={c.group} onClick={() => navigate({ name: 'category', group: c.group })}>{c.label} <Ic.arrowR /></a>
            ))}
            <a onClick={() => navigate({ name: 'page', slug: 'story' })}>Our Story <Ic.arrowR /></a>
            <a onClick={() => navigate({ name: 'page', slug: 'journal' })}>Journal <Ic.arrowR /></a>
            <a onClick={() => navigate({ name: 'page', slug: 'contact' })}>Contact <Ic.arrowR /></a>
          </div>
          <div className="mt-24">
            <div className="eyebrow" style={{ marginBottom: 8 }}>Account</div>
            <div className="mobile-menu-list">
              {user
                ? <a onClick={() => navigate({ name: 'page', slug: 'account' })}>My Account ({user.name || user.email})</a>
                : <a onClick={() => navigate({ name: 'page', slug: 'account' })}>Sign In</a>
              }
              <a onClick={() => navigate({ name: 'page', slug: 'track' })}>Track Order</a>
              <a onClick={() => navigate({ name: 'page', slug: 'wishlist' })}>Wishlist</a>
            </div>
          </div>
        </div>
        <div className="drawer-foot">
          <div className="muted" style={{ fontSize: 12 }}>+92 51 272 8463 · hello@saanchashoes.shop</div>
        </div>
      </aside>
    </>
  );
}

// Search overlay
function SearchOverlay() {
  const { searchOpen, setSearchOpen, navigate } = useStore();
  const [q, setQ] = useState('');
  const inputRef = useRef();
  useEffect(() => { if (searchOpen) setTimeout(() => inputRef.current?.focus(), 50); else setQ(''); }, [searchOpen]);
  useEscape(() => setSearchOpen(false), searchOpen);
  useScrollLock(searchOpen);
  const results = useMemo(() => {
    if (!q.trim()) return window.PRODUCTS.slice(0, 6); // suggested
    const t = q.toLowerCase();
    return window.PRODUCTS.filter(p => p.name.toLowerCase().includes(t) || p.catLabel.toLowerCase().includes(t)).slice(0, 8);
  }, [q]);
  return (
    <div className={'search-overlay' + (searchOpen ? ' is-open' : '')} onClick={() => setSearchOpen(false)}>
      <div className="search-modal" onClick={(e) => e.stopPropagation()}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <Ic.search />
          <input ref={inputRef} value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search shoes…" />
          <button className="btn-icon" onClick={() => setSearchOpen(false)}><Ic.close /></button>
        </div>
        <div className="search-results">
          {!q && <div className="eyebrow" style={{ padding: '8px 0' }}>Suggested</div>}
          {results.map(p => (
            <div className="search-result" key={p.id} onClick={() => navigate({ name: 'product', id: p.id })}>
              <div className="thumb"><img src={p.img} alt="" /></div>
              <div>
                <div className="name">{p.name}</div>
                <div className="muted" style={{ fontSize: 12 }}>{p.catLabel}</div>
              </div>
              <div className="price">{fmt(p.price)}</div>
            </div>
          ))}
          {q && results.length === 0 && (
            <div className="empty-state"><h3>No matches</h3><p>Try a different word.</p></div>
          )}
        </div>
      </div>
    </div>
  );
}

window.Header = Header;
window.MobileMenu = MobileMenu;
window.SearchOverlay = SearchOverlay;