Data table — looks

"use client";

import { type ColumnDef, DataTable, Money, Segmented, 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),
}));

const SITE_OPTIONS = ["Gulshan", "Banani", "Dhanmondi"].map((x) => ({ value: x, label: x }));

const STATUS_OPTIONS = ["Paid", "Due", "Overdue"].map((x) => ({ value: x, label: x }));

const COLUMNS: ColumnDef<Row, unknown>[] = [
  { accessorKey: "plate", header: "Plate", meta: { strong: true, filter: { type: "text" }, edit: { type: "text" } } },
  { accessorKey: "site", header: "Site", meta: { filter: { type: "select" }, edit: { type: "select", options: SITE_OPTIONS } } },
  { 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: "amount", header: "Amount", meta: { align: "right", filter: { type: "number", label: "Amount (paisa)" } }, cell: ({ row }) => <Money value={row.original.amount / 100} /> },
  {
    accessorKey: "status",
    header: "Status",
    meta: { filter: { type: "select" }, edit: { type: "select", options: STATUS_OPTIONS } },
    cell: ({ row }) => {
      const s = row.original.status;
      return <StatusBadge label={s} tone={s === "Paid" ? "success" : s === "Due" ? "warning" : "danger"} />;
    },
  },
];

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)));
      },
    },
  };
}

export default function TableLooks() {
  const [look, setLook] = React.useState<"striped" | "cards" | "minimal">("cards");
  const { rows, handlers } = useEditableRows(ROWS);
  return (
    <div className="space-y-3">
      <Segmented value={look} onChange={setLook} size="md" options={[{ value: "striped", label: "Striped" }, { value: "cards", label: "Cards" }, { value: "minimal", label: "Minimal" }]} />
      <DataTable key={look} variant={look} columns={COLUMNS} data={rows} getRowId={(r) => r.id} pageSize={5} exportName="playground" {...handlers} />
    </div>
  );
}