import React from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" const OPERATIONS = [ { id: "cutup", name: "Burroughs Cut-Up", blurb: "Cut prose into fragments and reorder by chance. Brion Gysin, William S. Burroughs." }, { id: "dice", name: "Dice-Roll Words", blurb: "Roll dice to pick word positions from source text. John Cage's chance procedures." }, { id: "wordlist", name: "Random Word List", blurb: "Draw words at random from a pool. Tzara's hat: pull slips, copy in order." }, { id: "newspaper", name: "Found Newspaper", blurb: "Open a paper to a random page, lift a line. Fluxus event scores." }, { id: "iching", name: "I Ching Hexagram", blurb: "Cast a hexagram, use its image as a prompt. Cage's Music of Changes lineage." }, ]; function WorkshopPanel({ op, database, c }) { const [source, setSource] = React.useState(""); const [fragments, setFragments] = React.useState([]); const [decisions, setDecisions] = React.useState([]); const [suggesting, setSuggesting] = React.useState(false); const [saving, setSaving] = React.useState(false); function runOperation() { const words = source.split(/\s+/).filter(Boolean); if (!words.length) return; let frags = []; let log = []; if (op === "cutup") { const chunks = []; for (let i = 0; i < words.length; i += 3) chunks.push(words.slice(i, i + 3).join(" ")); frags = chunks.sort(() => Math.random() - 0.5); log.push({ by: "chance", note: "Phrases cut every 3 words and shuffled" }); } else if (op === "dice") { for (let i = 0; i < 12; i++) { const roll = Math.floor(Math.random() * words.length); frags.push(words[roll]); log.push({ by: "chance", note: `Die roll ${roll + 1} → "${words[roll]}"` }); } } else if (op === "wordlist") { const pool = [...new Set(words)]; for (let i = 0; i < 10 && pool.length; i++) { const idx = Math.floor(Math.random() * pool.length); frags.push(pool.splice(idx, 1)[0]); } log.push({ by: "chance", note: "Drawn at random from word pool (Tzara's hat)" }); } else if (op === "newspaper") { const lines = source.split(/[.\n]/).filter(l => l.trim().length > 5); const picked = []; for (let i = 0; i < 3 && lines.length; i++) { const idx = Math.floor(Math.random() * lines.length); picked.push(lines.splice(idx, 1)[0].trim()); } frags = picked; log.push({ by: "chance", note: "Three random lines lifted from the source" }); } else if (op === "iching") { const hex = Array.from({ length: 6 }, () => Math.random() < 0.5 ? "—" : "— —"); frags = [hex.join("\n"), ...words.sort(() => Math.random() - 0.5).slice(0, 8)]; log.push({ by: "chance", note: `Hexagram cast: ${hex.join(" / ")}` }); } log.push({ by: "writer", note: "Selected source material and chose operation" }); setFragments(frags); setDecisions(log); } function moveFragment(i, dir) { const next = [...fragments]; const j = i + dir; if (j < 0 || j >= next.length) return; [next[i], next[j]] = [next[j], next[i]]; setFragments(next); setDecisions([...decisions, { by: "writer", note: `Reordered fragment "${next[j]}" ↔ "${next[i]}"` }]); } async function suggestSource() { setSuggesting(true); try { const r = await callAI("Provide a short paragraph of evocative source text for an aleatoric writing exercise.", { schema: { properties: { text: { type: "string" } } } }); setSource(JSON.parse(r).text); } finally { setSuggesting(false); } } async function savePiece() { if (!fragments.length) return; setSaving(true); try { await database.put({ type: "piece", operation: op, source, fragments, decisions, text: fragments.join(op === "iching" ? "\n" : " "), createdAt: Date.now(), authorSlug: "visitor", authorName: "visitor", authorAvatar: "", }); setFragments([]); setDecisions([]); setSource(""); } finally { setSaving(false); } } const Spinner = () => ; return ( <> Source Material

setSource(e.target.value)} className={c.input} rows={5} placeholder="Paste prose, a poem, or any text..." />
      <div className="flex gap-2 mt-3 flex-wrap">
        <button onClick={runOperation} disabled={!source.trim()} className={c.btn}>Generate Fragments</button>
        <button onClick={suggestSource} disabled={suggesting} className={c.btnAlt}>{suggesting ? <Spinner /> : "Suggest Source"}</button>
      </div>
      {fragments.length > 0 && (
        <div className="mt-4">
          <p className="text-sm font-bold uppercase mb-2">Fragments (tap arrows to reorder):</p>
          <div className="bg-white border-2 border-[#0a0a0a] p-3 space-y-1">
            {fragments.map((f, i) => (
              <div key={i} className="flex items-center gap-2 text-sm font-mono">
                <button onClick={() => moveFragment(i, -1)} className="px-2 border border-[#0a0a0a]">↑</button>
                <button onClick={() => moveFragment(i, 1)} className="px-2 border border-[#0a0a0a]">↓</button>
                <span className="flex-1 whitespace-pre-wrap">{f}</span>
              </div>
            ))}
          </div>
          <button onClick={savePiece} disabled={saving} className={c.btn + " mt-3"}>{saving ? <Spinner /> : "Save Piece"}</button>
        </div>
      )}
    </>
  );
}

