// NotebookEnv.jsx — Research Notebook (split chat + workbench)
const { useState: useStateNb } = React;

function NotebookEnv({ onCite }) {
  const [draft, setDraft] = useStateNb("");
  const [artifact, setArtifact] = useStateNb({
    title: "Synthesis · EU AI Act vs internal AI policy v3",
    sections: [
      { h: "Scope alignment", body: "Internal policy v3 covers all generative systems deployed in production. The AI Act extends to procured systems and certain demos — broaden §2 of internal policy to mirror Annex III." },
      { h: "Risk classification", body: "Internal credit-scoring use cases align with Art. 6(2) high-risk. Two un-classified use cases identified in pod-research-de require legal review." },
      { h: "Open gaps", body: "Fundamental-rights impact assessment workflow not yet implemented. Recommend wiring as a Vertical App." },
    ],
  });

  function refine() {
    const time = new Date().toTimeString().slice(0, 8);
    setArtifact(a => ({
      ...a,
      title: a.title + " · refined " + time,
      sections: [...a.sections, { h: "Refinement note", body: "Cross-checked against pod-legal-eu chunk #4129. No contradiction detected." }],
    }));
    setDraft("");
  }

  return (
    <div className="ask-nb">
      <aside className="ask-nb__chat">
        <div className="ask-nb__chat-scroll">
          <Message role="user" time="14:24:01">Compare our internal AI policy v3 against the EU AI Act and produce a synthesis on the workbench.</Message>
          <Message
            role="assistant"
            time="14:24:08"
            sources={[
              { n: 1, title: "Internal AI Policy v3" },
              { n: 2, title: "Reg. 2024/1689" },
            ]}
            onCite={onCite}
          >
            Synthesis pinned to the workbench. Three sections produced. Continue refining on the right pane.
          </Message>
          <Message role="user" time="14:26:14">Add a section on open gaps and recommended Vertical Apps.</Message>
          <Message role="assistant" time="14:26:18" sources={[{ n: 3, title: "Internal vertical-app catalog" }]} onCite={onCite}>
            Open-gaps section added. Vertical App recommendation appended.
          </Message>
        </div>
        <Composer value={draft} onChange={setDraft} onSend={refine} podName="pod-legal-eu" placeholder="Refine the artifact on the right…"/>
      </aside>
      <main className="ask-nb__work">
        <div className="ask-nb__work-head">
          <div>
            <div className="eyebrow">Workbench · pinned artifact</div>
            <h3 className="ask-nb__work-title">{artifact.title}</h3>
          </div>
          <div className="ask-nb__work-actions">
            <button className="btn btn-ghost btn-sm">Export</button>
            <button className="btn btn-secondary btn-sm">Save to Pod</button>
          </div>
        </div>
        <div className="ask-nb__work-body">
          {artifact.sections.map((s, i) => (
            <section key={i} className="ask-nb__section">
              <h4>{s.h}</h4>
              <p>{s.body}</p>
            </section>
          ))}
        </div>
      </main>
    </div>
  );
}

window.NotebookEnv = NotebookEnv;