import React from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" export default function App() { const { useDocument, useLiveQuery, database } = useFireproof("pitch-party") const [selectedMatchId, setSelectedMatchId] = React.useState(null) const [isSuggesting, setIsSuggesting] = React.useState(false) const matchDoc = useDocument({ type: "match", title: "", kickoff: "", createdAt: Date.now() }) const proposalDoc = useDocument({ type: "proposal", matchId: "", venue: "", time: "", createdAt: Date.now() }) const { docs: matches } = useLiveQuery("type", { key: "match", descending: true }) const { docs: proposals } = useLiveQuery("matchId", { key: selectedMatchId || "__none__" }) const { docs: votes } = useLiveQuery("type", { key: "vote" }) const { docs: confirmed } = useLiveQuery("type", { key: "confirmed", descending: true }) const selectedMatch = matches.find(m => m._id === selectedMatchId) const [voterName, setVoterName] = React.useState(() => "guest-" + Math.random().toString(36).slice(2, 7)) async function suggestVenues() { if (!selectedMatch) return setIsSuggesting(true) try { const res = await callAI( `Suggest 3 creative watch-party venue + time ideas for the match "${selectedMatch.title}" at ${selectedMatch.kickoff}. Mix of cozy and lively.`, { schema: { properties: { ideas: { type: "array", items: { type: "object", properties: { venue: { type: "string" }, time: { type: "string" } } } } } } } ) const { ideas } = JSON.parse(res) for (const idea of ideas) { await database.put({ type: "proposal", matchId: selectedMatchId, venue: idea.venue, time: idea.time, createdAt: Date.now() }) } } finally { setIsSuggesting(false) } } function voteCount(proposalId) { return votes.filter(v => v.proposalId === proposalId).length } async function castVote(proposalId) { const existing = votes.find(v => v.proposalId === proposalId && v.voter === voterName) if (existing) await database.del(existing._id) else await database.put({ type: "vote", proposalId, matchId: selectedMatchId, voter: voterName, createdAt: Date.now() }) } async function confirmProposal(proposal) { await database.put({ type: "confirmed", matchId: proposal.matchId, venue: proposal.venue, time: proposal.time, matchTitle: selectedMatch?.title, createdAt: Date.now() }) } const c = { page: "min-h-screen bg-[oklch(0.22_0.05_163)] text-[oklch(0.95_0.01_100)] font-['Space_Grotesk',sans-serif]", header: "sticky top-0 z-10 bg-[oklch(0.27_0.055_163)] border-b border-[oklch(0.39_0.065_165)] px-4 py-4 flex items-center justify-between", title: "text-xl font-bold tracking-tight", tagline: "text-xs text-[oklch(0.55_0.04_165)]", main: "max-w-2xl mx-auto px-4 py-5 space-y-5 pb-24", section: "bg-[oklch(0.27_0.055_163)] border border-[oklch(0.39_0.065_165)] rounded-xl p-4", h2: "text-lg font-semibold mb-3", btn: "min-h-[44px] px-4 py-3 rounded-lg bg-[oklch(0.86_0.18_90)] text-[oklch(0.20_0.04_163)] font-semibold disabled:opacity-50", btnGhost: "min-h-[44px] px-4 py-3 rounded-lg border border-[oklch(0.39_0.065_165)] text-[oklch(0.95_0.01_100)]", input: "w-full min-h-[44px] px-3 py-2 rounded-lg bg-[oklch(0.22_0.05_163)] border border-[oklch(0.39_0.065_165)] text-[oklch(0.95_0.01_100)] placeholder:text-[oklch(0.55_0.04_165)]", row: "flex items-center justify-between gap-3 py-3 border-b border-[oklch(0.39_0.065_165)] last:border-0", muted: "text-sm text-[oklch(0.55_0.04_165)]", avatar: "w-8 h-8 rounded-full border border-[oklch(0.39_0.065_165)]", chip: "inline-block px-2 py-1 rounded-md bg-[oklch(0.22_0.05_163)] border border-[oklch(0.39_0.065_165)] text-xs", } return (

Tournament Schedule

{matches.length === 0 ? (

No matches yet.

) : (

{m.title}

{m.kickoff}

)}

Watch Party Room

{!selectedMatch ? (

Select a match above to propose venues and vote.

) : ( <>

{selectedMatch.title} — {selectedMatch.kickoff}

{proposals.length === 0 ? (

No proposals yet.

) : (

{p.venue}

{p.time}

{voteCount(p._id)} votes

)} )}

Confirmed Plans

{confirmed.length === 0 ? (

No confirmed watch parties yet.

) : (

{p.matchTitle}

{p.venue} — {p.time}

)}

) }