1"use client";
2
3import { Button, Card, SelectAllCell, SelectionCell, Table, Tooltip, pushAlert, useTableSelection } from "@versable-git/ui";
4import type { TableColumn } from "@versable-git/ui";
5import { useState } from "react";
6
7// Both apps grow the same second toolbar row once a table's select column
8// turns real: a live count, and an action whose own label carries the count
9// rather than a second button appearing beside a static one.
10type Row = { id: string; sku: string; name: string; issue: string };
11
12const ROWS: Row[] = [
13  { id: "r1", sku: "BRK-4471", name: "Ceramic brake pad set", issue: "Missing image" },
14  { id: "r2", sku: "FLT-2290", name: "Cabin air filter", issue: "Price below floor" },
15  { id: "r3", sku: "SPK-8812", name: "Iridium spark plug", issue: "Duplicate SKU" },
16  { id: "r4", sku: "OIL-1130", name: "Full-synthetic 5W-30", issue: "Missing weight" },
17  { id: "r5", sku: "WPR-6003", name: "All-season wiper blade", issue: "Unmapped category" },
18];
19
20export function BulkSelectionBar() {
21  const selection = useTableSelection<Row>({ items: ROWS });
22  const [busy, setBusy] = useState(false);
23
24  const columns: TableColumn<Row>[] = [
25    {
26      key: "__select",
27      rawHeader: true,
28      width: "40px",
29      noCopy: true,
30      // After walmart-mvp ErrorManagement.tsx:812: the header tooltip states
31      // exactly what's picked, not just how many.
32      header: (
33        <Tooltip content={selection.isAnySelected ? `${selection.selectedIds.size} of ${ROWS.length} selected` : `Select all ${ROWS.length} rows`}>
34          <span className="inline-flex">
35            <SelectAllCell selection={selection} />
36          </span>
37        </Tooltip>
38      ),
39      render: (r) => <SelectionCell selection={selection} row={r} />,
40    },
41    { key: "sku", header: "SKU", render: (r) => <span className="font-mono text-xs">{r.sku}</span> },
42    { key: "name", header: "Item" },
43    { key: "issue", header: "Flag", render: (r) => <span className="text-base-content/65">{r.issue}</span> },
44  ];
45
46  const handleSkip = async () => {
47    setBusy(true);
48    // After speedway review.tsx:1490-1518 (ReviewBulkBar): one op for every
49    // checked row, reported through a toast, never a silent bulk write.
50    await pushAlert.promise(new Promise((resolve) => setTimeout(resolve, 900)), {
51      pending: `Skipping ${selection.selectedIds.size} row(s)...`,
52      success: "Skipped.",
53      error: "Could not skip.",
54    });
55    setBusy(false);
56    selection.clear();
57  };
58
59  return (
60    <Card title="Flagged rows" subtitle={`${ROWS.length} rows, ${selection.selectedIds.size} selected`} noAnimate>
61      <Table<Row> columns={columns} rows={ROWS} rowKey={(r) => r.id} bleed />
62      {selection.isAnySelected && (
63        <div className="bg-base-200 rounded-field mt-3 flex flex-wrap items-center gap-1 px-3 py-1.5">
64          <span className="text-sm font-medium">{selection.selectedRows.length} selected</span>
65          <div className="ml-auto flex items-center gap-2">
66            <Button size="sm" variant="text" content="Clear" onClick={selection.clear} />
67            <Button
68              size="sm"
69              variant="outline"
70              color="warning"
71              Icon="Ignore"
72              content={`Skip selected (${selection.selectedIds.size})`}
73              loading={busy}
74              disabled={busy}
75              onClick={handleSkip}
76            />
77          </div>
78        </div>
79      )}
80    </Card>
81  );
82}
83