/* global React */
// ============================================================
// PCNav + PCFooter — H5 零售站 PC 端 (>=1024px) 顶部导航 + 底部
// 桌面浏览器看到这个,移动端看到原来的 phone frame
// 路由共用同一个 hash router (#/home #/cat #/pdp 等)
// ============================================================
const { useState: useSPC, useContext: useCPC } = React;

function PCNav({ onCur, onSearch, route, push }) {
  const { code } = useCPC(window.CurContext);
  const cur = window.CURRENCIES[code];
  const cats = (window.CATEGORIES || []).filter(c => c.id !== 'all').slice(0, 8);
  const { lang } = useCPC(window.LangContext);
  const { user, isAuthed } = window.useAuth ? window.useAuth() : { user: null, isAuthed: false };
  const { items: cartItems } = window.useCart ? window.useCart() : { items: [] };
  const cartCount = (cartItems || []).reduce((s, i) => s + (i.qty || 0), 0);

  return (
    <header className="pc-nav">
      <div className="pc-nav-row">
        <a href="#/home" className="pc-brand">
          <span className="dot" />
          ap<span style={{ color: 'var(--brand)' }}>M</span>
          <span className="pc-brand-sub">RETAIL · SEOUL</span>
        </a>

        <nav className="pc-cats">
          <a href="#/home" className={'pc-cat ' + (route === 'home' ? 'active' : '')}>首页</a>
          {cats.map(c => (
            <a key={c.id} href={'#/cat?cat=' + c.id} className="pc-cat">
              {window.pickI18n(c.l, lang)}
            </a>
          ))}
        </nav>

        <div className="pc-search">
          <window.Icon name="search" size={14} stroke="var(--fg-3)" sw={2} />
          <input placeholder="搜索 “首尔短外套”" onKeyDown={e => e.key === 'Enter' && onSearch?.(e.target.value)} />
        </div>

        <div className="pc-nav-actions">
          <button className="pc-nav-btn" onClick={onCur} title="切换货币">
            <span style={{ fontSize: 14 }}>{cur.flag}</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 600 }}>{code}</span>
            <window.Icon name="chevd" size={10} sw={2} />
          </button>
          <a href="#/cart" className="pc-nav-btn" title="购物车">
            <window.Icon name="cart" size={18} sw={1.6} />
            {cartCount > 0 && (
              <span style={{ position: 'absolute', top: 2, right: 2, fontSize: 9, fontWeight: 700, background: 'var(--brand)', color: '#fff', minWidth: 16, height: 16, padding: '0 4px', borderRadius: 999, display: 'grid', placeItems: 'center', lineHeight: 1, border: '1.5px solid #fff' }}>{cartCount}</span>
            )}
          </a>
          {isAuthed && !user?.isGuest ? (
            <a href="#/orders" className="pc-nav-btn" title={user.name || user.email || '我的'} style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
              <window.Icon name="user" size={18} sw={1.6} />
              <span style={{ maxWidth: 80, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{user.name || user.email}</span>
            </a>
          ) : (
            <a href="#/login" className="pc-nav-btn" title="登录" style={{ background: 'var(--brand)', color: '#fff', padding: '8px 16px' }}>
              登录 / 注册
            </a>
          )}
        </div>
      </div>

      {/* secondary bar — building filters */}
      <div className="pc-subnav">
        <span className="pc-subnav-label">8 大档口直采:</span>
        {(window.BUILDINGS || []).map(b => (
          <a key={b.name} href={'#/cat?building=' + encodeURIComponent(b.name)} className="pc-subnav-chip">
            {b.name}
          </a>
        ))}
        <a href="#/live" className="pc-subnav-chip pc-subnav-chip-live">
          <span style={{ color: '#FFD53D', marginRight: 4 }}>●</span>AI 直播
        </a>
      </div>
    </header>
  );
}

function PCFooter() {
  return (
    <footer className="pc-footer">
      <div className="pc-footer-grid">
        <div>
          <h4>购物服务</h4>
          <ul>
            <li>东大门直发 · 4-6 天</li>
            <li>满 399 免邮</li>
            <li>7 天无理由退换</li>
            <li>DK 一物一码 · 真品溯源</li>
          </ul>
        </div>
        <div>
          <h4>商家服务</h4>
          <ul>
            <li>apM 入驻申请</li>
            <li>东大门档口对接</li>
            <li>批发加价代下单</li>
            <li>FX LOCK 多币种结算</li>
          </ul>
        </div>
        <div>
          <h4>关于 apM</h4>
          <ul>
            <li>1999 首尔起源</li>
            <li>1,156+ 入驻商家</li>
            <li>53K 月新品</li>
            <li>新天地 / EKA / iAPM 实体店</li>
          </ul>
        </div>
        <div>
          <h4>多端访问</h4>
          <ul>
            <li>📱 微信小程序</li>
            <li>💻 H5 网页 · 桌面端</li>
            <li>🤖 AI 直播 24h</li>
            <li>🌏 8 语支持 (zh/ko/ja/vi/th/id/ms/en)</li>
          </ul>
        </div>
      </div>
      <div className="pc-footer-meta">
        <span style={{ fontFamily: 'var(--font-mono)', letterSpacing: '0.06em' }}>© apM Korea Co., Ltd · since 1999</span>
        <span>把首尔东大门装进口袋 · THIS IS NOT A STORE. THIS IS SEOUL.</span>
      </div>
    </footer>
  );
}

window.PCNav = PCNav;
window.PCFooter = PCFooter;