// Agora Watchlist — saved items with price-watch & offer history.

const Watchlist = ({ setRoute, watchlist, toggleWatch }) => {
  const data = window.AG_DATA;
  const items = data.items.filter(i => watchlist.has(i.id));
  const [tab, setTab] = useState('all');

  return (
    <div className="ag-shell ag-shell--wide" style={{ padding:'48px 32px 64px' }}>
      <div className="ag-between" style={{ alignItems:'flex-end' }}>
        <div>
          <div className="ag-eyebrow">Your watchlist</div>
          <h1 style={{ fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 88, lineHeight: 1, marginTop: 12, letterSpacing:'-0.015em' }}>{items.length} pieces.<span style={{ color:'var(--ap-fg-faint)' }}> Watching.</span></h1>
        </div>
        <div className="ag-flex ag-gap-2">
          <button className="ag-btn ag-btn--ghost ag-btn--sm">Notify on price drop</button>
          <button className="ag-btn ag-btn--ghost ag-btn--sm">Export list</button>
        </div>
      </div>

      <div className="ag-flex ag-gap-4" style={{ marginTop: 40, borderBottom:'1px solid var(--ap-border)' }}>
        {[
          { id:'all', l:`All · ${items.length}` },
          { id:'offers', l:'My offers · 2' },
          { id:'dropped', l:'Price dropped · 1' },
          { id:'sold', l:'Sold · 0' },
        ].map(t => (
          <span key={t.id} onClick={()=>setTab(t.id)} className="ag-label" style={{ cursor:'pointer', padding:'12px 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>

      {items.length === 0 ? (
        <div className="ag-center ag-col" style={{ padding:'120px 0', gap: 18 }}>
          <Icon name="heart" size={48} stroke={1} style={{ color:'var(--ap-fg-faint)' }}/>
          <div style={{ fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 36 }}>Nothing saved yet.</div>
          <p style={{ color:'var(--ap-fg-muted)' }}>Tap the heart on a piece to save it here.</p>
          <button className="ag-btn" onClick={()=>setRoute({ name:'browse', cat:'all' })}>Browse the marketplace</button>
        </div>
      ) : (
        <div style={{ marginTop: 32 }}>
          {items.map(it => (
            <WatchRow key={it.id} item={it}
              onClick={()=>setRoute({ name:'product', id: it.id })}
              onRemove={()=>toggleWatch(it.id)}
              onCheckout={()=>setRoute({ name:'checkout', id: it.id })}
            />
          ))}
        </div>
      )}

      {/* Activity */}
      <div style={{ marginTop: 80 }}>
        <div className="ag-eyebrow">Recent activity</div>
        <h2 className="ag-h2" style={{ marginTop: 10, fontSize: 24, marginBottom: 20 }}>Watchlist events</h2>
        <div style={{ borderTop:'1px solid var(--ap-border)' }}>
          {[
            { ago:'2h ago', t:'Hermès Kelly 28 Sellier · seller responded to your offer of €10,800', kind:'offer', red:true },
            { ago:'8h ago', t:'Chanel Classic Flap Medium · 3 more buyers watching', kind:'watch' },
            { ago:'1d ago', t:'Hermès Birkin 30 · price changed €15,400 → €14,800', kind:'price', red:true },
            { ago:'2d ago', t:'Maison Yoshino listed 2 new Hermès pieces matching your saved searches', kind:'new' },
          ].map((e, i) => (
            <div key={i} className="ag-flex ag-gap-4" style={{ padding:'18px 0', borderBottom:'1px solid var(--ap-border)' }}>
              <div style={{ width: 28, height: 28, borderRadius:'9999px', background: e.red ? 'var(--ag-red)' : 'var(--ag-ink)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                <Icon name={e.kind==='offer'?'tag':e.kind==='price'?'arrow-up-right':e.kind==='watch'?'eye':'sparkles'} size={12}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14 }}>{e.t}</div>
                <div className="ag-mono" style={{ fontSize: 11, color:'var(--ap-fg-faint)', marginTop: 4 }}>{e.ago}</div>
              </div>
              <button className="ag-btn ag-btn--sm ag-btn--ghost">View</button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

const WatchRow = ({ item, onClick, onRemove, onCheckout }) => {
  // Fake some price-watching state
  const dropped = item.id === 'i05';
  const offered = item.id === 'i02';
  return (
    <div className="ag-flex ag-gap-6" style={{ padding:'24px 0', borderBottom:'1px solid var(--ap-border)', alignItems:'center' }}>
      <div style={{ width: 120, height: 120, flexShrink: 0, cursor:'pointer' }} onClick={onClick}>
        <ProductTile item={item} square showWatermark={false}/>
      </div>
      <div style={{ flex: 1, cursor:'pointer' }} onClick={onClick}>
        <div className="ag-eyebrow-ink">{item.brand} · {item.year}</div>
        <div style={{ fontSize: 17, marginTop: 4, fontWeight: 500 }}>{item.title}</div>
        <div className="ag-flex ag-gap-4" style={{ marginTop: 8, color:'var(--ap-fg-muted)', fontSize: 12 }}>
          <span>Condition · {item.cond}</span>
          <RouteLine from={item.city} to="Berlin" compact/>
          <span>{item.watchers} other buyers watching</span>
        </div>
        {dropped && (
          <div className="ag-flex ag-gap-2" style={{ alignItems:'center', marginTop: 12, color:'var(--ag-red)', fontSize: 12, fontWeight: 600 }}>
            <Icon name="arrow-up-right" size={12} style={{ transform:'rotate(135deg)' }}/>
            Price dropped €600 in last 7 days
          </div>
        )}
        {offered && (
          <div className="ag-flex ag-gap-2" style={{ alignItems:'center', marginTop: 12, color:'var(--ap-fg-2)', fontSize: 12 }}>
            <Icon name="tag" size={12}/>
            Your offer of €4,500 is being reviewed · seller replied 2 hours ago
          </div>
        )}
      </div>
      <div style={{ textAlign:'right' }}>
        {dropped && <div className="ag-strike ag-num" style={{ fontSize: 13 }}>€15,400</div>}
        <div className="ag-num" style={{ fontSize: 22, fontWeight: 600 }}>€{item.eur.toLocaleString()}</div>
        <div className="ag-flex ag-gap-2" style={{ marginTop: 14, justifyContent:'flex-end' }}>
          <button className="ag-btn ag-btn--sm ag-btn--ghost" onClick={onRemove}>Remove</button>
          {offered ? (
            <button className="ag-btn ag-btn--sm">View offer</button>
          ) : (
            <button className="ag-btn ag-btn--sm" onClick={onCheckout}>Buy now</button>
          )}
        </div>
      </div>
    </div>
  );
};

window.Watchlist = Watchlist;