// Agora Seller Dashboard — "Sell on Agora" view for sellers managing their storefront.

const SellerDash = ({ setRoute }) => {
  const data = window.AG_DATA;
  const seller = data.sellers.par; // "you" as a seller
  const myItems = data.items.filter(i => i.seller === seller.id);

  const [tab, setTab] = useState('listings');

  return (
    <div style={{ background:'var(--ap-bg-2)', minHeight:'calc(100vh - var(--ag-nav-h) - var(--ag-nav-sub-h))' }}>
      <div className="ag-shell ag-shell--wide" style={{ padding:'40px 32px 80px' }}>
        {/* Header */}
        <div className="ag-between">
          <div>
            <div className="ag-eyebrow">Seller dashboard</div>
            <h1 style={{ fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 64, lineHeight: 1, marginTop: 12, letterSpacing:'-0.01em' }}>
              Good morning, Maya.
            </h1>
            <div style={{ marginTop: 8, color:'var(--ap-fg-muted)', fontSize: 14 }}>Rive Droite · Paris · CET 09:14</div>
          </div>
          <div className="ag-flex ag-gap-2">
            <button className="ag-btn ag-btn--ghost"><Icon name="external" size={12}/> Visit storefront</button>
            <button className="ag-btn ag-btn--red"><Icon name="plus" size={12}/> List a piece</button>
          </div>
        </div>

        {/* KPI strip */}
        <div style={{ marginTop: 40, display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap: 1, background:'var(--ap-border)' }}>
          {[
            { l:'Sales · 30d', v:'€84,210', d:'+22% vs prior', up:true },
            { l:'Open orders', v:'4', d:'2 awaiting auth' },
            { l:'Active listings', v: myItems.length, d:'3 ending soon' },
            { l:'Active offers', v:'7', d:'3 require response', red: true },
            { l:'Payout next', v:'€18,460', d:'Releases 24 Apr · 3 days' },
          ].map(k => (
            <div key={k.l} style={{ background:'#fff', padding: 24 }}>
              <div className="ag-eyebrow">{k.l}</div>
              <div className="ag-num" style={{ fontSize: 28, fontWeight: 500, marginTop: 8, letterSpacing:'-0.01em' }}>{k.v}</div>
              <div className="ag-flex ag-gap-1" style={{ marginTop: 6, alignItems:'center', fontSize: 11, color: k.red ? 'var(--ag-red)' : k.up ? 'var(--ap-success)' : 'var(--ap-fg-muted)' }}>
                {k.up && <Icon name="arrow-up-right" size={11} stroke={2}/>}
                {k.red && <span className="ag-dot"/>}
                <span>{k.d}</span>
              </div>
            </div>
          ))}
        </div>

        {/* Tabs */}
        <div className="ag-flex ag-gap-6" style={{ marginTop: 40, borderBottom:'1px solid var(--ap-border)' }}>
          {[
            { id:'listings', l:'Listings · '+myItems.length },
            { id:'orders',   l:'Orders · 4' },
            { id:'offers',   l:'Offers · 7' },
            { id:'dreams',   l:'Dream Finder briefs · 12 matching' },
            { id:'analytics',l:'Analytics' },
            { id:'payouts',  l:'Payouts' },
          ].map(t => (
            <span key={t.id} onClick={()=>setTab(t.id)} className="ag-label" style={{ cursor:'pointer', padding:'14px 0', color: tab===t.id ? 'var(--ag-ink)':'var(--ap-fg-muted)', borderBottom: tab===t.id ? '2px solid var(--ag-ink)':'2px solid transparent', marginBottom: -1 }}>{t.l}</span>
          ))}
        </div>

        {/* Content */}
        <div style={{ marginTop: 28 }}>
          {tab === 'listings' && <ListingsTable items={myItems} setRoute={setRoute}/>}
          {tab === 'orders' && <OrdersTable/>}
          {tab === 'offers' && <OffersTable/>}
          {tab === 'dreams' && <DreamsTable/>}
          {tab === 'analytics' && <Analytics/>}
          {tab === 'payouts' && <Payouts/>}
        </div>
      </div>
    </div>
  );
};

