"use client";

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  Typography,
} from "@mui/material";
import { type ReactNode } from "react";

export type FilterableColumnDef<T> = {
  key: string;
  label: string;
  align?: "left" | "right" | "center";
  value: (row: T) => string | number | null | undefined;
  cell?: (row: T) => ReactNode;
  /** @deprecated Unused — filters removed. */
  filterable?: boolean;
};

type FilterableDataTableProps<T> = {
  rows: T[];
  columns: FilterableColumnDef<T>[];
  getRowKey: (row: T, index: number) => string;
  emptyLabel: string;
  size?: "small" | "medium";
  collapseAfter?: number;
  showAll?: boolean;
  onToggleShowAll?: () => void;
  showAllLabel?: string | ((count: number) => string);
  collapseLabel?: string | ((count: number) => string);
};

const resolveCountLabel = (
  label: string | ((count: number) => string) | undefined,
  count: number,
  fallback: string,
) => (typeof label === "function" ? label(count) : (label ?? fallback));

/** Plain data table (column filters removed). */
export function FilterableDataTable<T>({
  rows,
  columns,
  getRowKey,
  emptyLabel,
  size = "small",
  collapseAfter,
  showAll = false,
  onToggleShowAll,
  showAllLabel,
  collapseLabel,
}: FilterableDataTableProps<T>) {
  const collapsed =
    collapseAfter != null && rows.length > collapseAfter && !showAll;
  const visibleRows = collapsed ? rows.slice(0, collapseAfter) : rows;

  return (
    <>
      <Table size={size}>
        <TableHead>
          <TableRow>
            {columns.map((col) => (
              <TableCell
                key={col.key}
                align={col.align}
                sx={{ fontWeight: 700, whiteSpace: "nowrap" }}
              >
                {col.label}
              </TableCell>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          {visibleRows.length === 0 ? (
            <TableRow>
              <TableCell colSpan={columns.length}>
                <Typography color="text.secondary" variant="body2">
                  {emptyLabel}
                </Typography>
              </TableCell>
            </TableRow>
          ) : (
            visibleRows.map((row, index) => (
              <TableRow key={getRowKey(row, index)}>
                {columns.map((col) => (
                  <TableCell key={col.key} align={col.align}>
                    {col.cell ? col.cell(row) : (col.value(row) ?? "—")}
                  </TableCell>
                ))}
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>
      {collapseAfter != null &&
        rows.length > collapseAfter &&
        onToggleShowAll && (
          <Typography
            variant="caption"
            color="primary"
            sx={{ cursor: "pointer", mt: 0.5, display: "inline-block" }}
            onClick={onToggleShowAll}
          >
            {showAll
              ? resolveCountLabel(collapseLabel, rows.length, `▲ ${rows.length}`)
              : resolveCountLabel(showAllLabel, rows.length, `▼ ${rows.length}`)}
          </Typography>
        )}
    </>
  );
}
