"use client"

import * as React from "react"
import { ColumnDef } from "@tanstack/react-table"
import { formatDate, formatDateTime } from "@/lib/utils"
import { Checkbox } from "@/components/ui/checkbox"
import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
import { DataTableRowAction } from "@/types/table"
import { Info, Paperclip } from "lucide-react"
import { Button } from "@/components/ui/button"

// 기본적인 RFQ 타입 정의 (rfq-table.tsx 파일과 일치해야 함)
type TechSalesRfq = {
  id: number
  rfqCode: string | null
  itemId: number
  itemName: string | null
  materialCode: string | null
  dueDate: Date
  rfqSendDate: Date | null
  status: "RFQ Created" | "RFQ Vendor Assignned" | "RFQ Sent" | "Quotation Analysis" | "Closed"
  picCode: string | null
  remark: string | null
  cancelReason: string | null
  createdAt: Date
  updatedAt: Date
  createdBy: number | null
  createdByName: string
  updatedBy: number | null
  updatedByName: string
  sentBy: number | null
  sentByName: string | null
  projectSnapshot: Record<string, unknown>
  seriesSnapshot: Record<string, unknown>
  pspid: string
  projNm: string
  sector: string
  projMsrm: number
  ptypeNm: string
  attachmentCount: number
  quotationCount: number
  // 나머지 필드는 사용할 때마다 추가
  [key: string]: unknown
}

// 프로젝트 상세정보 타입 추가를 위한 확장
// interface ExtendedDataTableRowAction<TData> extends DataTableRowAction<TData> {
//   type: DataTableRowAction<TData>["type"] | "project-detail"
// }

interface GetColumnsProps {
  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<TechSalesRfq> | null>>;
  openAttachmentsSheet: (rfqId: number) => void;
}

