import React, { useEffect, useRef, useState } from "react"; import { callAI } from "call-ai"; import { useFireproof } from "use-fireproof"; import { useVibe, useViewer } from "use-vibes"; import { Badge, Button, Card, Dot, Empty, ErrorNote, Field, Grid, Heading, Icon, IconButton, Input, Row, RowCard, Skeleton, Stack, Text, Textarea } from "@vibes.diy/pouf"; const DB = "posterPocket"; const flyerSchema = { type: "object", properties: { title: { type: "string", description: "Name of the event" }, date: { type: "string", description: "YYYY-MM-DD; empty if not printed" }, startTime: { type: "string", description: "24-hour HH:MM; empty if not printed" }, endTime: { type: "string", description: "24-hour HH:MM; empty if not printed" }, venue: { type: "string", description: "Venue name and address" }, description: { type: "string", description: "One or two short sentences about the event" }, confidence: { type: "string", description: "Short note about anything guessed or hard to read; empty if all clear" }, rawText: { type: "string", description: "All text visible on the flyer" }, }, required: ["title", "date", "startTime", "endTime", "venue", "description", "confidence", "rawText"], }; const str = (v) => (typeof v === "string" ? v.trim() : ""); function normalizeEvent(raw) { if (raw === null || typeof raw !== "object" || Array.isArray(raw)) return undefined; const date = str(raw.date); const startTime = str(raw.startTime); const endTime = str(raw.endTime); return { title: str(raw.title), date: /^\d{4}-\d{2}-\d{2}$/.test(date) ? date : "", startTime: /^\d{2}:\d{2}$/.test(startTime) ? startTime : "", endTime: /^\d{2}:\d{2}$/.test(endTime) ? endTime : "", venue: str(raw.venue), description: str(raw.description), confidence: str(raw.confidence), rawText: str(raw.rawText).slice(0, 4000), }; } function readAsDataUrl(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.onerror = () => reject(reader.error); reader.readAsDataURL(file); }); } const stamp = (ms) => new Date(ms).toISOString().replace(/[-:]/g, "").slice(0, 15); const esc = (s) => String(s).replace(/\\/g, "\\\\").replace(/;/g, "\\;").replace(/,/g, "\\,").replace(/\r\n|\r|\n/g, "\\n"); function eventLines(ev) { const [y, m, d] = ev.date.split("-").map(Number); const lines = ["BEGIN:VEVENT", `UID:event-${String(ev._id).replace(/[^A-Za-z0-9._-]/g, "-")}@posterpocket.vibes.diy`, `DTSTAMP:${stamp(Date.now())}Z`]; if (ev.startTime) { const [h, mi] = ev.startTime.split(":").map(Number); const start = Date.UTC(y, m - 1, d, h, mi); let end = start + 2 * 3600000; if (ev.endTime) { const [eh, em] = ev.endTime.split(":").map(Number); end = Date.UTC(y, m - 1, d, eh, em); if (end <= start) end += 24 * 3600000; } lines.push(`DTSTART:${stamp(start)}`, `DTEND:${stamp(end)}`); } else { const day = Date.UTC(y, m - 1, d); lines.push(`DTSTART;VALUE=DATE:${stamp(day).slice(0, 8)}`, `DTEND;VALUE=DATE:${stamp(day + 86400000).slice(0, 8)}`); } lines.push(`SUMMARY:${esc(ev.title || "Event")}`); if (ev.venue) lines.push(`LOCATION:${esc(ev.venue)}`); if (ev.description) lines.push(`DESCRIPTION:${esc(ev.description)}`); lines.push("END:VEVENT"); return lines; } function buildIcs(events) { const lines = ["BEGIN:VCALENDAR", "VERSION:2.0", "PRODID:-//Poster Pocket//EN", "CALSCALE:GREGORIAN", ...events.flatMap(eventLines), "END:VCALENDAR"]; return lines.join("\r\n") + "\r\n"; } function downloadIcs(ev) { const blob = new Blob([buildIcs([ev])], { type: "text/calendar" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `${(ev.title || "event").replace(/[^A-Za-z0-9]+/g, "-")}.ics`; a.click(); URL.revokeObjectURL(url); } const sortKey = (e) => `${e.date || "9999-99-99"} ${e.startTime || "00:00"}`; const prettyDate = (e) => { if (!e.date) return "Date needed"; const [y, m, d] = e.date.split("-").map(Number); return new Date(y, m - 1, d).toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric", year: "numeric" }); }; function EventCard({ event, database, can, startOpen, disabled, onSaved, onDeleted, showWho, ViewerTag }) { const [editing, setEditing] = useState(startOpen); const [draft, setDraft] = useState(event); const set = (patch) => setDraft((d) => ({ ...d, ...patch })); const thumb = event._files?.flyer?.url; const incomplete = !event.date || !event.title; async function save(e) { e.preventDefault(); const next = { ...event, ...draft, needsReview: false }; if (!can.edit(next).ok) return; setEditing(false); await database.put(next); onSaved(event); } return ( {thumb &&

} {event.title || "Untitled flyer"} {prettyDate(event)}{event.startTime ? ` at ${event.startTime}` : ""}{event.endTime ? ` to ${event.endTime}` : ""} {event.venue && {event.venue}} {event.description && {event.description}} {showWho && (event.creatorHandle || event.authorHandle) && ( Added by )} {(incomplete || event.needsReview || event.confidence) && ( {event.needsReview ? "We could not read this flyer. Fill in the details." : event.confidence || "Check the date and time."} )} {editing ? (

{(id, d) => set({ title })} />} {(id, d) => set({ date })} />} {(id, d) => set({ startTime })} />} {(id, d) => set({ endTime })} />} {(id, d) => set({ venue })} />} {(id, d) =>

set({ description })} />}</Field>
              <Row gap={2} wrap>
                <Button type="submit" variant="quiet" tone="up" size="sm" disabled={disabled}>Save event</Button>
                <Button type="button" variant="quiet" tone="idle" size="sm" onClick={() => { setDraft(event); setEditing(false); }}>Cancel</Button>
              </Row>
            </Stack>
          </form>
        ) : (
          <Row gap={2} wrap>
            <Button type="button" variant="quiet" tone="info" size="sm" disabled={!event.date} onClick={() => downloadIcs(event)}>Add to calendar</Button>
            {can.edit(event).ok && <Button type="button" variant="quiet" tone="idle" size="sm" disabled={disabled} onClick={() => { setDraft(event); setEditing(true); }}>Edit</Button>}
            {can.delete(event).ok && <Button type="button" variant="quiet" tone="down" size="sm" disabled={disabled} onClick={() => onDeleted(event)}>Delete</Button>}
          </Row>
        )}
      </Stack>
    </Card>
  );
}

