import React from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" const CONFLICTS = [ { id: "korea", name: "Korea", years: "1950–53", region: "East Asia" }, { id: "vietnam", name: "Vietnam", years: "1955–75", region: "Southeast Asia" }, { id: "congo", name: "Congo Crisis", years: "1960–65", region: "Central Africa" }, { id: "angola", name: "Angola", years: "1975–02", region: "Southern Africa" }, { id: "nicaragua", name: "Nicaragua", years: "1979–90", region: "Central America" }, { id: "afghanistan", name: "Afghanistan", years: "1979–89", region: "Central Asia" }, ] function Annotations({ selectedId, useDocument, useLiveQuery, database, c }) { const { doc, merge, submit } = useDocument({ type: "note", conflictId: selectedId, text: "", createdAt: Date.now() }) const { docs: notes } = useLiveQuery("conflictId", { key: selectedId, descending: true }) function onSubmit(e) { e.preventDefault() if (!doc.text.trim() || !selectedId) return merge({ conflictId: selectedId, createdAt: Date.now() }) submit() } return (

Class Notes {selectedId ? `· ${selectedId}` : ""}

{!selectedId ? (

Pick a conflict to add notes.

) : ( <>

merge({ text: e.target.value })}
              placeholder="Add a question or observation..."
              className={c.input}
              rows="2"
            />
            <button type="submit" className={c.btn}>Post Note</button>
          </form>
          <ul className="space-y-2">
            {notes.filter((n) => n.type === "note").length === 0 ? (
              <li className="border-[3px] border-[#1a1a2e] rounded p-2 bg-[#f5f1e8] text-sm italic text-[#5a5a6e]">No notes yet.</li>
            ) : notes.filter((n) => n.type === "note").map((n) => (
              <li key={n._id} className="border-[3px] border-[#1a1a2e] rounded p-2 bg-[#f5f1e8] text-sm flex justify-between gap-2">
                <span>{n.text}</span>
                <button onClick={() => database.del(n._id)} className="text-[0.6rem] uppercase font-bold text-[#e63946]">Del</button>
              </li>
            ))}
          </ul>
        </>
      )}
    </section>
  )
}

function ConflictDetail({ selectedId, selectedDoc, database, c }) {
  const [lens, setLens] = React.useState("us")
  const [isLoading, setIsLoading] = React.useState(false)
  const conflict = CONFLICTS.find((x) => x.id === selectedId)

async function generate() {
    if (!conflict) return
    setIsLoading(true)
    try {
      const prompt = `Analyze the Cold War proxy conflict in ${conflict.name} (${conflict.years}). Provide structured data from three vantage points.`
      const res = await callAI(prompt, {
        schema: {
          properties: {
            summary: { type: "string", description: "2-sentence overview" },
            us: {
              type: "object",
              properties: {
                aid: { type: "string", description: "US military/economic aid with dollar figures" },
                covert: { type: "string", description: "Key CIA/covert ops" },
                diplomacy: { type: "string", description: "Diplomatic moves" },
                cost: { type: "string", description: "US lives lost, dollars spent" },
              },
            },
            soviet: {
              type: "object",
              properties: {
                aid: { type: "string" },
                covert: { type: "string" },
                diplomacy: { type: "string" },
                cost: { type: "string" },
              },
            },
            local: {
              type: "object",
              properties: {
                actors: { type: "string", description: "Local factions and their own agendas" },
                aid: { type: "string", description: "What they received and gave up" },
                cost: { type: "string", description: "Civilian deaths, displacement, infrastructure" },
                legacy: { type: "string", description: "Long-term consequences" },
              },
            },
          },
        },
      })
      const data = JSON.parse(res)
      await database.put({ type: "conflict", conflictId: conflict.id, name: conflict.name, ...data })
    } finally {
      setIsLoading(false)
    }
  }

if (!conflict) {
    return (
      <section id="conflict-detail" className={c.section}>
        <h2 className={c.h2}>Conflict Detail</h2>
        <p className="text-sm text-[#5a5a6e] italic">Pick a conflict above to see aid flows, covert ops, and human costs from three vantage points.</p>
      </section>
    )
  }

const lensData = selectedDoc?.[lens]
  const lensColors = {
    us: { bg: "#4a7fc1", fg: "white" },
    soviet: { bg: "#e63946", fg: "white" },
    local: { bg: "#f8d54a", fg: "#1a1a2e" },
  }

return (
    <section id="conflict-detail" className={c.section}>
      <h2 className={c.h2}>{conflict.name} · {conflict.years}</h2>
      {!selectedDoc ? (
        <button onClick={generate} disabled={isLoading} className={c.btn}>
          {isLoading ? (
            <span className="inline-flex items-center gap-2">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" className="animate-spin">
                <path d="M12 2 A10 10 0 0 1 22 12" strokeLinecap="round" />
              </svg>
              Mapping...
            </span>
          ) : "Map This Conflict"}
        </button>
      ) : (
        <>
          <p className="text-sm mb-3 font-medium">{selectedDoc.summary}</p>
          <div className={c.lensBar}>
            {["us", "soviet", "local"].map((k) => (
              <button
                key={k}
                onClick={() => setLens(k)}
                className={c.lensBtn}
                style={lens === k ? { background: lensColors[k].bg, color: lensColors[k].fg } : { background: "white" }}
              >
                {k === "us" ? "US" : k === "soviet" ? "Soviet" : "Local"}
              </button>
            ))}
          </div>
          <div className="border-[3px] border-[#1a1a2e] rounded p-3 space-y-2 bg-[#f5f1e8]">
            {Object.entries(lensData || {}).map(([k, v]) => (
              <div key={k}>
                <div className="text-[0.6rem] uppercase tracking-[0.15em] font-bold text-[#5a5a6e]">{k}</div>
                <div className="text-sm">{v}</div>
              </div>
            ))}
          </div>
        </>
      )}
    </section>
  )
}

