import React, { useEffect, useRef, useState } from "react"; import { useFireproof } from "use-fireproof"; import { useViewer, useVibe, ViewerTag, HandleInput } from "use-vibes"; import { Button, Card, Empty, Field, Heading, Input, Row, RowCard, Spacer, Stack, Text, Textarea, Badge } from "@vibes.diy/pouf"; import { Confirm } from "@vibes.diy/pouf/interactive"; const APP_NAME = "Comfortable Recipe Box"; const lines = (s) => s.split("\n").map((l) => l.trim()).filter(Boolean); function RecipeForm({ initial, onSave, onCancel, canSave }) { const [title, setTitle] = useState(initial?.title ?? ""); const [ingredients, setIngredients] = useState((initial?.ingredients ?? []).join("\n")); const [steps, setSteps] = useState((initial?.steps ?? []).join("\n")); const submit = (e) => { e.preventDefault(); if (!title.trim() || !canSave) return; onSave({ title: title.trim(), ingredients: lines(ingredients), steps: lines(steps) }); }; return (

{(id, d) => } {(id, d) =>

}</Field>
        <Field label="Steps" hint="One per line">{(id, d) => <Textarea id={id} describedBy={d} rows={5} value={steps} onChange={setSteps} />}</Field>
        <Row gap={2} wrap>
          <Button type="submit" disabled={!title.trim() || !canSave}>Save recipe</Button>
          {onCancel && <Button type="button" variant="quiet" tone="idle" onClick={onCancel}>Cancel</Button>}
        </Row>
      </Stack>
    </form>
  );
}

function Detail({ recipe, byOther, canEdit, canDelete, onEdit, onDelete, onBack }) {
  const [confirming, setConfirming] = useState(false);
  return (
    <Card>
      <Stack gap={4}>
        <Row gap={2} align="center" wrap>
          <Button type="button" variant="quiet" tone="idle" size="sm" onClick={onBack}>Back</Button>
          <Spacer />
          {canEdit && <Button type="button" variant="quiet" tone="info" size="sm" onClick={onEdit}>Edit</Button>}
          {canDelete && <Button type="button" variant="quiet" tone="down" size="sm" onClick={() => setConfirming(true)}>Delete</Button>}
        </Row>
        <Heading level={2}>{recipe.title}</Heading>
        {byOther && (
          <Row gap={2} align="center" wrap>
            <Text muted>Added by</Text>
            <ViewerTag userHandle={recipe.authorHandle} />
          </Row>
        )}
        <Heading level={3}>Ingredients</Heading>
        <Stack gap={1}>{recipe.ingredients.map((x, i) => <Text key={i}>• {x}</Text>)}</Stack>
        <Heading level={3}>Steps</Heading>
        <Stack gap={2}>{recipe.steps.map((x, i) => <Text key={i}>{i + 1}. {x}</Text>)}</Stack>
        {confirming && (
          <Confirm open title="Delete this recipe?" body={`"${recipe.title}" will be removed from this box.`} confirmLabel="Delete" cancelLabel="Keep it" tone="down" onConfirm={onDelete} />
        )}
      </Stack>
    </Card>
  );
}

