import { Checkbox } from "@/components/ui/checkbox"
import { Button } from "@/components/ui/button"
import { Trash2 } from "lucide-react"
import { type ColumnDef } from "@tanstack/react-table"
import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
import { EditableCell } from "@/components/data-table/editable-cell"

// 수정 여부 확인 헬퍼 함수
const getIsModified = (table: any, rowId: string, fieldName: string) => {
  const pendingChanges = table.options.meta?.getPendingChanges?.() || {}
  return String(rowId) in pendingChanges && fieldName in pendingChanges[String(rowId)]
}

// vendor-pool 테이블 메타 타입 (복사본)
interface VendorPoolTableMeta {
  onCellUpdate?: (id: string | number, field: string, newValue: any) => Promise<void>
  onCellCancel?: (id: string | number, field: string) => void
  onAction?: (action: string, data?: any) => void
  onSaveEmptyRow?: (tempId: string) => Promise<void>
  onCancelEmptyRow?: (tempId: string) => void
  isEmptyRow?: (id: string) => boolean
}

// Vendor Pool 데이터 타입 - 스키마 기반 + 테이블용 추가 필드
import type { VendorPool } from "@/db/schema/avl/vendor-pool"
import { DisciplineHardcodedSelector } from "@/components/common/discipline-hardcoded"
import { MaterialGroupSelectorDialogSingle } from "@/components/common/material/material-group-selector-dialog-single"
import type { MaterialSearchItem } from "@/lib/material/material-group-service"
import { VendorTierSelector } from "@/components/common/selectors/vendor-tier/vendor-tier-selector"
import { VendorSelectorDialogSingle } from "@/components/common/vendor/vendor-selector-dialog-single"
import type { VendorSearchItem } from "@/components/common/vendor/vendor-service"
import { PlaceOfShippingSelectorDialogSingle } from "@/components/common/selectors/place-of-shipping/place-of-shipping-selector"
import { NationSelector, NationCode } from "@/components/common/selectors/nation"

export type VendorPoolItem = Omit<VendorPool, 'registrationDate' | 'lastModifiedDate'> & {
  id: string | number // temp-로 시작하는 경우 string, 실제 데이터는 number
  no: number // 테이블 표시용 순번
  selected: boolean // 테이블 선택 상태
  registrationDate: string // 표시용 string으로 변환
  lastModifiedDate: string // 표시용 string으로 변환
}