export default function App() {
  const { database, useDocument, useLiveQuery } = useFireproof("proxy-war-mapper")
  const [selectedId, setSelectedId] = React.useState(null)
  const { docs: conflictDocs } = useLiveQuery("type", { key: "conflict" })
  const selectedDoc = conflictDocs.find((d) => d.conflictId === selectedId)

const c = {
    page: "min-h-screen bg-[#f5f1e8] text-[#1a1a2e] font-['Space_Grotesk',sans-serif]",
    header: "bg-[#e63946] text-white border-b-[3px] border-[#1a1a2e] px-4 py-5 shadow-[0_4px_0_0_#1a1a2e]",
    title: "text-2xl font-bold uppercase tracking-tight",
    tagline: "text-xs uppercase tracking-[0.15em] mt-1 opacity-90",
    main: "max-w-3xl mx-auto p-4 space-y-5",
    section: "bg-white border-[3px] border-[#1a1a2e] rounded p-4 shadow-[4px_4px_0_0_#1a1a2e]",
    h2: "text-xs uppercase tracking-[0.15em] font-bold mb-3 text-[#1a1a2e]",
    grid: "grid grid-cols-2 gap-2",
    chip: "border-[3px] border-[#1a1a2e] rounded p-3 text-left bg-[#f8d54a] hover:bg-[#ffd700] active:translate-x-[2px] active:translate-y-[2px] shadow-[3px_3px_0_0_#1a1a2e] active:shadow-none transition-all min-h-[60px]",
    btn: "bg-[#e63946] text-white border-[3px] border-[#1a1a2e] rounded px-4 py-3 font-bold uppercase text-xs tracking-wider shadow-[3px_3px_0_0_#1a1a2e] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none disabled:opacity-50",
    input: "w-full border-[3px] border-[#1a1a2e] rounded px-3 py-2 bg-white font-['JetBrains_Mono',monospace] text-sm",
    lensBar: "flex gap-1 mb-3",
    lensBtn: "flex-1 border-[3px] border-[#1a1a2e] rounded px-2 py-2 text-[0.65rem] uppercase tracking-wider font-bold shadow-[2px_2px_0_0_#1a1a2e]",
  }

return (
    <div className={c.page}>
      <link rel="preconnect" href="https://fonts.googleapis.com" />
      <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
      <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=block" rel="stylesheet" />
      <header id="app-header" className={c.header}>
        <h1 className={c.title}>Proxy War Mapper</h1>
        <p className={c.tagline}>Cold War conflicts, three lenses</p>
      </header>
      <main id="app" className={c.main}>
        <section id="conflict-picker" className={c.section}>
          <h2 className={c.h2}>Pick a Conflict</h2>
          <div className={c.grid}>
            {CONFLICTS.map((cf) => (
              <button
                key={cf.id}
                onClick={() => setSelectedId(cf.id)}
                className={c.chip}
                style={selectedId === cf.id ? { background: "#62c370", color: "white" } : {}}
              >
                <div className="font-bold text-sm uppercase">{cf.name}</div>
                <div className="text-[0.65rem] font-['JetBrains_Mono',monospace] mt-1">{cf.years}</div>
                <div className="text-[0.6rem] uppercase tracking-wider opacity-70">{cf.region}</div>
              </button>
            ))}
          </div>
        </section>
        <ConflictDetail
          selectedId={selectedId}
          selectedDoc={selectedDoc}
          database={database}
          c={c}
        />
        <Annotations selectedId={selectedId} useDocument={useDocument} useLiveQuery={useLiveQuery} database={database} c={c} />
      </main>
    </div>
  )
}</article></body></html>