// ----- LISTINGS TABLE -----
const ListingsTable = ({ items, setRoute }) => (
  <div style={{ background:'#fff', border:'1px solid var(--ap-border)' }}>
    <div className="ag-flex ag-gap-2" style={{ padding:'16px 20px', borderBottom:'1px solid var(--ap-border)', alignItems:'center' }}>
      <input className="ag-input" placeholder="Search your listings…" style={{ height: 36, maxWidth: 280, fontSize: 13 }}/>
      <div className="ag-flex ag-gap-2">
        <span className="ag-chip ag-chip--active">All · {items.length}</span>
        <span className="ag-chip">Live · {items.length}</span>
        <span className="ag-chip">Drafts · 2</span>
        <span className="ag-chip">Sold · 18</span>
        <span className="ag-chip">Paused · 0</span>
      </div>
      <div style={{ flex: 1 }}/>
      <button className="ag-btn ag-btn--sm ag-btn--ghost"><Icon name="sliders" size={11}/> Columns</button>
      <button className="ag-btn ag-btn--sm ag-btn--ghost"><Icon name="external" size={11}/> Export CSV</button>
    </div>
    <div style={{ display:'grid', gridTemplateColumns:'48px 1.5fr 1fr 0.6fr 0.6fr 0.6fr 0.7fr 100px', padding:'12px 20px', borderBottom:'1px solid var(--ap-border)', background:'var(--ap-bg-2)' }}>
      {['','Piece','Title','Price','Cond.','Watchers','Listed','Status'].map((h, i) => (
        <div key={i} className="ag-eyebrow" style={{ fontSize: 10 }}>{h}</div>
      ))}
    </div>
    {items.map((it, i) => (
      <div key={it.id} className="ag-flex" style={{ display:'grid', gridTemplateColumns:'48px 1.5fr 1fr 0.6fr 0.6fr 0.6fr 0.7fr 100px', padding:'14px 20px', borderBottom:'1px solid var(--ap-border)', alignItems:'center', cursor:'pointer' }} onClick={()=>setRoute({ name:'product', id: it.id })}>
        <div style={{ width: 40, height: 40 }}><ProductTile item={it} square showWatermark={false}/></div>
        <div>
          <div className="ag-eyebrow-ink" style={{ fontSize: 11 }}>{it.brand}</div>
          <div className="ag-mono" style={{ fontSize: 10, color:'var(--ap-fg-faint)', marginTop: 2 }}>{it.id.toUpperCase()}</div>
        </div>
        <div style={{ fontSize: 13, color:'var(--ag-ink-2)' }}>{it.title}</div>
        <div className="ag-num" style={{ fontSize: 13, fontWeight: 600 }}>€{it.eur.toLocaleString()}</div>
        <div style={{ fontSize: 12, color:'var(--ap-fg-muted)' }}>{it.cond}</div>
        <div className="ag-flex ag-gap-1" style={{ alignItems:'center', fontSize: 13 }}><Icon name="eye" size={11}/> <span className="ag-mono">{it.watchers}</span></div>
        <div className="ag-mono" style={{ fontSize: 11, color:'var(--ap-fg-muted)' }}>{it.listedAgo} ago</div>
        <div><span className="ag-tag" style={{ background: i===0 ? 'var(--ag-red)' : 'var(--ap-success)' }}>{i===0 ? '3 Offers' : 'Live'}</span></div>
      </div>
    ))}
  </div>
);

