import { Checkbox } from "@/components/ui/checkbox"
import { Button } from "@/components/ui/button"
import { MoreHorizontal, Eye, Edit, Trash2 } from "lucide-react"
import { type ColumnDef, TableMeta } 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)]
}

// 테이블 메타 타입 확장
declare module "@tanstack/react-table" {
  interface TableMeta<TData> {
    onCellUpdate?: (id: string, field: keyof TData, newValue: any) => Promise<void>
    onCellCancel?: (id: string, field: keyof TData) => void
    onAction?: (action: string, data?: any) => void
    onSaveEmptyRow?: (tempId: string) => Promise<void>
    onCancelEmptyRow?: (tempId: string) => void
    isEmptyRow?: (id: string) => boolean
    onTaxIdChange?: (id: string, taxId: string) => Promise<void>
    onMaterialGroupCodeChange?: (id: string, materialGroupCode: string) => Promise<void>
  }
}

// Vendor Pool 데이터 타입
export type VendorPoolItem = {
  id: string
  no: number
  selected: boolean
  constructionSector: string // 공사부문: 조선 또는 해양
  htDivision: string // H/T구분: H 또는 T
  designCategoryCode: string // 설계기능(공종) 코드: 2자리 영문대문자
  designCategory: string // 설계기능(공종): 전장 등
  equipBulkDivision: string // Equip/Bulk 구분: E 또는 B
  // 패키지 정보 (스키마: packageCode, packageName)
  packageCode: string
  packageName: string
  // 자재그룹 (스키마: materialGroupCode, materialGroupName)
  materialGroupCode: string
  materialGroupName: string
  smCode: string // SM Code
  similarMaterialNamePurchase: string // 유사자재명 (구매)
  similarMaterialNameOther: string // 유사자재명 (구매 외)
  // 협력업체 정보 (스키마: vendorCode, vendorName)
  vendorCode: string
  vendorName: string
  taxId: string // 사업자번호(Tax ID)
  faTarget: boolean // FA대상
  faStatus: string // FA현황
  faRemark: string // FA상세(Remark)
  tier: string // 등급(Tier)
  isAgent: boolean // Agent 여부
  // 계약서명주체 (스키마: contractSignerCode, contractSignerName)
  contractSignerCode: string
  contractSignerName: string
  headquarterLocation: string // 본사 위치(국가)
  manufacturingLocation: string // 제작/선적지(국가)
  avlVendorName: string // AVL 등재업체명
  similarVendorName: string // 유사업체명(기술영업)
  hasAvl: boolean // AVL: 존재여부
  isBlacklist: boolean // Blacklist
  isBcc: boolean // BCC
  purchaseOpinion: string // 구매의견
  // AVL 적용 선종(조선)
  shipTypeCommon: boolean // 공통
  shipTypeAmax: boolean // A-max
  shipTypeSmax: boolean // S-max
  shipTypeVlcc: boolean // VLCC
  shipTypeLngc: boolean // LNGC
  shipTypeCont: boolean // CONT
  // AVL 적용 선종(해양)
  offshoreTypeCommon: boolean // 공통
  offshoreTypeFpso: boolean // FPSO
  offshoreTypeFlng: boolean // FLNG
  offshoreTypeFpu: boolean // FPU
  offshoreTypePlatform: boolean // Platform
  offshoreTypeWtiv: boolean // WTIV
  offshoreTypeGom: boolean // GOM
  // eVCP 미등록 정보
  picName: string // PIC(담당자)
  picEmail: string // PIC(E-mail)
  picPhone: string // PIC(Phone)
  agentName: string // Agent(담당자)
  agentEmail: string // Agent(E-mail)
  agentPhone: string // Agent(Phone)
  // 업체 실적 현황
  recentQuoteDate: string // 최근견적일
  recentQuoteNumber: string // 최근견적번호
  recentOrderDate: string // 최근발주일
  recentOrderNumber: string // 최근발주번호
  // 업데이트 히스토리
  registrationDate: string // 등재일
  registrant: string // 등재자
  lastModifiedDate: string // 최종변경일
  lastModifier: 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,
        size: 40,
      },
      {
        accessorKey: "id",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="No." />
        ),
        cell: ({ row }) => {
          const id = String(row.original.id)

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

          // vendor_pool 테이블의 실제 id 표시
          return <div className="text-sm font-mono">{id}</div>
        },
        size: 60,
      },
      {
        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) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.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: 100,
      },
      {
        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: 80,
      },
      {
        accessorKey: "designCategoryCode",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="설계기능코드" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("designCategoryCode")
          const onSave = async (newValue: any) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.meta.onCellUpdate(row.original.id, "designCategoryCode", newValue)
            }
          }

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

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="설계기능코드 입력"
              maxLength={10}
              autoSave={false}
              isModified={isModified}
            />
          )
        },
        size: 120,
      },
      {
        accessorKey: "designCategory",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title={<span className="text-red-600 font-medium">설계기능(공종) *</span>} />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("designCategory")
          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, "designCategory", newValue)
            }
          }

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

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="설계기능(공종) 입력"
              maxLength={50}
              autoSave={false}
              initialEditMode={isEmptyRow}
              isModified={isModified}
            />
          )
        },
        size: 120,
      },
      {
        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: 120,
      },
      {
        accessorKey: "packageCode",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="패키지 코드" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("packageCode")
          const onSave = async (newValue: any) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.meta.onCellUpdate(row.original.id, "packageCode", newValue)
            }
          }

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

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="패키지 코드 입력"
              maxLength={50}
              autoSave={false}
              isModified={isModified}
            />
          )
        },
        size: 120,
      },
      {
        accessorKey: "packageName",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="패키지 명" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("packageName")
          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, "packageName", newValue)
            }
          }

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

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="패키지 명 입력"
              maxLength={100}
              autoSave={false}
              initialEditMode={isEmptyRow}
              isModified={isModified}
            />
          )
        },
        size: 120,
      },
      {
        accessorKey: "materialGroupCode",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title={<span className="text-red-600 font-medium">자재그룹 코드 *</span>} />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("materialGroupCode")
          const onSave = async (newValue: any) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.meta.onCellUpdate(row.original.id, "materialGroupCode", newValue)
            }
          }

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

          const onChange = async (newValue: any) => {
            if (table.options.meta?.onMaterialGroupCodeChange) {
              await table.options.meta.onMaterialGroupCodeChange(row.original.id, newValue)
            }
          }

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              onChange={onChange}
              placeholder="자재그룹 코드 입력"
              maxLength={50}
              autoSave={false}
              isModified={isModified}
            />
          )
        },
        size: 120,
      },
      {
        accessorKey: "materialGroupName",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title={<span className="text-red-600 font-medium">자재그룹 명 *</span>} />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("materialGroupName")
          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, "materialGroupName", newValue)
            }
          }

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

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="자재그룹 명 입력"
              maxLength={100}
              autoSave={false}
              initialEditMode={isEmptyRow}
              isModified={isModified}
            />
          )
        },
        size: 120,
      },
      {
        accessorKey: "smCode",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="SM Code" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("smCode")
          const onSave = async (newValue: any) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.meta.onCellUpdate(row.original.id, "smCode", newValue)
            }
          }

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="SM Code 입력"
              maxLength={50}
            />
          )
        },
        size: 100,
      },
      {
        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: 140,
      },
      {
        accessorKey: "similarMaterialNameOther",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="유사자재명(구매외)" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("similarMaterialNameOther")
          const onSave = async (newValue: any) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.meta.onCellUpdate(row.original.id, "similarMaterialNameOther", newValue)
            }
          }

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="유사자재명(구매외) 입력"
              maxLength={100}
              autoSave={false}
            />
          )
        },
        size: 140,
      },
      {
        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: 130,
      },
      {
        accessorKey: "vendorName",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title={<span className="text-red-600 font-medium">협력업체 명 *</span>} />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("vendorName")
          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: 130,
      },
      {
        accessorKey: "taxId",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title={<span className="text-red-600 font-medium">사업자번호 *</span>} />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("taxId")
          const onSave = async (newValue: any) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.meta.onCellUpdate(row.original.id, "taxId", newValue)
            }
          }

          const onChange = async (newValue: any) => {
            if (table.options.meta?.onTaxIdChange) {
              await table.options.meta.onTaxIdChange(row.original.id, newValue)
            }
          }

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              onChange={onChange}
              placeholder="사업자번호 입력"
              maxLength={50}
            />
          )
        },
        size: 120,
      },
      {
        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: 80,
      },
      {
        accessorKey: "faStatus",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="FA현황" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("faStatus")
          const onSave = async (newValue: any) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.meta.onCellUpdate(row.original.id, "faStatus", newValue)
            }
          }

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="FA현황 입력"
              maxLength={50}
            />
          )
        },
        size: 100,
      },
      {
        accessorKey: "faRemark",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="FA상세" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("faRemark")
          const onSave = async (newValue: any) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.meta.onCellUpdate(row.original.id, "faRemark", newValue)
            }
          }

          return (
            <EditableCell
              value={value}
              type="textarea"
              onSave={onSave}
              placeholder="FA상세 입력"
              maxLength={500}
              autoSave={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.getValue("tier")
          const onSave = async (newValue: any) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.meta.onCellUpdate(row.original.id, "tier", newValue)
            }
          }

          return (
            <EditableCell
              value={value}
              type="select"
              onSave={onSave}
              options={[
                { label: "Tier 1", value: "Tier 1" },
                { label: "Tier 2", value: "Tier 2" },
                { label: "Tier 3", value: "Tier 3" },
                { label: "Tier 4", value: "Tier 4" },
              ]}
              placeholder="등급 선택"
            />
          )
        },
        size: 80,
      },
      {
        accessorKey: "isAgent",
        header: "Agent 여부",
        cell: ({ row, table }) => {
          const value = row.getValue("isAgent") as boolean
          const onSave = async (newValue: any) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.meta.onCellUpdate(row.original.id, "isAgent", newValue)
            }
          }

          return (
            <EditableCell
              value={value}
              type="checkbox"
              onSave={onSave}
              autoSave={false}
            />
          )
        },
        enableSorting: false,
        size: 100,
      },
      {
        accessorKey: "contractSignerCode",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="계약서명주체 코드" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("contractSignerCode")
          const onSave = async (newValue: any) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.meta.onCellUpdate(row.original.id, "contractSignerCode", newValue)
            }
          }

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

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="계약서명주체 코드 입력"
              maxLength={50}
              autoSave={false}
              isModified={isModified}
            />
          )
        },
        size: 120,
      },
      {
        accessorKey: "contractSignerName",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title={<span className="text-red-600 font-medium">계약서명주체 명 *</span>} />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("contractSignerName")
          const onSave = async (newValue: any) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.meta.onCellUpdate(row.original.id, "contractSignerName", newValue)
            }
          }

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

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="계약서명주체 명 입력"
              maxLength={100}
              autoSave={false}
              isModified={isModified}
            />
          )
        },
        size: 120,
      },
      {
        accessorKey: "headquarterLocation",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title={<span className="text-red-600 font-medium">본사 위치 *</span>} />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("headquarterLocation")
          const onSave = async (newValue: any) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.meta.onCellUpdate(row.original.id, "headquarterLocation", newValue)
            }
          }

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="본사 위치 입력"
              maxLength={50}
            />
          )
        },
        size: 100,
      },
      {
        accessorKey: "manufacturingLocation",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title={<span className="text-red-600 font-medium">제작/선적지 *</span>} />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("manufacturingLocation")
          const onSave = async (newValue: any) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.meta.onCellUpdate(row.original.id, "manufacturingLocation", newValue)
            }
          }

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="제작/선적지 입력"
              maxLength={50}
            />
          )
        },
        size: 110,
      },
      {
        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: 140,
      },
      {
        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: 130,
      },
      {
        accessorKey: "hasAvl",
        header: "AVL",
        cell: ({ row, table }) => {
          const value = row.getValue("hasAvl") as boolean
          const onSave = async (newValue: any) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.meta.onCellUpdate(row.original.id, "hasAvl", newValue)
            }
          }

          return (
            <EditableCell
              value={value}
              type="checkbox"
              onSave={onSave}
              autoSave={false}
            />
          )
        },
        enableSorting: false,
        size: 60,
      },
      {
        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: 80,
      },
      {
        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: 120,
      },
      {
        accessorKey: "shipTypeCommon",
        header: "공통",
        cell: ({ row, table }) => {
          const value = row.getValue("shipTypeCommon") as boolean
          const onSave = async (newValue: any) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.meta.onCellUpdate(row.original.id, "shipTypeCommon", newValue)
            }
          }

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

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

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

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

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

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

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

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

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

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

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

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

          return (
            <EditableCell
              value={value}
              type="checkbox"
              onSave={onSave}
              autoSave={false}
            />
          )
        },
        size: 80,
      },
      {
        accessorKey: "picName",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="PIC(담당자)" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("picName")
          const onSave = async (newValue: any) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.meta.onCellUpdate(row.original.id, "picName", newValue)
            }
          }

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="PIC 담당자명 입력"
              maxLength={50}
            />
          )
        },
        size: 120,
      },
      {
        accessorKey: "picEmail",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="PIC(E-mail)" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("picEmail")
          const onSave = async (newValue: any) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.meta.onCellUpdate(row.original.id, "picEmail", newValue)
            }
          }
          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="PIC 이메일 입력"
              maxLength={100}
            />
          )
        },
        size: 140,
      },
      {
        accessorKey: "picPhone",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="PIC(Phone)" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("picPhone")
          const onSave = async (newValue: any) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.meta.onCellUpdate(row.original.id, "picPhone", newValue)
            }
          }

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="PIC 전화번호 입력"
              maxLength={20}
            />
          )
        },
        size: 120,
      },
      {
        accessorKey: "agentName",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="Agent(담당자)" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("agentName")
          const onSave = async (newValue: any) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.meta.onCellUpdate(row.original.id, "agentName", newValue)
            }
          }

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="Agent 담당자명 입력"
              maxLength={50}
            />
          )
        },
        size: 120,
      },
      {
        accessorKey: "agentEmail",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="Agent(E-mail)" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("agentEmail")
          const onSave = async (newValue: any) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.meta.onCellUpdate(row.original.id, "agentEmail", newValue)
            }
          }

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="Agent 이메일 입력"
              maxLength={100}
            />
          )
        },
        size: 140,
      },
      {
        accessorKey: "agentPhone",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="Agent(Phone)" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("agentPhone")
          const onSave = async (newValue: any) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.meta.onCellUpdate(row.original.id, "agentPhone", newValue)
            }
          }

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="Agent 전화번호 입력"
              maxLength={20}
            />
          )
        },
        size: 120,
      },
      {
        accessorKey: "recentQuoteDate",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="최근견적일" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("recentQuoteDate")
          const onSave = async (newValue: any) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.meta.onCellUpdate(row.original.id, "recentQuoteDate", newValue)
            }
          }

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="최근견적일 입력 (YYYY-MM-DD)"
              maxLength={20}
              autoSave={false}
            />
          )
        },
        size: 120,
      },
      {
        accessorKey: "recentQuoteNumber",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="최근견적번호" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("recentQuoteNumber")
          const onSave = async (newValue: any) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.meta.onCellUpdate(row.original.id, "recentQuoteNumber", newValue)
            }
          }

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="최근견적번호 입력"
              maxLength={50}
            />
          )
        },
        size: 130,
      },
      {
        accessorKey: "recentOrderDate",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="최근발주일" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("recentOrderDate")
          const onSave = async (newValue: any) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.meta.onCellUpdate(row.original.id, "recentOrderDate", newValue)
            }
          }

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="최근발주일 입력 (YYYY-MM-DD)"
              maxLength={20}
              autoSave={false}
            />
          )
        },
        size: 120,
      },
      {
        accessorKey: "recentOrderNumber",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="최근발주번호" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("recentOrderNumber")
          const onSave = async (newValue: any) => {
            if (table.options.meta?.onCellUpdate) {
              await table.options.meta.onCellUpdate(row.original.id, "recentOrderNumber", newValue)
            }
          }

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="최근발주번호 입력"
              maxLength={50}
            />
          )
        },
        size: 130,
      },
      {
        accessorKey: "registrationDate",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="등재일" />
        ),
        size: 120,
      },
      {
        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: 100,
      },
      {
        accessorKey: "lastModifiedDate",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="최종변경일" />
        ),
        size: 120,
      },
      {
        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: 120,
      },
  // 액션 그룹
  {
    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"
            >
              <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"
            >
              <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,
  },
]