/* ============================================================
   MY ORDERS — local order history + wishlist (no login)
   ============================================================ */
function AccountPage() {
  const { orders, nav, wish, fmt } = useStore();
  const [tab, setTab] = useState('orders');
  const wishProducts = BB.products.filter(p => wish.includes(p.id));

  return (
    <div className="container wide" style={{ padding: 'clamp(36px,5vw,64px) var(--gutter) clamp(64px,9vw,110px)' }}>
      <h1 style={{ fontSize: 'clamp(36px,5vw,60px)', marginBottom: 36 }}>My Orders</h1>

      <div className="account-layout">
        <aside>
          <div style={{ background: 'var(--ivory)', borderRadius: 'var(--r-lg)', padding: 22, boxShadow: 'var(--shadow-sm)' }}>
            {[['orders', 'My Orders', I.truck], ['wishlist', 'Saved fabrics', I.heart]].map(([id, l, Ic]) => (
              <button key={id} onClick={() => setTab(id)} style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', textAlign: 'left', padding: '12px 14px', minHeight: 44, borderRadius: 'var(--r-md)', fontSize: 14.5, fontWeight: 500, background: tab === id ? 'var(--cream-deep)' : 'transparent', color: tab === id ? 'var(--ink)' : 'var(--ink-soft)', transition: 'all .2s' }}>
                {Ic({ width: 19, height: 19 })} {l}
              </button>
            ))}
          </div>
        </aside>

        <div>
          {tab === 'orders' && (
            orders.length === 0 ? (
              <Empty icon={I.truck} title="No orders yet" sub="Once you place an order it will show up here." cta="Shop fabrics" onCta={() => nav('shop')} />
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
                {orders.map(o => (
                  <div key={o.num} style={{ background: 'var(--ivory)', borderRadius: 'var(--r-lg)', padding: 'clamp(20px,3vw,28px)', boxShadow: 'var(--shadow-sm)' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 14, flexWrap: 'wrap', alignItems: 'baseline' }}>
                      <div style={{ fontFamily: 'var(--serif)', fontSize: 22 }}>Order #{o.num}</div>
                      <strong style={{ fontFamily: 'var(--serif)', fontSize: 22, fontVariantNumeric: 'tabular-nums' }}>{fmt(o.total)}</strong>
                    </div>
                    <div style={{ fontSize: 13.5, color: 'var(--ink-soft)', marginTop: 4 }}>{new Date(o.date).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' })} · {o.method === 'delivery' ? o.zoneLabel : 'Pickup'} · {o.payment === 'paystack' ? 'Paystack' : 'Dollar wire transfer'}</div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 7, marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--line)' }}>
                      {o.lines.map((l, i) => (
                        <div key={i} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, fontSize: 13.5, color: 'var(--ink-soft)' }}>
                          <span>{l.name} × {l.qty} {l.unit}{l.qty !== 1 ? 's' : ''}</span>
                          <span style={{ fontVariantNumeric: 'tabular-nums' }}>{fmt(l.total)}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            )
          )}
          {tab === 'wishlist' && (
            wishProducts.length === 0 ? (
              <Empty icon={I.heart} title="Nothing saved yet" sub="Tap the heart on any fabric to save it for later." cta="Shop fabrics" onCta={() => nav('shop')} />
            ) : (
              <div className="prod-grid">{wishProducts.map((p, i) => <ProductCard key={p.id} p={p} delay={(i % 4) + 1} />)}</div>
            )
          )}
        </div>
      </div>
    </div>
  );
}

function Empty({ icon, title, sub, cta, onCta }) {
  return (
    <div style={{ background: 'var(--ivory)', borderRadius: 'var(--r-lg)', padding: 'clamp(40px,7vw,72px) 28px', textAlign: 'center', boxShadow: 'var(--shadow-sm)' }}>
      {icon({ width: 46, height: 46, style: { opacity: .3, margin: '0 auto 16px' } })}
      <h3 style={{ fontSize: 28 }}>{title}</h3>
      <p className="muted" style={{ marginTop: 10, maxWidth: 380, marginInline: 'auto', fontSize: 15 }}>{sub}</p>
      <button className="btn btn-accent" style={{ marginTop: 24 }} onClick={onCta}>{cta}</button>
    </div>
  );
}

Object.assign(window, { AccountPage });