"use client";

import { useMemo } from "react";

import type { GridColDef } from "@mui/x-data-grid";

import { DataTable, DataTableNumberCell } from "@/components/ui/data-table";

import type { CdcIssueMatrixRow } from "./cdc-issue-matrix-data";
import {
  getCdcIssueMatrixColumns,
  type CdcIssueMatrixColumn,
} from "./cdc-issue-matrix-table-config";
import { CdcIssueMatrixTableCell } from "./cdc-issue-matrix-table-cells";
import {
  cdcIssueMatrixText,
  type CdcIssueMatrixLanguage,
} from "./cdc-issue-matrix-i18n";

const PAGE_SIZE = 8;
const ROW_HEIGHT = 74;
const HEADER_HEIGHT = 56;

type CdcIssueMatrixTableProps = {
  rows: CdcIssueMatrixRow[];
  language: CdcIssueMatrixLanguage;
  loading?: boolean;
  error?: string | null;
  showRemark?: boolean;
};

function getColumnWidth(column: CdcIssueMatrixColumn) {
  const width = Number.parseInt(column.width.replace("px", ""), 10);

  return Number.isNaN(width) ? 180 : width;
}

function toDataGridColumn(
  column: CdcIssueMatrixColumn,
  language: CdcIssueMatrixLanguage,
): GridColDef<CdcIssueMatrixRow> {
  const width = getColumnWidth(column);
  const isActionColumn = column.key === "action";
  const isCenteredColumn =
    column.key === "id" ||
    column.key === "plenaryEscalation" ||
    column.key === "status" ||
    isActionColumn;

  return {
    field: column.key,
    headerName: column.label,
    width,
    minWidth: width,
    align: isCenteredColumn ? "center" : "left",
    headerAlign: isCenteredColumn ? "center" : "left",
    sortable: !isActionColumn,
    filterable: !isActionColumn,
    renderCell: (params) =>
      column.key === "id" ? (
        <DataTableNumberCell value={params.value as string | number | null} />
      ) : (
        <CdcIssueMatrixTableCell
          value={params.value ?? ""}
          columnKey={String(column.key)}
          image={
            column.key === "primaryAgency"
              ? (params.row.primaryAgencyImage ?? undefined)
              : undefined
          }
          language={language}
          row={params.row}
        />
      ),
  };
}

export function CdcIssueMatrixTable({
  rows,
  language,
  loading = false,
  error = null,
  showRemark = false,
}: CdcIssueMatrixTableProps) {
  const text = cdcIssueMatrixText[language] ?? cdcIssueMatrixText.en;
  const columns = useMemo(
    () =>
      getCdcIssueMatrixColumns(language)
        .filter((column) => showRemark || column.key !== "remark")
        .map((column) => toDataGridColumn(column, language)),
    [language, showRemark],
  );

  return (
    <DataTable
      fillAvailableHeight
      rows={rows}
      columns={columns}
      getRowId={(row) => row.id}
      loading={loading}
      error={error}
      enableColumnMenu
      emptyMessage={text.noData}
      pageSize={PAGE_SIZE}
      rowHeight={ROW_HEIGHT}
      columnHeaderHeight={HEADER_HEIGHT}
      dataGridSx={{
        "& .MuiDataGrid-columnHeaderTitle": {
          lineHeight: 1.25,
          overflow: "visible",
          whiteSpace: "normal",
        },
        "& .MuiDataGrid-cell": {
          overflow: "hidden",
        },
        "& .MuiDataGrid-cell[data-field='workingGroup']": {
          alignItems: "flex-start",
          py: 1.25,
        },
      }}
    />
  );
}