1"use client";
2
3import { Button, Card, Progress, SchemaForm, type SchemaFormHandle, type XTier } from "@versable-git/ui";
4import { useRef, useState } from "react";
5import fixture from "../../../../../../docs/plan/65-schema-form-fixtures/attribute-normalization.params.schema.json";
6import { FILE_CONTEXT, resolveModuleOptions } from "../../components/schema-form/examples/module-stubs";
7
8type PerPartTypeRow = { part_type?: string; attributes?: string[] };
9
10// A stand-in for the run's own coverage read: a real console derives this
11// percent from the file's raw values (context["item.coverage(attributes.raw)"]
12// feeds the same number into the form's per-row hint), this card just hashes
13// the row's part type so every row shows a different, stable bar.
14function coveragePercent(partType: string): number {
15  let sum = 0;
16  for (let i = 0; i < partType.length; i++) sum += partType.charCodeAt(i);
17  return 40 + (sum % 55);
18}
19
20function CoverageSummary({ value }: { value: Record<string, unknown> | undefined }) {
21  const rows = Array.isArray(value?.per_part_type) ? (value!.per_part_type as PerPartTypeRow[]) : [];
22  return (
23    <Card title="Coverage" subtitle="Raw values found per part type" noAnimate>
24      <div className="flex flex-col gap-3">
25        {rows.length === 0 ? (
26          <span className="text-base-content/65 text-sm">Waiting on the file&apos;s part types.</span>
27        ) : (
28          rows.map((row, i) => (
29            <div key={row.part_type ?? i} className="flex flex-col gap-1">
30              <span className="text-sm">{row.part_type}</span>
31              <Progress value={coveragePercent(row.part_type ?? "")} label color="primary" size="sm" aria-label={`${row.part_type ?? "row"} coverage`} />
32            </div>
33          ))
34        )}
35        <p className="text-base-content/65 text-xs">
36          Coverage is read from the file; the run rewrites the raw values into the chosen attributes.
37        </p>
38      </div>
39    </Card>
40  );
41}
42
43export function ModuleAttributeNormalization() {
44  const ref = useRef<SchemaFormHandle>(null);
45  const [value, setValue] = useState<Record<string, unknown>>();
46  const [tier, setTier] = useState<XTier>("customer");
47  const [reviewing, setReviewing] = useState(false);
48  const [result, setResult] = useState<string | null>(null);
49
50  return (
51    <div className="flex flex-col gap-4">
52      <div className="flex flex-wrap items-center gap-2">
53        <span className="text-base-content/65 text-xs">Viewer</span>
54        {(["customer", "admin"] as const).map((t) => (
55          <Button key={t} size="xs" variant={tier === t ? "solid" : "ghost"} color="primary" shade onClick={() => setTier(t)}>
56            {t.charAt(0).toUpperCase() + t.slice(1)}
57          </Button>
58        ))}
59      </div>
60      <SchemaForm
61        ref={ref}
62        schema={fixture}
63        value={value}
64        onChange={setValue}
65        mode={reviewing ? "review" : "edit"}
66        tier={tier}
67        settings={{ module_version: "v3" }}
68        context={FILE_CONTEXT}
69        resolveOptions={resolveModuleOptions}
70        onEditSection={() => setReviewing(false)}
71      />
72      <CoverageSummary value={value} />
73      <div className="flex items-center gap-2">
74        <Button
75          size="sm"
76          color="primary"
77          onClick={() => {
78            const out = ref.current?.submit();
79            setResult(out ? `Ready to run: ${Object.keys(out).length} settings` : "Fix the errors above");
80          }}
81        >
82          Validate
83        </Button>
84        <Button size="sm" variant="ghost" shade onClick={() => setReviewing((r) => !r)}>
85          {reviewing ? "Back to edit" : "Review"}
86        </Button>
87        {result && <span className="text-base-content/65 text-xs">{result}</span>}
88      </div>
89    </div>
90  );
91}
92