import React from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" const CASES = [ { id: "homestead", title: "Homestead Strike", year: "1892", place: "Homestead, PA", summary: "Carnegie Steel workers locked out; Pinkertons arrive by barge." }, { id: "triangle", title: "Triangle Shirtwaist Fire", year: "1911", place: "New York, NY", summary: "146 garment workers die; locked exits expose factory conditions." }, { id: "ludlow", title: "Ludlow Massacre", year: "1914", place: "Ludlow, CO", summary: "National Guard fires on striking coal miners' tent colony." }, { id: "flint", title: "Flint Sit-Down Strike", year: "1936–37", place: "Flint, MI", summary: "GM autoworkers occupy plants; UAW wins recognition." }, { id: "memphis", title: "Memphis Sanitation Strike", year: "1968", place: "Memphis, TN", summary: "Black sanitation workers strike; 'I AM A MAN' placards; MLK assassinated supporting them." }, { id: "patco", title: "PATCO Strike", year: "1981", place: "United States", summary: "Air traffic controllers strike; Reagan fires 11,345." }, ] function AnnotationsPanel({ c, selectedCase, selectedLensId, database }) { const { useLiveQuery } = useFireproof("labor-cases") const { docs: allNotes } = useLiveQuery("type", { key: "annotation" }) const notes = allNotes .filter((n) => !selectedCase || n.caseId === selectedCase.id) .sort((a, b) => b.createdAt - a.createdAt) const [kind, setKind] = React.useState("note") const [body, setBody] = React.useState("") async function handleSubmit(e) { e.preventDefault() if (!body.trim() || !selectedCase) return await database.put({ type: "annotation", kind, body: body.trim(), caseId: selectedCase.id, lensId: selectedLensId || null, authorUserSlug: "visitor", authorDisplayName: "visitor", authorAvatarUrl: null, createdAt: Date.now(), }) setBody("") } return (

Class annotations

{selectedCase ? `Notes on ${selectedCase.title}` : "Select a conflict to view its annotations."}

{selectedCase && (

setBody(e.target.value)}
          />
          <button type="submit" className={c.btn} disabled={!body.trim()}>Post annotation</button>
        </form>
      )}
      <ul className="mt-5 space-y-3">
        {notes.length === 0 && (
          <li className="border border-[#1a1a1a] bg-[#fafaf5] p-3 text-sm">
            <span className={c.muted}>No annotations yet.</span>
          </li>
        )}
        {notes.map((n) => (
          <li key={n._id} className="border border-[#1a1a1a] bg-[#fafaf5] p-3 text-sm space-y-2">
            <div className="flex items-center gap-2">
              {n.authorAvatarUrl && <img src={n.authorAvatarUrl} alt={n.authorUserSlug} className={c.avatar} />}
              <span className="font-bold">{n.authorDisplayName}</span>
              <span className={c.muted}>· {n.kind === "prompt" ? "Discussion prompt" : "Note"}</span>
            </div>
            <p>{n.body}</p>
          </li>
        ))}
      </ul>
    </section>
  )
}

const LENSES = [
  { id: "demands", label: "Worker demands" },
  { id: "employer", label: "Employer response" },
  { id: "state", label: "State intervention" },
  { id: "public", label: "Public & press" },
  { id: "outcomes", label: "Lasting outcomes" },
]

