import React from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" function ReflectionEditor({ id, database, btnClass }) { const [note, setNote] = React.useState("") const [saving, setSaving] = React.useState(false) React.useEffect(() => { database.get(id).then((d) => setNote(d.note || "")).catch(() => setNote("")) }, [id]) async function save() { setSaving(true) try { const d = await database.get(id) await database.put({ ...d, note }) } finally { setSaving(false) } } return ( <>

setNote(e.target.value)} placeholder="What does this spread mean to you?" className="w-full min-h-[100px] bg-[#0f0a1f] border-[3px] border-[#d4af37] rounded p-3 text-[#f4e4bc] placeholder-[#a89968] mb-3" />
      <button onClick={save} disabled={saving} className={btnClass}>
        {saving ? (<svg className="inline animate-spin" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M12 2a10 10 0 0 1 10 10" strokeLinecap="round" /></svg>) : "Save Reflection"}
      </button>
    </>
  )
}

export default function App() {
  const { useLiveQuery, database } = useFireproof("mystic-triad")
  const [cards, setCards] = React.useState([null, null, null])
  const [revealed, setRevealed] = React.useState([false, false, false])
  const [isLoading, setIsLoading] = React.useState(false)
  const [currentId, setCurrentId] = React.useState(null)

async function drawSpread() {
    setIsLoading(true)
    setRevealed([false, false, false])
    setCards([null, null, null])
    try {
      const res = await callAI("Draw a 3-card tarot spread for past, present, future. Return real tarot card names with poetic 1-sentence meanings.", {
        schema: { properties: { cards: { type: "array", items: { type: "object", properties: { position: { type: "string" }, name: { type: "string" }, meaning: { type: "string" } } } } } }
      })
      const parsed = JSON.parse(res)
      setCards(parsed.cards)
      const saved = await database.put({ type: "spread", cards: parsed.cards, createdAt: Date.now() })
      setCurrentId(saved.id)
      parsed.cards.forEach((_, i) => setTimeout(() => setRevealed((r) => r.map((v, idx) => idx <= i ? true : v)), 400 * (i + 1)))
    } finally {
      setIsLoading(false)
    }
  }

const c = {
    page: "min-h-screen bg-[#0f0a1f] text-[#f4e4bc] font-serif pb-24",
    header: "sticky top-0 z-20 bg-[#0f0a1f]/95 backdrop-blur border-b-[3px] border-[#d4af37] px-5 py-4",
    title: "text-3xl font-bold tracking-tight text-[#d4af37] uppercase",
    tagline: "text-xs text-[#a89968] tracking-[0.2em] uppercase mt-1",
    main: "max-w-2xl mx-auto px-4 py-6 space-y-8",
    section: "bg-[#1a1238] border-[3px] border-[#d4af37] rounded p-5 shadow-[6px_6px_0px_#d4af37]",
    h2: "text-xl font-bold text-[#d4af37] uppercase tracking-wider mb-4",
    btn: "w-full min-h-[52px] bg-[#d4af37] text-[#0f0a1f] font-bold uppercase tracking-widest border-[3px] border-[#f4e4bc] rounded shadow-[4px_4px_0px_#f4e4bc] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none transition-all",
  }
  return (
    <div className={c.page}>
      <header id="app-header" className={c.header}>
        <h1 className={c.title}>Mystic Triad</h1>
        <p className={c.tagline}>Past · Present · Future</p>
      </header>
      <main id="app" className={c.main}>
        <section id="daily-pull" className={c.section}>
          <h2 className={c.h2}>Today's Spread</h2>
          <div className="grid grid-cols-3 gap-2 mb-5">
            {["Past", "Present", "Future"].map((label, i) => {
              const card = cards[i]
              const flipped = revealed[i] && card
              return (
                <div key={label} className={`aspect-[2/3] border-[3px] border-[#d4af37] rounded p-2 shadow-[3px_3px_0px_#d4af37] flex flex-col items-center justify-center text-center transition-all duration-500 ${flipped ? "bg-[#1a1238] rotate-0" : "bg-[#2a1e4f] rotate-y-180"}`} style={{ transform: flipped ? "rotateY(0deg)" : "rotateY(180deg)" }}>
                  <div className="text-[9px] uppercase tracking-widest text-[#a89968] mb-1">{label}</div>
                  {flipped ? (
                    <>
                      <div className="text-sm font-bold text-[#d4af37] leading-tight mb-2">{card.name}</div>
                      <div className="text-[10px] italic text-[#f4e4bc] leading-snug">"{card.meaning}"</div>
                    </>
                  ) : (
                    <div className="text-4xl text-[#d4af37]">✦</div>
                  )}
                </div>
              )
            })}
          </div>
          <button onClick={drawSpread} disabled={isLoading} className={c.btn}>
            {isLoading ? (
              <svg className="inline animate-spin" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M12 2a10 10 0 0 1 10 10" strokeLinecap="round" /></svg>
            ) : "Shuffle & Draw"}
          </button>
          {currentId && !isLoading && <div className="text-[10px] text-center text-[#a89968] mt-3 tracking-widest uppercase">{new Date().toLocaleDateString(undefined, { month: "long", day: "numeric", year: "numeric" })}</div>}
        </section>
        <section id="journal" className={c.section}>
          <h2 className={c.h2}>Spread Journal</h2>
          <ul className="space-y-2">
            {useLiveQuery("type", { key: "spread", descending: true, limit: 20 }).docs.map((d) => (
              <li key={d._id}>
                <button onClick={() => setCurrentId(d._id)} className={`w-full text-left p-3 border-[2px] rounded transition-all ${currentId === d._id ? "border-[#f4e4bc] bg-[#2a1e4f]" : "border-[#d4af37] bg-[#1a1238]"}`}>
                  <div className="text-[10px] uppercase tracking-widest text-[#a89968] mb-1">{new Date(d.createdAt).toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" })}</div>
                  <div className="text-sm text-[#d4af37]">{d.cards?.map((c) => c.name).join(" · ")}</div>
                  {d.note && <div className="text-[11px] italic text-[#f4e4bc] mt-1">"{d.note}"</div>}
                </button>
              </li>
            ))}
            {useLiveQuery("type", { key: "spread" }).docs.length === 0 && <li className="text-sm italic text-[#a89968]">Your readings will appear here.</li>}
          </ul>
        </section>
        <section id="reflection" className={c.section}>
          <h2 className={c.h2}>Reflection</h2>
          {currentId ? <ReflectionEditor id={currentId} database={database} btnClass={c.btn} /> : <p className="text-xs text-[#a89968] italic">Select a spread from the journal to add a note.</p>}
        </section>
      </main>
    </div>
  )
}</article></body></html>