export function getColumns({
  setRowAction,
  openAttachmentsSheet,
}: GetColumnsProps): ColumnDef<TechSalesRfq>[] {
  return [
    {
      id: "select",
      // Remove the "Select all" checkbox in header since we're doing single-select
      header: () => <span className="sr-only">Select</span>,
      cell: ({ row, table }) => (
        <Checkbox
          checked={row.getIsSelected()}
          onCheckedChange={(value) => {
            // If selecting this row
            if (value) {
              // First deselect all rows (to ensure single selection)
              table.toggleAllRowsSelected(false)
              // Then select just this row
              row.toggleSelected(true)
              // Trigger the same action that was in the "Select" button
              setRowAction({ row, type: "select" as const })
            } else {
              // Just deselect this row
              row.toggleSelected(false)
            }
          }}
          aria-label="Select row"
          className="translate-y-0.5"
        />
      ),
      enableSorting: false,
      enableHiding: false,
      enableResizing: false,
      size: 40,
      minSize: 40,
      maxSize: 40,
    },
    
    {
      accessorKey: "status",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="진행상태" />
      ),
      cell: ({ row }) => <div>{row.getValue("status")}</div>,
      meta: {
        excelHeader: "진행상태"
      },
      enableResizing: true,
      minSize: 80,
      size: 100,
    },
    {
      accessorKey: "rfqCode",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="RFQ No." />
      ),
      cell: ({ row }) => <div>{row.getValue("rfqCode")}</div>,
      meta: {
        excelHeader: "RFQ No."
      },
      enableResizing: true,
      size: 120,
    },
    {
      accessorKey: "materialCode",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="자재코드" />
      ),
      cell: ({ row }) => <div>{row.getValue("materialCode")}</div>,
      meta: {
        excelHeader: "자재코드"
      },
      enableResizing: true,
      minSize: 80,
      size: 120,
    },
    {
      accessorKey: "itemName",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="자재명" />
      ),
      cell: ({ row }) => {
        const itemName = row.getValue("itemName");
        return <div>{itemName || "자재명 없음"}</div>;
      },
      meta: {
        excelHeader: "자재명"
      },
      enableResizing: true,
      size: 180,
    },
    {
      accessorKey: "pspid",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="프로젝트 번호" />
      ),
      cell: ({ row }) => <div>{row.getValue("pspid")}</div>,
      meta: {
        excelHeader: "프로젝트 번호"
      },
      enableResizing: true,
      size: 120,
    },
    {
      accessorKey: "projNm",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="프로젝트명" />
      ),
      cell: ({ row }) => <div>{row.getValue("projNm")}</div>,
      meta: {
        excelHeader: "프로젝트명"
      },
      enableResizing: true,
      size: 160,
    },
    {
      accessorKey: "projMsrm",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="척수" />
      ),
      cell: ({ row }) => <div>{row.getValue("projMsrm")}</div>,
      meta: {
        excelHeader: "척수"
      },
      enableResizing: true,
      minSize: 60,
      size: 80,
    },
    {
      accessorKey: "ptypeNm",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="선종" />
      ),
      cell: ({ row }) => <div>{row.getValue("ptypeNm")}</div>,
      meta: {
        excelHeader: "선종"
      },
      enableResizing: true,
      size: 120,
    },
    {
      accessorKey: "quotationCount",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="견적수" />
      ),
      cell: ({ row }) => <div>{row.getValue("quotationCount")}</div>,
      meta: {
        excelHeader: "견적수"
      },
      enableResizing: true,
      size: 80,
    },
    {
      id: "attachments",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="첨부파일" />
      ),
      cell: ({ row }) => {
        const rfq = row.original
        const attachmentCount = rfq.attachmentCount || 0

        const handleClick = () => {
          openAttachmentsSheet(rfq.id)
        }

        return (
          <Button
            variant="ghost"
            size="sm"
            className="relative h-8 w-8 p-0 group"
            onClick={handleClick}
            aria-label={
              attachmentCount > 0 ? `View ${attachmentCount} attachments` : "Add attachments"
            }
          >
            <Paperclip className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
            {attachmentCount > 0 && (
              <span className="pointer-events-none absolute -top-1 -right-1 inline-flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-primary px-1 text-[0.625rem] font-medium leading-none text-primary-foreground">
                {attachmentCount}
              </span>
            )}
            <span className="sr-only">
              {attachmentCount > 0 ? `${attachmentCount} 첨부파일` : "첨부파일 추가"}
            </span>
          </Button>
        )
      },
      enableSorting: false,
      enableResizing: true,
      size: 80,
      meta: {
        excelHeader: "첨부파일"
      },
    },
    {
      accessorKey: "rfqSendDate",
      header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="최초 전송일" />
      ),
      cell: ({ cell }) => {
        const value = cell.getValue();
        return value ? formatDate(value as Date, "KR") : "";
      },
      meta: {
        excelHeader: "최초 전송일"
      },
      enableResizing: true,
      size: 120,
    },
    {
      accessorKey: "dueDate",
      header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="RFQ 마감일" />
      ),
      cell: ({ cell }) => {
        const value = cell.getValue();
        return value ? formatDate(value as Date, "KR") : "";
      },
      meta: {
        excelHeader: "RFQ 마감일"
      },
      enableResizing: true,
      minSize: 80,
      size: 120,
    },
    {
      accessorKey: "createdByName",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="요청자" />
      ),
      cell: ({ row }) => <div>{row.getValue("createdByName")}</div>,
      meta: {
        excelHeader: "요청자"
      },
      enableResizing: true,
      size: 120,
    },
    {
      accessorKey: "createdAt",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="등록일" />
      ),
      cell: ({ cell }) => {
        const value = cell.getValue();
        return value ? formatDateTime(value as Date) : "";
      },
      meta: {
        excelHeader: "등록일"
      },
      enableResizing: true,
      size: 160,
    },
    {
      accessorKey: "updatedAt",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="수정일" />
      ),
      cell: ({ cell }) => {
        const value = cell.getValue();
        return value ? formatDateTime(value as Date) : "";
      },
      meta: {
        excelHeader: "수정일"
      },
      enableResizing: true,
      size: 160,
    },
    {
      id: "actions",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="액션" />
      ),
      cell: ({ row }) => {
        return (
          <Button
            variant="ghost"
            size="sm"
            onClick={() => setRowAction({ row, type: "view" as const })}
            className="h-8 px-2 gap-1"
          >
            <Info className="h-4 w-4" />
            <span className="hidden sm:inline">프로젝트 상세</span>
          </Button>
        );
      },
      enableSorting: false,
      enableHiding: false,
      enableResizing: false,
      size: 120,
      minSize: 120,
      maxSize: 120,
    },
  ]
}