// ----- ORDERS TABLE -----
const OrdersTable = () => {
  const data = window.AG_DATA;
  const orders = [
    { id:'#AG-26-04-21-9482', buyer:'Lea Kobayashi', loc:'Berlin', item: data.byId.i01, price: 11420, status:'Awaiting auth', when:'2h ago' },
    { id:'#AG-26-04-20-7621', buyer:'Henrik Jensen', loc:'Hamburg', item: data.byId.i05, price: 14800, status:'In transit to hub', when:'1d ago' },
    { id:'#AG-26-04-18-5104', buyer:'Sophia Reuter', loc:'Munich', item: data.byId.i12, price: 1740, status:'Authenticated · ready to ship', when:'3d ago' },
    { id:'#AG-26-04-15-2208', buyer:'Élise Martin', loc:'Paris', item: data.byId.j01, price: 5840, status:'Delivered', when:'1w ago' },
  ];
  return (
    <div style={{ background:'#fff', border:'1px solid var(--ap-border)' }}>
      {orders.map(o => (
        <div key={o.id} className="ag-flex ag-gap-4" style={{ padding:'18px 20px', borderBottom:'1px solid var(--ap-border)', alignItems:'center' }}>
          <div style={{ width: 56, height: 56, flexShrink: 0 }}><ProductTile item={o.item} square showWatermark={false}/></div>
          <div style={{ flex: 1.5 }}>
            <div className="ag-mono" style={{ fontSize: 11, color:'var(--ap-fg-faint)' }}>{o.id}</div>
            <div style={{ fontSize: 14, marginTop: 4 }}>{o.item.title}</div>
          </div>
          <div style={{ flex: 1 }}>
            <div className="ag-eyebrow">Buyer</div>
            <div style={{ fontSize: 13, marginTop: 2 }}>{o.buyer}</div>
            <div className="ag-mono" style={{ fontSize: 11, color:'var(--ap-fg-faint)', marginTop: 2 }}>{o.loc}</div>
          </div>
          <div style={{ flex: 1 }}>
            <div className="ag-eyebrow">Status</div>
            <div style={{ fontSize: 13, marginTop: 2 }}>{o.status}</div>
            <div className="ag-mono" style={{ fontSize: 11, color:'var(--ap-fg-faint)', marginTop: 2 }}>{o.when}</div>
          </div>
          <div style={{ width: 120, textAlign:'right' }}>
            <div className="ag-num" style={{ fontSize: 18, fontWeight: 600 }}>€{o.price.toLocaleString()}</div>
            <button className="ag-btn ag-btn--sm ag-btn--ghost" style={{ marginTop: 8 }}>Order →</button>
          </div>
        </div>
      ))}
    </div>
  );
};

// ----- OFFERS -----
const OffersTable = () => {
  const data = window.AG_DATA;
  const offers = [
    { item: data.byId.i02, buyer:'Lea K.', loc:'Berlin', offered: 4500, asked: 5090, when:'2h ago', state:'pending' },
    { item: data.byId.i01, buyer:'Mateo G.', loc:'Madrid', offered: 10200, asked: 11420, when:'5h ago', state:'pending' },
    { item: data.byId.i08, buyer:'Yuki S.', loc:'Tokyo', offered: 5800, asked: 6320, when:'1d ago', state:'pending' },
    { item: data.byId.i03, buyer:'Anna M.', loc:'Stockholm', offered: 540, asked: 608, when:'2d ago', state:'countered' },
  ];
  return (
    <div className="ag-col ag-gap-3">
      {offers.map((o, i) => (
        <div key={i} className="ag-flex ag-gap-4" style={{ padding: 20, background:'#fff', border:'1px solid var(--ap-border)', alignItems:'center' }}>
          <div style={{ width: 56, height: 56 }}><ProductTile item={o.item} square showWatermark={false}/></div>
          <div style={{ flex: 1 }}>
            <div className="ag-eyebrow-ink" style={{ fontSize: 11 }}>{o.item.brand} · {o.item.title.split('·')[0].trim()}</div>
            <div style={{ fontSize: 12, color:'var(--ap-fg-muted)', marginTop: 4 }}>{o.buyer} · {o.loc} · {o.when}</div>
          </div>
          <div style={{ flex: 1 }}>
            <div className="ag-eyebrow">Asking</div>
            <div className="ag-num" style={{ fontSize: 16, fontWeight: 600 }}>€{o.asked.toLocaleString()}</div>
          </div>
          <div style={{ flex: 1 }}>
            <div className="ag-eyebrow">Offered</div>
            <div className="ag-num" style={{ fontSize: 16, fontWeight: 600, color:'var(--ag-red)' }}>€{o.offered.toLocaleString()}</div>
            <div className="ag-mono" style={{ fontSize: 11, color:'var(--ap-fg-muted)', marginTop: 2 }}>{Math.round((o.offered/o.asked)*100)}% of asking</div>
          </div>
          <div className="ag-flex ag-gap-2">
            <button className="ag-btn ag-btn--sm">Accept</button>
            <button className="ag-btn ag-btn--sm ag-btn--ghost">Counter</button>
            <button className="ag-btn ag-btn--sm ag-btn--ghost" style={{ color:'var(--ag-red)' }}>Decline</button>
          </div>
        </div>
      ))}
    </div>
  );
};

