1"use client";
2
3import { useState } from "react";
4import { FieldChip, RenderIcon } from "@versable-git/ui";
5
6// Mid-truncation keeps the start and the extension; the middle elides, so
7// two long exports from the same vendor still read differently. Clicking a
8// clickable chip opens it below, standing in for the real shared preview host.
9function midTruncate(name: string, max = 28): string {
10  if (name.length <= max) return name;
11  const keep = Math.floor((max - 1) / 2);
12  return `${name.slice(0, keep)}…${name.slice(-keep)}`;
13}
14
15function FileChip({
16  filename,
17  clickable,
18  opened,
19  onOpen,
20}: {
21  filename: string;
22  clickable?: boolean;
23  opened?: boolean;
24  onOpen?: (name: string) => void;
25}) {
26  return (
27    <FieldChip
28      tone="file"
29      onClick={clickable ? () => onOpen?.(filename) : undefined}
30      className={
31        opened
32          ? "bg-warning/15 text-warning ring-warning/25 w-fit max-w-full whitespace-nowrap"
33          : "bg-base-200 text-base-content/70 ring-base-300 w-fit max-w-full whitespace-nowrap"
34      }
35    >
36      <span className="inline-flex items-center gap-1">
37        <RenderIcon Icon="FileSheet" size={12} className="shrink-0" />
38        <span className="font-mono text-xs">{midTruncate(filename)}</span>
39        {clickable ? <span className="text-base-content/65 text-[10px]">↗</span> : null}
40      </span>
41    </FieldChip>
42  );
43}
44
45export function FileChips() {
46  const [opened, setOpened] = useState<string | null>(null);
47
48  return (
49    <div className="flex flex-col gap-6">
50      <div className="flex flex-col gap-2">
51        <span className="text-base-content/45 text-xs font-medium tracking-wide uppercase">Clickable, opens a preview</span>
52        <div className="flex flex-wrap gap-2">
53          <FileChip
54            clickable
55            filename="brake-pads-q3-vendor-export.xlsx"
56            opened={opened === "brake-pads-q3-vendor-export.xlsx"}
57            onOpen={setOpened}
58          />
59          <FileChip clickable filename="fitment.csv" opened={opened === "fitment.csv"} onOpen={setOpened} />
60        </div>
61      </div>
62      <div className="flex flex-col gap-2">
63        <span className="text-base-content/45 text-xs font-medium tracking-wide uppercase">Plain, nothing to open</span>
64        <div className="flex flex-wrap gap-2">
65          <FileChip filename="2026-08-lighting-catalog-full-export.xml" />
66        </div>
67      </div>
68      <div className="text-base-content/65 text-xs">
69        {opened != null ? (
70          <>
71            Preview open: <span className="font-mono">{opened}</span>
72          </>
73        ) : (
74          "Click a file chip to open its preview."
75        )}
76      </div>
77    </div>
78  );
79}
80