import {
  DataTableNumberCell,
  type DataTableColDef,
} from "@/components/ui/data-table";
import { DocumentLink } from "@/components/ui/document-link";
import { DocumentFileAttachment } from "@/components/ui/document-file-name";
import { isDocumentPlaceholder } from "@/lib/document-file";
import Box from "@mui/material/Box";

import {
  IssueListAgencyCell,
  IssueListStatusCell,
  IssueListTextCell,
  IssueListViewDetailButton,
} from "../issue-list-table-cells";
import type { ViewMeetingSummaryIssueRow } from "../view-meeting-summary-data";

type GetIssueListTableColumnsOptions = {
  onViewIssue?: (issue: ViewMeetingSummaryIssueRow) => void;
};

function IssueReferenceCell({ value }: { value: string }) {
  if (isDocumentPlaceholder(value) || !value) {
    return <IssueListTextCell value="-" compact />;
  }

  return (
    <Box
      onClick={(event) => event.stopPropagation()}
      onMouseDown={(event) => event.stopPropagation()}
      sx={{ width: "100%", minWidth: 0 }}
    >
      <DocumentLink
        file={{ path: value }}
        sx={{
          display: "inline-flex",
          alignItems: "center",
          minWidth: 0,
          maxWidth: "100%",
        }}
      >
        <DocumentFileAttachment value={value} iconSize={20} emptyLabel="-" />
      </DocumentLink>
    </Box>
  );
}

export function getIssueListTableColumns({
  onViewIssue,
}: GetIssueListTableColumnsOptions = {}): DataTableColDef<ViewMeetingSummaryIssueRow>[] {
  return [
    {
      field: "id",
      headerName: "No.",
      width: 52,
      minWidth: 52,
      align: "center",
      headerAlign: "center",
      sortable: false,
      filterable: false,
      disableColumnMenu: true,
      renderCell: (params) => (
        <DataTableNumberCell
          value={
            params.api.getRowIndexRelativeToVisibleRows(params.row.id) + 1
          }
        />
      ),
    },
    {
      field: "wgName",
      headerName: "WG Name",
      width: 280,
      minWidth: 280,
      align: "center",
      headerAlign: "center",
      sortable: false,
      renderCell: (params) => (
        <IssueListTextCell value={params.row.wgName} wrap align="center" />
      ),
    },
    {
      field: "issue",
      headerName: "Issue",
      width: 241,
      minWidth: 241,
      sortable: false,
      renderCell: (params) => <IssueListTextCell value={params.row.issue} />,
    },
    {
      field: "category",
      headerName: "Category of Issue",
      width: 292,
      minWidth: 292,
      sortable: false,
      renderCell: (params) => <IssueListTextCell value={params.row.category} />,
    },
    {
      field: "issueDescription",
      headerName: "Issue Description",
      width: 501,
      minWidth: 501,
      sortable: false,
      renderCell: (params) => (
        <IssueListTextCell value={params.row.issueDescription} />
      ),
    },
    {
      field: "recommendation",
      headerName: "Recommendation",
      width: 440,
      minWidth: 440,
      sortable: false,
      renderCell: (params) => (
        <IssueListTextCell value={params.row.recommendation} />
      ),
    },
    {
      field: "rgcDecision",
      headerName: "RGC Decision",
      width: 440,
      minWidth: 440,
      sortable: false,
      renderCell: (params) => <IssueListTextCell value={params.row.rgcDecision} />,
    },
    {
      field: "nextStep",
      headerName: "Next Step",
      width: 215,
      minWidth: 215,
      sortable: false,
      renderCell: (params) => (
        <IssueListTextCell value={params.row.nextStep} compact />
      ),
    },
    {
      field: "remark",
      headerName: "Remark",
      width: 215,
      minWidth: 215,
      sortable: false,
      renderCell: (params) => (
        <IssueListTextCell value={params.row.remark} compact />
      ),
    },
    {
      field: "issueReference",
      headerName: "Issue Reference",
      width: 215,
      minWidth: 215,
      sortable: false,
      renderCell: (params) => (
        <IssueReferenceCell value={params.row.issueReference} />
      ),
    },
    {
      field: "status",
      headerName: "Status",
      width: 215,
      minWidth: 215,
      sortable: false,
      renderCell: (params) => (
        <IssueListStatusCell label={params.row.status} />
      ),
    },
    {
      field: "primaryAgency",
      headerName: "Gov't primary Agency",
      width: 215,
      minWidth: 215,
      sortable: false,
      renderCell: (params) => (
        <IssueListAgencyCell
          name={params.row.primaryAgency}
          logo={params.row.primaryAgencyLogo}
        />
      ),
    },
    {
      field: "secondAgency",
      headerName: "Gov't second Agency",
      width: 215,
      minWidth: 215,
      sortable: false,
      renderCell: (params) => (
        <IssueListAgencyCell
          name={params.row.secondAgency}
          logo={params.row.secondAgencyLogo}
        />
      ),
    },
    {
      field: "thirdAgency",
      headerName: "Gov't third Agency",
      width: 215,
      minWidth: 215,
      sortable: false,
      renderCell: (params) => (
        <IssueListAgencyCell
          name={params.row.thirdAgency}
          logo={params.row.thirdAgencyLogo}
        />
      ),
    },
    {
      field: "fourthAgency",
      headerName: "Gov't fourth Agency",
      width: 215,
      minWidth: 215,
      sortable: false,
      renderCell: (params) => (
        <IssueListAgencyCell
          name={params.row.fourthAgency}
          logo={params.row.fourthAgencyLogo}
        />
      ),
    },
    {
      field: "fifthAgency",
      headerName: "Gov't fifth Agency",
      width: 215,
      minWidth: 215,
      sortable: false,
      renderCell: (params) => (
        <IssueListAgencyCell
          name={params.row.fifthAgency}
          logo={params.row.fifthAgencyLogo}
        />
      ),
    },
    {
      field: "issueEscalation",
      headerName: "Issue Escalation",
      width: 215,
      minWidth: 215,
      sortable: false,
      renderCell: (params) => (
        <IssueListTextCell value={params.row.issueEscalation} compact />
      ),
    },
    {
      field: "action",
      headerName: "Action",
      width: 150,
      minWidth: 150,
      sortable: false,
      filterable: false,
      disableColumnMenu: true,
      renderCell: (params) => (
        <IssueListViewDetailButton issue={params.row} onView={onViewIssue} />
      ),
    },
  ];
}