/* Kennisbank chat screen */

window.KennisScreen = function KennisScreen() {
  const D = window.MOUS_DATA.chat;
  const [msgs, setMsgs] = useState(D.conversation);
  const [input, setInput] = useState("");
  const [thinking, setThinking] = useState(false);
  const streamRef = useRef(null);

  useEffect(() => {
    if (streamRef.current) streamRef.current.scrollTop = streamRef.current.scrollHeight;
  }, [msgs, thinking]);

  const send = (text) => {
    const t = (text || input).trim();
    if (!t) return;
    setMsgs(m => [...m, { who: "user", text: t }]);
    setInput("");
    setThinking(true);
    setTimeout(() => {
      setThinking(false);
      setMsgs(m => [...m, {
        who: "ai",
        text: "Ik heb 14 relevante documenten doorzocht in het Mous-archief en 3 gerelateerde projectdossiers gevonden[1]. Op basis daarvan: het meest vergelijkbare traject is Sloten (2024), waar een vergelijkbare schaal en scope speelde. Belangrijke les daaruit: de onderaanneming civiel tijdig vastleggen voorkwam 4 weken vertraging[2]. Wil je dat ik een korte vergelijking maak tussen drie opties?",
        cites: [
          { n: 1, title: "Doorzocht: projectenarchief 2019–2025", meta: "RAG-index · 1.847 dossiers" },
          { n: 2, title: "Projectdossier Sloten 2024 — lessons learned", meta: "Mous-archief · 2024/SLT-019 · p. 12" },
        ],
      }]);
    }, 900);
  };

  return (
    <div className="content">
      <div style={{marginBottom: 16}}>
        <div className="eyebrow" style={{marginBottom:6}}>Use case 3 · Kennisbank</div>
        <h1>Vraag het de collectie Mous-kennis.</h1>
        <div className="muted" style={{marginTop: 6, fontSize: 13.5, maxWidth: 700}}>
          42 jaar ervaring, doorzoekbaar. Elk antwoord verwijst naar het originele document. Respecteert rechten en rollen uit jullie AD.
        </div>
      </div>

      <div className="chat-wrap">
        <div className="chat">
          <div className="stream" ref={streamRef}>
            <div className="ai-note" style={{marginBottom: 20}}>
              <Icon name="ai" size={14} className="ai-icon"/>
              <div>{D.welcome}</div>
            </div>
            {msgs.map((m, i) => (
              <div key={i} className={"msg " + m.who}>
                <div className="who">
                  {m.who === "user" ? "Jij · 09:47" : <><Icon name="ai" size={11}/> Mous-AI · gevonden in 1,4s</>}
                </div>
                <div className="bubble">
                  {renderTextWithCites(m.text)}
                  {m.cites && (
                    <div className="cites">
                      {m.cites.map((c, j) => (
                        <div className="cite" key={j}>
                          <div className="n mono">#{c.n}</div>
                          <div style={{flex:1, minWidth: 0}}>
                            <div style={{fontWeight:500}}>{c.title}</div>
                            <div className="meta">{c.meta}</div>
                          </div>
                          <button className="btn sm ghost"><Icon name="link" size={12}/></button>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            ))}
            {thinking && (
              <div className="msg ai">
                <div className="who"><Icon name="ai" size={11}/> Mous-AI · zoekt…</div>
                <div className="bubble" style={{display:"flex",gap:6}}>
                  {[0,1,2].map(i=>(
                    <div key={i} style={{
                      width: 6, height: 6, borderRadius: "50%",
                      background: "var(--ink-3)",
                      animation: `bounce 1.2s ease-in-out ${i*0.15}s infinite`
                    }}/>
                  ))}
                </div>
              </div>
            )}
          </div>

          {msgs.length <= 2 && (
            <div className="suggestions" style={{borderTop:"1px solid var(--rule)",paddingTop:12}}>
              {D.starters.slice(0,3).map((s,i)=>(
                <div key={i} className="suggestion" onClick={()=>send(s)}>{s}</div>
              ))}
            </div>
          )}

          <div className="composer">
            <textarea
              value={input}
              onChange={e=>setInput(e.target.value)}
              onKeyDown={e=>{ if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } }}
              placeholder="Stel je vraag over projecten, leveranciers, procedures…"/>
            <button className="btn accent" onClick={()=>send()}><Icon name="send" size={13}/> Stuur</button>
          </div>
        </div>

        <div className="vstack" style={{gap: 16}}>
          <div className="card">
            <div className="hd"><h3>Bronnen</h3></div>
            <div className="body vstack" style={{gap:10, fontSize: 12.5}}>
              {[
                {t:"SharePoint projectdossiers",n:"1.847 mappen",ok:true},
                {t:"Engineering-notities",n:"12.400 docs",ok:true},
                {t:"Mail-archief",n:"8.1k threads",ok:true},
                {t:"Mous Academy",n:"186 modules",ok:true},
                {t:"Leveranciersportalen",n:"12 bronnen",ok:true},
              ].map((b,i)=>(
                <div key={i} style={{display:"flex",gap:8,alignItems:"center"}}>
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{b.t}</div>
                    <div className="muted mono" style={{fontSize:11}}>{b.n}</div>
                  </div>
                  <span className="pill ok" style={{flexShrink:0}}><span className="dot"/>ok</span>
                </div>
              ))}
              <hr className="divider"/>
              <div className="muted" style={{fontSize:11.5}}>
                Laatste ingest: vandaag 04:30 · EU-cloud (Frankfurt)
              </div>
            </div>
          </div>

          <div className="card">
            <div className="hd"><h3>Rechten & rollen</h3></div>
            <div className="body" style={{fontSize:12.5}}>
              <p className="ink2" style={{margin:"0 0 10px 0"}}>
                Antwoorden respecteren de toegangsrechten van je AD-account. Vertrouwelijke projectinformatie verschijnt alleen voor bevoegde rollen.
              </p>
              <div className="row-split"><span className="muted">Jouw rol</span><span>Projectmanager</span></div>
              <div className="row-split" style={{marginTop:4}}><span className="muted">Toegang</span><span className="num">1.612 / 1.847 dossiers</span></div>
            </div>
          </div>

          <div className="card">
            <div className="hd"><h3>Vaak gevraagd</h3></div>
            <div className="body" style={{padding: 0}}>
              {[
                "Standaard onderaannemers per regio",
                "Garantievoorwaarden pompen 2020–2025",
                "Hoe onderbouwen we CO₂-prestatieladder niv. 3?",
              ].map((q,i)=>(
                <div key={i} onClick={()=>send(q)} style={{
                  padding: "10px 16px", fontSize: 12.5,
                  borderBottom: i < 2 ? "1px solid var(--rule)" : "0",
                  cursor: "pointer", color: "var(--ink-2)"
                }}>{q}</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>
  );
};

function renderTextWithCites(text) {
  // Replace [1], [2] etc. with superscript pill
  const parts = text.split(/(\[\d+\])/g);
  return parts.map((p, i) => {
    const m = p.match(/^\[(\d+)\]$/);
    if (m) return <sup key={i}><span className="cite-ref">{m[1]}</span></sup>;
    return <React.Fragment key={i}>{p}</React.Fragment>;
  });
}