// opportunities.jsx — aggregated opportunity table (5-source dedup)

function Opportunities({ go }) {
  const Icons = window.Icons;
  const { SrcDots, ScoreBar, TierBadge } = window;
  const [filter, setFilter] = React.useState('all');

  const filters = [
    { id: 'all', label: 'All', ct: window.OPPS.length },
    { id: 'high', label: 'High-Fit ≥75', ct: window.OPPS.filter(o => o.fit >= 75).length },
    { id: 'pursue', label: 'PURSUE', ct: window.OPPS.filter(o => o.tier1 === 'PURSUE').length },
    { id: 'closing', label: 'Closing ≤14d', ct: window.OPPS.filter(o => o.dueDays <= 14).length },
    { id: 'tier2', label: 'Tier 2 Analyzed', ct: window.OPPS.filter(o => o.tier2).length },
  ];
  const fn = {
    all: () => true, high: o => o.fit >= 75, pursue: o => o.tier1 === 'PURSUE',
    closing: o => o.dueDays <= 14, tier2: o => o.tier2,
  };
  const rows = window.OPPS.filter(fn[filter]);

  return (
    <div className="content-inner">
      <div className="row-head">
        <div>
          <h2>Aggregated Opportunities</h2>
          <div className="desc">One enriched record per opportunity — deduplicated across SAM.gov, PIEE, GSA eBuy, Agency Forecast, and USASpending.</div>
        </div>
        <button className="filter-chip"><Icons.download /> Export</button>
      </div>

      <div className="opp-toolbar">
        {filters.map(f => (
          <button key={f.id} className={`filter-chip${filter === f.id ? ' on' : ''}`} onClick={() => setFilter(f.id)}>
            <Icons.filter />{f.label} <span className="ct">{f.ct}</span>
          </button>
        ))}
        <span className="note" style={{ marginLeft: 'auto' }}>{rows.length} of {window.OPPS.length} records</span>
      </div>

      <div className="card">
        <table className="dtable">
          <thead>
            <tr>
              <th style={{ width: '34%' }}>Opportunity</th>
              <th>Sources</th>
              <th>Vehicle</th>
              <th>Ceiling</th>
              <th>Stage</th>
              <th>AI Screen</th>
              <th style={{ width: 140 }}>Fit</th>
              <th>Due</th>
            </tr>
          </thead>
          <tbody>
            {rows.map(o => (
              <tr key={o.id} onClick={() => go('detail', o.id)}>
                <td>
                  <div className="c-agency">{o.agencyShort}</div>
                  <div className="c-title">{o.title}</div>
                  <div className="c-id">{o.solId}</div>
                </td>
                <td><SrcDots active={o.sources} /></td>
                <td>
                  <div className="c-mono">{o.vehicle}</div>
                  <div className="c-id" style={{ marginTop: 4 }}>{o.setaside}</div>
                </td>
                <td><span className="c-ceiling">{o.ceiling}</span></td>
                <td><span className="badge muted">{o.stage}</span></td>
                <td><TierBadge tier={o.tier1} /></td>
                <td>
                  <div className="fit-cell">
                    <div className="fc-bar"><ScoreBar value={o.fit} /></div>
                    <span className="fc-num" style={{ color: window.fitColor(o.fit) }}>{o.fit}</span>
                  </div>
                </td>
                <td>
                  <div className="c-mono" style={{ color: o.dueDays <= 7 ? 'var(--bad)' : 'var(--text-primary)' }}>{o.due}</div>
                  {o.dueDays < 90 && <div className="c-id" style={{ marginTop: 3 }}>{o.dueDays}d left</div>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div style={{ height: 12 }}></div>
    </div>
  );
}
window.Opportunities = Opportunities;