1"use client";
2
3import { Button, Card, SchemaForm, Table, type SchemaFormHandle, type SchemaFormValidity, type TableColumn, type XTier } from "@versable-git/ui";
4import { useMemo, useRef, useState } from "react";
5import fixture from "../../../../../../docs/plan/65-schema-form-fixtures/enhancement.params.schema.json";
6import { FILE_CONTEXT, resolveModuleOptions } from "../../components/schema-form/examples/module-stubs";
7
8// Three named starting points plus a blank one, backed by SchemaForm's presets
9// API. Picking a template swaps the value wholesale; Reset to template puts
10// the active one back once the customer has edited it.
11const TEMPLATES: Record<string, Record<string, unknown>> = {
12  marketing: {
13    fields: [{ title: "Marketing description", kind: "text", min_chars: 120, max_chars: 320, prompt: "Two sentences about <<Title>> for a shopper comparing brands: <<llm>>" }],
14    web_search: true,
15    check_claims: true,
16  },
17  spec: {
18    fields: [
19      { title: "Key features", kind: "list", count: 5, min_chars: 0, max_chars: 80, prompt: "<<llm>>" },
20      { title: "Fitment notes", kind: "text", min_chars: 0, max_chars: 160, prompt: "State compatible vehicles from <<Brand>> data if present: <<llm>>" },
21    ],
22    web_search: false,
23    check_claims: true,
24  },
25  blank: { fields: [{ title: "", kind: "text", min_chars: 0, max_chars: 200, prompt: "" }], web_search: true, check_claims: true },
26};
27
28const TEMPLATE_LABELS: Record<string, string> = { marketing: "Marketing copy", spec: "Spec sheet", blank: "Blank" };
29
30type PreviewField = { title?: string; kind?: string };
31type PreviewRow = Record<string, string>;
32const TEXT_FILLERS = ["Ceramic composite, quieter stops with less brake dust.", "Semi-metallic blend built for heat resistance under load.", "Organic compound tuned for a smooth, quiet ride."];
33const LIST_FILLERS = ["Low dust, quiet, OE fit", "Ceramic compound, wear indicator", "Direct bolt-on, no modification"];
34
35// The console's stub for what the app would run against unsaved settings: a
36// few sample rows, one column per field currently in the form.
37function PreviewTable({ value }: { value: Record<string, unknown> | undefined }) {
38  const fields = Array.isArray(value?.fields) ? (value!.fields as PreviewField[]) : [];
39  const columns: TableColumn<PreviewRow>[] = useMemo(
40    () => (fields.length > 0 ? fields.map((f, i) => ({ key: f.title || `field-${i}`, header: f.title || "Untitled field" })) : [{ key: "empty", header: "Preview" }]),
41    [JSON.stringify(fields.map((f) => [f.title, f.kind]))],
42  );
43  const rows: PreviewRow[] = useMemo(() => {
44    if (fields.length === 0) return [{ empty: "Add a field to preview it here" }, { empty: "" }, { empty: "" }];
45    return [0, 1, 2].map((i) => Object.fromEntries(fields.map((f, fi) => [f.title || `field-${fi}`, f.kind === "list" ? LIST_FILLERS[i % LIST_FILLERS.length]! : TEXT_FILLERS[i % TEXT_FILLERS.length]!])));
46  }, [JSON.stringify(fields.map((f) => [f.title, f.kind]))]);
47
48  return (
49    <Card title="Live preview" subtitle="3 sample rows" noAnimate>
50      <Table columns={columns} rows={rows} rowKey={(_row, i) => i} caption="Preview runs against unsaved settings" density="compact" />
51    </Card>
52  );
53}
54
55export function ModuleContentGeneration() {
56  const ref = useRef<SchemaFormHandle>(null);
57  const [template, setTemplate] = useState<string>("marketing");
58  const [value, setValue] = useState<Record<string, unknown>>(TEMPLATES.marketing!);
59  const [tier, setTier] = useState<XTier>("customer");
60  const [validity, setValidity] = useState<SchemaFormValidity | null>(null);
61  const [reviewing, setReviewing] = useState(false);
62  const [result, setResult] = useState<string | null>(null);
63
64  return (
65    <div className="flex flex-col gap-4">
66      <div className="flex flex-wrap items-center gap-2">
67        <span className="text-base-content/65 text-xs">Template</span>
68        {Object.keys(TEMPLATES).map((id) => (
69          <Button
70            key={id}
71            size="xs"
72            variant={template === id ? "solid" : "ghost"}
73            color="primary"
74            shade
75            onClick={() => {
76              setTemplate(id);
77              setValue(TEMPLATES[id]!);
78              setResult(null);
79            }}
80          >
81            {TEMPLATE_LABELS[id]}
82          </Button>
83        ))}
84        <Button size="xs" variant="ghost" shade Icon="Refresh" disabled={!validity?.isDirty} onClick={() => ref.current?.resetToPreset()}>
85          Reset to template
86        </Button>
87        {validity && <span className="text-base-content/65 text-xs">{validity.isDirty ? "edited since the template" : "matches the template"}</span>}
88        {/* The viewer switch is the page's demo chrome, not a module control; it sits apart so it never reads as a fourth template. */}
89        <span className="ml-auto flex items-center gap-2">
90          <span className="text-base-content/65 text-xs">Viewer</span>
91          {(["customer", "admin"] as const).map((t) => (
92            <Button key={t} size="xs" variant={tier === t ? "solid" : "ghost"} color="neutral" shade onClick={() => setTier(t)}>
93              {t.charAt(0).toUpperCase() + t.slice(1)}
94            </Button>
95          ))}
96        </span>
97      </div>
98      <SchemaForm
99        ref={ref}
100        schema={fixture}
101        value={value}
102        onChange={setValue}
103        mode={reviewing ? "review" : "edit"}
104        tier={tier}
105        settings={{ module_version: "v3" }}
106        context={FILE_CONTEXT}
107        resolveOptions={resolveModuleOptions}
108        presets={TEMPLATES}
109        activePreset={template}
110        aside={<PreviewTable value={value} />}
111        onValidityChange={setValidity}
112        onEditSection={() => setReviewing(false)}
113      />
114      <div className="flex items-center gap-2">
115        <Button
116          size="sm"
117          color="primary"
118          onClick={() => {
119            const out = ref.current?.submit();
120            setResult(out ? `Ready to run: ${Object.keys(out).length} settings` : "Fix the errors above");
121          }}
122        >
123          Validate
124        </Button>
125        <Button size="sm" variant="ghost" shade onClick={() => setReviewing((r) => !r)}>
126          {reviewing ? "Back to edit" : "Review"}
127        </Button>
128        {result && <span className="text-base-content/65 text-xs">{result}</span>}
129      </div>
130    </div>
131  );
132}
133