1"use client";
2
3import { Button, Card, Chip, SchemaForm, type SchemaFormHandle, type XTier } from "@versable-git/ui";
4import { useRef, useState } from "react";
5import fixture from "../../../../../../docs/plan/65-schema-form-fixtures/part-type-matching.params.schema.json";
6import { FILE_CONTEXT, resolveModuleOptions } from "../../components/schema-form/examples/module-stubs";
7
8// Stub match rows for the aside: three sample titles with a faked matched
9// part type and confidence. The schema itself has no confidence field; a
10// live match step runs on the console's side once search_columns and
11// vocabulary are set, this is a demo affordance so the threshold below
12// visibly does something.
13const SAMPLE_MATCHES = [
14  { title: "Brake pad set", matched: "Brake pad", confidence: 92 },
15  { title: "Rotor", matched: "Rotor", confidence: 78 },
16  { title: "Cabin filter", matched: "Cabin filter", confidence: 54 },
17];
18
19function MatchPreview({ threshold }: { threshold: number }) {
20  return (
21    <Card title="Match preview" subtitle="3 sample rows, stub matches" noAnimate>
22      <div className="flex flex-col gap-2.5">
23        {SAMPLE_MATCHES.map((row) => {
24          const below = row.confidence < threshold;
25          return (
26            <div key={row.title} className="flex flex-col gap-0.5">
27              <div className="flex items-center justify-between gap-2">
28                <span className={below ? "text-base-content/65 text-sm" : "text-sm"}>{row.title}</span>
29                <div className="flex items-center gap-2">
30                  <Chip size="sm" variant={below ? "ghost" : "soft"} color={below ? "neutral" : "primary"}>
31                    {row.matched}
32                  </Chip>
33                  <span className={`text-xs tabular-nums ${below ? "text-base-content/65" : "text-base-content/70"}`}>{row.confidence}%</span>
34                </div>
35              </div>
36              {below && <span className="text-base-content/65 text-xs italic">below threshold</span>}
37            </div>
38          );
39        })}
40      </div>
41    </Card>
42  );
43}
44
45export function ModulePartTypeMatching() {
46  const ref = useRef<SchemaFormHandle>(null);
47  const [value, setValue] = useState<Record<string, unknown>>();
48  const [tier, setTier] = useState<XTier>("customer");
49  const [threshold, setThreshold] = useState(70);
50  const [reviewing, setReviewing] = useState(false);
51  const [result, setResult] = useState<string | null>(null);
52
53  return (
54    <div className="flex flex-col gap-4">
55      <div className="flex flex-wrap items-center gap-2">
56        <span className="text-base-content/65 text-xs">Viewer</span>
57        {(["customer", "admin"] as const).map((t) => (
58          <Button key={t} size="xs" variant={tier === t ? "solid" : "ghost"} color="primary" shade onClick={() => setTier(t)}>
59            {t.charAt(0).toUpperCase() + t.slice(1)}
60          </Button>
61        ))}
62        <span className="text-base-content/65 ml-3 text-xs">Confidence threshold</span>
63        <input
64          type="range"
65          min={0}
66          max={100}
67          value={threshold}
68          onChange={(e) => setThreshold(Number(e.target.value))}
69          className="range range-primary range-sm w-32"
70        />
71        <span className="text-base-content/70 text-xs tabular-nums">{threshold}%</span>
72      </div>
73      <SchemaForm
74        ref={ref}
75        schema={fixture}
76        value={value}
77        onChange={setValue}
78        mode={reviewing ? "review" : "edit"}
79        tier={tier}
80        context={FILE_CONTEXT}
81        resolveOptions={resolveModuleOptions}
82        aside={<MatchPreview threshold={threshold} />}
83        onEditSection={() => setReviewing(false)}
84      />
85      <div className="flex items-center gap-2">
86        <Button
87          size="sm"
88          color="primary"
89          onClick={() => {
90            const out = ref.current?.submit();
91            setResult(out ? `Ready to run: ${Object.keys(out).length} settings` : "Fix the errors above");
92          }}
93        >
94          Validate
95        </Button>
96        <Button size="sm" variant="ghost" shade onClick={() => setReviewing((r) => !r)}>
97          {reviewing ? "Back to edit" : "Review"}
98        </Button>
99        {result && <span className="text-base-content/65 text-xs">{result}</span>}
100      </div>
101    </div>
102  );
103}
104