return (
    <Stack gap={3}>
      <Heading level={2}>{monthLabel}</Heading>
      <Row gap={2} wrap>
        <Button type="button" size="sm" variant="quiet" tone="idle" onClick={() => go(-1)}>Previous</Button>
        <Button type="button" size="sm" variant="quiet" tone="info" onClick={() => { setPicked(monthOf(today)); setSelected(""); }}>Today</Button>
        <Button type="button" size="sm" variant="quiet" tone="idle" onClick={() => go(1)}>Next</Button>
      </Row>
      <div className={c.grid}>
        {labels.map((l) => <div key={l} className={c.weekday}>{l}</div>)}
        {cells.map((cell) => {
          const list = byDate[cell.date] ?? [];
          return (
            <DayCell
              key={cell.date} day={cell.day} inMonth={cell.inMonth} isToday={cell.date === today}
              isSelected={cell.date === selected} dayEvents={list}
              label={`${prettyDate({ date: cell.date })}, ${list.length} ${list.length === 1 ? "event" : "events"}`}
              onPick={() => setSelected(cell.date === selected ? "" : cell.date)}
            />
          );
        })}
      </div>
      {selected && (
        <Stack gap={3}>
          <Heading level={3}>{prettyDate({ date: selected })}</Heading>
          {selectedEvents.length ? renderList(selectedEvents) : <Text muted>Nothing on this day.</Text>}
        </Stack>
      )}
      {undated.length > 0 && (
        <Stack gap={3}>
          <Heading level={3}>Needs a date</Heading>
          {renderList(undated)}
        </Stack>
      )}
    </Stack>
  );
}

