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 { DisciplineCode, EngineeringDisciplineSelector } from "@/components/common/discipline"
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,
    size: 40,
  },
  {
    accessorKey: "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: 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) => {
        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: 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: "designCategory",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title={<span className="text-red-600 font-medium">설계기능(공종) *</span>} />
    ),
    cell: ({ row, table }) => {
      const designCategoryCode = row.original.designCategoryCode as string
      const designCategory = row.original.designCategory as string

      // 현재 선택된 discipline 구성
      const selectedDiscipline: DisciplineCode | undefined = designCategoryCode && designCategory ? {
        CD: designCategoryCode,
        USR_DF_CHAR_18: designCategory
      } : undefined

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

        // 설계기능코드와 설계기능(공종) 필드 모두 업데이트
        if (table.options.meta?.onCellUpdate) {
          await table.options.meta.onCellUpdate(row.original.id, "designCategoryCode", discipline.CD)
          await table.options.meta.onCellUpdate(row.original.id, "designCategory", discipline.USR_DF_CHAR_18)
        } else {
          console.error('onCellUpdate가 정의되지 않음')
        }
      }

      return (
        <EngineeringDisciplineSelector
          selectedDiscipline={selectedDiscipline}
          onDisciplineSelect={onDisciplineSelect}
          disabled={false}
          placeholder="설계공종을 선택하세요"
        />
      )
    },
    size: 260,
  },
  {
    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: 200,
  },
  {
    accessorKey: "materialGroupName",
    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: "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: 200,
  },
  {
    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: "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: "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"
        />
      )
    },
    size: 150,
  },
  {
    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: "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 }) => {
      const value = row.original.faStatus as string

      // 'O'인 경우에만 'O'를 표시, 그 외에는 빈 셀
      const displayValue = value === "O" ? "O" : ""

      return (
        <div className="px-2 py-1 text-sm text-center">
          {displayValue}
        </div>
      )
    },
    size: 120,
  },
  // {
  //   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.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: 120,
  },
  {
    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: "contractSignerSelector",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="계약서명주체 선택" />
    ),
    cell: ({ row, table }) => {
      const contractSignerCode = row.original.contractSignerCode as string
      const contractSignerName = row.original.contractSignerName as string

      // 현재 선택된 contract signer 구성
      const selectedVendor: VendorSearchItem | null = contractSignerCode && contractSignerName ? {
        id: 0, // 실제로는 vendorId가 있어야 하지만 여기서는 임시로 0 사용
        vendorName: contractSignerName,
        vendorCode: contractSignerCode || null,
        taxId: null, // 사업자번호는 vendor-pool에서 관리하지 않음
        status: "ACTIVE", // 임시 값
        displayText: contractSignerName + (contractSignerCode ? ` (${contractSignerCode})` : "")
      } : 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, "contractSignerCode", vendor.vendorCode || "")
            await table.options.meta.onCellUpdate(row.original.id, "contractSignerName", vendor.vendorName)
          }
        } else {
          // 선택 해제 시 빈 값으로 설정
          if (table.options.meta?.onCellUpdate) {
            await table.options.meta.onCellUpdate(row.original.id, "contractSignerCode", "")
            await table.options.meta.onCellUpdate(row.original.id, "contractSignerName", "")
          }
        }
      }

      return (
        <VendorSelectorDialogSingle
          selectedVendor={selectedVendor}
          onVendorSelect={onVendorSelect}
          disabled={false}
          triggerLabel="계약서명주체 선택"
          placeholder="계약서명주체를 검색하세요..."
          title="계약서명주체 선택"
          description="계약서명주체를 검색하고 선택해주세요."
          statusFilter="ACTIVE"
        />
      )
    },
    size: 150,
  },
  {
    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 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: 180,
  },
  {
    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: 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: 60,
  },
  {
    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: 60,
  },
  {
    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: "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: 60,
  },
  {
    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: 60,
  },
  {
    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: 60,
  },
  {
    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: 60,
  },
  {
    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: 60,
  },
  {
    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: 60,
  },
  {
    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: 60,
  },
  {
    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: 60,
  },
  {
    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: 60,
  },
  {
    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: 60,
  },
  {
    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: 60,
  },
  {
    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: 60,
  },
  {
    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="입력가능"
          maxLength={50}
        />
      )
    },
    size: 120,
  },
  {
    accessorKey: "picEmail",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="협력업체담당자(E-mail)" />
      // 이전에는 컬럼명이 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="입력가능"
          maxLength={100}
        />
      )
    },
    size: 140,
  },
  {
    accessorKey: "picPhone",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="협력업체담당자(Phone)" />
      // 이전에는 컬럼명이 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="입력가능"
          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="입력가능"
          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="입력가능"
          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="입력가능"
          maxLength={20}
        />
      )
    },
    size: 120,
  },
  {
    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: 120,
  },
  {
    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: 130,
  },
  {
    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: 120,
  },
  {
    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: 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,
  },
]