/* Overview dashboard */

window.OverviewScreen = function OverviewScreen({ onOpenTender, role }) {
  const D = window.MOUS_DATA;
  return (
    <div className="content">
      <div style={{display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 22}}>
        <div>
          <div className="eyebrow" style={{marginBottom: 8}}>Woensdag · 22 april 2026</div>
          <h1>Goedemorgen, {role.name.split(" ")[0]}.</h1>
          <div className="muted" style={{marginTop: 6, fontSize: 13.5}}>
            3 nieuwe tenders vannacht binnengekomen. 1 daarvan heeft een harde deadline deze week.
          </div>
        </div>
        <div className="hstack">
          <button className="btn"><Icon name="filter" size={14}/> Deze week</button>
          <button className="btn primary"><Icon name="plus" size={14}/> Nieuwe aanvraag</button>
        </div>
      </div>

      <div className="kpi-grid">
        {D.kpis.map((k, i) => (
          <div className="kpi" key={i}>
            <div className="label">{k.label}</div>
            <div className="value num">{k.value}{k.unit && <span className="unit"> {k.unit}</span>}</div>
            <div className={"delta " + (k.dir === "up" ? "up" : "down")}>
              <Icon name="trend" size={12}/> {k.delta}
            </div>
            <div className="spark"><Spark data={k.spark} /></div>
          </div>
        ))}
      </div>

      <div style={{display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 16}}>
        <div className="card">
          <div className="hd row-split">
            <div className="hstack">
              <h3>Tender-inbox</h3>
              <span className="sub">AI heeft 14 dossiers geïndexeerd en voorzien van advies</span>
            </div>
            <div className="hstack">
              <span className="pill ai"><Icon name="ai" size={10}/> Auto-triage aan</span>
              <button className="btn sm">Alles bekijken</button>
            </div>
          </div>
          <div className="body p0">
            <table className="tlist">
              <thead>
                <tr>
                  <th style={{width:"40%"}}>Aanbesteding</th>
                  <th>Opdrachtgever</th>
                  <th>Deadline</th>
                  <th>AI-advies</th>
                  <th>Flags</th>
                </tr>
              </thead>
              <tbody>
                {D.tenders.slice(0,5).map(t => (
                  <tr key={t.id} className="clickable" onClick={() => onOpenTender(t)}>
                    <td>
                      <div style={{fontWeight: 500, color: "var(--ink)"}}>{t.title}</div>
                      <div className="muted mono" style={{fontSize: 11, marginTop: 3}}>
                        {t.id} · {t.pages} p · {t.received}
                      </div>
                    </td>
                    <td>
                      <div>{t.client}</div>
                      <div className="muted" style={{fontSize: 11.5, marginTop: 2}}>{t.value}</div>
                    </td>
                    <td className="num">{new Date(t.deadline).toLocaleDateString("nl-NL", {day:"numeric", month:"short"})}</td>
                    <td>
                      <div className="hstack">
                        <StatusPill status={t.status} />
                      </div>
                      <div className="muted mono" style={{fontSize: 11, marginTop: 4}}>
                        score {t.aiScore}/100
                      </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>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <div className="vstack" style={{gap: 16}}>
          <div className="card">
            <div className="hd"><h3>Deze week af</h3></div>
            <div className="body" style={{padding: 0}}>
              {[
                { t: "T-2026-0112", d: "Persleiding Harlingen", deadline: "vr · 2 mei", days: 9, state: "nogo" },
                { t: "T-2026-0115", d: "Sluiscomplex Stavoren", deadline: "wo · 29 apr", days: 6, state: "review" },
                { t: "T-2026-0116", d: "Raamcontract bruggen Leeuwarden", deadline: "vr · 8 mei", days: 15, state: "go" },
              ].map((x, i) => (
                <div key={i} style={{
                  padding: "12px 18px",
                  borderBottom: i < 2 ? "1px solid var(--rule)" : "0",
                  display: "flex", gap: 12, alignItems: "center"
                }}>
                  <div style={{
                    width: 36, textAlign: "center",
                    fontFamily: "var(--font-serif)", fontSize: 22, fontWeight: 500,
                    color: x.days <= 7 ? "var(--risk)" : "var(--ink)",
                    lineHeight: 1,
                  }} className="num">{x.days}<span style={{fontSize:10,color:"var(--ink-3)",display:"block",letterSpacing:"0.06em",textTransform:"uppercase"}}>dg</span></div>
                  <div style={{flex:1, minWidth: 0}}>
                    <div style={{fontSize: 13, fontWeight: 500}}>{x.d}</div>
                    <div className="muted mono" style={{fontSize: 11, marginTop: 2}}>{x.t} · {x.deadline}</div>
                  </div>
                  <StatusPill status={x.state} />
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="hd"><h3>AI-activiteit vandaag</h3></div>
            <div className="body" style={{display:"grid",gap:12}}>
              {[
                { ico: "inbox", txt: "3 nieuwe dossiers geïndexeerd", meta: "06:12 — 09:14" },
                { ico: "ai",    txt: "17 AI-samenvattingen gegenereerd", meta: "gem. 42 sec/dossier" },
                { ico: "link",  txt: "42 referentiematches gevonden", meta: "RAG-index v2026.04" },
                { ico: "flag",  txt: "9 risico-flags aangebracht", meta: "2 rood, 5 oranje, 2 groen" },
              ].map((a,i) => (
                <div key={i} className="hstack" style={{gap:10}}>
                  <div style={{
                    width: 28, height: 28, borderRadius: 6,
                    background: "var(--ai-soft)", color: "var(--ai)",
                    display: "grid", placeItems: "center", flexShrink: 0
                  }}>
                    <Icon name={a.ico} size={14}/>
                  </div>
                  <div style={{flex: 1}}>
                    <div style={{fontSize: 13}}>{a.txt}</div>
                    <div className="muted mono" style={{fontSize: 11, marginTop: 1}}>{a.meta}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div style={{marginTop: 16, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16}}>
        <div className="card">
          <div className="hd"><h3>Hitrate per sector</h3><span className="sub">rollend 12m</span></div>
          <div className="body">
            {[
              { lbl: "Poldergemalen", pct: 52, n: 17 },
              { lbl: "Bruggen & sluizen", pct: 41, n: 12 },
              { lbl: "Rioolgemalen", pct: 38, n: 24 },
              { lbl: "Telemetrie", pct: 66, n: 9 },
              { lbl: "Civieltechniek", pct: 14, n: 7 },
            ].map((x,i) => (
              <div key={i} style={{marginBottom: 10}}>
                <div className="row-split" style={{marginBottom: 4}}>
                  <span style={{fontSize: 12.5}}>{x.lbl}</span>
                  <span className="mono muted" style={{fontSize: 11.5}}>{x.pct}% · {x.n}</span>
                </div>
                <div className="progress"><i style={{width: x.pct + "%"}} /></div>
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <div className="hd"><h3>Kennis geborgd</h3><span className="sub">RAG-index</span></div>
          <div className="body">
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14,marginBottom:12}}>
              <div>
                <div className="muted" style={{fontSize: 11}}>Documenten</div>
                <div className="num" style={{fontFamily:"var(--font-serif)",fontSize:26,fontWeight:500}}>42.118</div>
              </div>
              <div>
                <div className="muted" style={{fontSize: 11}}>Projectdossiers</div>
                <div className="num" style={{fontFamily:"var(--font-serif)",fontSize:26,fontWeight:500}}>1.847</div>
              </div>
              <div>
                <div className="muted" style={{fontSize: 11}}>Jaren ervaring</div>
                <div className="num" style={{fontFamily:"var(--font-serif)",fontSize:26,fontWeight:500}}>42</div>
              </div>
              <div>
                <div className="muted" style={{fontSize: 11}}>Vragen deze week</div>
                <div className="num" style={{fontFamily:"var(--font-serif)",fontSize:26,fontWeight:500}}>186</div>
              </div>
            </div>
            <hr className="divider"/>
            <div className="muted" style={{fontSize:12}}>Laatste ingest: vandaag 04:30 — 12 nieuwe dossiers, 308 documenten</div>
          </div>
        </div>

        <div className="card">
          <div className="hd"><h3>Tijd teruggegeven</h3><span className="sub">deze maand</span></div>
          <div className="body">
            <div style={{fontFamily:"var(--font-serif)",fontSize:44,fontWeight:500,letterSpacing:"-0.02em",lineHeight:1}} className="num">
              312 <span style={{fontSize:20,color:"var(--ink-3)"}}>uur</span>
            </div>
            <div className="muted" style={{fontSize: 12.5, marginTop: 6}}>
              ≈ 1,9 FTE aan leestijd, teruggegeven aan de vakmensen.
            </div>
            <hr className="divider" />
            <div style={{display:"grid",gap:6}}>
              {[
                {l:"Tender-triage",v:214},
                {l:"Offerte-concepten",v:68},
                {l:"Kennisbank-antwoorden",v:30},
              ].map((r,i)=>(
                <div className="row-split" key={i}>
                  <span style={{fontSize:12.5}}>{r.l}</span>
                  <span className="mono num" style={{fontSize:12}}>{r.v} u</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};