Multi-select & Bulk Actions

"use client";

import { useState, useCallback } from "react";

function MultiSelectTable({ rows }: { rows: Row[] }) {
  const [selected, setSelected] = useState<Set<number>>(new Set());

  const toggleAll = useCallback(() => {
    setSelected((s) =>
      s.size === rows.length
        ? new Set()
        : new Set(rows.map((r) => r.id))
    );
  }, [rows]);

  const toggle = useCallback((id: number) => {
    setSelected((s) => {
      const next = new Set(s);
      next.has(id) ? next.delete(id) : next.add(id);
      return next;
    });
  }, []);

  const allChecked  = selected.size === rows.length;
  const someChecked = selected.size > 0 && !allChecked;

  return (
    <div>
      {/* Bulk action bar — only mounts when items are selected */}
      {selected.size > 0 && (
        <div
          role="toolbar"
          aria-label="Bulk actions"
          className="flex items-center gap-3 p-3 mb-3 rounded-xl
            bg-[rgb(var(--accent-subtle))] border border-[rgb(var(--accent-muted))]"
        >
          <span className="text-[13px] font-medium text-[rgb(var(--accent))]">
            {selected.size} selected
          </span>
          <Button size="sm" variant="ghost" onClick={handleDelete}>
            Delete
          </Button>
          <Button size="sm" variant="ghost" onClick={handleExport}>
            Export
          </Button>
        </div>
      )}

      <table aria-label="Files" aria-multiselectable="true">
        <thead>
          <tr>
            <th>
              <input
                type="checkbox"
                aria-label="Select all"
                checked={allChecked}
                ref={(el) => { if (el) el.indeterminate = someChecked; }}
                onChange={toggleAll}
              />
            </th>
            <th>Name</th>
            <th>Type</th>
            <th>Size</th>
            <th>Modified</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((row) => (
            <tr
              key={row.id}
              aria-selected={selected.has(row.id)}
              onClick={() => toggle(row.id)}
            >
              <td>
                <input
                  type="checkbox"
                  aria-label={`Select ${row.name}`}
                  checked={selected.has(row.id)}
                  onChange={() => toggle(row.id)}
                  onClick={(e) => e.stopPropagation()}
                />
              </td>
              <td>{row.name}</td>
              <td>{row.type}</td>
              <td>{row.size}</td>
              <td>{row.modified}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}