1"use client";
2
3import { Button, Card, EmptyState, SchemaForm, type SchemaFormHandle, type SchemaFormValidity, type XTier } from "@versable-git/ui";
4import { useRef, useState } from "react";
5import fixture from "../../../../../../docs/plan/65-schema-form-fixtures/image-generation.params.schema.json";
6import { FILE_CONTEXT, resolveModuleOptions } from "../../components/schema-form/examples/module-stubs";
7
8// The square aside SchemaForm renders beside the form at 1280 and below it at
9// 375; the console owns the real preview, this is the placeholder the fixture
10// stands in for. "ready" is a faked result, never an actual generated image.
11function PreviewPane({ state }: { state: "empty" | "ready" }) {
12  return (
13    <Card noAnimate className="flex aspect-square w-full max-w-[280px] flex-col items-center justify-center lg:w-[280px]">
14      {state === "ready" ? (
15        <EmptyState Icon="Image" iconCircle title="Preview ready" description="A generated image would render here." compact />
16      ) : (
17        <EmptyState Icon="Image" title="Preview appears here after Run" compact />
18      )}
19    </Card>
20  );
21}
22
23// The image module's settings surface as the console would ship it: two
24// modes and six nested edit operations over the schema in spec section 5.2,
25// with the two slots the schema itself cannot supply, the preview pane and
26// the "ran fine, produced nothing" signal, stood in with a stateful stub.
27export function ModuleImageGeneration() {
28  const ref = useRef<SchemaFormHandle>(null);
29  const [value, setValue] = useState<Record<string, unknown>>({ mode: "generate" });
30  const [tier, setTier] = useState<XTier>("customer");
31  const [validity, setValidity] = useState<SchemaFormValidity | null>(null);
32  const [formMode, setFormMode] = useState<"edit" | "review">("edit");
33  const [previewState, setPreviewState] = useState<"empty" | "ready">("empty");
34  const [status, setStatus] = useState<{ tone: "warning"; text: string } | undefined>();
35  const [runCount, setRunCount] = useState(0);
36
37  // A real preview call sometimes finishes without producing anything usable
38  // (a bad prompt, a mode with nothing to show); this fakes that outcome on
39  // every second run so the warning-tier status line has something to show.
40  function handleRun() {
41    const out = ref.current?.submit();
42    if (!out) return;
43    const next = runCount + 1;
44    setRunCount(next);
45    if (next % 2 === 0) {
46      setStatus({ tone: "warning", text: "Preview ran and produced nothing usable. Try a different prompt or mode." });
47      setPreviewState("empty");
48    } else {
49      setStatus(undefined);
50      setPreviewState("ready");
51    }
52  }
53
54  return (
55    <div className="flex flex-col gap-4">
56      <div className="flex flex-wrap items-center justify-between gap-2">
57        <div className="flex flex-wrap items-center gap-2">
58          <span className="text-base-content/65 text-xs">Viewer</span>
59          {(["customer", "admin"] as const).map((t) => (
60            <Button key={t} size="xs" variant={tier === t ? "solid" : "ghost"} color="primary" shade onClick={() => setTier(t)}>
61              {t.charAt(0).toUpperCase() + t.slice(1)}
62            </Button>
63          ))}
64        </div>
65        <Button size="xs" variant="ghost" color="primary" shade onClick={() => setFormMode(formMode === "edit" ? "review" : "edit")}>
66          {formMode === "edit" ? "Review" : "Edit"}
67        </Button>
68      </div>
69      <SchemaForm
70        ref={ref}
71        schema={fixture}
72        value={value}
73        onChange={setValue}
74        mode={formMode}
75        tier={tier}
76        settings={{ module_version: "v3" }}
77        context={FILE_CONTEXT}
78        resolveOptions={resolveModuleOptions}
79        aside={<PreviewPane state={previewState} />}
80        status={status}
81        onValidityChange={setValidity}
82        onEditSection={() => setFormMode("edit")}
83      />
84      {formMode === "edit" && (
85        <div className="flex items-center gap-2">
86          <Button size="sm" color="primary" onClick={handleRun}>
87            Run preview
88          </Button>
89          {validity && !validity.isValid && (
90            <span className="text-base-content/65 text-xs">{validity.pending ? "Waiting for options to load" : `${validity.errors.length} to fix before it can run`}</span>
91          )}
92        </div>
93      )}
94    </div>
95  );
96}
97