import React from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" function NotesSection({ c, pairKey, pair, database, useLiveQuery, useDocument }) { const { docs: notes } = useLiveQuery("pairKey", { key: `note__${pairKey}` }); const { doc, merge, submit } = useDocument({ type: "note", pairKey: `note__${pairKey}`, body: "", createdAt: Date.now(), }); function onSubmit(e) { e.preventDefault(); if (!doc.body.trim() || pair.length !== 2) return; submit(); } return (

Study Notes

{pair.length !== 2 ? (

Select two revolutions to attach notes.

) : ( <>

Annotations on the current pair, shared with all viewers.

merge({ body: e.target.value, createdAt: Date.now() })}
            />
            <button type="submit" className={c.btnAlt}>Save Note</button>
          </form>
          <div>
            {notes.length === 0 && <p className="text-sm italic text-[#555]">No notes yet for this pair.</p>}
            {notes.map(n => (
              <div key={n._id} className={c.noteCard}>
                <p className="text-sm whitespace-pre-wrap">{n.body}</p>
              </div>
            ))}
          </div>
        </>
      )}
    </section>
  );
}

const REVOLUTIONS = [
  { id: "american", label: "American (1776)" },
  { id: "french", label: "French (1789)" },
  { id: "haitian", label: "Haitian (1791)" },
  { id: "latam", label: "Latin American (1810s)" },
];