// ----- DREAM FINDER BRIEFS (your listings matching open searches) -----
const DreamsTable = () => {
  const data = window.AG_DATA;
  const briefs = [
    { brief:'Hermès Kelly 28 · Etoupe · Palladium', buyers:7, budget:'€11k–€13k', match: data.byId.i01, score: 96 },
    { brief:'Chanel Classic Flap Medium · Caviar · Black', buyers:12, budget:'€4.8k–€5.5k', match: data.byId.i02, score: 92 },
    { brief:'Birkin 30 · Gold hardware', buyers:4, budget:'€13k–€16k', match: data.byId.i05, score: 88 },
  ];
  return (
    <div>
      <p style={{ color:'var(--ap-fg-muted)', maxWidth: 640, fontSize: 14, lineHeight: 1.55 }}>Buyers commission Agora to find pieces. Your active listings that match open Dream Finder briefs surface here — message the buyer directly when ready.</p>
      <div className="ag-col ag-gap-3" style={{ marginTop: 24 }}>
        {briefs.map((b, i) => (
          <div key={i} className="ag-flex ag-gap-4" style={{ padding: 20, background:'#fff', border:'1px solid var(--ap-border)', alignItems:'center' }}>
            <div style={{ width: 56, height: 56 }}><ProductTile item={b.match} square showWatermark={false}/></div>
            <div style={{ flex: 2 }}>
              <div className="ag-eyebrow">Open brief · {b.buyers} buyers</div>
              <div style={{ fontSize: 14, marginTop: 4, fontWeight: 500 }}>{b.brief}</div>
              <div className="ag-mono" style={{ fontSize: 11, color:'var(--ap-fg-muted)', marginTop: 4 }}>Budget {b.budget}</div>
            </div>
            <div style={{ flex: 1 }}>
              <div className="ag-eyebrow">Your match</div>
              <div style={{ fontSize: 13, marginTop: 4 }}>{b.match.brand} · {b.match.title.split('·')[0].trim()}</div>
            </div>
            <div style={{ width: 90, textAlign:'center' }}>
              <div className="ag-num" style={{ fontSize: 28, fontWeight: 500, color:'var(--ap-success)' }}>{b.score}</div>
              <div className="ag-eyebrow" style={{ marginTop: 2 }}>Match score</div>
            </div>
            <button className="ag-btn ag-btn--sm">Send to buyers</button>
          </div>
        ))}
      </div>
    </div>
  );
};

