"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,
  type IssueMatrixPlenaryEscalationControl,
} from "./issue-matrix-table-cells";
import { issueMatrixText, type IssueMatrixLanguage } from "./issue-matrix-i18n";
import type { IssueMatrixEditControl } from "./issue-matrix-row-editors";

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;
  editControl?: IssueMatrixEditControl;
  statusColumnWidth?: number;
  showPlenaryEscalation?: boolean;
  plenaryEscalationControl?: IssueMatrixPlenaryEscalationControl;
  /** CDC-only: place Date of Solution immediately after Primary Agency. */
  placeDateOfSolutionAfterPrimaryAgency?: boolean;
};

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,
  editControl?: IssueMatrixEditControl,
  statusColumnWidth?: number,
  plenaryEscalationControl?: IssueMatrixPlenaryEscalationControl,
): GridColDef<IssueMatrixRow> {
  const width =
    column.key === "status" && statusColumnWidth
      ? statusColumnWidth
      : getColumnWidth(column);
  const isActionColumn = column.key === "action";
  const isCenteredColumn =
    column.key === "id" ||
    column.key === "status" ||
    column.key === "plenaryEscalation" ||
    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}
          row={params.row}
          editControl={editControl}
          plenaryEscalationControl={plenaryEscalationControl}
        />
      ),
  };
}

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

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