Data table — editable (bordered)

"use client";

import { type ColumnDef, DataTable, StatusBadge } from "@waveinno/ui";
import * as React from "react";

interface Row {
  id: string;
  plate: string;
  site: string;
  amount: number;
  status: "Paid" | "Due" | "Overdue";
  /** "2026-10-01" */
  date: string;
  hours: number;
}

const ROWS: Row[] = Array.from({ length: 24 }, (_, i) => ({
  id: `r${i}`,
  plate: `DHAKA METRO-GA ${11 + (i % 9)}-${(4821 + i * 37) % 9999}`,
  site: ["Gulshan", "Banani", "Dhanmondi"][i % 3],
  amount: 6000 + ((i * 1375) % 24000),
  status: (["Paid", "Due", "Overdue"] as const)[i % 3],
  date: `2026-09-${String(8 + i).padStart(2, "0")}`,
  hours: 1 + ((i * 7) % 11),
}));

function useEditableRows(initial: Row[]) {
  const [rows, setRows] = React.useState(initial);
  const patch = (ids: Set<string>, col: string, value: string) =>
    setRows((all) => all.map((r) => (ids.has(r.id) ? { ...r, [col]: col === "hours" ? Number(value) : value } : r)));
  return {
    rows,
    handlers: {
      getRowLabel: (r: Row) => `${r.plate} · ${r.site}`,
      onCellEdit: async (row: Row, col: string, value: string) => {
        await new Promise((r) => setTimeout(r, 300));
        patch(new Set([row.id]), col, value);
      },
      onBulkEdit: async (picked: Row[], col: string, value: string) => {
        await new Promise((r) => setTimeout(r, 300));
        patch(new Set(picked.map((p) => p.id)), col, value);
      },
      onBulkDelete: async (picked: Row[]) => {
        await new Promise((r) => setTimeout(r, 300));
        const ids = new Set(picked.map((p) => p.id));
        setRows((all) => all.filter((r) => !ids.has(r.id)));
      },
    },
  };
}

const EDIT_COLUMNS: ColumnDef<Row, unknown>[] = [
  { accessorKey: "plate", header: "Plate", meta: { strong: true, filter: { type: "text" }, edit: { type: "text", validate: (v) => (v.trim().length < 6 ? "Too short for a plate" : null) } } },
  { accessorKey: "site", header: "Site", meta: { filter: { type: "select" }, edit: { type: "select", options: ["Gulshan", "Banani", "Dhanmondi"].map((x) => ({ value: x, label: x })) } } },
  { accessorKey: "date", header: "Date", meta: { filter: { type: "date" }, edit: { type: "date" } } },
  {
    accessorKey: "hours",
    header: "Hours",
    meta: { align: "right", num: true, filter: { type: "number" }, edit: { type: "number", validate: (v) => (Number(v) >= 1 && Number(v) <= 24 ? null : "Between 1 and 24 hours") } },
  },
  {
    accessorKey: "status",
    header: "Status",
    meta: { filter: { type: "select" }, edit: { type: "select", options: ["Paid", "Due", "Overdue"].map((x) => ({ value: x, label: x })) } },
    cell: ({ row }) => {
      const st = row.original.status;
      return <StatusBadge label={st} tone={st === "Paid" ? "success" : st === "Due" ? "warning" : "danger"} />;
    },
  },
];

export default function EditableTable() {
  const { rows, handlers } = useEditableRows(ROWS.slice(0, 8));
  return <DataTable variant="bordered" columns={EDIT_COLUMNS} data={rows} getRowId={(r) => r.id} pageSize={8} {...handlers} />;
}