/* Tenders list screen - full version */

window.TendersScreen = function TendersScreen({ onOpenTender }) {
  const D = window.MOUS_DATA;
  const [filter, setFilter] = useState("alle");
  const filtered = D.tenders.filter(t => filter === "alle" || t.risk === filter || t.status === filter);

  return (
    <div className="content">
      <div style={{display:"flex", alignItems:"flex-end", justifyContent:"space-between", marginBottom: 16}}>
        <div>
          <div className="eyebrow" style={{marginBottom:6}}>Use case 1 · Aanbestedingstriage</div>
          <h1>Alle aanbestedingen.</h1>
          <div className="muted" style={{marginTop: 6, fontSize: 13.5, maxWidth: 640}}>
            Dossiers komen binnen via TenderNed, de tendermailbox of jullie SharePoint-inbox. AI leest, vat samen, markeert risico's en adviseert. De beoordelaar beslist.
          </div>
        </div>
        <div className="hstack">
          <button className="btn"><Icon name="upload" size={14}/> Dossier toevoegen</button>
          <button className="btn primary"><Icon name="filter" size={14}/> Filters</button>
        </div>
      </div>

      <div className="drop" style={{marginBottom: 16}}>
        <Icon name="upload" size={18} style={{marginBottom: 6, color: "var(--ink-3)"}}/>
        <div><strong>Sleep een tenderdossier hierheen</strong> — of plak een TenderNed-link. AI indexeert, samenvat en flagt binnen ~2 minuten.</div>
      </div>

      <div className="hstack" style={{gap: 6, marginBottom: 14, flexWrap:"wrap"}}>
        {[
          { v: "alle", l: "Alle · 14" },
          { v: "advies", l: "AI-advies · 7" },
          { v: "review", l: "In review · 3" },
          { v: "risk", l: "Hoog risico · 2" },
          { v: "go", l: "Go · 1" },
          { v: "nogo", l: "No-go · 1" },
        ].map(o => (
          <button key={o.v}
                  className={"btn sm " + (filter === o.v ? "primary" : "")}
                  onClick={()=>setFilter(o.v)}>{o.l}</button>
        ))}
      </div>

      <div className="card">
        <div className="body p0">
          <table className="tlist">
            <thead>
              <tr>
                <th style={{width:"36%"}}>Aanbesteding</th>
                <th>Opdrachtgever</th>
                <th>Waarde</th>
                <th>Deadline</th>
                <th>AI-advies</th>
                <th>Flags</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(t => (
                <tr key={t.id} className="clickable" onClick={()=>onOpenTender(t)}>
                  <td>
                    <div style={{fontWeight:500}}>{t.title}</div>
                    <div className="muted" style={{fontSize:12,marginTop:3,maxWidth:420}}>{t.scope}</div>
                    <div className="muted mono" style={{fontSize:11,marginTop:4}}>
                      {t.id} · {t.pages} p · {t.received}
                    </div>
                  </td>
                  <td>{t.client}</td>
                  <td className="num">{t.value}</td>
                  <td className="num">{new Date(t.deadline).toLocaleDateString("nl-NL",{day:"numeric",month:"short"})}</td>
                  <td>
                    <div className="vstack" style={{gap:4,alignItems:"flex-start"}}>
                      <StatusPill status={t.status}/>
                      <div className="muted mono" style={{fontSize:11}}>score {t.aiScore}/100</div>
                    </div>
                  </td>
                  <td>
                    {t.flags > 0 ? (
                      <span className={"pill " + t.risk}>
                        <Icon name="flag" size={10}/> {t.flags}
                      </span>
                    ) : <span className="muted" style={{fontSize:12}}>—</span>}
                  </td>
                  <td><Icon name="chevron" size={14} style={{color:"var(--ink-3)"}}/></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};