// ----- ANALYTICS -----
const Analytics = () => (
  <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 24 }}>
    <div style={{ background:'#fff', padding: 28, border:'1px solid var(--ap-border)' }}>
      <div className="ag-between" style={{ alignItems:'flex-end' }}>
        <div>
          <div className="ag-eyebrow">Sales · last 90 days</div>
          <div className="ag-num" style={{ fontSize: 40, fontWeight: 500, marginTop: 6 }}>€241,820</div>
        </div>
        <div className="ag-flex ag-gap-2">
          <span className="ag-chip">7d</span>
          <span className="ag-chip">30d</span>
          <span className="ag-chip ag-chip--active">90d</span>
          <span className="ag-chip">All</span>
        </div>
      </div>
      <svg viewBox="0 0 100 32" style={{ width:'100%', height: 180, marginTop: 24 }}>
        <path d="M 0 22 L 5 20 L 10 18 L 15 21 L 20 15 L 25 17 L 30 12 L 35 14 L 40 9 L 45 11 L 50 6 L 55 9 L 60 7 L 65 12 L 70 8 L 75 5 L 80 8 L 85 4 L 90 6 L 95 3 L 100 5"
              stroke="var(--ag-ink)" strokeWidth="0.4" fill="none"/>
        <path d="M 0 22 L 5 20 L 10 18 L 15 21 L 20 15 L 25 17 L 30 12 L 35 14 L 40 9 L 45 11 L 50 6 L 55 9 L 60 7 L 65 12 L 70 8 L 75 5 L 80 8 L 85 4 L 90 6 L 95 3 L 100 5 L 100 32 L 0 32 Z"
              fill="var(--ag-paper)" opacity="0.6"/>
      </svg>
    </div>
    <div style={{ background:'#fff', padding: 28, border:'1px solid var(--ap-border)' }}>
      <div className="ag-eyebrow">Top countries</div>
      {[
        { c:'Germany', v: 42, n:'34 sales' },
        { c:'United States', v: 28, n:'22 sales' },
        { c:'United Kingdom', v: 18, n:'14 sales' },
        { c:'Switzerland', v: 12, n:'10 sales' },
        { c:'Japan', v: 8, n:'7 sales' },
      ].map(c => (
        <div key={c.c} style={{ marginTop: 18 }}>
          <div className="ag-between" style={{ fontSize: 13 }}>
            <span>{c.c}</span><span className="ag-mono" style={{ color:'var(--ap-fg-muted)' }}>{c.n}</span>
          </div>
          <div style={{ height: 4, background:'var(--ap-bg-3)', marginTop: 6, borderRadius: 9999, overflow:'hidden' }}>
            <div style={{ width: `${c.v*2}%`, height:'100%', background:'var(--ag-ink)' }}/>
          </div>
        </div>
      ))}
    </div>
  </div>
);

// ----- PAYOUTS -----
const Payouts = () => (
  <div style={{ background:'#fff', border:'1px solid var(--ap-border)' }}>
    <div className="ag-flex" style={{ padding: 28, gap: 56, alignItems:'flex-start' }}>
      <div style={{ flex: 1 }}>
        <div className="ag-eyebrow">Next payout</div>
        <div className="ag-num" style={{ fontSize: 48, fontWeight: 500, marginTop: 8 }}>€18,460</div>
        <div className="ag-mono" style={{ fontSize: 12, color:'var(--ap-fg-muted)', marginTop: 6 }}>Releases 24 April 2026 · 3 orders · 1.5% Agora fee · 0.6% FX</div>
      </div>
      <div style={{ flex: 1 }}>
        <div className="ag-eyebrow">Payout method</div>
        <div style={{ marginTop: 8, padding: 14, border:'1px solid var(--ap-border)', borderRadius: 2 }}>
          <div className="ag-mono" style={{ fontSize: 13 }}>SEPA · FR76 •••• •••• 8842 1208</div>
          <div className="ag-mono" style={{ fontSize: 11, color:'var(--ap-fg-muted)', marginTop: 4 }}>Crédit Mutuel · Paris</div>
        </div>
      </div>
    </div>
    <div className="ag-flex" style={{ padding:'14px 28px', background:'var(--ap-bg-2)', borderTop:'1px solid var(--ap-border)' }}>
      <div className="ag-eyebrow" style={{ fontSize: 10 }}>Payout history</div>
    </div>
    {[
      { d:'10 Apr 26', a:'€22,140', n:'5 orders' },
      { d:'27 Mar 26', a:'€14,820', n:'4 orders' },
      { d:'13 Mar 26', a:'€18,920', n:'5 orders' },
      { d:'27 Feb 26', a:'€11,640', n:'3 orders' },
    ].map(p => (
      <div key={p.d} className="ag-between" style={{ padding:'14px 28px', borderTop:'1px solid var(--ap-border)' }}>
        <div className="ag-mono" style={{ fontSize: 12 }}>{p.d}</div>
        <div className="ag-mono" style={{ fontSize: 11, color:'var(--ap-fg-muted)' }}>{p.n}</div>
        <div className="ag-num" style={{ fontSize: 14, fontWeight: 600 }}>{p.a}</div>
      </div>
    ))}
  </div>
);

window.SellerDash = SellerDash;