import { ColumnDef } from "@tanstack/react-table";
import type { EmployeePositionChangeRequest } from "@/user-management/services/api/employeePositionChangeRequestService";
import UserPositionApprovalActions, {
  type UserPositionApprovalDecision,
} from "./UserPositionApprovalActions";
import { getDisplayName } from "./userPositionApprovalUtils";
import { renderStatus } from "@/record-management/utils/renderDetails";

export const createUserPositionApprovalColumns = (
  onDecision: (
    type: UserPositionApprovalDecision,
    item: EmployeePositionChangeRequest,
  ) => void,
): ColumnDef<EmployeePositionChangeRequest>[] => [
  {
    accessorKey: "employee",
    header: () => "User",
    cell: ({ row }) => (
      <span className="font-medium">
        {getDisplayName(row.original.employee?.name)}
      </span>
    ),
  },
  {
    id: "email",
    header: () => "Email",
    cell: ({ row }) => (
      <span className="text-slate-500">
        {row.original.employee?.user?.email || "-"}
      </span>
    ),
  },
  {
    id: "fromPosition",
    header: () => "From Position",
    cell: ({ row }) => (
      <span>{getDisplayName(row.original.fromPosition?.name)}</span>
    ),
  },
  {
    id: "toPosition",
    header: () => "To Position",
    cell: ({ row }) => (
      <span>{getDisplayName(row.original.toPosition?.name)}</span>
    ),
  },
  {
    accessorKey: "status",
    header: () => "Status",
    cell: ({ row }) => (
      <span>
        {renderStatus(
          row.original.status || "pending",
          row.original.status || "pending",
        )}
      </span>
    ),
  },
  {
    id: "actions",
    header: () => "Actions",
    cell: ({ row }) => (
      <UserPositionApprovalActions
        item={row.original}
        onDecision={onDecision}
      />
    ),
  },
];
