/* Tender detail screen — the showpiece */

window.TenderScreen = function TenderScreen({ tender, onBack, aiLevel }) {
  const D = window.MOUS_DATA.detail;
  const [decision, setDecision] = useState(null); // 'go' | 'nogo'
  const [accepted, setAccepted] = useState({});

  const confidencePct = Math.round(D.confidence * 100);

  return (
    <div className="content">
      <div style={{display:"flex", alignItems:"center", gap: 10, marginBottom: 12}}>
        <button className="btn ghost sm" onClick={onBack}>← Alle aanbestedingen</button>
        <span className="muted mono" style={{fontSize: 11}}>{D.id} · Wetterskip ref. {D.reference}</span>
      </div>

      <div style={{display:"grid", gridTemplateColumns: "1fr auto", gap: 20, alignItems:"flex-end", marginBottom: 18}}>
        <div>
          <div className="eyebrow" style={{marginBottom:6}}>{D.client} · {D.procedure}</div>
          <h1 style={{textWrap:"balance"}}>{D.title}</h1>
          <div className="hstack" style={{marginTop: 12, gap: 10, flexWrap:"wrap"}}>
            <RiskPill risk="warn" />
            <span className="pill accent"><Icon name="clock" size={10}/> deadline 14 mei</span>
            <span className="pill"><Icon name="docs" size={10}/> {D.documentsCount} doc · {D.pages} p</span>
            <span className="pill ai"><Icon name="ai" size={10}/> AI-advies: Go met voorbehoud</span>
          </div>
        </div>
        <div className="hstack">
          <button className="btn"><Icon name="share" size={14}/> Delen</button>
          <button className="btn"><Icon name="pin" size={14}/> Volgen</button>
          <button className={"btn " + (decision === "nogo" ? "" : "ghost")} onClick={() => setDecision("nogo")}>
            <Icon name="x" size={14}/> No-go
          </button>
          <button className={"btn " + (decision === "go" ? "accent" : "primary")} onClick={() => setDecision("go")}>
            <Icon name="check" size={14}/> Markeer als Go
          </button>
        </div>
      </div>

      <div style={{display:"grid", gridTemplateColumns: "1fr 340px", gap: 20}}>
        {/* LEFT column */}
        <div className="vstack" style={{gap: 20}}>

          {/* Executive summary */}
          <div className="card">
            <div className="hd row-split">
              <div className="hstack">
                <h3>AI-samenvatting</h3>
                <span className="sub">gelezen in 1m 47s · 247 pagina's</span>
              </div>
              <span className="pill ai">
                <Icon name="ai" size={10}/> vertrouwen {confidencePct}%
              </span>
            </div>
            <div className="body">
              {aiLevel !== "subtle" && (
                <div className="ai-note" style={{marginBottom: 14}}>
                  <Icon name="ai" size={14} className="ai-icon"/>
                  <div>
                    <strong>Wat ik zeker weet:</strong> scope, deadlines, financiële eisen en certificeringen zijn eenduidig uit het bestek te halen.{" "}
                    <strong>Wat je nog zelf moet checken:</strong> de prestatiegarantie-clausule (zie flag 1) en de realiteit van de planning t.o.v. levertijden.
                  </div>
                </div>
              )}
              <p style={{margin:0, fontSize: 14, lineHeight: 1.65, color: "var(--ink-2)"}}>
                {aiLevel === "prominent" ? (
                  <>Middelgrote renovatie binnen{" "}
                    <AiChip tip="Gebaseerd op classificatie van 240+ eerdere Mous-projecten. Deze scope valt in categorie 'poldergemaal renovatie E&I+M'.">jullie kernexpertise</AiChip>.
                    Sterke match met referentieprojecten{" "}
                    <AiChip tip="Projectdossier WF-2023/WDS-011 · 94% overeenkomst op scope, 88% op klant-afspraken.">Woudsend (2023)</AiChip> en{" "}
                    <AiChip tip="Projectdossier WF-2021/KDM-007 · zelfde opdrachtgever, kleinere schaal, afgerond binnen budget.">Koudum (2021)</AiChip>.
                    Let op: prestatiegarantie van 99,2% is{" "}
                    <AiChip tip="Mediaan over jullie 42 beschikbaarheidscontracten 2019–2025 is 98,5%. Dit dossier ligt 0,7pp hoger.">scherper dan gebruikelijk</AiChip>{" "}
                    (gangbaar 98,5%). Leverancierskeuze pompen is niet voorgeschreven — ruimte voor{" "}
                    <AiChip tip="Op basis van Koudum-variantenstudie: Grundfos SEV-serie toont 6–9% betere TCO over 15 jaar t.o.v. voorgeschreven baseline.">optimalisatie</AiChip>.
                  </>
                ) : D.summary}
              </p>

              <hr className="divider" />

              <div style={{display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap: 14}}>
                {[
                  { l: "Contractwaarde", v: D.value, sub: "incl. 10j onderhoud" },
                  { l: "Looptijd", v: "14 wk", sub: "gunning → oplevering" },
                  { l: "Marge-inschatting", v: "11–14%", sub: "bij Grundfos-variant" },
                  { l: "Slagingskans", v: "82%", sub: "RAG-match · historie" },
                ].map((x,i)=>(
                  <div key={i}>
                    <div className="muted" style={{fontSize:11, marginBottom:4}}>{x.l}</div>
                    <div style={{fontFamily:"var(--font-serif)", fontSize: 20, fontWeight:500}} className="num">{x.v}</div>
                    <div className="muted" style={{fontSize:11,marginTop:2}}>{x.sub}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Risk flags */}
          <div className="card">
            <div className="hd row-split">
              <div className="hstack">
                <h3>Risicoflags</h3>
                <span className="sub">door AI aangebracht, door mens te bevestigen</span>
              </div>
              <div className="hstack" style={{gap:6}}>
                <span className="pill risk"><span className="dot"/>2 hoog</span>
                <span className="pill warn"><span className="dot"/>1 aandacht</span>
                <span className="pill ok"><span className="dot"/>1 kans</span>
              </div>
            </div>
            <div className="body p0">
              {D.flags.map((f, i) => (
                <div className={"flag " + f.sev} key={i}>
                  <div className="sev"/>
                  <div className="body">
                    <div className="title">
                      {f.title}
                      <span className="pill">{f.cat}</span>
                    </div>
                    <div className="desc">{f.desc}</div>
                    <div className="src">
                      <Icon name="file" size={11}/> bron: <span className="mono">{f.src}</span>
                    </div>
                    <div className="actions">
                      <button className={"btn sm " + (accepted[i] ? "accent" : "")}
                              onClick={()=>setAccepted({...accepted, [i]: !accepted[i]})}>
                        <Icon name="check" size={12}/> {accepted[i] ? "Bevestigd" : "Bevestig flag"}
                      </button>
                      <button className="btn sm ghost"><Icon name="x" size={12}/> Negeer</button>
                      <button className="btn sm ghost">Open bron</button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Scope + reference */}
          <div className="grid-2">
            <div className="card">
              <div className="hd"><h3>Scope</h3></div>
              <div className="body">
                <p className="ink2" style={{margin:0, fontSize: 13, lineHeight: 1.6}}>{D.scope}</p>
              </div>
            </div>
            <div className="card">
              <div className="hd row-split">
                <h3>Referentie­projecten</h3>
                <span className="sub">via RAG</span>
              </div>
              <div className="body" style={{padding:0}}>
                {D.references.map((r,i)=>(
                  <div key={i} style={{
                    padding: "12px 18px",
                    borderBottom: i < D.references.length-1 ? "1px solid var(--rule)" : "0",
                  }}>
                    <div className="row-split">
                      <div style={{fontWeight: 500, fontSize: 13}}>{r.title}</div>
                      <span className="mono" style={{fontSize: 11, color: "var(--accent)"}}>{r.match}% match</span>
                    </div>
                    <div className="muted" style={{fontSize: 12, marginTop: 3}}>{r.client} · {r.year}</div>
                    <div className="progress" style={{marginTop: 8}}><i style={{width: r.match + "%"}} /></div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* RIGHT column */}
        <div className="vstack" style={{gap: 20}}>
          <div className="card">
            <div className="hd row-split">
              <h3>Checklist</h3>
              <span className="mono muted" style={{fontSize: 11}}>5 / 7 voldaan</span>
            </div>
            <div className="body p0">
              <div className="checklist">
                {D.checklist.map((c,i)=>(
                  <div key={i} className={"chk " + (c.done ? "done" : c.miss ? "miss" : "")}>
                    <div className="box">
                      {c.done ? <Icon name="check" size={11} strokeWidth={2.4}/> : c.miss ? <Icon name="x" size={11} strokeWidth={2.4}/> : null}
                    </div>
                    <div className="txt">{c.txt}</div>
                    <div className="ref mono">{c.ref}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="card">
            <div className="hd"><h3>Kerngegevens</h3></div>
            <div className="body" style={{display:"grid",gap:10,fontSize:12.5}}>
              <div className="row-split"><span className="muted">Opdrachtgever</span><span>{D.client}</span></div>
              <div className="row-split"><span className="muted">Procedure</span><span>{D.procedure}</span></div>
              <div className="row-split"><span className="muted">Ontvangen</span><span>{D.received}</span></div>
              <div className="row-split"><span className="muted">Inleverdatum</span><span style={{color:"var(--risk)",fontWeight:500}}>{D.deadline}</span></div>
              <div className="row-split"><span className="muted">Geraamde waarde</span><span className="num">{D.value}</span></div>
              <div className="row-split"><span className="muted">Toegewezen aan</span>
                <span className="hstack" style={{gap:6}}>
                  <span style={{width:18,height:18,borderRadius:"50%",background:"var(--accent)",color:"white",display:"grid",placeItems:"center",fontSize:9,fontWeight:600}}>HM</span>
                  Hidde van der Meer
                </span>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="hd"><h3>Tijdlijn</h3></div>
            <div className="body" style={{padding: "4px 0"}}>
              {D.timeline.map((e,i)=>(
                <div key={i} style={{
                  display: "flex", gap: 12,
                  padding: "8px 18px",
                  position: "relative",
                }}>
                  <div style={{
                    width: 22, display: "flex", flexDirection: "column", alignItems: "center"
                  }}>
                    <div style={{width: 22, height: 22, borderRadius: "50%",
                      background: "var(--bg-inset)", border: "1px solid var(--rule)",
                      display: "grid", placeItems: "center", color: "var(--ink-3)"}}>
                      <Icon name={e.icon} size={11}/>
                    </div>
                    {i < D.timeline.length -1 && <div style={{flex:1, width:1, background:"var(--rule)", marginTop: 3, minHeight: 6}}/>}
                  </div>
                  <div style={{flex:1, paddingBottom: 4}}>
                    <div style={{fontSize: 12.5}}>{e.d}</div>
                    <div className="muted mono" style={{fontSize: 10.5, marginTop: 1}}>{e.t}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="hd row-split"><h3>Dossierbronnen</h3><span className="mono muted" style={{fontSize:11}}>18</span></div>
            <div className="body" style={{padding: "8px 0"}}>
              {[
                "PvE_hoofddocument.pdf",
                "contractvoorwaarden_WF.pdf",
                "bijl_01_technische_specs.pdf",
                "bijl_02_gunningscriteria.pdf",
                "bijl_03_certificeringen.pdf",
                "+ 13 meer",
              ].map((f,i) => (
                <div key={i} style={{
                  padding: "6px 18px",
                  fontSize: 12,
                  display: "flex", gap: 8, alignItems: "center",
                  color: i === 5 ? "var(--ink-3)" : "var(--ink-2)",
                  cursor: "pointer"
                }}>
                  {i < 5 && <Icon name="file" size={12} style={{color:"var(--ink-3)"}}/>}
                  <span className={i < 5 ? "mono" : ""} style={{fontSize: i < 5 ? 11.5 : 12}}>{f}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {decision && (
        <div style={{
          position: "fixed", bottom: 20, left: "calc(232px + 50%)", transform: "translateX(calc(-50% - 116px))",
          background: "var(--ink)", color: "var(--bg-card)",
          padding: "10px 16px", borderRadius: "var(--radius-lg)",
          fontSize: 12.5, display: "flex", gap: 10, alignItems: "center",
          boxShadow: "0 20px 40px -10px rgba(0,0,0,0.35)", zIndex: 50,
        }}>
          <Icon name={decision === "go" ? "check" : "x"} size={14}/>
          Beslissing opgeslagen: <strong>{decision === "go" ? "Go" : "No-go"}</strong>. Tender toegewezen aan Hidde.
          <button onClick={() => setDecision(null)}
                  style={{background:"transparent",border:0,color:"var(--ink-4)",marginLeft:8,cursor:"pointer"}}>
            <Icon name="x" size={12}/>
          </button>
        </div>
      )}
    </div>
  );
};

window.AiChip = function AiChip({ tip, children }) {
  const [show, setShow] = useState(false);
  const ref = useRef(null);
  return (
    <span className="ai-chip"
          ref={ref}
          onMouseEnter={() => setShow(true)}
          onMouseLeave={() => setShow(false)}>
      {children}
      {show && (
        <span className="tip" style={{
          left: "50%", transform: "translateX(-50%)",
          bottom: "calc(100% + 6px)",
        }}>
          <span className="label">AI · bron</span>
          {tip}
        </span>
      )}
    </span>
  );
};