"use client";

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

import {
  DataTableDateCell,
  DataTableNumberCell,
} from "@/components/ui/data-table";
import type { CdcGpsfMeetingRequestStatus } from "@/features/cdc-gpsf/meeting-requests/cdc-gpsf-meeting-request-data";
import {
  cdcGpsfMeetingRequestI18n,
  getCdcGpsfMeetingRequestFont,
  type CdcGpsfMeetingRequestUiLang,
} from "@/features/cdc-gpsf/meeting-requests/cdc-gpsf-meeting-request-i18n";

import {
  AgencyCell,
  MeetingRequestCell,
  StatusBadge,
  TableText,
  ViewDetailAction,
} from "./cdc-gpsf-meeting-requests-table-cells";
import {
  CDC_GPSF_MEETING_REQUEST_COLUMN_WIDTH,
  withFixedColumnWidths,
} from "./cdc-gpsf-meeting-requests-table-config";
import type { CdcGpsfMeetingRequestRowWithApi } from "./cdc-gpsf-meeting-requests-row-utils";

type TableColumnOptions = {
  onView?: (row: CdcGpsfMeetingRequestRowWithApi) => void;
};

export function getCdcGpsfMeetingRequestsTableColumns(
  language: CdcGpsfMeetingRequestUiLang,
  options: TableColumnOptions = {},
): GridColDef<CdcGpsfMeetingRequestRowWithApi>[] {
  const t = cdcGpsfMeetingRequestI18n(language);
  const fontFamily = getCdcGpsfMeetingRequestFont(language);

  return withFixedColumnWidths([
    {
      field: "id",
      headerName: t.no,
      width: 90,
      align: "center",
      headerAlign: "center",
      sortable: false,
      renderCell: (params) => (
        <DataTableNumberCell value={params.value as string | number | null} />
      ),
    },
    {
      field: "workingGroup",
      headerName: t.workingGroup,
      width: 240,
      headerAlign: "center",
      sortable: false,
      renderCell: (params) => (
        <TableText
          value={String(params.value || "-")}
          fontSize={13}
          fontFamily={fontFamily}
          wrap
        />
      ),
    },
    {
      field: "title",
      headerName: t.meetingTitle,
      width: 300,
      headerAlign: "center",
      sortable: false,
      renderCell: (params) => (
        <TableText
          value={String(params.value || "-")}
          fontSize={13}
          fontFamily={fontFamily}
        />
      ),
    },
    {
      field: "meetingDescription",
      headerName: t.meetingDescription,
      width: 300,
      headerAlign: "center",
      sortable: false,
      renderCell: (params) => (
        <TableText
          value={String(params.value || "-")}
          fontSize={13}
          fontFamily={fontFamily}
        />
      ),
    },
    {
      field: "issuesCount",
      headerName: t.issuesCount,
      width: 100,
      align: "center",
      headerAlign: "center",
      sortable: false,
      renderCell: (params) => (
        <DataTableNumberCell value={params.value as string | number | null} />
      ),
    },
    {
      field: "meetingStatus",
      headerName: t.meetingStatus,
      width: 130,
      align: "center",
      headerAlign: "center",
      sortable: false,
      renderCell: (params) => (
        <StatusBadge
          status={params.value as CdcGpsfMeetingRequestStatus}
          language={language}
        />
      ),
    },
    {
      field: "meetingDate",
      headerName: t.meetingDate,
      width: 150,
      align: "center",
      headerAlign: "center",
      sortable: false,
      renderCell: (params) => <DataTableDateCell value={params.value} />,
    },
    {
      field: "governmentAgency",
      headerName: t.governmentAgency,
      width: 150,
      align: "left",
      headerAlign: "center",
      sortable: false,
      renderCell: (params) => {
        const row = params.row;

        return (
          <AgencyCell
            agency={String(row.governmentAgency || "-")}
            logo={row.governmentAgencyLogo}
          />
        );
      },
    },
    {
      field: "meetingRequest",
      headerName: t.meetingRequest,
      width: CDC_GPSF_MEETING_REQUEST_COLUMN_WIDTH,
      align: "center",
      headerAlign: "center",
      sortable: false,
      renderCell: (params) => (
        <MeetingRequestCell label={String(params.value || "-")} />
      ),
    },
    {
      field: "action",
      headerName: t.action,
      width: 126,
      align: "center",
      headerAlign: "center",
      sortable: false,
      filterable: false,
      renderCell: (params) => (
        <ViewDetailAction
          label={t.viewDetail}
          language={language}
          onClick={() => options.onView?.(params.row)}
        />
      ),
    },
  ]);
}