/* Offerte-assistent screen */

window.OfferteScreen = function OfferteScreen({ aiLevel }) {
  const [step, setStep] = useState("intake"); // intake | draft
  const [generating, setGenerating] = useState(false);
  const D = window.MOUS_DATA;

  const generate = () => {
    setGenerating(true);
    setTimeout(() => { setGenerating(false); setStep("draft"); }, 900);
  };

  return (
    <div className="content">
      <div style={{marginBottom: 18}}>
        <div className="eyebrow" style={{marginBottom:6}}>Use case 2 · Offerte-assistent</div>
        <h1>Van aanvraag naar concept-offerte.</h1>
        <div className="muted" style={{marginTop: 6, fontSize: 13.5, maxWidth: 700}}>
          Inkomende mail + PvE komen binnen. AI zoekt vergelijkbare projecten in het Mous-archief, stelt een concept op in jullie toon en verwijst naar elk stuk brontekst. De PM reviewt en verstuurt.
        </div>
      </div>

      <div style={{display:"grid", gridTemplateColumns: "340px 1fr 300px", gap: 18}}>
        {/* LEFT: inbox email */}
        <div className="vstack" style={{gap: 16}}>
          <div className="card">
            <div className="hd"><h3>Inkomende aanvraag</h3></div>
            <div className="body" style={{padding: 0}}>
              <div style={{padding: "14px 16px", borderBottom: "1px solid var(--rule)"}}>
                <div className="hstack" style={{gap:8, marginBottom:8}}>
                  <div style={{width:28,height:28,borderRadius:"50%",background:"#c9cfc5",color:"var(--ink)",display:"grid",placeItems:"center",fontSize:10,fontWeight:600}}>GL</div>
                  <div>
                    <div style={{fontSize:12.5,fontWeight:500}}>Gemeente Leeuwarden</div>
                    <div className="muted mono" style={{fontSize:10.5}}>j.postma@leeuwarden.nl · 09:42</div>
                  </div>
                </div>
                <div style={{fontSize:12.5,fontWeight:500,marginBottom:4}}>Aanvraag offerte — onderhoud rioolgemaal Vliet</div>
                <div className="muted" style={{fontSize:12,lineHeight:1.5}}>
                  Geachte heer / mevrouw,<br/><br/>
                  Naar aanleiding van ons eerdere contract verzoeken wij u een offerte uit te brengen voor het meerjarig onderhoud van rioolgemaal Vliet. Bijgevoegd het PvE met specificaties, draaiuren en storingshistorie. Reactie graag vóór 8 mei.<br/><br/>
                  Met vriendelijke groet,<br/>
                  Jelle Postma
                </div>
              </div>
              <div style={{padding: "10px 16px",display:"flex",gap:8,flexWrap:"wrap"}}>
                <span className="pill"><Icon name="attachment" size={10}/> PvE_Vliet_2026.pdf · 34 p</span>
                <span className="pill"><Icon name="attachment" size={10}/> Storingsdata_2023-2025.xlsx</span>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="hd row-split">
              <h3>AI-classificatie</h3>
              <span className="pill ai"><Icon name="ai" size={10}/> auto</span>
            </div>
            <div className="body" style={{display:"grid",gap:10,fontSize:12.5}}>
              <div className="row-split"><span className="muted">Type</span><span>Meerjarig onderhoud</span></div>
              <div className="row-split"><span className="muted">Categorie</span><span>Rioolgemaal</span></div>
              <div className="row-split"><span className="muted">Bekende klant</span><span>Ja · 8 eerdere projecten</span></div>
              <div className="row-split"><span className="muted">Geraamde waarde</span><span className="num">€ 180–240k / jr</span></div>
              <div className="row-split"><span className="muted">Urgentie</span><span style={{color:"var(--warn)"}}>Middel · 16 dagen</span></div>
            </div>
          </div>

          {step === "intake" && (
            <div className="card">
              <div className="hd"><h3>Voorgestelde bronnen</h3></div>
              <div className="body" style={{padding:8}}>
                <div className="srclist">
                  {D.ragSources.map((s,i)=>(
                    <div className="src-item" key={i}>
                      <div className="title">{s.title}</div>
                      <div className="meta">{s.kind} · {s.date}</div>
                      <div className="score">
                        <div className="bar"><i style={{width: (s.score*100)+"%"}}/></div>
                        <span>{Math.round(s.score*100)}%</span>
                      </div>
                    </div>
                  ))}
                </div>
                <button className="btn accent" style={{width:"100%",justifyContent:"center",marginTop:10}} onClick={generate} disabled={generating}>
                  {generating ? (<><Icon name="ai" size={14}/> Concept genereren…</>) : (<><Icon name="ai" size={14}/> Genereer concept-offerte</>)}
                </button>
              </div>
            </div>
          )}
        </div>

        {/* MIDDLE: draft document */}
        <div className="doc-surface">
          {step === "intake" && !generating && (
            <div style={{
              display: "grid", placeItems: "center", height: 600, textAlign: "center", color: "var(--ink-3)"
            }}>
              <div>
                <Icon name="docs" size={32} style={{color: "var(--ink-4)", marginBottom: 12}}/>
                <div style={{fontSize:14}}>Concept verschijnt hier zodra AI gegenereerd heeft.</div>
                <div className="muted" style={{fontSize:12,marginTop:4}}>Geschatte tijd: 12 seconden, incl. 3 RAG-bronnen.</div>
              </div>
            </div>
          )}
          {generating && (
            <div style={{display: "grid", placeItems: "center", height: 600}}>
              <div style={{textAlign:"center"}}>
                <div style={{fontSize:14,marginBottom:10}}>AI schrijft concept…</div>
                <div style={{display:"flex",gap:6,justifyContent:"center"}}>
                  {[0,1,2].map(i=>(
                    <div key={i} style={{
                      width: 6, height: 6, borderRadius: "50%",
                      background: "var(--accent)",
                      animation: `bounce 1.2s ease-in-out ${i*0.15}s infinite`
                    }}/>
                  ))}
                </div>
                <div className="muted mono" style={{fontSize:11,marginTop:12}}>RAG: 5 bronnen · 1.847 chunks doorzocht</div>
              </div>
            </div>
          )}
          {step === "draft" && (
            <>
              <div style={{fontSize:11,letterSpacing:"0.12em",textTransform:"uppercase",color:"var(--ink-3)",marginBottom:14,display:"flex",justifyContent:"space-between"}}>
                <span>CONCEPT · Ref. OFF-2026/0284</span>
                <span>22 april 2026</span>
              </div>
              <h4>Offerte onderhoudscontract rioolgemaal Vliet</h4>
              <div className="muted" style={{fontSize:12.5,marginBottom:20}}>
                t.a.v. Jelle Postma, Gemeente Leeuwarden
              </div>

              <h5>1 · Inleiding</h5>
              <p style={{margin:0}}>
                Naar aanleiding van uw aanvraag d.d. 22 april 2026 doen wij u graag deze offerte toekomen voor het{" "}
                <AiChip tip="Standaardtekst §3.2 onderhoudscontracten. Laatst herzien v2024.2.">meerjarig preventief en correctief onderhoud</AiChip>{" "}
                van rioolgemaal Vliet, conform bijgevoegd PvE. Wij hebben hierbij teruggekeken naar onze eerdere samenwerking, waaronder het{" "}
                <AiChip tip="Mous-archief · 2021/LWD-033 · contract 2021–2025, hernieuwing oktober 2025.">raamcontract 2021–2025</AiChip>{" "}
                en de onderhoudshistorie die daaruit volgt.
              </p>

              <h5>2 · Scope</h5>
              <p style={{margin:0}}>
                Het onderhoud omvat de{" "}
                <AiChip tip="Overgenomen uit PvE §2.1. Draaiuren 2023–2025: 14.200u. Storingen: 11 (waarvan 3 niet-kritisch).">drie hoofdpompen, bijbehorende frequentieregelaars, PLC-besturing en telemetrie-aansluiting</AiChip>. Wij nemen de 24/7 storingsdienst voor onze rekening met een responstijd van{" "}
                <AiChip tip="Standaardtekst. In 97% van jullie contracten 2020–2025 wordt ≤2u gebruikt. PvE-eis is ≤4u — wij bieden scherpere norm aan.">2 uur binnen kantoortijd en 4 uur daarbuiten</AiChip>.
              </p>

              <h5>3 · Investering</h5>
              <div style={{
                background: "var(--bg-inset)", border: "1px solid var(--rule)",
                borderRadius: "var(--radius)", padding: "14px 16px", margin: "8px 0"
              }}>
                <div style={{display:"grid",gridTemplateColumns:"1fr auto",gap:8,fontSize:13}}>
                  <div>Preventief onderhoud (4×/jr, incl. materialen)</div><div className="num" style={{textAlign:"right"}}>€ 28.400 / jr</div>
                  <div>Correctief onderhoud (staffel, op basis storingshistorie)</div><div className="num" style={{textAlign:"right"}}>€ 42.000 / jr</div>
                  <div>Telemetrie-abonnement & monitoring</div><div className="num" style={{textAlign:"right"}}>€ 6.800 / jr</div>
                  <div>24/7 storingsdienst</div><div className="num" style={{textAlign:"right"}}>€ 11.200 / jr</div>
                  <div style={{borderTop:"1px solid var(--rule)",paddingTop:6,marginTop:2,fontWeight:600}}>Totaal per jaar</div>
                  <div className="num" style={{textAlign:"right",borderTop:"1px solid var(--rule)",paddingTop:6,marginTop:2,fontWeight:600}}>€ 88.400</div>
                </div>
                <div className="muted" style={{fontSize:11,marginTop:8}}>
                  <AiChip tip="Gebaseerd op 8 vergelijkbare contracten (2022–2025). Gemiddelde afwijking 4,7%.">Indicatie binnen gangbare bandbreedte voor deze gemaalcategorie</AiChip>.
                </div>
              </div>

              <h5>4 · Referenties</h5>
              <p style={{margin:0,fontSize:12.5}}>
                Soortgelijk onderhoud voeren wij uit voor onder meer Wetterskip Fryslân (12 gemalen), Gemeente De Fryske Marren (raamcontract sinds 2019), en Gemeente Harlingen.
              </p>
            </>
          )}
        </div>

        {/* RIGHT: used sources + actions */}
        <div className="vstack" style={{gap: 16}}>
          {step === "draft" && (
            <>
              <div className="card">
                <div className="hd"><h3>Gebruikte bronnen</h3></div>
                <div className="body" style={{padding:8}}>
                  <div className="srclist">
                    {D.ragSources.slice(0,4).map((s,i)=>(
                      <div className="src-item" key={i}>
                        <div className="hstack" style={{gap:6,marginBottom:2}}>
                          <span style={{fontFamily:"var(--font-mono)",fontSize:10.5,color:"var(--ai)",background:"var(--ai-soft)",padding:"1px 5px",borderRadius:3}}>#{i+1}</span>
                          <div className="title" style={{fontSize:12.5}}>{s.title}</div>
                        </div>
                        <div className="meta">{s.kind} · {s.date}</div>
                        <div className="score">
                          <div className="bar"><i style={{width: (s.score*100)+"%"}}/></div>
                          <span>{Math.round(s.score*100)}%</span>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              <div className="card">
                <div className="hd"><h3>Acties</h3></div>
                <div className="body vstack" style={{gap:8}}>
                  <button className="btn" style={{justifyContent:"flex-start"}}><Icon name="ai" size={13}/> Herschrijf formeler</button>
                  <button className="btn" style={{justifyContent:"flex-start"}}><Icon name="ai" size={13}/> Voeg voorbehoud toe</button>
                  <button className="btn" style={{justifyContent:"flex-start"}}><Icon name="trend" size={13}/> Herbereken met 5% marge</button>
                  <hr className="divider"/>
                  <button className="btn"><Icon name="upload" size={13}/> Open in EasyInvoice</button>
                  <button className="btn accent" style={{justifyContent:"center"}}><Icon name="send" size={13}/> Verstuur naar PM voor review</button>
                </div>
              </div>

              <div className="card">
                <div className="hd"><h3>Tijdsbesparing</h3></div>
                <div className="body">
                  <div style={{display:"flex",alignItems:"baseline",gap:6}}>
                    <div style={{fontFamily:"var(--font-serif)",fontSize:34,fontWeight:500,lineHeight:1}} className="num">3,2 <span style={{fontSize:16,color:"var(--ink-3)"}}>uur</span></div>
                  </div>
                  <div className="muted" style={{fontSize:12,marginTop:4}}>
                    ≈ wat jullie normaal kwijt waren aan dit type concept.
                  </div>
                </div>
              </div>
            </>
          )}

          {step === "intake" && (
            <div className="card">
              <div className="hd"><h3>Werkstroom</h3></div>
              <div className="body vstack" style={{gap: 14, fontSize: 12.5}}>
                {[
                  {n:1,t:"Aanvraag binnengekomen", s:"09:42", active:true},
                  {n:2,t:"AI-classificatie", s:"voltooid", active:true},
                  {n:3,t:"RAG-match", s:"5 bronnen", active:true},
                  {n:4,t:"Concept genereren", s:"klaar om te starten", active:false},
                  {n:5,t:"PM-review", s:"wacht", active:false},
                  {n:6,t:"EasyInvoice-koppeling", s:"wacht", active:false},
                ].map(s=>(
                  <div key={s.n} className="hstack" style={{gap:10}}>
                    <div style={{
                      width: 22, height: 22, borderRadius: "50%", flexShrink: 0,
                      background: s.active ? "var(--accent)" : "var(--bg-inset)",
                      color: s.active ? "white" : "var(--ink-3)",
                      border: "1px solid " + (s.active ? "var(--accent)" : "var(--rule)"),
                      display:"grid", placeItems:"center", fontSize: 10.5, fontWeight: 600
                    }} className="num">{s.active ? "✓" : s.n}</div>
                    <div>
                      <div style={{fontWeight:500}}>{s.t}</div>
                      <div className="muted" style={{fontSize:11.5}}>{s.s}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>

      <style>{`
        @keyframes bounce {
          0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
          40% { transform: scale(1); opacity: 1; }
        }
      `}</style>
    </div>
  );
};