"use client";

import type { Column, ColumnDef } from "@tanstack/react-table";
import { Icons } from "@/components/icons";
import { Badge } from "@/components/ui/badge";
import { DataTableColumnHeader } from "@/components/ui/table/data-table-column-header";
import type { TrainingRecord } from "@/features/training-records/api/types";
import {
  buildEmployeeSearchPlaceholder,
  EMPLOYEE_CODE_LABEL,
  EMPLOYEE_NAME_LABEL,
} from "@/lib/employee-information";
import { formatDate } from "@/lib/format";
import { trainingRecordStatusLabelMap } from "../constants/training-record-options";
import { formatDurationThai, getDurationMinutes } from "../utils/time-utils";
import { PendingReviewActionMenu } from "./pending-review-action-menu";

export const pendingReviewColumns: ColumnDef<TrainingRecord>[] = [
  {
    id: "employee_code",
    accessorKey: "employee_code",
    header: ({ column }: { column: Column<TrainingRecord, unknown> }) => (
      <DataTableColumnHeader column={column} title={EMPLOYEE_CODE_LABEL} />
    ),
    cell: ({ row }) => (
      <span className="block truncate font-medium whitespace-nowrap">
        {row.original.employee_code ?? "-"}
      </span>
    ),
    size: 140,
    minSize: 140,
    maxSize: 140,
  },
  {
    id: "search",
    accessorKey: "user_name",
    header: ({ column }: { column: Column<TrainingRecord, unknown> }) => (
      <DataTableColumnHeader column={column} title={EMPLOYEE_NAME_LABEL} />
    ),
    cell: ({ row }) => (
      <div className="flex min-w-[220px] max-w-[320px] flex-col">
        <span className="truncate font-medium">{row.original.user_name}</span>
        <span className="text-muted-foreground line-clamp-2 text-xs break-words">
          {row.original.course_name}
        </span>
      </div>
    ),
    meta: {
      label: EMPLOYEE_NAME_LABEL,
      placeholder: buildEmployeeSearchPlaceholder(["หลักสูตร", "ผู้จัดอบรม"]),
      variant: "text" as const,
      icon: Icons.text,
    },
    enableColumnFilter: true,
  },
  // {
  //   id: "company",
  //   accessorKey: "company_name",
  //   header: "บริษัท",
  //   cell: ({ row }) => (
  //     <span className="block min-w-[160px] max-w-[220px] truncate">
  //       {row.original.company_name ?? "-"}
  //     </span>
  //   ),
  //   meta: {
  //     label: "บริษัท",
  //     placeholder: "กรองบริษัท",
  //     variant: "text" as const,
  //     icon: Icons.workspace,
  //   },
  //   enableColumnFilter: true,
  // },
  {
    id: "department",
    accessorKey: "department_name",
    header: "แผนก",
    cell: ({ row }) => (
      <span className="block w-full max-w-[220px] truncate">
        {row.original.department_name ?? "-"}
      </span>
    ),
    // meta: {
    //   label: "แผนก",
    //   placeholder: "กรองแผนก",
    //   variant: "text" as const,
    //   icon: Icons.teams,
    // },
    enableColumnFilter: true,
  },
  {
    id: "year",
    accessorKey: "training_date",
    header: "ปี",
    cell: ({ row }) => new Date(row.original.training_date).getUTCFullYear(),
    // meta: {
    //   label: "ปี",
    //   placeholder: "YYYY",
    //   variant: "text" as const,
    //   icon: Icons.calendar,
    // },
    enableColumnFilter: true,
  },
  {
    accessorKey: "training_date",
    header: ({ column }: { column: Column<TrainingRecord, unknown> }) => (
      <DataTableColumnHeader column={column} title="วันที่อบรม" />
    ),
    cell: ({ row }) =>
      formatDate(row.original.training_date, { month: "numeric" }),
  },
  {
    id: "submitted_minutes",
    accessorKey: "submitted_minutes",
    header: "ชั่วโมงที่ส่ง",
    cell: ({ row }) =>
      formatDurationThai(
        getDurationMinutes(row.original.submitted_minutes, row.original.hours),
      ),
  },
  {
    id: "status",
    accessorKey: "approval_status",
    enableSorting: false,
    header: ({ column }: { column: Column<TrainingRecord, unknown> }) => (
      <DataTableColumnHeader column={column} title="สถานะ" />
    ),
    cell: ({ row }) => (
      <div className="min-w-[128px]">
        <Badge variant="outline">
          {trainingRecordStatusLabelMap[row.original.approval_status]}
        </Badge>
      </div>
    ),
    meta: {
      label: "สถานะ",
    },
    enableColumnFilter: false,
  },
  {
    id: "actions",
    header: () => <span className="sr-only">จัดการ</span>,
    cell: ({ row }) => (
      <div className="flex justify-end">
        <PendingReviewActionMenu trainingRecordId={row.original.id} />
      </div>
    ),
    size: 50,
  },
];
