"use client";

import type { ColumnDef, Row, Table } from "@tanstack/react-table";

import { OrderBlotterRowActions } from "@/app/dashboard/order-blotter/_components/order-blotter-row-actions";
import { Checkbox } from "@/components/ui/checkbox";

import type { OrderBlotterRow } from "./schema";

function formatTxnId(value: number | null) {
  return value != null ? String(value) : "—";
}

function SelectAllHeader({ table }: { table: Table<OrderBlotterRow> }) {
  const pageRows = table.getRowModel().rows;
  const allSelected = pageRows.length > 0 && pageRows.every((row) => row.getIsSelected());
  const someSelected = pageRows.some((row) => row.getIsSelected());

  return (
    <Checkbox
      checked={allSelected ? true : someSelected ? "indeterminate" : false}
      onCheckedChange={(value) => {
        const checked = value === true;
        for (const row of pageRows) {
          row.toggleSelected(checked);
        }
      }}
      aria-label="Select all on this page"
      className="translate-y-px"
    />
  );
}

function SelectRowCell({ row }: { row: Row<OrderBlotterRow> }) {
  return (
    <Checkbox
      checked={row.getIsSelected()}
      onCheckedChange={(value) => row.toggleSelected(value === true)}
      aria-label={`Select order blotter ${row.original.id}`}
      className="translate-y-px"
    />
  );
}

export function createOrderBlotterColumns(options: {
  showPortfolio?: boolean;
  basePath?: string;
}): ColumnDef<OrderBlotterRow>[] {
  const basePath = options.basePath ?? "/dashboard/order-blotter";

  return [
    {
      id: "select",
      header: ({ table }) => <SelectAllHeader table={table} />,
      cell: ({ row }) => <SelectRowCell row={row} />,
      enableSorting: false,
      enableHiding: false,
    },
    {
      id: "serial",
      header: "S/N",
      cell: ({ row, table }) => {
        const { pageIndex, pageSize } = table.getState().pagination;
        return pageIndex * pageSize + row.index + 1;
      },
      enableSorting: false,
    },
    {
      accessorKey: "indexClientName",
      header: "Client",
      cell: ({ row }) => (
        <span className="max-w-[220px] truncate" title={row.original.indexClientName ?? undefined}>
          {row.original.indexClientName ?? "—"}
        </span>
      ),
    },
    {
      accessorKey: "transactionId",
      header: "Txn ID",
      cell: ({ row }) => (
        <span className="font-mono text-xs tabular-nums">{formatTxnId(row.original.transactionId)}</span>
      ),
    },
    {
      accessorKey: "indexOrderNumber",
      header: "Order #",
      cell: ({ row }) => row.original.indexOrderNumber ?? "—",
    },
    {
      accessorKey: "updatedAt",
      header: "Updated",
      cell: ({ row }) => (
        <span className="whitespace-nowrap text-muted-foreground text-xs tabular-nums">{row.original.updatedAt}</span>
      ),
    },
    {
      id: "options",
      header: () => <span className="block w-full text-right">Options</span>,
      cell: ({ row }) => <OrderBlotterRowActions row={row.original} basePath={basePath} />,
      enableSorting: false,
    },
  ];
}