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

import {
  DataTableDateCell,
  DataTableNumberCell,
} from "@/components/ui/data-table";
import {
  ActionCell,
  DescriptionCell,
  LogoCell,
  StakeholderCell,
  StatusBadge,
  TypeBadge,
  UsersCell,
} from "@/features/stakeholder/components/table/stakeholder-table-cells";
import type { Stakeholder } from "@/features/stakeholder/stakeholder-data";

export type StakeholderTableRow = Stakeholder;

type StakeholderTableColumnOptions = {
  onView: (stakeholder: Stakeholder) => void;
  onAddUser: (stakeholder: Stakeholder) => void;
  onEdit: (stakeholder: Stakeholder) => void;
  onDelete: (stakeholder: Stakeholder) => void;
};

export function getStakeholderTableColumns({
  onView,
  onAddUser,
  onEdit,
  onDelete,
}: StakeholderTableColumnOptions): GridColDef<StakeholderTableRow>[] {
  return [
    {
      field: "id",
      headerName: "No.",
      width: 72,
      align: "center",
      type: "number",
      renderCell: (params) => (
        <DataTableNumberCell value={params.row.id} />
      ),
    },
    {
      field: "logo",
      headerName: "Logo",
      width: 104,
      align: "center",
      sortable: false,
      filterable: false,
      renderCell: (params) => (
        <LogoCell name={params.row.name} logo={params.row.logo} />
      ),
    },
    {
      field: "name",
      headerName: "Stakeholder Name",
      minWidth: 260,
      flex: 1.4,
      renderCell: (params) => <StakeholderCell name={params.row.name} />,
    },
    {
      field: "relatedStakeholder",
      headerName: "Related to",
      minWidth: 220,
      flex: 1.1,
      sortable: false,
      valueGetter: (_value, row) => row.relatedStakeholder?.name ?? "",
      renderCell: (params) => (
        <StakeholderCell name={params.row.relatedStakeholder?.name ?? "-"} />
      ),
    },
    {
      field: "coChair",
      headerName: "Co-Chair",
      minWidth: 220,
      flex: 1.2,
      renderCell: (params) => (
        <DescriptionCell value={params.row.coChair ?? "-"} />
      ),
    },
    {
      field: "description",
      headerName: "Description",
      minWidth: 360,
      flex: 2,
      renderCell: (params) => (
        <DescriptionCell value={params.row.description} />
      ),
    },
    {
      field: "stakeholderType",
      headerName: "Type",
      minWidth: 160,
      flex: 0.8,
      align: "center",
      // The stored value is an object; expose the type name as a string so
      // the default sort and filter operate on the visible label.
      valueGetter: (_value, row) => row.stakeholderType?.name ?? "",
      renderCell: (params) => (
        <TypeBadge type={params.row.stakeholderType?.name ?? "-"} />
      ),
    },
    {
      field: "active",
      headerName: "Status",
      minWidth: 120,
      flex: 0.7,
      align: "center",
      renderCell: (params) => <StatusBadge active={Boolean(params.value)} />,
    },
    {
      field: "users",
      headerName: "User",
      width: 172,
      align: "center",
      sortable: false,
      filterable: false,
      renderCell: (params) => (
        <UsersCell users={params.row.users ?? []} />
      ),
    },
    {
      field: "createdAt",
      headerName: "Created",
      minWidth: 140,
      flex: 0.8,
      align: "center",
      renderCell: (params) => <DataTableDateCell value={params.value} />,
    },
    {
      field: "updatedAt",
      headerName: "Last Update",
      minWidth: 140,
      flex: 0.8,
      align: "center",
      renderCell: (params) => <DataTableDateCell value={params.value} />,
    },
    {
      field: "action",
      headerName: "",
      width: 64,
      align: "center",
      sortable: false,
      filterable: false,
      renderCell: (params) => (
        <ActionCell
          stakeholder={params.row}
          onView={onView}
          onAddUser={onAddUser}
          onEdit={onEdit}
          onDelete={onDelete}
        />
      ),
    },
  ];
}