"use client";

import { Column, ColumnDef } from "@tanstack/react-table";
import { getTrainingTypeLabel } from "@/constants/thai-labels";
import { Icons } from "@/components/icons";
import { Badge } from "@/components/ui/badge";
import { DataTableColumnHeader } from "@/components/ui/table/data-table-column-header";
import {
  buildEmployeeSearchPlaceholder,
  EMPLOYEE_CODE_LABEL,
  EMPLOYEE_NAME_LABEL,
} from "@/lib/employee-information";
import { formatDate } from "@/lib/format";
import type { TrainingRecord } from "../../api/types";
import { trainingRecordStatusLabelMap } from "../../constants/training-record-options";
import { formatDurationThai, getDurationMinutes } from "../../utils/time-utils";
import { CellAction } from "./cell-action";
import {
  TRAINING_RECORD_STATUS_OPTIONS,
  TRAINING_RECORD_TYPE_OPTIONS,
} from "./options";
import { TrainingRecordImagePreview } from "./training-record-image-preview";

export const columns: ColumnDef<TrainingRecord>[] = [
  {
    id: "certificate_preview",
    accessorKey: "certificate_preview_url",
    header: "ใบรับรอง",
    cell: ({ row }) => (
      <div className="w-20">
        <TrainingRecordImagePreview
          alt={`Certificate for ${row.original.user_name} - ${row.original.course_name}`}
          src={row.original.certificate_preview_url}
          fileType={row.original.certificate_preview_type}
        />
      </div>
    ),
    meta: {
      headerClassName: "w-20",
      cellClassName: "w-20",
    },
  },
  {
    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: "user_name",
    accessorKey: "user_name",
    header: ({ column }: { column: Column<TrainingRecord, unknown> }) => (
      <DataTableColumnHeader column={column} title={EMPLOYEE_NAME_LABEL} />
    ),
    cell: ({ row }) => (
      <div className="flex 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: "training_date",
    accessorKey: "training_date",
    header: ({ column }: { column: Column<TrainingRecord, unknown> }) => (
      <DataTableColumnHeader column={column} title="วันที่อบรม" />
    ),
    cell: ({ row }) =>
      formatDate(row.original.training_date, { month: "numeric" }),
  },
  {
    id: "training_type",
    accessorKey: "training_type",
    enableSorting: false,
    header: ({ column }: { column: Column<TrainingRecord, unknown> }) => (
      <DataTableColumnHeader column={column} title="ประเภท" />
    ),
    cell: ({ cell }) => (
      <Badge variant="outline">
        {getTrainingTypeLabel(cell.getValue<TrainingRecord["training_type"]>())}
      </Badge>
    ),
    enableColumnFilter: true,
    meta: {
      label: "ประเภท",
      variant: "multiSelect" as const,
      options: TRAINING_RECORD_TYPE_OPTIONS,
    },
  },
  {
    id: "submitted_minutes",
    accessorKey: "submitted_minutes",
    header: "ชั่วโมงที่ส่ง",
    cell: ({ row }) =>
      formatDurationThai(
        getDurationMinutes(row.original.submitted_minutes, row.original.hours),
      ),
  },
  {
    accessorKey: "organizer",
    header: "ผู้จัดอบรม",
    cell: ({ cell }) => (
      <span className="truncate">
        {cell.getValue<TrainingRecord["organizer"]>() ?? "-"}
      </span>
    ),
  },
  {
    id: "approval_status",
    accessorKey: "approval_status",
    enableSorting: false,
    header: ({ column }: { column: Column<TrainingRecord, unknown> }) => (
      <DataTableColumnHeader column={column} title="สถานะ" />
    ),
    cell: ({ cell }) => (
      <Badge variant="outline">
        {
          trainingRecordStatusLabelMap[
            cell.getValue<TrainingRecord["approval_status"]>()
          ]
        }
      </Badge>
    ),
    enableColumnFilter: true,
    meta: {
      label: "สถานะ",
      variant: "multiSelect" as const,
      options: TRAINING_RECORD_STATUS_OPTIONS,
    },
  },
  {
    id: "actions",
    cell: ({ row }) => (
      <div className="flex justify-end">
        <CellAction data={row.original} />
      </div>
    ),
    size: 50,
  },
];
