"use client";
import * as React from "react";
import { type ColumnDef } from "@tanstack/react-table";
import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header";
import { Badge } from "@/components/ui/badge";

export type EDPVendorRow = {
  vendorId: number;
  vendorName: string;
  totalForms: number;
  totalTags: number;
  totalRequiredFields: number;
  totalFilledFields: number;
  completionPercentage: number;
};

function renderCompletionBadge(value: number | string | undefined) {
  const num = typeof value === "string" ? Number(value) : (value ?? 0);
  
  // Show '-' for vendors with no EDP data (0% completion)
  if (num === 0) {
    return (
      <Badge variant="outline">
        -
      </Badge>
    );
  }
  
  const variant: "success" | "secondary" | "destructive" =
    num >= 80 ? "success" : num >= 50 ? "secondary" : "destructive";
  return (
    <Badge variant={variant}>{num}%</Badge>
  );
}

export function getColumns(): ColumnDef<EDPVendorRow>[] {
  const cols: ColumnDef<EDPVendorRow>[] = [
    {
      accessorKey: "vendorName",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title={"벤더명"} />
      ),
      cell: ({ row }) => row.getValue("vendorName") as string,
      meta: { excelHeader: "Vendor Name" },
      enableResizing: true,
      size: 80,
      minSize: 50,
      maxSize: 150,
    },
    {
      accessorKey: "totalForms",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title={"폼 개수"} />
      ),
      cell: ({ row }) => String(row.getValue("totalForms") ?? 0),
      meta: { excelHeader: "Total Forms" },
      size: 30,
      minSize: 30,
      maxSize: 120,
    },
    {
      accessorKey: "totalTags",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title={"태그 개수"} />
      ),
      cell: ({ row }) => String(row.getValue("totalTags") ?? 0),
      meta: { excelHeader: "Total Tags" },
      size: 30,
      minSize: 30,
      maxSize: 120,
    },
    {
      accessorKey: "totalRequiredFields",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title={"전체 필드"} />
      ),
      cell: ({ row }) => String(row.getValue("totalRequiredFields") ?? 0),
      meta: { excelHeader: "Total Required Fields" },
      size: 30,
      minSize: 30,
      maxSize: 120,
    },
    {
      accessorKey: "totalFilledFields",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title={"입력 필드"} />
      ),
      cell: ({ row }) => String(row.getValue("totalFilledFields") ?? 0),
      meta: { excelHeader: "Total Filled Fields" },
      size: 30,
      minSize: 30,
      maxSize: 120,
    },
    {
      accessorKey: "completionPercentage",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title={"완성도(%)"} />
      ),
      cell: ({ row }) => renderCompletionBadge(row.getValue("completionPercentage") as number | string),
      meta: { excelHeader: "Completion %" },
      size: 30,
      minSize: 30,
      maxSize: 120,
    },
  ];

  return cols;
}