"use client";

import { ColumnDef } from "@tanstack/react-table";
import { Checkbox } from "@/components/ui/checkbox";
import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header";
import Link from "next/link";
// 타입만 import
type TechVendorPossibleItemsData = {
  id: number;
  vendorId: number;
  vendorCode: string | null;
  vendorName: string;
  techVendorType: string;
  itemCode: string;
  createdAt: Date;
  updatedAt: Date;
};
import { format } from "date-fns";
import { ko } from "date-fns/locale";
import { Badge } from "@/components/ui/badge";

export function getColumns(): ColumnDef<TechVendorPossibleItemsData>[] {
  return [
    {
      id: "select",
      header: ({ table }) => (
        <Checkbox
          checked={
            table.getIsAllPageRowsSelected() ||
            (table.getIsSomePageRowsSelected() && "indeterminate")
          }
          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
          aria-label="모두 선택"
          className="translate-y-[2px]"
        />
      ),
      cell: ({ row }) => (
        <Checkbox
          checked={row.getIsSelected()}
          onCheckedChange={(value) => row.toggleSelected(!!value)}
          aria-label="행 선택"
          className="translate-y-[2px]"
        />
      ),
      enableSorting: false,
      enableHiding: false,
    },
    {
      accessorKey: "itemCode",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="아이템코드" />
      ),
      cell: ({ row }) => {
        const itemCode = row.getValue("itemCode") as string;
        return <div className="font-medium">{itemCode}</div>;
      },
    },
    {
      accessorKey: "vendorCode",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="벤더코드" />
      ),
      cell: ({ row }) => {
        const vendorCode = row.getValue("vendorCode") as string;
        return <div className="font-medium">{vendorCode || "-"}</div>;
      },
    },
    {
      accessorKey: "vendorName",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="벤더명" />
      ),
      cell: ({ row }) => {
        const vendorName = row.getValue("vendorName") as string;
        const vendorId = row.original.vendorId;
        return (
          <Link 
            href={`/ko/evcp/tech-vendors/${vendorId}/info`}
            className="max-w-[200px] truncate hover:underline"
          >
            {vendorName}
          </Link>
        );
      },
    },
    {
      accessorKey: "techVendorType",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="벤더타입" />
      ),
      cell: ({ row }) => {
        const techVendorType = row.getValue("techVendorType") as string;
        
        // JSON 배열인지 확인하고 파싱
        let types: string[] = [];
        try {
          const parsed = JSON.parse(techVendorType || "[]");
          types = Array.isArray(parsed) ? parsed : [techVendorType];
        } catch {
          types = [techVendorType];
        }

        return (
          <div className="flex flex-wrap gap-1">
            {types.map((type, index) => (
              <Badge key={index} variant="secondary" className="text-xs">
                {type}
              </Badge>
            ))}
          </div>
        );
      },
      filterFn: (row, id, value) => {
        const techVendorType = row.getValue(id) as string;
        try {
          const parsed = JSON.parse(techVendorType || "[]");
          const types = Array.isArray(parsed) ? parsed : [techVendorType];
          return types.some(type => type.includes(value));
        } catch {
          return techVendorType?.includes(value) || false;
        }
      },
    },

    {
      accessorKey: "createdAt",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="생성일시" />
      ),
      cell: ({ row }) => {
        const createdAt = row.getValue("createdAt") as Date;
        return (
          <div className="text-sm text-muted-foreground">
            {format(createdAt, "yyyy-MM-dd HH:mm", { locale: ko })}
          </div>
        );
      },
    },
  ];
}