// Live contribution stream — the last N submissions with their scores.
//
// Distinct from the Metagraph tab: that shows accepted totals per miner, this
// shows individual submissions as they land, including the ones that were
// REJECTED. A rejected delta never enters the graph, so it cannot be recovered
// from any graph query — this feed is the only place it is visible.
//
// The source buffer is in-memory on central and resets when it restarts, so an
// empty feed means "nothing since the last restart", not "nothing happening".
// The empty state says so rather than looking broken.

window.ContributionFeed = function ContributionFeed() {
  const [rows, setRows] = React.useState([]);
  const [meta, setMeta] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [live, setLive] = React.useState(true);
  const [filter, setFilter] = React.useState('all'); // all | accepted | rejected

  React.useEffect(() => {
    let alive = true;
    async function load() {
      const { contributions, feed } = await window.api.fetchRecentContributions(100);
      if (!alive) return;
      setRows(contributions);
      setMeta(feed);
      setLoading(false);
    }
    load();
    if (!live) return () => { alive = false; };
    const t = setInterval(load, 15000);
    return () => { alive = false; clearInterval(t); };
  }, [live]);

  const filtered = React.useMemo(() => rows.filter((r) => {
    if (filter === 'accepted') return r.accepted;
    if (filter === 'rejected') return !r.accepted;
    return true;
  }), [rows, filter]);

  function ago(iso) {
    const t = Date.parse(iso);
    if (Number.isNaN(t)) return '—';
    const s = Math.max(0, Math.floor((Date.now() - t) / 1000));
    if (s < 60) return s + 's ago';
    if (s < 3600) return Math.floor(s / 60) + 'm ago';
    if (s < 86400) return Math.floor(s / 3600) + 'h ago';
    return Math.floor(s / 86400) + 'd ago';
  }

  // Score colour tracks the merge decision rather than a fixed threshold, so
  // the column always agrees with the STATUS badge beside it.
  function scoreColor(r) {
    if (!r.accepted) return 'var(--red)';
    if (r.score >= 0.7) return 'var(--green)';
    if (r.score >= 0.45) return 'var(--yellow)';
    return 'var(--fg-dim)';
  }

  const grid = '92px 110px 130px 1fr 150px 110px';
  const accepted = rows.filter((r) => r.accepted).length;

  return (
    <div>
      <section className="section" style={{paddingTop:16,borderTop:0,paddingBottom:80}}>
        <div className="container">
          <div className="mg-head">
            <div>
              <h2>Contribution Stream</h2>
              <p style={{color:'var(--fg-dim)',marginTop:10,maxWidth:640,fontSize:15,lineHeight:1.55}}>
                Individual submissions as validators merge them, newest first, with the score each
                received. <span style={{color:'var(--red)'}}>Rejected</span> submissions are shown too —
                they score below the merge threshold and never enter the graph, so this is the only
                place they appear.
              </p>
            </div>
            <div className="mg-stats">
              <div>
                <div className="mg-stat-v mono">{rows.length}</div>
                <div className="mg-stat-l">Shown</div>
              </div>
              <div>
                <div className="mg-stat-v mono" style={{color:'var(--green)'}}>{accepted}</div>
                <div className="mg-stat-l">Accepted</div>
              </div>
              <div>
                <div className="mg-stat-v mono" style={{color:'var(--red)'}}>{rows.length - accepted}</div>
                <div className="mg-stat-l">Rejected</div>
              </div>
            </div>
          </div>

          <div className="mg-toolbar">
            <div className="mg-filter">
              <button className={filter==='all'?'on':''} onClick={()=>setFilter('all')}>ALL</button>
              <button className={filter==='accepted'?'on':''} onClick={()=>setFilter('accepted')}>ACCEPTED</button>
              <button className={filter==='rejected'?'on':''} onClick={()=>setFilter('rejected')}>REJECTED</button>
            </div>
            <div className="mg-filter">
              <button className={live?'on':''} onClick={()=>setLive((v)=>!v)}>
                {live ? '● LIVE · 15s' : '○ PAUSED'}
              </button>
            </div>
          </div>

          <div className="mg-table">
            <div className="mg-row head" style={{gridTemplateColumns: grid}}>
              <div>WHEN</div>
              <div>MINER</div>
              <div>SCORE</div>
              <div>COMPONENTS</div>
              <div style={{textAlign:'right'}}>ITEMS LANDED</div>
              <div style={{textAlign:'right'}}>STATUS</div>
            </div>

            {loading && (
              <div className="mg-row body" style={{gridTemplateColumns:'1fr'}}>
                <div style={{color:'var(--fg-mute)',padding:'18px 0'}}>Loading…</div>
              </div>
            )}

            {!loading && filtered.length === 0 && (
              <div className="mg-row body" style={{gridTemplateColumns:'1fr'}}>
                <div style={{color:'var(--fg-mute)',padding:'18px 0',lineHeight:1.6}}>
                  No submissions buffered yet.
                  <span style={{color:'var(--fg-faint)'}}>
                    {' '}The stream is held in memory and clears when the server restarts, so this
                    fills as new submissions arrive rather than showing past history.
                  </span>
                </div>
              </div>
            )}

            {!loading && filtered.map((r, i) => (
              <div className="mg-row body" key={(r.delta_id || '') + i} style={{gridTemplateColumns: grid}}>
                <div data-label="When">
                  <span className="mono" style={{color:'var(--fg-dim)',fontSize:12}} title={r.at}>{ago(r.at)}</span>
                </div>
                <div data-label="Miner">
                  <span className="mono" style={{color:'var(--fg-dim)'}}>
                    {r.miner_uid === null || r.miner_uid === undefined ? '—' : 'UID ' + r.miner_uid}
                  </span>
                </div>
                <div data-label="Score">
                  <span className="mono" style={{color:scoreColor(r),fontWeight:600}}>
                    {typeof r.score === 'number' ? r.score.toFixed(3) : '—'}
                  </span>
                </div>
                <div data-label="Components" style={{minWidth:0}}>
                  <span className="mono" style={{color:'var(--fg-faint)',fontSize:11.5,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis',display:'block'}}>
                    {r.components && Object.keys(r.components).length
                      ? Object.entries(r.components)
                          .map(([k, v]) => k.slice(0, 4) + ' ' + Number(v).toFixed(2))
                          .join('  ·  ')
                      : (r.reason || '—')}
                  </span>
                </div>
                <div data-label="Items landed" style={{textAlign:'right'}}>
                  <span className="mono" style={{color: r.items_total ? 'var(--fg-dim)' : 'var(--fg-faint)'}}>
                    {(r.items_total || 0).toLocaleString()}
                  </span>
                  {r.items && r.items_total > 0 && (
                    <span className="mono" style={{color:'var(--fg-faint)',fontSize:11,marginLeft:8}}>
                      {r.items.facts}f/{r.items.relationships}r/{r.items.entities}e
                    </span>
                  )}
                </div>
                <div data-label="Status" style={{textAlign:'right'}}>
                  {r.accepted
                    ? <span className="badge badge-live"><span className="pulse" />MERGED</span>
                    : <span className="badge" style={{color:'var(--red)'}} title={r.reason || 'below merge threshold'}>REJECTED</span>}
                </div>
              </div>
            ))}
          </div>

          {meta && (
            <p style={{color:'var(--fg-faint)',fontSize:12,marginTop:14}} className="mono">
              buffer {meta.buffered}/{meta.capacity}
              {meta.oldest ? ' · oldest ' + ago(meta.oldest) : ''}
            </p>
          )}
        </div>
      </section>
    </div>
  );
};