"use client";

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

import type { ProgressReportRow } from
  "../../progress-report-data";

import {
  ProgressReportActionsCell,
  ProgressReportTextCell,
} from "./progress-report-table-cells";

type ProgressReportTableRow =
  ProgressReportRow & {
    ministryName?: string | null;
    title?: string | null;
    year?: string | number | null;
    semester?: string | null;
    status?: string | null;
    submittedDate?: string | null;
  };

type ColumnLabels = {
  no?: string;
  ministry?: string;
  title?: string;
  year?: string;
  semester?: string;
  status?: string;
  submittedDate?: string;
  actions?: string;
};

type ColumnActions = {
  onView?: (row: ProgressReportRow) => void;
};

function getRowNumber(
  params: GridRenderCellParams<
    ProgressReportTableRow,
    unknown
  >,
): string {
  // The record's own number, so it stays the same on every page.
  return String(params.row.id);
}

function toDisplayText(
  value: unknown,
  fallback = "-",
): string {
  if (
    value === null ||
    value === undefined ||
    value === ""
  ) {
    return fallback;
  }

  return String(value);
}

function formatSubmittedDate(
  value: string | null | undefined,
): string {
  if (!value) {
    return "-";
  }

  const date = new Date(value);

  if (Number.isNaN(date.getTime())) {
    return value;
  }

  return new Intl.DateTimeFormat("en-GB", {
    day: "2-digit",
    month: "short",
    year: "numeric",
  }).format(date);
}

export function getProgressReportTableColumns(
  labels: ColumnLabels,
  translateValue: (value: string) => string,
  viewLabel: string,
  actions: ColumnActions,
): GridColDef<ProgressReportTableRow>[] {
  return [
    {
      field: "no",
      headerName: labels.no ?? "No.",
      width: 74,
      minWidth: 74,
      filterable: false,
      disableColumnMenu: true,
      align: "center",
      headerAlign: "center",
      renderCell: (params) => (
        <ProgressReportTextCell
          value={getRowNumber(params)}
          maxLines={1}
        />
      ),
    },
    {
      field: "ministryName",
      headerName:
        labels.ministry ?? "Ministry",
      width: 260,
      minWidth: 220,
      flex: 1,
      renderCell: (params) => (
        <ProgressReportTextCell
          value={toDisplayText(
            params.row.ministryName,
          )}
        />
      ),
    },
    {
      field: "title",
      headerName:
        labels.title ?? "Progress Report",
      width: 300,
      minWidth: 260,
      flex: 1.2,
      renderCell: (params) => (
        <ProgressReportTextCell
          value={toDisplayText(
            params.row.title,
          )}
        />
      ),
    },
    {
      field: "year",
      headerName: labels.year ?? "Year",
      width: 110,
      minWidth: 100,
      renderCell: (params) => (
        <ProgressReportTextCell
          value={toDisplayText(
            params.row.year,
          )}
          maxLines={1}
        />
      ),
    },
    {
      field: "semester",
      headerName:
        labels.semester ?? "Semester",
      width: 150,
      minWidth: 130,
      renderCell: (params) => (
        <ProgressReportTextCell
          value={translateValue(
            toDisplayText(
              params.row.semester,
            ),
          )}
          maxLines={1}
        />
      ),
    },
    {
      field: "status",
      headerName:
        labels.status ?? "Status",
      width: 150,
      minWidth: 130,
      renderCell: (params) => (
        <ProgressReportTextCell
          value={translateValue(
            toDisplayText(
              params.row.status,
            ),
          )}
          maxLines={1}
        />
      ),
    },
    {
      field: "submittedDate",
      headerName:
        labels.submittedDate ??
        "Submitted Date",
      width: 170,
      minWidth: 150,
      renderCell: (params) => (
        <ProgressReportTextCell
          value={formatSubmittedDate(
            params.row.submittedDate,
          )}
          maxLines={1}
        />
      ),
    },
    {
      field: "actions",
      headerName:
        labels.actions ?? "Action",
      width: 90,
      minWidth: 90,
      sortable: false,
      filterable: false,
      disableColumnMenu: true,
      align: "center",
      headerAlign: "center",
      renderCell: (params) => (
        <ProgressReportActionsCell
          row={
            params.row as ProgressReportRow
          }
          viewLabel={viewLabel}
          onView={actions.onView}
        />
      ),
    },
  ];
}