import React from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" function FrameworkCoach({ c, database, useLiveQuery, crisis }) { const [framework, setFramework] = React.useState("Rational Actor") const [judgment, setJudgment] = React.useState("") const [loading, setLoading] = React.useState(false) const { docs: critiques } = useLiveQuery("type", { key: "critique", descending: true, limit: 10 }) async function submitCritique() { if (!judgment.trim() || !crisis) return setLoading(true) try { const r = await callAI(`Crisis: ${crisis.name} (${crisis.context}). Student applied the ${framework} model with this judgment: "${judgment}". Return JSON: fitScore (1-10), strengths, overlookedFactors, counterModel (one of the other two: Rational Actor, Bureaucratic Politics, Groupthink), counterArgument.`, { schema: { properties: { fitScore: { type: "number" }, strengths: { type: "string" }, overlookedFactors: { type: "string" }, counterModel: { type: "string" }, counterArgument: { type: "string" } } } }) const critique = JSON.parse(r) await database.put({ type: "critique", crisisName: crisis.name, framework, judgment, ...critique, createdAt: Date.now(), authorSlug: "visitor", authorName: "visitor", authorAvatar: "" }) setJudgment("") } finally { setLoading(false) } } return (

<> {!crisis &&

Select a crisis to engage the coach.

}

{["Rational Actor", "Bureaucratic Politics", "Groupthink"].map(f => ( ))}

setJudgment(e.target.value)} />
        <button onClick={submitCritique} disabled={loading || !crisis || !judgment.trim()} className={`${c.btn} mt-2`}>
          {loading ? <svg className="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10" strokeDasharray="40" /></svg> : "Submit for Critique"}
        </button>
      </>
      <ul className="mt-4 space-y-3">
        {critiques.map(cv => (
          <li key={cv._id} className={c.card}>
            <div className="flex items-center gap-2 mb-2">
              {cv.authorAvatar && <img src={cv.authorAvatar} alt="" className="w-5 h-5 rounded-full" />}
              <span className="text-[10px] uppercase tracking-widest text-[#8b9bb8]">{cv.authorName} · {cv.framework} · fit {cv.fitScore}/10</span>
            </div>
            <div className="text-xs italic text-[#8b9bb8] mb-2">"{cv.judgment}"</div>
            <div className={c.label}>Strengths</div>
            <p className="text-xs mb-1">{cv.strengths}</p>
            <div className={c.label}>Overlooked</div>
            <p className="text-xs mb-1">{cv.overlookedFactors}</p>
            <div className={c.label}>Counter ({cv.counterModel})</div>
            <p className="text-xs">{cv.counterArgument}</p>
          </li>
        ))}
      </ul>
    </div>
  )
}

