1"use client";
2
3import { Card, FieldChip, Tooltip } from "@versable-git/ui";
4
5// The row vocabulary a record's fields actually need, gathered into one
6// fixture record. mono + n/a fallback come from walmart-mvp's DetailRow
7// (ItemDetailPanel.tsx:411-430); the raw field key beside a label is
8// FieldChip's own documented job (a data field's name, wherever one is
9// shown); the required-but-missing warning treatment comes from walmart-mvp's
10// separate AttributesList (asterisk-prefixed keys in warning tone,
11// ItemDetailPanel.tsx:430-453); "Generated by" echoes speedway's
12// ContentFieldsTable "By" column, which real usage gates to staff.
13type AttributeRow = {
14  label: string;
15  fieldKey?: string;
16  value?: string | null;
17  mono?: boolean;
18  tooltip?: string;
19  generatedBy?: string;
20  critical?: boolean;
21};
22
23type AttributeSection = {
24  label: string;
25  rows: AttributeRow[];
26};
27
28const SECTIONS: AttributeSection[] = [
29  {
30    label: "Identity",
31    rows: [
32      { label: "SKU", fieldKey: "sku", value: "BRK-Q3-40821", mono: true },
33      { label: "UPC", fieldKey: "upc", value: "038932107744", mono: true },
34      { label: "Brand", value: "Raybestos" },
35    ],
36  },
37  {
38    label: "Specifications",
39    rows: [
40      {
41        label: "Material",
42        value: "Semi-metallic composite with a ceramic-blended friction layer for quieter stops",
43        tooltip: "Semi-metallic composite with a ceramic-blended friction layer for quieter stops",
44      },
45      { label: "Rotor diameter", value: "11.65 in" },
46      { label: "Bolt pattern", value: null, critical: true },
47    ],
48  },
49  {
50    label: "Marketing content",
51    rows: [
52      {
53        label: "Description",
54        value: "Engineered for daily-driver stopping power without the squeal.",
55        generatedBy: "gemini-3.5-pro, run #4821",
56      },
57      { label: "Fitment notes", value: null },
58    ],
59  },
60];
61
62function Row({ row }: { row: AttributeRow }) {
63  const valueClass = ["m-0 text-sm", row.mono && "text-base-content/70 font-mono text-xs"]
64    .filter(Boolean)
65    .join(" ");
66
67  return (
68    <>
69      <dt className="text-base-content/65 flex items-center gap-1.5 text-sm">
70        {row.label}
71        {row.fieldKey && <FieldChip>{row.fieldKey}</FieldChip>}
72      </dt>
73      <dd className={valueClass}>
74        {row.value ? (
75          row.tooltip ? (
76            <Tooltip content={row.tooltip} placement="top-start">
77              <span className="block max-w-[280px] truncate">{row.value}</span>
78            </Tooltip>
79          ) : (
80            row.value
81          )
82        ) : (
83          <span className={row.critical ? "text-warning italic" : "text-base-content/65 italic"}>
84            {row.critical ? "Required field missing" : "n/a"}
85          </span>
86        )}
87        {row.generatedBy && (
88          <span className="text-base-content/45 mt-0.5 block text-xs">Generated by {row.generatedBy}</span>
89        )}
90      </dd>
91    </>
92  );
93}
94
95function AttributeGrid({ sections }: { sections: AttributeSection[] }) {
96  return (
97    <div className="flex flex-col gap-4">
98      {sections.map((section) => (
99        <div key={section.label} className="flex flex-col gap-1.5">
100          <span className="text-base-content/65 text-xs font-semibold tracking-wide uppercase">
101            {section.label}
102          </span>
103          <dl className="m-0 grid grid-cols-[max-content_1fr] gap-x-4 gap-y-2">
104            {section.rows.map((row) => (
105              <Row key={row.label} row={row} />
106            ))}
107          </dl>
108        </div>
109      ))}
110    </div>
111  );
112}
113
114export function AttributeSpecGrid() {
115  return (
116    <Card title="Brake pad, front axle" subtitle="Generated 2 minutes ago" noAnimate>
117      <AttributeGrid sections={SECTIONS} />
118    </Card>
119  );
120}
121