async function critique(piece) {
    setBusyId(piece._id);
    try {
      const prompt = `Aleatoric piece using operation "${piece.operation}". Text: "${piece.text}". Decisions log: ${JSON.stringify(piece.decisions)}. Analyze authorship: what did chance decide, what did the writer decide, who is the author, and how does this method relate to Cage, Burroughs, Tzara, or Fluxus?`;
      const r = await callAI(prompt, {
        schema: { properties: {
          chanceElements: { type: "array", items: { type: "string" } },
          writerElements: { type: "array", items: { type: "string" } },
          authorshipJudgment: { type: "string" },
          tradition: { type: "string" },
        }}
      });
      const critique = JSON.parse(r);
      await database.put({ ...piece, critique });
    } finally { setBusyId(null); }
  }

const Spinner = () => <svg className="animate-spin inline w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="9" strokeDasharray="40 20"/></svg>;

if (!pieces.length) return <p className={c.muted}>No pieces yet.</p>;
  return (
    <div className="space-y-3">
      {pieces.map(p => (
        <div key={p._id} className={c.card}>
          <div className="flex items-center gap-2 mb-2">
            {p.authorAvatar && <img src={p.authorAvatar} alt={p.authorSlug} className="w-6 h-6 rounded-full border border-[#0a0a0a]" />}
            <span className="text-xs font-bold uppercase">{p.authorName}</span>
            <span className={c.chip}>{p.operation}</span>
          </div>
          <p className="font-mono text-sm whitespace-pre-wrap mb-2">{p.text}</p>
          {p.critique ? (
            <div className="border-t-2 border-[#0a0a0a] pt-2 mt-2 text-sm space-y-1">
              <p><b>Chance decided:</b> {p.critique.chanceElements?.join("; ")}</p>
              <p><b>Writer decided:</b> {p.critique.writerElements?.join("; ")}</p>
              <p><b>Authorship:</b> {p.critique.authorshipJudgment}</p>
              <p className="italic"><b>Tradition:</b> {p.critique.tradition}</p>
            </div>
          ) : (
            <button onClick={() => critique(p)} disabled={busyId === p._id} className={c.btnAlt + " text-xs"}>
              {busyId === p._id ? <Spinner /> : "Critique Authorship"}
            </button>
          )}
        </div>
      ))}
    </div>
  );
}

export default function App() {
  const { database } = useFireproof("aleatoric-workshop");
  const [selectedOp, setSelectedOp] = React.useState(null);

const c = {
    page: "min-h-screen bg-[#f5f2e8] text-[#0a0a0a] font-serif",
    header: "border-b-4 border-[#0a0a0a] bg-[#0a0a0a] text-[#f5f2e8] px-4 py-5 sticky top-0 z-10",
    title: "text-2xl md:text-3xl font-black tracking-tight uppercase",
    tagline: "text-xs md:text-sm mt-1 italic opacity-80",
    main: "max-w-2xl mx-auto px-4 py-6 space-y-6",
    section: "border-2 border-[#0a0a0a] bg-[#fafaf2] p-4 shadow-[6px_6px_0_0_#0a0a0a]",
    h2: "text-xl font-black uppercase tracking-wide mb-3 border-b-2 border-[#0a0a0a] pb-2",
    btn: "min-h-[44px] px-4 py-3 bg-[#0a0a0a] text-[#f5f2e8] font-bold uppercase text-sm tracking-wider hover:bg-[#2a2a2a] disabled:opacity-50",
    btnAlt: "min-h-[44px] px-4 py-3 bg-[#f5f2e8] text-[#0a0a0a] border-2 border-[#0a0a0a] font-bold uppercase text-sm",
    input: "w-full p-3 border-2 border-[#0a0a0a] bg-white font-mono text-sm",
    chip: "inline-block px-2 py-1 border border-[#0a0a0a] bg-[#fafaf2] text-xs font-mono mr-1 mb-1",
    card: "border-2 border-[#0a0a0a] bg-white p-3 mb-3",
    muted: "text-xs italic opacity-60",
  };

return (
    <div className={c.page}>
      <header id="app-header" className={c.header}>
        <h1 className={c.title}>Aleatoric Writing Workshop</h1>
        <p className={c.tagline}>Chance operations · Cage · Burroughs · Tzara · Fluxus</p>
      </header>
      <main id="app" className={c.main}>
        <section id="operation-picker" className={c.section}>
          <h2 className={c.h2}>1. Choose a Chance Operation</h2>
          <>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
              {OPERATIONS.map(op => (
                <button
                  key={op.id}
                  onClick={() => setSelectedOp(op.id)}
                  className={selectedOp === op.id ? c.btn : c.btnAlt}
                >{op.name}</button>
              ))}
            </div>
            {selectedOp && (
              <p className="mt-3 text-sm italic">{OPERATIONS.find(o => o.id === selectedOp).blurb}</p>
            )}
          </>
        </section>
        <section id="workshop" className={c.section}>
          <h2 className={c.h2}>2. Apply the Operation</h2>
          {!selectedOp ? (
            <p className={c.muted}>Pick an operation above to begin.</p>
          ) : (
            <WorkshopPanel op={selectedOp} database={database} c={c} />
          )}
        </section>
        <section id="critique" className={c.section}>
          <h2 className={c.h2}>3. Who Authored It?</h2>
          <p className="text-sm mb-3">Once a piece is saved, request an authorship critique. The AI weighs chance against intention and locates the work in its tradition — Cage, Burroughs, Tzara, Fluxus.</p>
          <p className={c.muted}>Open any piece in the gallery below to request its critique.</p>
        </section>
        <section id="gallery" className={c.section}>
          <h2 className={c.h2}>4. Gallery</h2>
          <p className={c.muted + " mb-3"}>Every saved piece, synced live to all viewers.</p>
          <GalleryList c={c} />
        </section>
      </main>
    </div>
  );
}</article></body></html>