function DecisionNodes({ crisisId, crisis, c, database, useLiveQuery }) {
  const { docs: nodes } = useLiveQuery("crisisId", { key: crisisId })
  const [generating, setGenerating] = React.useState(false)

async function generateNodes() {
    if (!crisis) return
    setGenerating(true)
    try {
      const r = await callAI(`For the foreign policy crisis "${crisis.name}" (${crisis.context}), generate 3 key decision nodes. Each should have: title, advisors (positions taken), intelVsAssumed, domesticPressure, rejectedAlternatives.`, {
        schema: { properties: { nodes: { type: "array", items: { type: "object", properties: {
          title: { type: "string" }, advisors: { type: "string" }, intelVsAssumed: { type: "string" }, domesticPressure: { type: "string" }, rejectedAlternatives: { type: "string" }
        }}}}}
      })
      const { nodes: gen } = JSON.parse(r)
      for (const n of gen) await database.put({ type: "node", crisisId, ...n, createdAt: Date.now() })
    } finally { setGenerating(false) }
  }

return (
    <div>
      <div className="mb-3 flex items-center justify-between">
        <span className="text-xs text-[#8b9bb8] uppercase tracking-wider">{crisis?.name}</span>
        <button onClick={generateNodes} disabled={generating} className={c.btnGhost}>
          {generating ? <svg className="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10" strokeDasharray="40" /></svg> : "Generate Nodes"}
        </button>
      </div>
      {nodes.length === 0 && <p className="text-xs text-[#8b9bb8]">No decision nodes yet.</p>}
      <ul className="space-y-3">
        {nodes.map(n => (
          <li key={n._id} className={c.card}>
            <div className="font-bold text-sm uppercase tracking-wider mb-2">{n.title}</div>
            <div className={c.label}>Advisors</div>
            <p className="text-xs mb-2">{n.advisors}</p>
            <div className={c.label}>Intel vs Assumed</div>
            <p className="text-xs mb-2">{n.intelVsAssumed}</p>
            <div className={c.label}>Domestic Pressure</div>
            <p className="text-xs mb-2">{n.domesticPressure}</p>
            <div className={c.label}>Rejected Alternatives</div>
            <p className="text-xs">{n.rejectedAlternatives}</p>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default function App() {
  const { database, useLiveQuery, useDocument } = useFireproof("cabinet-room")
  const { docs: crises } = useLiveQuery("type", { key: "crisis", descending: true })
  const { doc: newCrisis, merge: mergeCrisis, submit: submitCrisis } = useDocument({ type: "crisis", name: "", context: "", createdAt: Date.now() })
  const [selectedCrisisId, setSelectedCrisisId] = React.useState(null)
  const [suggesting, setSuggesting] = React.useState(false)

async function suggestCrisis() {
    setSuggesting(true)
    try {
      const r = await callAI("Suggest one historically significant foreign policy crisis as a case study. Return JSON with name and context fields.", {
        schema: { properties: { name: { type: "string" }, context: { type: "string" } } }
      })
      const { name, context } = JSON.parse(r)
      mergeCrisis({ name, context })
    } finally { setSuggesting(false) }
  }

const c = {
    page: "min-h-screen bg-[#28282b] text-[#fafafa] font-mono",
    header: "border-b border-[#3a4a6b] bg-black px-4 py-5 sticky top-0 z-10",
    title: "text-2xl tracking-widest uppercase font-black",
    tagline: "text-xs text-[#8b9bb8] mt-1 tracking-wider",
    main: "max-w-3xl mx-auto px-4 py-6 space-y-6",
    section: "border border-[#3a4a6b] bg-black p-4 rounded-sm",
    h2: "text-sm uppercase tracking-[0.2em] text-[#8b9bb8] mb-3 border-b border-[#3a4a6b] pb-2",
    btn: "min-h-[44px] px-4 py-3 bg-[#3a4a6b] hover:bg-[#4a5a7b] text-white uppercase text-xs tracking-widest rounded-sm disabled:opacity-50",
    btnGhost: "min-h-[44px] px-4 py-3 border border-[#3a4a6b] hover:bg-[#1a1a1d] text-[#fafafa] uppercase text-xs tracking-widest rounded-sm",
    input: "w-full bg-[#1a1a1d] border border-[#3a4a6b] px-3 py-3 text-[#fafafa] rounded-sm focus:outline-none focus:border-[#8b9bb8]",
    card: "border border-[#3a4a6b] bg-[#1a1a1d] p-3 rounded-sm",
    label: "text-[10px] uppercase tracking-widest text-[#8b9bb8]",
    viewer: "flex items-center gap-2 text-xs text-[#8b9bb8]",
  }

return (
    <div className={c.page}>
      <header id="app-header" className={c.header}>
        <div className="flex items-center justify-between gap-4">
          <div>
            <h1 className={c.title}>Cabinet Room</h1>
            <p className={c.tagline}>Foreign Policy Decision Dossier // Case Study Console</p>
          </div>
        </div>
      </header>
      <main id="app" className={c.main}>
        <section id="crisis-library" className={c.section}>
          <h2 className={c.h2}>Crisis Dossiers</h2>
          {crises.length === 0 && <p className="text-xs text-[#8b9bb8] mb-3">No crises archived yet.</p>}
          <ul className="space-y-2 mb-4">
            {crises.map(cr => (
              <li key={cr._id} onClick={() => setSelectedCrisisId(cr._id)} className={`${c.card} cursor-pointer ${selectedCrisisId === cr._id ? "border-[#8b9bb8]" : ""}`}>
                <div className="font-bold uppercase tracking-wider text-sm">{cr.name}</div>
                <div className="text-xs text-[#8b9bb8] mt-1">{cr.context}</div>
              </li>
            ))}
          </ul>
          <form onSubmit={submitCrisis} className="space-y-2">
            <input className={c.input} placeholder="Crisis name" value={newCrisis.name} onChange={e => mergeCrisis({ name: e.target.value })} />
            <input className={c.input} placeholder="Date / context" value={newCrisis.context} onChange={e => mergeCrisis({ context: e.target.value })} />
            <div className="flex gap-2">
              <button type="submit" className={c.btn} disabled={!newCrisis.name}>Add Crisis</button>
              <button type="button" onClick={suggestCrisis} disabled={suggesting} className={c.btnGhost}>
                {suggesting ? <svg className="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10" strokeDasharray="40" /></svg> : "Suggest"}
              </button>
            </div>
          </form>
        </section>
        <section id="decision-nodes" className={c.section}>
          <h2 className={c.h2}>Decision Nodes</h2>
          {!selectedCrisisId && <p className="text-xs text-[#8b9bb8] mb-3">Select a crisis above to load its decision points.</p>}
          {selectedCrisisId && <DecisionNodes crisisId={selectedCrisisId} crisis={crises.find(cr => cr._id === selectedCrisisId)} c={c} database={database} useLiveQuery={useLiveQuery} />}
        </section>
        <section id="framework-coach" className={c.section}>
          <h2 className={c.h2}>Analytical Coach</h2>
          <FrameworkCoach c={c} database={database} useLiveQuery={useLiveQuery} crisis={crises.find(cr => cr._id === selectedCrisisId)} />
        </section>
      </main>
    </div>
  )
}</article></body></html>