/* Account — orders, wishlist, details. Tab set via route param (account:wishlist). */
function SF_Account({ go, tab, wish, toggleWish }) {
  const { Button, TextField, ProductCard } = window.SS;
  const F = ({ value, ...rest }) => {
    const [v, setV] = React.useState(value);
    return <TextField {...rest} value={v} onChange={(e) => setV(e.target.value)} />;
  };
  const [active, setActive] = React.useState(tab || 'orders');
  React.useEffect(() => setActive(tab || 'orders'), [tab]);

  const ORDERS = [
    { id: 'SS-2201', date: '8 Jul 2026', status: 'In transit', statusColor: 'var(--sf-gold-hi)', items: ['p20', 'p18'], total: 4698 },
    { id: 'SS-2140', date: '21 Jun 2026', status: 'Delivered', statusColor: 'var(--sf-success)', items: ['p41'], total: 699 },
    { id: 'SS-2089', date: '30 May 2026', status: 'Delivered', statusColor: 'var(--sf-success)', items: ['p24', 'p6'], total: 2998 },
    { id: 'SS-2033', date: '2 May 2026', status: 'Delivered', statusColor: 'var(--sf-success)', items: ['p13', 'p35', 'p45'], total: 3997 },
  ];
  const wished = window.SS_PRODUCTS.filter((p) => wish[p.id]);

  const tabBtn = (id, label) => (
    <button key={id} onClick={() => setActive(id)} style={{
      all: 'unset', cursor: 'pointer', minHeight: 44, display: 'flex', alignItems: 'center', padding: '0 2px', fontSize: 12, fontWeight: 500,
      letterSpacing: '.18em', textTransform: 'uppercase',
      color: active === id ? 'var(--sf-gold-hi)' : 'var(--sf-text-faint)',
      borderBottom: active === id ? '1px solid var(--sf-gold-hi)' : '1px solid transparent',
    }}>{label}</button>
  );
  const h = { fontSize: 11, fontWeight: 500, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--sf-gold-hi)', marginBottom: 4 };
  const row2 = { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 };

  return (
    <div className="sf-maxw" style={{ paddingTop: 44, paddingBottom: 96 }}>
      <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: '.24em', textTransform: 'uppercase', color: 'var(--sf-text-faint)' }}>MY ACCOUNT</div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 34, fontWeight: 600, color: 'var(--sf-text)', marginTop: 6 }}>Namaste, <em style={{ fontStyle: 'italic', fontWeight: 400 }}>Ananya</em></div>

      <div style={{ display: 'flex', gap: 28, marginTop: 26, borderBottom: '1px solid var(--sf-border-soft)' }}>
        {tabBtn('orders', 'Orders')}{tabBtn('wishlist', 'Wishlist')}{tabBtn('details', 'Details')}
      </div>

      {active === 'orders' && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 28, maxWidth: 760 }}>
          {ORDERS.map((o) => (
            <div key={o.id} style={{ background: 'var(--sf-surface)', border: '1px solid var(--sf-border-soft)', borderRadius: 'var(--sf-radius)', padding: '20px 24px', display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', gap: 6 }}>
                {o.items.map((id) => {
                  const p = window.SS_PRODUCTS.find((x) => x.id === id);
                  return (
                    <div key={id} style={{ width: 48, height: 48, borderRadius: 'var(--sf-radius-sm)', background: 'var(--sf-well)', boxShadow: 'inset 0 0 0 1px var(--sf-border-soft)', overflow: 'hidden' }}>
                      <img src={p.image} alt={p.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                    </div>
                  );
                })}
              </div>
              <div style={{ flex: 1, minWidth: 160 }}>
                <div style={{ fontSize: 13.5, fontWeight: 500, color: 'var(--sf-text)', letterSpacing: '.06em' }}>#{o.id}</div>
                <div style={{ fontSize: 12, fontWeight: 300, color: 'var(--sf-text-faint)', marginTop: 3 }}>{o.date} · {o.items.length} {o.items.length === 1 ? 'item' : 'items'}</div>
              </div>
              <div style={{ fontSize: 11.5, fontWeight: 500, letterSpacing: '.14em', textTransform: 'uppercase', color: o.statusColor }}>{o.status}</div>
              <div style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--sf-text)' }}>₹{o.total.toLocaleString('en-IN')}</div>
            </div>
          ))}
        </div>
      )}

      {active === 'wishlist' && (
        wished.length > 0 ? (
          <div className="sf-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18, marginTop: 28 }}>
            {wished.map((p) => (
              <ProductCard key={p.id} {...p} wished onWish={() => toggleWish(p.id)} onQuickView={() => go('pdp', p.id)} />
            ))}
          </div>
        ) : (
          <div style={{ textAlign: 'center', padding: '70px 0', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 22, color: 'var(--sf-text-muted)' }}>Nothing saved yet</div>
            <div style={{ fontSize: 13, fontWeight: 300, color: 'var(--sf-text-faint)' }}>Tap the heart on any piece to keep it here.</div>
            <Button variant="ghost" onDark onClick={() => go('listing')}>BROWSE ALL JEWELLERY</Button>
          </div>
        )
      )}

      {active === 'details' && (
        <div style={{ marginTop: 28, maxWidth: 560, display: 'flex', flexDirection: 'column', gap: 28 }}>
          <div>
            <div style={h}>PROFILE</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 12 }}>
              <div style={row2}><F label="First name" value="Ananya" /><F label="Last name" value="Rao" /></div>
              <div style={row2}><F label="Phone" value="98201 44310" /><F label="Email" value="ananya@example.com" type="email" /></div>
            </div>
          </div>
          <div>
            <div style={h}>DEFAULT ADDRESS</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 12 }}>
              <F label="Address" value="14B, Marine Crest, Worli Sea Face" />
              <div style={row2}><F label="City" value="Mumbai" /><F label="Pincode" value="400018" /></div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 12 }}>
            <Button variant="gold">SAVE CHANGES</Button>
            <Button variant="ghost" onDark>SIGN OUT</Button>
          </div>
        </div>
      )}
    </div>
  );
}
window.SF_Account = SF_Account;