"use client";

import { useMemo } from "react";

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

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

import type { IssueMatrixRow } from "./issue-matrix-data";
import {
  getIssueMatrixColumns,
  type IssueMatrixColumn,
} from "./issue-matrix-table-config";
import { IssueMatrixTableCell } from "./issue-matrix-table-cells";
import { issueMatrixText, type IssueMatrixLanguage } from "./issue-matrix-i18n";

const ISSUE_MATRIX_PAGE_SIZE = 8;
const ISSUE_MATRIX_ROW_HEIGHT = 74;
const ISSUE_MATRIX_HEADER_HEIGHT = 56;

type IssueMatrixTableProps = {
  rows: IssueMatrixRow[];
  language: IssueMatrixLanguage;
  loading?: boolean;
  error?: string | null;
  // Where the row "View Detail" link goes. Each section (PSWG, CDC-GPSF)
  // passes its own base path so the user stays inside that section.
  detailBasePath?: string;
};

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

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

function getAgencyImage(
  row: IssueMatrixRow,
  columnKey: IssueMatrixColumn["key"],
): string | undefined {
  switch (columnKey) {
    case "primaryAgency":
      return row.primaryAgencyImage ?? undefined;
    case "secondAgency":
      return row.secondAgencyImage ?? undefined;
    case "thirdAgency":
      return row.thirdAgencyImage ?? undefined;
    case "fourthAgency":
      return row.fourthAgencyImage ?? undefined;
    case "fifthAgency":
      return row.fifthAgencyImage ?? undefined;
    default:
      return undefined;
  }
}

function toDataGridColumn(
  column: IssueMatrixColumn,
  language: IssueMatrixLanguage,
  detailBasePath: string,
): GridColDef<IssueMatrixRow> {
  const width = getColumnWidth(column);
  const isActionColumn = column.key === "action";
  const isCenteredColumn =
    column.key === "id" ||
    column.key === "status" ||
    column.key === "dateOfSolution" ||
    column.key === "wgMeetingDate" ||
    isActionColumn;

  return {
    field: column.key,
    headerName: column.label,
    width,
    minWidth: width,
    align: isCenteredColumn ? "center" : "left",
    headerAlign: "center",
    sortable: !isActionColumn,
    filterable: !isActionColumn,
    renderCell: (params) =>
      column.key === "id" ? (
        <DataTableNumberCell value={params.value as string | number | null} />
      ) : column.key === "dateOfSolution" || column.key === "wgMeetingDate" ? (
        <DataTableDateCell value={String(params.value ?? "")} />
      ) : (
        <IssueMatrixTableCell
          value={params.value ?? ""}
          columnKey={String(column.key)}
          language={language}
          image={getAgencyImage(params.row, column.key)}
          detailHref={`${detailBasePath}/${params.row.id}`}
          isLink={column.key === "verificationLink" || isActionColumn}
        />
      ),
  };
}

export function IssueMatrixTable({
  rows,
  language,
  loading = false,
  error = null,
  detailBasePath = "/pswg/issue-matrix",
}: IssueMatrixTableProps) {
  const text = issueMatrixText[language] ?? issueMatrixText.en;
  const columns = useMemo(
    () =>
      getIssueMatrixColumns(language).map((column) =>
        toDataGridColumn(column, language, detailBasePath),
      ),
    [language, detailBasePath],
  );

  return (
    <DataTable
      fillAvailableHeight
      rows={rows}
      columns={columns}
      getRowId={(row) => row.id}
      loading={loading}
      error={error}
      enableColumnMenu
      emptyMessage={text.noData}
      pageSize={ISSUE_MATRIX_PAGE_SIZE}
      rowHeight={ISSUE_MATRIX_ROW_HEIGHT}
      columnHeaderHeight={ISSUE_MATRIX_HEADER_HEIGHT}
      dataGridSx={{
        "& .MuiDataGrid-columnHeaderTitle": {
          lineHeight: 1.25,
          overflow: "visible",
          whiteSpace: "normal",
        },
        "& .MuiDataGrid-cell": {
          overflow: "hidden",
        },
      }}
    />
  );
}