export default function App() {
  const { database, useLiveQuery, useDocument } = useFireproof("atlantic-revolutions");
  const { docs: selectionDocs } = useLiveQuery("type", { key: "selection", descending: true, limit: 1 });
  const selection = selectionDocs[0] || { pair: [] };
  const pair = selection.pair || [];

function togglePick(id) {
    let next;
    if (pair.includes(id)) next = pair.filter(x => x !== id);
    else if (pair.length < 2) next = [...pair, id];
    else next = [pair[1], id];
    database.put({ type: "selection", pair: next, updatedAt: Date.now() });
  }

const pairKey = [...pair].sort().join("__");

const { docs: comparisonDocs } = useLiveQuery("pairKey", { key: pairKey });
  const comparison = comparisonDocs[0];

const [isLoading, setIsLoading] = React.useState(false);

const DIMENSIONS = [
    { key: "causes", label: "Causes" },
    { key: "enlightenment", label: "Enlightenment Influences" },
    { key: "keyFigures", label: "Key Figures" },
    { key: "inclusionExclusion", label: "Inclusion & Exclusion" },
    { key: "slavery", label: "Treatment of Slavery" },
    { key: "mutualInfluence", label: "Influence on / from Other Revolutions" },
    { key: "outcomes", label: "Outcomes" },
    { key: "historiography", label: "Historians' Debate" },
  ];

async function generateComparison() {
    if (pair.length !== 2 || isLoading) return;
    const [a, b] = pair.map(id => REVOLUTIONS.find(r => r.id === id).label);
    setIsLoading(true);
    try {
      const schema = {
        properties: Object.fromEntries(DIMENSIONS.map(d => [d.key, {
          type: "object",
          properties: { a: { type: "string" }, b: { type: "string" } }
        }]))
      };
      const prompt = `You are a comparative-history analyst. Compare the ${a} revolution (a) and the ${b} revolution (b) across these dimensions: ${DIMENSIONS.map(d => d.label).join(", ")}. For each dimension, give a concise paragraph (2-4 sentences) for each revolution. Be specific and historically grounded. Address the historiographic debate over whether these revolutions formed a coherent Atlantic movement or distinct national episodes.`;
      const res = await callAI(prompt, { schema });
      const data = JSON.parse(res);
      await database.put({ type: "comparison", pairKey, pair, labels: { a, b }, data, createdAt: Date.now() });
    } finally {
      setIsLoading(false);
    }
  }

const c = {
    page: "min-h-screen bg-[#f4f1ea] text-[#1a1a1a]",
    header: "bg-[#1a1a1a] text-[#f4f1ea] px-5 py-6 border-b-4 border-[#8b0000]",
    title: "text-3xl font-bold tracking-tight",
    tagline: "text-sm text-[#c9c2b3] mt-1 italic",
    main: "max-w-5xl mx-auto px-4 py-6 space-y-6",
    section: "bg-white border border-[#1a1a1a] rounded-sm p-5 shadow-sm",
    h2: "text-xl font-bold border-b-2 border-[#8b0000] pb-2 mb-4",
    btn: "min-h-[44px] px-4 py-3 bg-[#8b0000] text-[#f4f1ea] rounded-sm font-semibold hover:bg-[#6b0000] disabled:opacity-50",
    btnAlt: "min-h-[44px] px-4 py-3 bg-[#1a1a1a] text-[#f4f1ea] rounded-sm font-semibold hover:bg-[#333]",
    chip: "min-h-[44px] px-4 py-3 border-2 border-[#1a1a1a] rounded-sm font-semibold bg-white hover:bg-[#f4f1ea]",
    chipActive: "min-h-[44px] px-4 py-3 border-2 border-[#8b0000] rounded-sm font-semibold bg-[#8b0000] text-[#f4f1ea]",
    input: "w-full px-3 py-2 border border-[#1a1a1a] rounded-sm bg-white",
    textarea: "w-full px-3 py-2 border border-[#1a1a1a] rounded-sm bg-white min-h-[100px]",
    grid: "grid grid-cols-1 md:grid-cols-2 gap-4",
    dimCard: "border border-[#c9c2b3] rounded-sm p-3 bg-[#faf8f3]",
    dimLabel: "text-xs uppercase tracking-wider text-[#8b0000] font-bold mb-2",
    noteCard: "border-l-4 border-[#8b0000] bg-[#faf8f3] p-3 mb-2",
  };

return (
    <div className={c.page}>
      <header id="app-header" className={c.header}>
        <h1 className={c.title}>The Atlantic Revolutions</h1>
        <p className={c.tagline}>A comparative study — 1776 · 1789 · 1791 · 1810s</p>
      </header>
      <main id="app" className={c.main}>
        <section id="pair-picker" className={c.section}>
          <h2 className={c.h2}>Select Two Revolutions</h2>
          <p className="text-sm text-[#555] mb-4">Tap two of the four to compare. Selection syncs to all viewers.</p>
          <div className="flex flex-wrap gap-2">
            {REVOLUTIONS.map(r => (
              <button
                key={r.id}
                className={pair.includes(r.id) ? c.chipActive : c.chip}
                onClick={() => togglePick(r.id)}
              >
                {r.label}
              </button>
            ))}
          </div>
          <div className="mt-4 text-sm">
            <span className="font-semibold">Selected: </span>
            <span className="italic text-[#555]">
              {pair.length === 0 ? "none yet" : pair.map(id => REVOLUTIONS.find(r => r.id === id)?.label).join(" vs. ")}
            </span>
          </div>
        </section>
        <section id="comparison" className={c.section}>
          <h2 className={c.h2}>Comparative Analysis</h2>
          {pair.length !== 2 ? (
            <p className="text-sm italic text-[#555]">Select two revolutions above to compare.</p>
          ) : (
            <>
              <div className="flex items-center gap-3 mb-4 flex-wrap">
                <p className="text-sm text-[#555]">
                  Comparing <strong>{comparison?.labels?.a || REVOLUTIONS.find(r=>r.id===pair[0])?.label}</strong> vs. <strong>{comparison?.labels?.b || REVOLUTIONS.find(r=>r.id===pair[1])?.label}</strong>
                </p>
                <button className={c.btn} onClick={generateComparison} disabled={isLoading}>
                  {isLoading ? (
                    <span className="flex items-center gap-2">
                      <svg className="animate-spin" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="9" strokeDasharray="40 20"/></svg>
                      Analyzing…
                    </span>
                  ) : comparison ? "Regenerate" : "Generate Comparison"}
                </button>
              </div>
              {comparison ? (
                <div className="space-y-4">
                  {DIMENSIONS.map(d => (
                    <div key={d.key}>
                      <div className={c.dimLabel + " text-base"}>{d.label}</div>
                      <div className={c.grid}>
                        <div className={c.dimCard}>
                          <div className="text-xs font-bold mb-1">{comparison.labels.a}</div>
                          <p className="text-sm">{comparison.data?.[d.key]?.a || "—"}</p>
                        </div>
                        <div className={c.dimCard}>
                          <div className="text-xs font-bold mb-1">{comparison.labels.b}</div>
                          <p className="text-sm">{comparison.data?.[d.key]?.b || "—"}</p>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-sm italic text-[#555]">No analysis yet for this pair. Click Generate.</p>
              )}
            </>
          )}
        </section>
        <NotesSection
          c={c}
          pairKey={pairKey}
          pair={pair}
          database={database}
          useLiveQuery={useLiveQuery}
          useDocument={useDocument}
        />
      </main>
    </div>
  );
}
</article></body></html>