export default function App() {
  const { database, useLiveQuery } = useFireproof("recipeBox");
  const { me, can, ready } = useVibe("recipeBox");
  const { viewer, isViewerPending, requestLogin } = useViewer();
  const ownId = me?.userHandle ? `default-${me.userHandle}` : undefined;
  const { docs: recipeDocs } = useLiveQuery("type", { key: "recipe" });
  const { docs: boxes } = useLiveQuery("type", { key: "box" });
  const { docs: memberDocs } = useLiveQuery("type", { key: "member" });
  const [pickedBoxId, setPickedBoxId] = useState(null);
  const [mode, setMode] = useState("list");
  const [openId, setOpenId] = useState(null);
  const [query, setQuery] = useState("");
  const [renaming, setRenaming] = useState(false);
  const [nameDraft, setNameDraft] = useState("");
  const ensuredRef = useRef(null);

// Write the person's own default box once they are signed in and ready.
  useEffect(() => {
    if (!ready || !ownId || ensuredRef.current === ownId) return;
    const doc = { _id: ownId, type: "box", name: APP_NAME, creatorHandle: me.userHandle };
    if (!can.create(doc).ok) return;
    ensuredRef.current = ownId;
    database
      .get(ownId)
      .catch(() => null)
      .then((existing) => (existing ? null : database.put(doc)))
      .catch((err) => console.error(err));
  }, [ready, ownId, can, database, me]);

const selectedBox = boxes.find((b) => b._id === pickedBoxId) ?? boxes.find((b) => b._id === ownId) ?? boxes[0];
  const boxId = selectedBox?._id ?? ownId;
  const isOwner = selectedBox ? selectedBox.creatorHandle === me?.userHandle : boxId === ownId;
  const members = memberDocs.filter((m) => m.boxId === boxId);
  const recipes = recipeDocs.filter((r) => r.boxId === boxId).sort((a, b) => (b.createdAt ?? 0) - (a.createdAt ?? 0));
  const q = query.trim().toLowerCase();
  const shown = q ? recipes.filter((r) => r.title.toLowerCase().includes(q) || r.ingredients.some((i) => i.toLowerCase().includes(q))) : recipes;
  const open = recipes.find((r) => r._id === openId);
  const draft = { type: "recipe", boxId, authorHandle: me?.userHandle };
  const canAdd = ready && !!boxId && can.create(draft).ok;
  const memberDraft = { type: "member", boxId, userHandle: "x", addedBy: me?.userHandle };
  const canShare = ready && isOwner && !!boxId && can.create(memberDraft).ok;
  const canRename = isOwner && !!selectedBox && can.edit(selectedBox).ok;
  const title = selectedBox?.name ?? APP_NAME;

const c = { page: "min-h-screen bg-background text-foreground font-sans p-3 md:p-6", col: "mx-auto w-full max-w-xl" };
  const stagger = ["delay-0", "delay-75", "delay-150", "delay-200", "delay-300"];
  const itemFx = "transition-all duration-200 ease-out starting:opacity-0 starting:translate-y-1 motion-reduce:transition-none";

let body;
  if (isViewerPending || !ready) {
    body = <Text muted>Opening your box…</Text>;
  } else if (!me) {
    body = (
      <Stack gap={3}>
        <Empty title="Sign in to open your recipe box" />
        {!isViewerPending && !viewer && <Button type="button" onClick={requestLogin}>Sign in</Button>}
      </Stack>
    );
  } else if (mode === "share" && isOwner) {
    body = (
      <SharePanel
        boxName={title}
        members={members}
        canAdd={canShare}
        canRemove={(m) => can.delete(m).ok}
        onAdd={addMember}
        onRemove={removeMember}
        onClose={() => setMode("list")}
      />
    );
  } else if (mode === "detail" && open) {
    body = (
      <Detail
        recipe={open}
        byOther={open.authorHandle !== me.userHandle}
        canEdit={can.edit(open).ok}
        canDelete={can.delete(open).ok}
        onBack={() => setMode("list")}
        onEdit={() => setMode("edit")}
        onDelete={remove}
      />
    );
  } else if (mode === "edit" && open) {
    body = <Card><Stack gap={3}><Heading level={2}>Edit recipe</Heading><RecipeForm initial={open} canSave={can.edit(open).ok} onSave={update} onCancel={() => setMode("detail")} /></Stack></Card>;
  } else if (mode === "add" || recipes.length === 0) {
    body = (
      <Card>
        <Stack gap={3}>
          <Heading level={2}>{recipes.length === 0 ? "Add your first recipe" : "Add recipe"}</Heading>
          {!canAdd && <Text muted>Your box is getting ready…</Text>}
          <RecipeForm canSave={canAdd} onSave={add} onCancel={recipes.length > 0 ? () => setMode("list") : undefined} />
        </Stack>
      </Card>
    );
  } else {
    body = (
      <Stack gap={4}>
        <Button type="button" disabled={!canAdd} onClick={() => setMode("add")}>Add recipe</Button>
        {recipes.length >= 3 && (
          <Field label="Search">{(id, d) => <Input id={id} describedBy={d} value={query} onChange={setQuery} placeholder="Title or ingredient" />}</Field>
        )}
        {shown.length === 0 && <Empty title="No recipes match that search" />}
        {shown.map((r, i) => (
          <div key={r._id} className={`${itemFx} ${stagger[Math.min(i, 4)]}`}>
            <RowCard onClick={() => { setOpenId(r._id); setMode("detail"); }}>
              <Stack gap={1}>
                <Row gap={3} align="center">
                  <Text>{r.title}</Text>
                  <Spacer />
                  <Badge tone="info">{r.ingredients.length} ingredients</Badge>
                </Row>
                {r.authorHandle !== me.userHandle && (
                  <Row gap={2} align="center" wrap>
                    <Text size="sm" muted>Added by</Text>
                    <ViewerTag userHandle={r.authorHandle} />
                  </Row>
                )}
              </Stack>
            </RowCard>
          </div>
        ))}
      </Stack>
    );
  }

return (
    <main id="app" className={c.page}>
      <div className={c.col}>
        <Stack gap={5}>
          <header id="app-header">
            <Stack gap={2}>
              <Heading level={1}>{title}</Heading>
              {me && (
                <Row gap={2} align="center" wrap>
                  {canShare && !renaming && <Button type="button" variant="quiet" tone="info" size="sm" onClick={() => setMode(mode === "share" ? "list" : "share")}>Share</Button>}
                  {canRename && !renaming && <Button type="button" variant="quiet" tone="idle" size="sm" onClick={() => { setNameDraft(title); setRenaming(true); }}>Rename</Button>}
                </Row>
              )}
              {renaming && (
                <Row gap={2} align="center">
                  <Input value={nameDraft} onChange={setNameDraft} label="Box name" />
                  <Button type="button" size="sm" variant="quiet" tone="up" onClick={saveName}>Save</Button>
                </Row>
              )}
              {status}
            </Stack>
          </header>
          {me && boxes.length > 1 && (
            <nav aria-label="Your boxes">
              <Row gap={3} align="center" wrap>
                {boxes.map((b) => (
                  <Row key={b._id} gap={1} align="center">
                    <Button type="button" size="sm" variant={b._id === boxId ? "solid" : "quiet"} tone="info" onClick={() => pickBox(b._id)}>
                      {b.name ?? b._id}
                    </Button>
                    {b.creatorHandle !== me.userHandle && <ViewerTag userHandle={b.creatorHandle} />}
                  </Row>
                ))}
              </Row>
            </nav>
          )}
          <section id="recipes">{body}</section>
        </Stack>
      </div>
    </main>
  );
}</article></body></html>