// 테이블 컬럼 정의
export const columns: ColumnDef<VendorPoolItem>[] = [

  {
    id: "select",
    header: ({ table }) => (
      <Checkbox
        checked={
          table.getIsAllPageRowsSelected() ||
          (table.getIsSomePageRowsSelected() && "indeterminate")
        }
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label="Select all"
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        aria-label="Select row"
      />
    ),
    enableSorting: false,
    enableHiding: false,
    enableColumnFilter: false,
    size: 40,
  },
  {
    accessorKey: "id",
    accessorFn: (row) => String(row.id),
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="ID" />
    ),
    cell: ({ row }) => {
      const id = String(row.original.id)

      // 빈 행의 경우 신규 표시
      if (id.startsWith('temp-')) {
        return <div className="text-sm text-muted-foreground italic">신규</div>
      }

      // 실제 ID 표시
      return <div className="text-sm font-mono">{id}</div>
    },
    size: 120,
  },
  {
    accessorKey: "constructionSector",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title={<span className="text-red-600 font-medium">공사부문 *</span>} />
    ),
    cell: ({ row, table }) => {
      const value = row.getValue("constructionSector")
      const isEmptyRow = String(row.original.id).startsWith('temp-')

      const onSave = async (newValue: any) => {
        const meta = table.options.meta as VendorPoolTableMeta
        if (meta?.onCellUpdate) {
          await meta.onCellUpdate(row.original.id, "constructionSector", newValue)
        }
      }

      // 수정 여부 확인
      const isModified = getIsModified(table, row.original.id, "constructionSector")

      return (
        <EditableCell
          value={value}
          type="select"
          onSave={onSave}
          options={[
            { label: "조선", value: "조선" },
            { label: "해양", value: "해양" }
          ]}
          placeholder="공사부문 선택"
          autoSave={true}
          disabled={false}
          initialEditMode={isEmptyRow}
          isModified={isModified}
        />
      )
    },
    size: 160,
  },
  {
    accessorKey: "htDivision",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title={<span className="text-red-600 font-medium">H/T *</span>} />
    ),
    cell: ({ row, table }) => {
      const value = row.getValue("htDivision")
      const isEmptyRow = String(row.original.id).startsWith('temp-')
      const onSave = async (newValue: any) => {
        if (table.options.meta?.onCellUpdate) {
          await table.options.meta.onCellUpdate(row.original.id, "htDivision", newValue)
        }
      }

      // 수정 여부 확인
      const isModified = getIsModified(table, row.original.id, "htDivision")

      return (
        <EditableCell
          value={value}
          type="select"
          onSave={onSave}
          options={[
            { label: "H", value: "H" },
            { label: "T", value: "T" },
            { label: "공통", value: "공통" },
          ]}
          placeholder="H/T 선택"
          autoSave={false}
          initialEditMode={isEmptyRow}
          isModified={isModified}
        />
      )
    },
    size: 120,
  },
  {
    accessorKey: "discipline",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title={<span className="text-red-600 font-medium">설계공종 *</span>} />
    ),
    cell: ({ row, table }) => {
      const discipline = row.original.discipline as string

      const onDisciplineSelect = async (newDiscipline: string) => {
        console.log('선택된 설계공종:', newDiscipline)
        console.log('행 ID:', row.original.id)

        if (table.options.meta?.onCellUpdate) {
          await table.options.meta.onCellUpdate(row.original.id, "discipline", newDiscipline)
        } else {
          console.error('onCellUpdate가 정의되지 않음')
        }
      }

      return (
        <DisciplineHardcodedSelector
          selectedDiscipline={discipline}
          onDisciplineSelect={onDisciplineSelect}
          disabled={false}
          placeholder="설계공종을 선택하세요"
        />
      )
    },
    size: 200,
  },
  {
    accessorKey: "equipBulkDivision",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="Equip/Bulk" />
    ),
    cell: ({ row, table }) => {
      const value = row.getValue("equipBulkDivision")
      const onSave = async (newValue: any) => {
        if (table.options.meta?.onCellUpdate) {
          await table.options.meta.onCellUpdate(row.original.id, "equipBulkDivision", newValue)
        }
      }

      return (
        <EditableCell
          value={value}
          type="select"
          onSave={onSave}
          options={[
            { label: "E (Equip)", value: "E" },
            { label: "B (Bulk)", value: "B" },
            { label: "S (강재)", value: "S" }
          ]}
          placeholder="구분 선택"
          autoSave={false}
        />
      )
    },
    size: 180,
  },
  {
    // accessorKey: "materialGroupName",
    id: "materialGroupName",
    accessorFn: (row) => {
      if (row.materialGroupCode && row.materialGroupName) {
        return `${row.materialGroupCode} - ${row.materialGroupName}`
      }
      return row.materialGroupName || row.materialGroupCode || ""
    },
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title={<span className="text-red-600 font-medium">자재그룹 *</span>} />
    ),
    cell: ({ row, table }) => {
      const materialGroupCode = row.original.materialGroupCode as string
      const materialGroupName = row.original.materialGroupName as string

      // 현재 선택된 material 구성
      const selectedMaterial: MaterialSearchItem | null = materialGroupCode && materialGroupName ? {
        materialGroupCode,
        materialGroupDescription: materialGroupName,
        displayText: `${materialGroupCode} - ${materialGroupName}`
      } : null

      const onMaterialSelect = async (material: MaterialSearchItem | null) => {
        console.log('선택된 자재그룹:', material)

        if (material) {
          // 자재그룹코드와 자재그룹명 필드 모두 업데이트
          if (table.options.meta?.onCellUpdate) {
            await table.options.meta.onCellUpdate(row.original.id, "materialGroupCode", material.materialGroupCode)
            await table.options.meta.onCellUpdate(row.original.id, "materialGroupName", material.materialGroupDescription)
          }
        } else {
          // 선택 해제 시 빈 값으로 설정
          if (table.options.meta?.onCellUpdate) {
            await table.options.meta.onCellUpdate(row.original.id, "materialGroupCode", "")
            await table.options.meta.onCellUpdate(row.original.id, "materialGroupName", "")
          }
        }
      }

      return (
        <MaterialGroupSelectorDialogSingle
          selectedMaterial={selectedMaterial}
          onMaterialSelect={onMaterialSelect}
          disabled={false}
          triggerLabel="자재그룹 선택"
          placeholder="자재그룹을 검색하세요..."
          title="자재그룹 선택"
          description="필요한 자재그룹을 검색하고 선택해주세요."
        />
      )
    },
    size: 400,
  },
  {
    accessorKey: "similarMaterialNamePurchase",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="자재명 (검색 키워드)" />
      // 이전에는 컬럼명이 '유사자재명(구매외)' 였음.
    ),
    cell: ({ row, table }) => {
      const value = row.getValue("similarMaterialNamePurchase")
      const onSave = async (newValue: any) => {
        if (table.options.meta?.onCellUpdate) {
          await table.options.meta.onCellUpdate(row.original.id, "similarMaterialNamePurchase", newValue)
        }
      }

      return (
        <EditableCell
          value={value}
          type="text"
          onSave={onSave}
          placeholder="유사자재명(구매) 입력"
          maxLength={100}
          autoSave={false}
        />
      )
    },
    size: 250,
  },
  {
    accessorKey: "vendorSelector",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="협력업체 선택" />
    ),
    cell: ({ row, table }) => {
      const vendorCode = row.original.vendorCode as string
      const vendorName = row.original.vendorName as string

      // 현재 선택된 vendor 구성
      const selectedVendor: VendorSearchItem | null = vendorCode && vendorName ? {
        id: 0, // 실제로는 vendorId가 있어야 하지만 여기서는 임시로 0 사용
        vendorName,
        vendorCode: vendorCode || null,
        taxId: null, // 사업자번호는 vendor-pool에서 관리하지 않음
        status: "ACTIVE", // 임시 값
        displayText: vendorName + (vendorCode ? ` (${vendorCode})` : "")
      } : null

      const onVendorSelect = async (vendor: VendorSearchItem | null) => {
        console.log('선택된 협력업체:', vendor)

        if (vendor) {
          // 협력업체코드, 협력업체명 필드 업데이트
          if (table.options.meta?.onCellUpdate) {
            await table.options.meta.onCellUpdate(row.original.id, "vendorCode", vendor.vendorCode || "")
            await table.options.meta.onCellUpdate(row.original.id, "vendorName", vendor.vendorName)
          }
        } else {
          // 선택 해제 시 빈 값으로 설정
          if (table.options.meta?.onCellUpdate) {
            await table.options.meta.onCellUpdate(row.original.id, "vendorCode", "")
            await table.options.meta.onCellUpdate(row.original.id, "vendorName", "")
          }
        }
      }

      return (
        <VendorSelectorDialogSingle
          selectedVendor={selectedVendor}
          onVendorSelect={onVendorSelect}
          disabled={false}
          triggerLabel="협력업체 선택"
          placeholder="협력업체를 검색하세요..."
          title="협력업체 선택"
          description="협력업체를 검색하고 선택해주세요."
          statusFilter="ACTIVE"
        />
      )
    },
    enableColumnFilter: false,
    size: 200,
  },
  {
    accessorKey: "vendorCode",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="협력업체 코드" />
    ),
    cell: ({ row, table }) => {
      const value = row.getValue("vendorCode")
      const onSave = async (newValue: any) => {
        if (table.options.meta?.onCellUpdate) {
          await table.options.meta.onCellUpdate(row.original.id, "vendorCode", newValue)
        }
      }

      // 수정 여부 확인
      const isModified = getIsModified(table, row.original.id, "vendorCode")

      return (
        <EditableCell
          value={value}
          type="text"
          onSave={onSave}
          placeholder="협력업체 코드 입력"
          maxLength={50}
          autoSave={false}
          isModified={isModified}
        />
      )
    },
    size: 200,
  },
  {
    // accessorKey: "vendorName",
    id: "vendorName",
    accessorFn: (row) => {
      if (row.vendorCode && row.vendorName) {
        return `${row.vendorCode} - ${row.vendorName}`
      }
      return row.vendorName || row.vendorCode || ""
    },
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title={<span className="text-red-600 font-medium">협력업체 명 *</span>} />
    ),
    cell: ({ row, table }) => {
      const value = row.original.vendorName // accessorFn을 썼으므로 getValue() 대신 original 참조가 더 안전
      const isEmptyRow = String(row.original.id).startsWith('temp-')
      const onSave = async (newValue: any) => {
        if (table.options.meta?.onCellUpdate) {
          await table.options.meta.onCellUpdate(row.original.id, "vendorName", newValue)
        }
      }

      // 수정 여부 확인
      const isModified = getIsModified(table, row.original.id, "vendorName")

      return (
        <EditableCell
          value={value}
          type="text"
          onSave={onSave}
          placeholder="협력업체 명 입력"
          maxLength={100}
          autoSave={false}
          initialEditMode={isEmptyRow}
          isModified={isModified}
        />
      )
    },
    size: 200,
  },
  {
    accessorKey: "faTarget",
    header: "FA대상",
    cell: ({ row, table }) => {
      const value = row.getValue("faTarget") as boolean
      const onSave = async (newValue: any) => {
        if (table.options.meta?.onCellUpdate) {
          await table.options.meta.onCellUpdate(row.original.id, "faTarget", newValue)
        }
      }

      // 수정 여부 확인
      const isModified = getIsModified(table, row.original.id, "faTarget")

      return (
        <EditableCell
          value={value}
          type="checkbox"
          onSave={onSave}
          autoSave={false}
          isModified={isModified}
        />
      )
    },
    enableSorting: false,
    size: 120,
  },
  {
    accessorKey: "tier",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title={<span className="text-red-600 font-medium">등급 *</span>} />
    ),
    cell: ({ row, table }) => {
      const value = row.original.tier as string

      const onValueChange = async (newValue: string) => {
        if (table.options.meta?.onCellUpdate) {
          await table.options.meta.onCellUpdate(row.original.id, "tier", newValue)
        }
      }

      return (
        <VendorTierSelector
          value={value}
          onValueChange={onValueChange}
          disabled={false}
          placeholder="등급 선택"
        />
      )
    },
    size: 150,
  },
  {
    accessorKey: "headquarterLocation",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title={<span className="text-red-600 font-medium">본사 위치 *</span>} />
    ),
    cell: ({ row, table }) => {
      const headquarterLocation = row.original.headquarterLocation as string

      // 현재 선택된 국가명으로부터 국가 코드를 찾기 위해 임시로 null 설정
      // 실제로는 국가명에서 국가코드를 역추적해야 하지만, 여기서는 단순화
      const selectedNation: NationCode | undefined = undefined

      const onNationSelect = async (nation: NationCode) => {
        console.log('선택된 국가:', nation)

        if (table.options.meta?.onCellUpdate) {
          // CDNM 값(한국어 국가명)을 저장
          await table.options.meta.onCellUpdate(row.original.id, "headquarterLocation", nation.CDNM)
        }
      }

      return (
        <NationSelector
          selectedNation={selectedNation}
          onNationSelect={onNationSelect}
          disabled={false}
          placeholder={headquarterLocation || "본사 위치 선택"}
          className="w-full"
        />
      )
    },
    size: 220,
  },
  {
    accessorKey: "manufacturingLocation",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title={<span className="text-red-600 font-medium">제작/선적지 *</span>} />
    ),
    cell: ({ row, table }) => {
      const manufacturingLocation = row.original.manufacturingLocation as string

      // 현재 선택된 장소 구성 (description은 알 수 없으므로 null로 설정)
      const selectedPlace = null // 선택된 장소 표시를 위해 null로 설정

      const onPlaceSelect = async (place: { code: string; description: string } | null) => {
        console.log('선택된 제작/선적지:', place)

        if (table.options.meta?.onCellUpdate) {
          await table.options.meta.onCellUpdate(row.original.id, "manufacturingLocation", place?.code || "")
        }
      }

      return (
        <PlaceOfShippingSelectorDialogSingle
          selectedPlace={selectedPlace}
          onPlaceSelect={onPlaceSelect}
          disabled={false}
          triggerLabel={manufacturingLocation || "제작/선적지 선택"}
          placeholder="제작/선적지를 검색하세요..."
          title="제작/선적지 선택"
          description="제작/선적지를 검색하고 선택해주세요."
        />
      )
    },
    size: 200,
  },
  {
    accessorKey: "avlVendorName",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title={<span className="text-red-600 font-medium">AVL 등재업체명 *</span>} />
    ),
    cell: ({ row, table }) => {
      const value = row.getValue("avlVendorName")
      const onSave = async (newValue: any) => {
        if (table.options.meta?.onCellUpdate) {
          await table.options.meta.onCellUpdate(row.original.id, "avlVendorName", newValue)
        }
      }

      return (
        <EditableCell
          value={value}
          type="text"
          onSave={onSave}
          placeholder="AVL 등재업체명 입력"
          maxLength={100}
        />
      )
    },
    size: 220,
  },
  {
    accessorKey: "similarVendorName",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="업체명 (검색 키워드)" />
      // 이전에는 컬럼명이 '유사업체명' 였음.
    ),
    cell: ({ row, table }) => {
      const value = row.getValue("similarVendorName")
      const onSave = async (newValue: any) => {
        if (table.options.meta?.onCellUpdate) {
          await table.options.meta.onCellUpdate(row.original.id, "similarVendorName", newValue)
        }
      }

      return (
        <EditableCell
          value={value}
          type="text"
          onSave={onSave}
          placeholder="유사업체명 입력"
          maxLength={100}
        />
      )
    },
    size: 280,
  },
  {
    accessorKey: "isBlacklist",
    header: "Blacklist",
    cell: ({ row, table }) => {
      const value = row.getValue("isBlacklist") as boolean
      const onSave = async (newValue: any) => {
        if (table.options.meta?.onCellUpdate) {
          await table.options.meta.onCellUpdate(row.original.id, "isBlacklist", newValue)
        }
      }

      return (
        <EditableCell
          value={value}
          type="checkbox"
          onSave={onSave}
          autoSave={false}
        />
      )
    },
    enableSorting: false,
    size: 100,
  },
  {
    accessorKey: "isBcc",
    header: "BCC",
    cell: ({ row, table }) => {
      const value = row.getValue("isBcc") as boolean
      const onSave = async (newValue: any) => {
        if (table.options.meta?.onCellUpdate) {
          await table.options.meta.onCellUpdate(row.original.id, "isBcc", newValue)
        }
      }

      return (
        <EditableCell
          value={value}
          type="checkbox"
          onSave={onSave}
          autoSave={false}
        />
      )
    },
    enableSorting: false,
    size: 100,
  },
  {
    accessorKey: "purchaseOpinion",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="구매의견" />
    ),
    cell: ({ row, table }) => {
      const value = row.getValue("purchaseOpinion")
      const onSave = async (newValue: any) => {
        if (table.options.meta?.onCellUpdate) {
          await table.options.meta.onCellUpdate(row.original.id, "purchaseOpinion", newValue)
        }
      }

      return (
        <EditableCell
          value={value}
          type="textarea"
          onSave={onSave}
          placeholder="구매의견 입력"
          maxLength={500}
        />
      )
    },
    size: 300,
  },

  {
    accessorKey: "recentQuoteDate",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="최근견적일" />
    ),
    cell: ({ row }) => {
      const value = row.getValue("recentQuoteDate") as string
      return (
        <div className="px-2 py-1 text-sm">
          {value || "-"}
        </div>
      )
    },
    size: 200,
  },
  {
    accessorKey: "recentQuoteNumber",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="최근견적번호" />
    ),
    cell: ({ row }) => {
      const value = row.getValue("recentQuoteNumber") as string
      return (
        <div className="px-2 py-1 text-sm">
          {value || "-"}
        </div>
      )
    },
    size: 200,
  },
  {
    accessorKey: "recentOrderDate",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="최근발주일" />
    ),
    cell: ({ row }) => {
      const value = row.getValue("recentOrderDate") as string
      return (
        <div className="px-2 py-1 text-sm">
          {value || "-"}
        </div>
      )
    },
    size: 150,
  },
  {
    accessorKey: "recentOrderNumber",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="최근발주번호" />
    ),
    cell: ({ row }) => {
      const value = row.getValue("recentOrderNumber") as string
      return (
        <div className="px-2 py-1 text-sm">
          {value || "-"}
        </div>
      )
    },
    size: 200,
  },
  {
    accessorKey: "registrationDate",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="등록일" />
    ),
    size: 150,
  },
  {
    accessorKey: "registrant",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="등록자" />
    ),
    cell: ({ row }) => {
      const value = row.getValue("registrant") as string
      return <div className="text-sm">{value || ""}</div>
    },
    size: 150,
  },
  {
    accessorKey: "lastModifiedDate",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="최종변경일" />
    ),
    size: 150,
  },
  {
    accessorKey: "lastModifier",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="최종변경자" />
    ),
    cell: ({ row }) => {
      const value = row.getValue("lastModifier") as string
      return <div className="text-sm">{value || ""}</div>
    },
    size: 150,
  },
  // 액션 그룹
  {
    id: "actions",
    header: "액션",
    cell: ({ row, table }) => {
      const data = row.original
      const isEmptyRow = (table.options.meta as any)?.isEmptyRow?.(String(data.id))

      if (isEmptyRow) {
        // 빈 행의 경우 저장/취소 버튼 표시
        return (
          <div className="flex items-center gap-2 overflow-visible relative">
            <Button
              variant="default"
              size="sm"
              onClick={() => {
                const onSaveEmptyRow = (table.options.meta as any)?.onSaveEmptyRow
                onSaveEmptyRow?.(data.id)
              }}
              title="저장"
              className="bg-green-600 hover:bg-green-700 whitespace-normal h-auto"
            >
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={() => {
                const onCancelEmptyRow = (table.options.meta as any)?.onCancelEmptyRow
                onCancelEmptyRow?.(data.id)
              }}
              title="취소"
              className="border-red-300 text-red-600 hover:bg-red-50 whitespace-normal h-auto"
            >
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </Button>
          </div>
        )
      }

      // 일반 행의 경우 기존 액션 버튼들 표시
      return (
        <div className="flex items-center gap-2 overflow-visible relative">
          <Button
            variant="ghost"
            size="sm"
            onClick={() => {
              const onAction = (table.options.meta as any)?.onAction
              onAction?.('delete', data)
            }}
            title="삭제"
          >
            <Trash2 className="h-4 w-4" />
          </Button>
        </div>
      )
    },
    size: 120,
    enableSorting: false,
    enableHiding: false,
    enableColumnFilter: false,
  },
]