export default function App() {
  const { database, useLiveQuery } = useFireproof(DB);
  const { me, can, ready } = useVibe(DB);
  const { isViewerPending, requestLogin, HandleInput, ViewerTag } = useViewer();
  const { docs: calendars } = useLiveQuery("type", { key: "calendar" });
  const { docs: allEvents } = useLiveQuery("type", { key: "event" });
  const { docs: tokens } = useLiveQuery("type", { key: "caltoken" });
  const { docs: memberships } = useLiveQuery("type", { key: "membership" });
  const fileRef = useRef(null);
  const [busy, setBusy] = useState(false);
  const [message, setMessage] = useState("");
  const [lastWrite, setLastWrite] = useState(undefined);
  const [openId, setOpenId] = useState("");
  const [showPast, setShowPast] = useState(false);
  const [showSettings, setShowSettings] = useState(false);
  const [calName, setCalName] = useState("");
  const [copied, setCopied] = useState(false);
  const [activeId, setActiveId] = useState("");
  const [inviteKey, setInviteKey] = useState(0);
  const [view, setView] = useState("month");

const handle = me?.userHandle;
  const calId = handle ? `default-${handle}` : "";
  const calendar = calendars.find((c) => c._id === calId);
  const sharedCalendars = calendars.filter((c) => c.creatorHandle !== handle);
  const activeCal = calendars.find((c) => c._id === activeId) ?? calendar;
  const activeCalId = activeCal?._id ?? calId;
  const activeIsOwn = activeCalId === calId;
  const members = memberships.filter((m) => m.calendarId === calId);
  const showWho = !activeIsOwn || members.length > 0;
  const showCalName = Boolean(activeCal) && (activeCal.name !== "My Poster Pocket" || calendars.length > 1);
  const events = allEvents.filter((e) => e.calendarId === activeCalId).sort((a, b) => sortKey(a).localeCompare(sortKey(b)));
  const today = new Date().toLocaleDateString("en-CA");
  const upcoming = events.filter((e) => !e.date || e.date >= today);
  const past = events.filter((e) => e.date && e.date < today).reverse();
  const myToken = tokens.find((t) => t.userId === handle)?.token;
  const draftEvent = { type: "event", calendarId: activeCalId, creatorHandle: handle };
  const canAdd = ready && Boolean(handle) && can.create(draftEvent).ok;

useEffect(() => {
    if (!ready || !handle || calendar) return;
    const doc = { _id: calId, type: "calendar", creatorHandle: handle, name: "My Poster Pocket" };
    if (can.create(doc).ok) database.put(doc);
  }, [ready, handle, calendar]);

useEffect(() => {
    if (!ready || !handle || allEvents.length === 0 || myToken) return;
    const b = new Uint8Array(16);
    crypto.getRandomValues(b);
    let bin = "";
    for (const x of b) bin += String.fromCharCode(x);
    const token = btoa(bin).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
    database.put({ _id: `caltoken-${handle}`, type: "caltoken", userId: handle, calendarId: calId, token });
  }, [ready, handle, allEvents.length, myToken]);

async function onPhoto(e) {
    const file = e.target.files?.[0];
    e.target.value = "";
    if (!file || busy || !canAdd) return;
    setBusy(true);
    setMessage("");
    const base = { _id: crypto.randomUUID(), ...draftEvent, title: "", date: "", startTime: "", endTime: "", venue: "", description: "", confidence: "", rawText: "", needsReview: false, createdAt: Date.now(), _files: { flyer: file } };
    let parsed;
    try {
      const dataUrl = await readAsDataUrl(file);
      const response = await callAI(
        [
          { type: "text", text: `Read this event flyer and pull out the event details. Today is ${today}; use it to infer a missing year. Leave a field empty rather than guessing, and note anything uncertain in confidence.` },
          { type: "image_url", image_url: { url: dataUrl } },
        ],
        { schema: flyerSchema }
      );
      parsed = normalizeEvent(JSON.parse(response));
    } catch (error) {
      setMessage(error.reason === "refusal" ? "That photo could not be read. Fill the details in below." : "We could not read that flyer. Your photo is saved; fill the details in below.");
    }
    const doc = parsed && parsed.title ? { ...base, ...parsed } : { ...base, ...(parsed ?? {}), needsReview: true };
    if (can.create(doc).ok) {
      await database.put(doc);
      setLastWrite({ created: [doc._id] });
      if (doc.needsReview || !doc.date) setOpenId(doc._id);
    }
    setBusy(false);
  }

async function undo() {
    if (!lastWrite) return;
    for (const id of lastWrite.created ?? []) await database.del(id);
    if (lastWrite.replaced) await database.put(lastWrite.replaced);
    setLastWrite(undefined);
  }

async function saveName() {
    if (!calendar || !calName.trim() || calName.trim() === calendar.name) return;
    await database.put({ ...calendar, name: calName.trim() });
  }

return (
    <main className={c.page}>
      <Stack gap={5}>
        <div className={c.top}>
          <Stack gap={3}>
            <Heading level={1}>Poster Pocket</Heading>
            {showCalName && <Text muted>{activeCal.name}</Text>}
            <input ref={fileRef} type="file" accept="image/*" className={c.hidden} onChange={onPhoto} />
            <Row gap={2} wrap align="center">
              {!isViewerPending && !handle ? (
                <Button type="button" onClick={requestLogin}>Sign in to snap flyers</Button>
              ) : (
                <Button type="button" tone="purple" size="lg" loading={busy} disabled={!canAdd} onClick={() => fileRef.current?.click()}>
                  {busy ? "Reading your flyer..." : "Snap a flyer"}
                </Button>
              )}
              {lastWrite && <Button type="button" variant="quiet" tone="idle" disabled={busy} onClick={undo}>Undo</Button>}
              <Button type="button" variant="quiet" tone="idle" onClick={() => { setShowSettings(!showSettings); setCalName(calendar?.name ?? ""); }}>Settings</Button>
            </Row>
            <Row gap={2} wrap align="center">
              <Button type="button" size="sm" variant={view === "month" ? "solid" : "quiet"} tone="info" aria-pressed={view === "month"} onClick={() => setView("month")}>Month</Button>
              <Button type="button" size="sm" variant={view === "list" ? "solid" : "quiet"} tone="info" aria-pressed={view === "list"} onClick={() => setView("list")}>List</Button>
            </Row>
          </Stack>
        </div>

{message && <ErrorNote>{message}</ErrorNote>}

{showSettings && calendar && activeIsOwn && (
          <Card>
            <Stack gap={3}>
              <Field label="Calendar name">{(id, d) => <Input id={id} describedBy={d} value={calName} onChange={setCalName} />}</Field>
              <Row><Button type="button" size="sm" variant="quiet" tone="up" onClick={saveName}>Save name</Button></Row>
              <Text size="sm" muted>{members.length > 0 ? "You and your roommates see these events." : "Only you can see these events."}</Text>
            </Stack>
          </Card>
        )}

{activeIsOwn && calendar && (!ready ? <Skeleton /> : can.create(memberDoc("roommate")).ok && (
          <Card>
            <Stack gap={3}>
              <Heading level={3}>Roommates</Heading>
              <Text size="sm" muted>Add a roommate by handle or email. They can add flyers here and see every event on this list.</Text>
              <HandleInput key={inviteKey} onChange={addMember} placeholder="Add a roommate..." />
              {members.length === 0 && <Text size="sm" muted>No roommates added yet.</Text>}
              {members.map((m) => (
                <Row key={m._id} gap={2} align="center" wrap>
                  <ViewerTag userHandle={m.memberHandle} />
                  {can.delete(m).ok && <Button type="button" size="sm" variant="quiet" tone="down" onClick={() => removeMember(m)}>Remove</Button>}
                </Row>
              ))}
            </Stack>
          </Card>
        ))}

{sharedCalendars.length > 0 && (
          <Stack gap={3}>
            <Heading level={2}>Shared with me</Heading>
            {!activeIsOwn && (
              <Row><Button type="button" variant="quiet" tone="idle" size="sm" onClick={() => setActiveId("")}>Back to my calendar</Button></Row>
            )}
            {sharedCalendars.map((cal) => (
              <RowCard key={cal._id} onClick={() => setActiveId(cal._id)}>
                <Row gap={2} align="center" wrap>
                  <Text>{cal.name}</Text>
                  <ViewerTag userHandle={cal.creatorHandle} />
                  {cal._id === activeCalId && <Badge tone="info">Showing</Badge>}
                </Row>
              </RowCard>
            ))}
          </Stack>
        )}

{events.length === 0 ? (
          <Empty icon="photo" title="Snap your first flyer and its event lands here" />
        ) : (
          <Stack gap={5}>
            {view === "month" ? (
              <MonthGrid key={activeCalId} events={events} today={today} renderList={renderList} />
            ) : (
              <Stack gap={3}>
                <Heading level={2}>Coming up</Heading>
                {upcoming.length ? renderList(upcoming) : <Text muted>Nothing coming up. Snap a new flyer.</Text>}
              </Stack>
            )}
            {icsPath && (
              <Card>
                <Stack gap={3}>
                  <Heading level={3}>Subscribe in my calendar</Heading>
                  <Text size="sm" muted>Every flyer you save shows up in your phone calendar on its own.</Text>
                  <Row gap={2} wrap>
                    <a href={`webcal://${window.location.host}${icsPath}`} target="_blank" rel="noopener noreferrer">
                      <Row gap={2} align="center"><Icon name="calendar" /><Text>Subscribe on iPhone</Text></Row>
                    </a>
                    <Button type="button" variant="quiet" tone="info" size="sm" onClick={copyLink}>{copied ? "Link copied" : "Copy feed link"}</Button>
                  </Row>
                </Stack>
              </Card>
            )}
            {view === "list" && past.length > 0 && (
              <Stack gap={3}>
                <Row gap={2} align="center">
                  <Button type="button" variant="quiet" tone="idle" onClick={() => setShowPast(!showPast)}>{showPast ? "Hide past events" : "Show past events"}</Button>
                  <Badge tone="idle">{past.length}</Badge>
                </Row>
                {showPast && renderList(past)}
              </Stack>
            )}
          </Stack>
        )}
      </Stack>
    </main>
  );
}</article></body></html>