// Agora Seller storefront — per-seller profile page + Sellers index.

const Seller = ({ route, setRoute, watchlist, toggleWatch }) => {
  const data = window.AG_DATA;
  const seller = data.sellers[route.id] || data.sellers.par;
  const items = data.items.filter(i => i.seller === seller.id);
  const [tab, setTab] = useState('all');

  return (
    <div>
      {/* Hero — seller masthead */}
      <section style={{ background:'var(--ag-paper)', padding:'56px 0 48px' }}>
        <div className="ag-shell ag-shell--wide">
          <div className="ag-flex" style={{ alignItems:'flex-end', gap: 48 }}>
            <div style={{ width: 120, height: 120, borderRadius:'9999px', background:'var(--ag-ink)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontWeight: 400, fontSize: 64, flexShrink:0 }}>
              {seller.name[0].toLowerCase()}
            </div>
            <div style={{ flex: 1 }}>
              <div className="ag-eyebrow">Trusted seller · {seller.city}, {seller.country} · since {seller.since}</div>
              <h1 style={{ fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 72, lineHeight: 0.98, marginTop: 12, letterSpacing:'-0.01em' }}>{seller.name}.</h1>
              <div className="ag-mono" style={{ fontSize: 13, color:'var(--ap-fg-muted)', marginTop: 8 }}>{seller.handle}</div>
            </div>
            <div className="ag-flex ag-gap-2">
              <button className="ag-btn ag-btn--ghost"><Icon name="heart" size={12}/> Follow</button>
              <button className="ag-btn"><Icon name="message" size={12}/> Message</button>
            </div>
          </div>
          <div className="ag-flex" style={{ marginTop: 40, gap: 0 }}>
            {[
              { v: seller.rating, l:'Buyer rating' },
              { v: seller.sales.toLocaleString(), l:'Lifetime sales' },
              { v: items.length, l:'Active listings' },
              { v: '< 2 hrs', l:'Avg reply time' },
              { v: '99.4%', l:'On-time ship' },
            ].map((s, i, arr) => (
              <div key={s.l} style={{ flex: 1, padding:'0 24px', borderRight: i < arr.length-1 ? '1px solid var(--ag-line-soft)' : '0' }}>
                <div className="ag-num" style={{ fontSize: 28, fontWeight: 500, letterSpacing:'-0.01em' }}>{s.v}</div>
                <div className="ag-eyebrow" style={{ marginTop: 6 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding:'40px 0 24px' }}>
        <div className="ag-shell ag-shell--wide">
          <div style={{ display:'grid', gridTemplateColumns:'1fr 320px', gap: 56 }}>
            <div style={{ maxWidth: 720, fontSize: 16, lineHeight: 1.6, color:'var(--ag-ink-2)' }}>
              {seller.blurb} {seller.id === 'par' && 'Maya curates exclusively from Parisian private collectors with documented purchase history. Hermès specialist — works on commission with three personal shoppers inside the Faubourg-Saint-Honoré flagship.'}
            </div>
            <div className="ag-col ag-gap-3">
              <div className="ag-flex ag-gap-3" style={{ alignItems:'center' }}>
                <Icon name="map-pin" size={14}/>
                <span style={{ fontSize: 13 }}>{seller.city}, {seller.country} · {seller.tz}</span>
              </div>
              <div className="ag-flex ag-gap-3" style={{ alignItems:'center' }}>
                <Icon name="shield" size={14}/>
                <span style={{ fontSize: 13 }}>Authenticated seller · ID-verified</span>
              </div>
              <div className="ag-flex ag-gap-3" style={{ alignItems:'center' }}>
                <Icon name="globe" size={14}/>
                <span style={{ fontSize: 13 }}>Speaks EN, FR{seller.country==='JP' && ', JA'}{seller.country==='KR' && ', KO'}{seller.country==='IT' && ', IT'}</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Tabs */}
      <section style={{ padding:'24px 0', borderTop:'1px solid var(--ap-border)', borderBottom:'1px solid var(--ap-border)' }}>
        <div className="ag-shell ag-shell--wide ag-flex" style={{ gap: 28 }}>
          {[
            { id:'all', l:`Listings · ${items.length}` },
            { id:'sold', l:'Sold · 1,204' },
            { id:'reviews', l:'Reviews · 2,104' },
            { id:'about', l:'About' },
          ].map(t => (
            <span key={t.id} onClick={()=>setTab(t.id)} className="ag-label" style={{ cursor:'pointer', color: tab===t.id ? 'var(--ag-ink)':'var(--ap-fg-muted)' }}>{t.l}</span>
          ))}
          <div className="ag-flex ag-gap-2" style={{ marginLeft:'auto', alignItems:'center' }}>
            <span className="ag-eyebrow">Filter</span>
            <span className="ag-chip">Brand</span>
            <span className="ag-chip">Category</span>
            <span className="ag-chip">Newest</span>
          </div>
        </div>
      </section>

      {tab === 'all' && (
        <section style={{ padding:'32px 0 64px' }}>
          <div className="ag-shell ag-shell--wide">
            <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 1, background:'var(--ap-border)' }}>
              {items.map(it => (
                <div key={it.id} style={{ background:'#fff', cursor:'pointer' }} onClick={()=>setRoute({ name:'product', id: it.id })}>
                  <SellerItemCard item={it} watched={watchlist.has(it.id)} onToggleWatch={()=>toggleWatch(it.id)}/>
                </div>
              ))}
              {[...Array(Math.max(0, 8 - items.length))].map((_, i) => (
                <div key={'p'+i} style={{ background:'#fff', padding: 0 }}>
                  <div style={{ aspectRatio:'4/5', background:'var(--ap-bg-2)' }}/>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {tab === 'reviews' && <SellerReviews seller={seller}/>}
      {tab === 'sold' && (
        <section style={{ padding:'48px 0' }}>
          <div className="ag-shell ag-shell--wide">
            <div className="ag-eyebrow">Recently sold by {seller.name}</div>
            <div style={{ marginTop: 24, display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap: 8 }}>
              {window.AG_DATA.items.slice(0, 12).map(it => (
                <div key={it.id} style={{ position:'relative' }}>
                  <ProductTile item={it} square showWatermark={false}/>
                  <div style={{ position:'absolute', inset: 0, background:'rgba(255,255,255,0.6)' }}/>
                  <div style={{ position:'absolute', top: 8, left: 8 }}>
                    <span className="ag-tag" style={{ background:'var(--ag-ink)', color:'#fff' }}>Sold · €{it.eur.toLocaleString()}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}
      {tab === 'about' && (
        <section style={{ padding:'64px 0' }}>
          <div className="ag-shell ag-shell--wide" style={{ maxWidth: 720 }}>
            <p style={{ fontSize: 17, lineHeight: 1.7 }}>{seller.blurb}</p>
            <p style={{ marginTop: 18, fontSize: 17, lineHeight: 1.7, color:'var(--ap-fg-muted)' }}>Maya Antinora founded {seller.name} in {seller.since}. Sources include Parisian estates, returning expatriate clients, and direct boutique relationships established over 15 years.</p>
          </div>
        </section>
      )}
    </div>
  );
};

const SellerItemCard = ({ item, watched, onToggleWatch }) => (
  <div>
    <ProductTile item={item}>
      <div className="ag-tile__top">
        <div className="ag-flex ag-gap-1">
          {item.new && <span className="ag-tag ag-tag--red">New</span>}
          <span className="ag-tag ag-tag--auth"><Icon name="shield" size={9} stroke={2}/>&nbsp;Auth</span>
        </div>
        <div className={`ag-heart${watched?' ag-heart--active':''}`} onClick={(e)=>{ e.stopPropagation(); onToggleWatch(); }}>
          <Icon name={watched?'heart-fill':'heart'} size={14}/>
        </div>
      </div>
    </ProductTile>
    <div style={{ padding:'12px 14px 16px' }}>
      <div className="ag-between" style={{ alignItems:'baseline' }}>
        <div className="ag-eyebrow-ink">{item.brand}</div>
        <div className="ag-num" style={{ fontSize: 13, fontWeight: 600 }}>€{item.eur.toLocaleString()}</div>
      </div>
      <div style={{ color:'var(--ap-fg-muted)', fontSize: 12, marginTop: 4, lineHeight: 1.35, height: 32, overflow:'hidden' }}>{item.title}</div>
    </div>
  </div>
);

const SellerReviews = ({ seller }) => {
  const reviews = [
    { name:'Liam K.', loc:'Berlin', stars: 5, when:'2 days ago', text:'Pristine piece, exactly as described. Packaging immaculate. Maya answered every question within an hour despite the time difference. Will buy again.' },
    { name:'Sophia R.', loc:'Munich', stars: 5, when:'1 week ago', text:'Authentication paperwork was a real comfort. The bag was clearly handled with care.' },
    { name:'Henrik J.', loc:'Hamburg', stars: 4, when:'2 weeks ago', text:'Delivery a day later than promised, but in pristine condition. Glazing photos provided were honest.' },
    { name:'Élise M.', loc:'Paris', stars: 5, when:'3 weeks ago', text:'Local pickup at the seller\'s atelier was a luxury experience in itself.' },
  ];
  return (
    <section style={{ padding:'48px 0' }}>
      <div className="ag-shell ag-shell--wide" style={{ display:'grid', gridTemplateColumns:'320px 1fr', gap: 56 }}>
        <div>
          <div className="ag-flex ag-gap-2" style={{ alignItems:'baseline' }}>
            <div className="ag-num" style={{ fontSize: 56, fontWeight: 500, letterSpacing:'-0.01em' }}>{seller.rating}</div>
            <div className="ag-flex ag-gap-1">{[1,2,3,4,5].map(s => <Icon key={s} name="star-fill" size={14}/>)}</div>
          </div>
          <div className="ag-eyebrow" style={{ marginTop: 8 }}>Across 2,104 reviews</div>
          <div className="ag-col ag-gap-2" style={{ marginTop: 28 }}>
            {[5,4,3,2,1].map(n => (
              <div key={n} className="ag-flex ag-gap-3" style={{ alignItems:'center' }}>
                <span className="ag-mono" style={{ fontSize: 12, width: 8 }}>{n}</span>
                <div style={{ flex: 1, height: 4, background:'var(--ap-bg-3)', borderRadius: 9999, overflow:'hidden' }}>
                  <div style={{ width: n===5?'92%':n===4?'6%':n===3?'1%':'0.5%', height:'100%', background:'var(--ag-ink)' }}/>
                </div>
                <span className="ag-mono" style={{ fontSize: 11, color:'var(--ap-fg-muted)', width: 36, textAlign:'right' }}>{n===5?'1,936':n===4?'126':n===3?'24':n===2?'12':'6'}</span>
              </div>
            ))}
          </div>
        </div>
        <div>
          {reviews.map((r, i) => (
            <div key={i} style={{ padding:'24px 0', borderTop: i===0 ? 0 : '1px solid var(--ap-border)' }}>
              <div className="ag-between">
                <div className="ag-flex ag-gap-3" style={{ alignItems:'center' }}>
                  <div style={{ width: 32, height: 32, borderRadius:'9999px', background:'var(--ag-paper)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 14, color:'var(--ag-ink)' }}>{r.name[0]}</div>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>{r.name} <span style={{ color:'var(--ap-fg-muted)', fontWeight: 400 }}> · {r.loc}</span></div>
                    <div className="ag-mono" style={{ fontSize: 11, color:'var(--ap-fg-faint)' }}>{r.when}</div>
                  </div>
                </div>
                <div className="ag-flex ag-gap-1">{[1,2,3,4,5].map(s => <Icon key={s} name={s <= r.stars ? 'star-fill' : 'star'} size={11}/>)}</div>
              </div>
              <p style={{ marginTop: 12, fontSize: 14, lineHeight: 1.6, color:'var(--ag-ink-2)' }}>{r.text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const SellersIndex = ({ setRoute }) => {
  const data = window.AG_DATA;
  const sellers = Object.values(data.sellers);
  return (
    <div className="ag-shell ag-shell--wide" style={{ padding:'48px 32px 64px' }}>
      <div className="ag-eyebrow">All sellers</div>
      <h1 style={{ fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 88, lineHeight: 1, marginTop: 14, letterSpacing:'-0.015em' }}>1,284 trusted sellers.</h1>
      <p style={{ marginTop: 18, fontSize: 16, color:'var(--ap-fg-muted)', maxWidth: 580 }}>Each one ID-verified, with a documented track record. We work with single curators and small ateliers — no resellers-of-resellers.</p>

      <div className="ag-flex ag-gap-2" style={{ marginTop: 36 }}>
        {['All','Tokyo','Paris','Milan','New York','Seoul','Hong Kong','Specialist: Hermès','Specialist: Vintage'].map((c, i) => (
          <span key={c} className={`ag-chip${i===0?' ag-chip--active':''}`}>{c}</span>
        ))}
      </div>

      <div style={{ marginTop: 32, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 1, background:'var(--ap-border)' }}>
        {sellers.map(s => {
          const sItems = data.items.filter(i => i.seller === s.id).slice(0, 3);
          return (
            <div key={s.id} style={{ background:'#fff', padding: 24, cursor:'pointer' }} onClick={()=>setRoute({ name:'seller', id: s.id })}>
              <div className="ag-flex ag-gap-3" style={{ alignItems:'center' }}>
                <div style={{ width: 40, height: 40, borderRadius:'9999px', background:'var(--ag-ink)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 18 }}>{s.name[0].toLowerCase()}</div>
                <div style={{ flex: 1 }}>
                  <div className="ag-eyebrow-ink" style={{ fontSize: 11 }}>{s.name}</div>
                  <div className="ag-mono" style={{ fontSize: 10, color:'var(--ap-fg-muted)', marginTop: 2 }}>{s.city} · since {s.since}</div>
                </div>
              </div>
              <div style={{ marginTop: 14, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 4 }}>
                {sItems.map(it => <div key={it.id} style={{ borderRadius: 2, overflow:'hidden' }}><ProductTile item={it} square showWatermark={false}/></div>)}
              </div>
              <div className="ag-between" style={{ marginTop: 14, fontSize: 11, color:'var(--ap-fg-muted)' }}>
                <span className="ag-flex ag-gap-1" style={{ alignItems:'center' }}><Icon name="star-fill" size={10}/> <span className="ag-mono">{s.rating}</span></span>
                <span className="ag-mono">{s.sales.toLocaleString()} sales</span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

window.Seller = Seller;
window.SellersIndex = SellersIndex;