export default function App() {
  const { useLiveQuery, database } = useFireproof("labor-cases")
  const [selectedCaseId, setSelectedCaseId] = React.useState(null)
  const [selectedLensId, setSelectedLensId] = React.useState(null)
  const [isLoading, setIsLoading] = React.useState(false)
  const selectedCase = CASES.find((cs) => cs.id === selectedCaseId) || null
  const selectedLens = LENSES.find((l) => l.id === selectedLensId) || null

const { docs: analyses } = useLiveQuery("type", { key: "analysis" })
  const currentAnalysis = analyses.find(
    (a) => a.caseId === selectedCaseId && a.lensId === selectedLensId
  )

async function loadLens(lensId) {
    setSelectedLensId(lensId)
    if (!selectedCase) return
    const existing = analyses.find((a) => a.caseId === selectedCase.id && a.lensId === lensId)
    if (existing) return
    const lens = LENSES.find((l) => l.id === lensId)
    setIsLoading(true)
    try {
      const raw = await callAI(
        `You are a labor historian. Analyze the ${selectedCase.title} (${selectedCase.year}, ${selectedCase.place}) through the lens of "${lens.label}". Provide a structured historical narrative grounded in primary-source context.`,
        {
          schema: {
            properties: {
              summary: { type: "string", description: "2-3 sentence overview of this lens for this conflict" },
              keyFacts: { type: "array", items: { type: "string" }, description: "4-6 specific factual points" },
              primarySource: { type: "string", description: "A representative primary-source excerpt or quote with attribution" },
              interpretation: { type: "string", description: "How this lens reshaped labor relations, in 3-4 sentences" },
            },
          },
        }
      )
      const parsed = JSON.parse(raw)
      await database.put({
        type: "analysis",
        caseId: selectedCase.id,
        lensId,
        ...parsed,
        createdAt: Date.now(),
      })
    } catch (err) {
      console.error(err)
    } finally {
      setIsLoading(false)
    }
  }

const c = {
    page: "min-h-screen bg-[#f5f1e8] text-[#1a1a1a]",
    header: "border-b-2 border-[#1a1a1a] bg-[#f5f1e8] px-4 py-5",
    title: "font-serif text-3xl font-bold tracking-tight",
    tagline: "mt-1 text-sm italic text-[#5c5c5c]",
    main: "mx-auto max-w-3xl px-4 py-6 space-y-8",
    section: "border border-[#1a1a1a] bg-white p-4 md:p-6",
    h2: "font-serif text-xl font-bold border-b border-[#1a1a1a] pb-2 mb-4",
    card: "block w-full text-left border border-[#1a1a1a] bg-[#fafaf5] p-4 hover:bg-[#efe9d8] min-h-[44px]",
    btn: "inline-flex items-center gap-2 border border-[#1a1a1a] bg-[#1a1a1a] text-[#f5f1e8] px-4 py-3 min-h-[44px] hover:bg-[#333] disabled:opacity-50",
    btnGhost: "inline-flex items-center gap-2 border border-[#1a1a1a] bg-white text-[#1a1a1a] px-3 py-3 min-h-[44px] hover:bg-[#efe9d8]",
    input: "w-full border border-[#1a1a1a] bg-white px-3 py-3 min-h-[44px] font-sans",
    muted: "text-sm text-[#5c5c5c]",
    avatar: "inline-block h-6 w-6 rounded-full border border-[#1a1a1a] align-middle",
  }

return (
    <div className={c.page}>
      <header id="app-header" className={c.header}>
        <h1 className={c.title}>The Labor Broadsheet</h1>
        <p className={c.tagline}>Six conflicts that reshaped American work</p>
      </header>
      <main id="app" className={c.main}>
        <section id="case-picker" className={c.section}>
          <h2 className={c.h2}>Select a conflict</h2>
          <ul className="space-y-3">
            {CASES.map((cs) => (
              <li key={cs.id}>
                <button
                  className={c.card + (selectedCaseId === cs.id ? " bg-[#efe9d8]" : "")}
                  onClick={() => setSelectedCaseId(cs.id)}
                  aria-pressed={selectedCaseId === cs.id}
                >
                  <div className="flex items-baseline justify-between gap-2">
                    <span className="font-serif text-lg font-bold">{cs.title}</span>
                    <span className={c.muted}>{cs.year}</span>
                  </div>
                  <div className={c.muted}>{cs.place}</div>
                  <p className="mt-2 text-sm">{cs.summary}</p>
                </button>
              </li>
            ))}
          </ul>
        </section>
        <section id="case-study" className={c.section}>
          <h2 className={c.h2}>
            {selectedCase ? `${selectedCase.title} — analytical lenses` : "Analytical lenses"}
          </h2>
          {!selectedCase && (
            <p className={c.muted}>Select a conflict above, then tap a lens to load its analysis.</p>
          )}
          {selectedCase && (
            <>
              <p className={c.muted}>{selectedCase.year} · {selectedCase.place}</p>
              <div className="mt-4 flex flex-wrap gap-2">
                {LENSES.map((l) => (
                  <button
                    key={l.id}
                    className={c.btnGhost + (selectedLensId === l.id ? " bg-[#efe9d8]" : "")}
                    onClick={() => loadLens(l.id)}
                    disabled={isLoading}
                    aria-pressed={selectedLensId === l.id}
                  >
                    {l.label}
                  </button>
                ))}
              </div>
              <article className="mt-5 border-t border-[#1a1a1a] pt-4">
                {isLoading && !currentAnalysis && (
                  <p className="flex items-center gap-2 text-sm">
                    <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <circle cx="12" cy="12" r="10" strokeDasharray="50" />
                    </svg>
                    Consulting the historical record…
                  </p>
                )}
                {!isLoading && !selectedLens && <p className={c.muted}>No lens selected yet.</p>}
                {currentAnalysis && (
                  <div className="space-y-4">
                    <h3 className="font-serif text-lg font-bold">{selectedLens?.label}</h3>
                    <p>{currentAnalysis.summary}</p>
                    {currentAnalysis.keyFacts?.length > 0 && (
                      <ul className="list-disc pl-5 space-y-1 text-sm">
                        {currentAnalysis.keyFacts.map((f, i) => <li key={i}>{f}</li>)}
                      </ul>
                    )}
                    {currentAnalysis.primarySource && (
                      <blockquote className="border-l-4 border-[#1a1a1a] pl-3 italic text-sm">
                        {currentAnalysis.primarySource}
                      </blockquote>
                    )}
                    {currentAnalysis.interpretation && (
                      <p className="text-sm">{currentAnalysis.interpretation}</p>
                    )}
                  </div>
                )}
              </article>
            </>
          )}
        </section>
        <AnnotationsPanel
          c={c}
          selectedCase={selectedCase}
          selectedLensId={selectedLensId}
          database={database}
        />
      </main>
    </div>
  )
}
</article></body></html>