1"use client";
2
3import { Button, EmptyState, Input, pushAlert, SkeletonGroup } from "@versable-git/ui";
4import { useEffect, useState } from "react";
5
6// A catalog's source-file library, standing in for whatever record type a
7// real attach flow picks from (speedway: uploaded files; walmart: catalog
8// source files). Three are pre-checked so "some selected" is visible without
9// typing or clicking anything first.
10interface AttachableFile {
11  id: string;
12  filename: string;
13  type: "CSV" | "XLSX" | "XML" | "JSON";
14  rows: number;
15}
16
17const FILES: AttachableFile[] = [
18  { id: "f1", filename: "fitment-2024.csv", type: "CSV", rows: 1204 },
19  { id: "f2", filename: "pricing-update.xlsx", type: "XLSX", rows: 340 },
20  { id: "f3", filename: "vendor-catalog.xml", type: "XML", rows: 5610 },
21  { id: "f4", filename: "warehouse-inventory.csv", type: "CSV", rows: 892 },
22  { id: "f5", filename: "supplier-mapping.json", type: "JSON", rows: 76 },
23  { id: "f6", filename: "brake-pads-spec.xlsx", type: "XLSX", rows: 58 },
24  { id: "f7", filename: "tire-sizes.csv", type: "CSV", rows: 214 },
25  { id: "f8", filename: "oil-filters-q3.xlsx", type: "XLSX", rows: 130 },
26];
27
28// Fixture request standing in for the real attach call. After
29// walmart-mvp/frontend/src/features/catalog/SourceFilePicker.tsx:60-63:
30// catalogApi.attachSourceFiles(catalogId, ids), then onAttached refreshes
31// the parent record. Here that refresh is "mark these rows attached."
32function attachFiles(ids: string[]): Promise<void> {
33  return new Promise((resolve) => setTimeout(resolve, 900));
34}
35
36export function SearchableAttachList() {
37  const [loading, setLoading] = useState(true);
38  const [query, setQuery] = useState("");
39  const [selected, setSelected] = useState<Set<string>>(new Set(["f2", "f5", "f7"]));
40  const [attached, setAttached] = useState<Set<string>>(new Set());
41
42  useEffect(() => {
43    const t = setTimeout(() => setLoading(false), 700);
44    return () => clearTimeout(t);
45  }, []);
46
47  const filtered = FILES.filter((f) => f.filename.toLowerCase().includes(query.toLowerCase()));
48
49  function toggle(id: string) {
50    setSelected((prev) => {
51      const next = new Set(prev);
52      if (next.has(id)) next.delete(id);
53      else next.add(id);
54      return next;
55    });
56  }
57
58  async function handleAttach() {
59    const ids = Array.from(selected);
60    if (ids.length === 0) return;
61    try {
62      // After NewJobForm.tsx / SourceFilePicker.tsx: the count drives both
63      // the button label and the toast text, never a second confirm step.
64      await pushAlert.promise(attachFiles(ids), {
65        pending: `Attaching ${ids.length} ${ids.length === 1 ? "file" : "files"}`,
66        success: `${ids.length} ${ids.length === 1 ? "file" : "files"} attached.`,
67        error: "Something went wrong. Try again.",
68      });
69      setAttached((prev) => new Set([...prev, ...ids]));
70      setSelected(new Set());
71    } catch {
72      // the promise toast already showed the error
73    }
74  }
75
76  return (
77    <div className="flex flex-col gap-3">
78      <div className="flex items-center gap-3">
79        <Input
80          aria-label="Search files"
81          presets="search"
82          size="sm"
83          placeholder={`Search ${FILES.length} files`}
84          value={query}
85          onChange={(e) => setQuery(e.currentTarget.value)}
86          fullWidth
87        />
88        {selected.size > 0 && (
89          <span className="text-base-content/65 shrink-0 text-xs">{selected.size} selected</span>
90        )}
91      </div>
92
93      {loading ? (
94        <SkeletonGroup preset="lines" lines={5} stagger />
95      ) : filtered.length === 0 ? (
96        <EmptyState
97          compact
98          Icon="Search"
99          title={`No files match "${query}"`}
100          description="Try a different name, or clear the search."
101          action={<Button size="sm" variant="ghost" content="Clear search" onClick={() => setQuery("")} />}
102        />
103      ) : (
104        <ul className="border-base-300 divide-base-200 max-h-64 min-h-0 divide-y overflow-y-auto rounded-lg border">
105          {filtered.map((f) => {
106            const isAttached = attached.has(f.id);
107            const isChecked = isAttached || selected.has(f.id);
108            return (
109              <li
110                key={f.id}
111                className={`flex items-center justify-between gap-3 px-3 py-2 ${
112                  isChecked && !isAttached ? "bg-primary/5" : ""
113                }`}
114              >
115                <Input
116                  element="checkbox"
117                  size="sm"
118                  checked={isChecked}
119                  disabled={isAttached}
120                  onChange={() => toggle(f.id)}
121                  after={
122                    <span className="flex min-w-0 flex-col">
123                      <span className="mono truncate text-sm">{f.filename}</span>
124                      <span className="text-base-content/65 text-xs">
125                        {f.type} · {f.rows.toLocaleString()} rows
126                      </span>
127                    </span>
128                  }
129                />
130                {isAttached && (
131                  <span className="text-base-content/45 shrink-0 text-xs font-medium tracking-wide uppercase">
132                    Attached
133                  </span>
134                )}
135              </li>
136            );
137          })}
138        </ul>
139      )}
140
141      <div className="flex justify-end">
142        <Button
143          size="sm"
144          color="primary"
145          content={selected.size > 0 ? `Attach ${selected.size}` : "Attach"}
146          disabled={selected.size === 0}
147          onClick={handleAttach}
148        />
149      </div>
150    </div>
151  );
152}
153