path: root/lib/avl/table/columns-detail.tsx

import { Checkbox } from "@/components/ui/checkbox"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { 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
  }
}

// AVL 상세 아이템 타입
export type AvlDetailItem = {
  id: string
  no: number
  selected: boolean
  // AVL 리스트 ID (외래키)
  avlListId: number
  // 설계 정보
  equipBulkDivision: 'EQUIP' | 'BULK'
  disciplineCode: string
  disciplineName: string
  // 자재 정보
  materialNameCustomerSide: string
  packageCode: string
  packageName: string
  materialGroupCode: string
  materialGroupName: string
  // 협력업체 정보
  vendorId?: number
  vendorName: string
  vendorCode: string
  avlVendorName: string
  tier: string
  // FA 정보
  faTarget: boolean
  faStatus: string
  // Agent 정보
  isAgent: boolean
  agentStatus: string // UI 표시용
  // 계약 서명주체
  contractSignerId?: number
  contractSignerName: string
  contractSignerCode: string
  // 위치 정보
  headquarterLocation: string
  manufacturingLocation: string
  // SHI Qualification
  shiAvl: boolean
  shiBlacklist: boolean
  shiBcc: boolean
  // 기술영업 견적결과
  salesQuoteNumber: string
  quoteCode: string
  salesVendorInfo: string
  salesCountry: string
  totalAmount: string
  quoteReceivedDate: string
  // 업체 실적 현황(구매)
  recentQuoteDate: string
  recentQuoteNumber: string
  recentOrderDate: string
  recentOrderNumber: string
  // 기타
  remarks: string
  // 타임스탬프
  createdAt: string
  updatedAt: string
}

// 테이블 컬럼 정의
export const columns: ColumnDef<AvlDetailItem>[] = [
  // 기본 정보 그룹
  {
    header: "기본 정보",
    columns: [
      {
        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: 50,
      },
      {
        accessorKey: "no",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="No." />
        ),
        size: 60,
      },
      {
        accessorKey: "equipBulkDivision",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="Equip/Bulk 구분" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("equipBulkDivision") as string
          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, "equipBulkDivision", newValue)
            }
          }

          const isModified = getIsModified(table, row.original.id, "equipBulkDivision")

          return (
            <EditableCell
              value={value}
              type="select"
              onSave={onSave}
              options={[
                { label: "EQUIP", value: "EQUIP" },
                { label: "BULK", value: "BULK" }
              ]}
              placeholder="구분 선택"
              autoSave={true}
              disabled={false}
              initialEditMode={isEmptyRow}
              isModified={isModified}
            />
          )
        },
        size: 120,
      },
      {
        accessorKey: "disciplineName",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="설계공종" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("disciplineName")
          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, "disciplineName", newValue)
            }
          }

          const isModified = getIsModified(table, row.original.id, "disciplineName")

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="설계공종 입력"
              maxLength={50}
              autoSave={true}
              disabled={false}
              initialEditMode={isEmptyRow}
              isModified={isModified}
            />
          )
        },
        size: 120,
      },
      {
        accessorKey: "materialNameCustomerSide",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="고객사 AVL 자재명" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("materialNameCustomerSide")
          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, "materialNameCustomerSide", newValue)
            }
          }

          const isModified = getIsModified(table, row.original.id, "materialNameCustomerSide")

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="자재명 입력"
              maxLength={100}
              autoSave={true}
              disabled={false}
              initialEditMode={isEmptyRow}
              isModified={isModified}
            />
          )
        },
        size: 150,
      },
      {
        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={true}
              disabled={false}
              initialEditMode={isEmptyRow}
              isModified={isModified}
            />
          )
        },
        size: 130,
      },
      {
        accessorKey: "materialGroupCode",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="자재그룹코드" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("materialGroupCode")
          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, "materialGroupCode", newValue)
            }
          }

          const isModified = getIsModified(table, row.original.id, "materialGroupCode")

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="자재그룹코드 입력"
              maxLength={50}
              autoSave={true}
              disabled={false}
              initialEditMode={isEmptyRow}
              isModified={isModified}
            />
          )
        },
        size: 120,
      },
      {
        accessorKey: "materialGroupName",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="자재그룹명" />
        ),
        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={true}
              disabled={false}
              initialEditMode={isEmptyRow}
              isModified={isModified}
            />
          )
        },
        size: 130,
      },
      {
        accessorKey: "vendorCode",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="협력업체코드" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("vendorCode")
          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, "vendorCode", newValue)
            }
          }

          const isModified = getIsModified(table, row.original.id, "vendorCode")

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="협력업체코드 입력"
              maxLength={50}
              autoSave={true}
              disabled={false}
              initialEditMode={isEmptyRow}
              isModified={isModified}
            />
          )
        },
        size: 120,
      },
      {
        accessorKey: "vendorName",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="협력업체명" />
        ),
        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={true}
              disabled={false}
              initialEditMode={isEmptyRow}
              isModified={isModified}
            />
          )
        },
        size: 140,
      },
      {
        accessorKey: "avlVendorName",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="AVL 등재업체명" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("avlVendorName")
          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, "avlVendorName", newValue)
            }
          }

          const isModified = getIsModified(table, row.original.id, "avlVendorName")

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="AVL 등재업체명 입력"
              maxLength={100}
              autoSave={true}
              disabled={false}
              initialEditMode={isEmptyRow}
              isModified={isModified}
            />
          )
        },
        size: 140,
      },
      {
        accessorKey: "tier",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="등급 (Tier)" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("tier") as string
          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, "tier", newValue)
            }
          }

          const isModified = getIsModified(table, row.original.id, "tier")

          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" }
              ]}
              placeholder="등급 선택"
              autoSave={true}
              disabled={false}
              initialEditMode={isEmptyRow}
              isModified={isModified}
            />
          )
        },
        size: 100,
      },
    ],
  },
  // FA 정보 그룹
  {
    header: "FA 정보",
    columns: [
      {
        accessorKey: "faTarget",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="FA 대상" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("faTarget") as boolean
          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, "faTarget", newValue)
            }
          }

          const isModified = getIsModified(table, row.original.id, "faTarget")

          return (
            <EditableCell
              value={value}
              type="checkbox"
              onSave={onSave}
              autoSave={true}
              disabled={false}
              initialEditMode={isEmptyRow}
              isModified={isModified}
            />
          )
        },
        size: 80,
      },
      {
        accessorKey: "faStatus",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="FA 현황" />
        ),
        cell: ({ row, table }) => {
          const value = row.getValue("faStatus")
          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, "faStatus", newValue)
            }
          }

          const isModified = getIsModified(table, row.original.id, "faStatus")

          return (
            <EditableCell
              value={value}
              type="text"
              onSave={onSave}
              placeholder="FA 현황 입력"
              maxLength={50}
              autoSave={true}
              disabled={false}
              initialEditMode={isEmptyRow}
              isModified={isModified}
            />
          )
        },
        size: 100,
      },
    ],
  },
  // SHI Qualification 그룹
  {
    header: "SHI Qualification",
    columns: [
      {
        accessorKey: "shiAvl",
        header: "AVL",
        cell: ({ row, table }) => {
          const value = row.getValue("shiAvl") as boolean
          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, "shiAvl", newValue)
            }
          }

          const isModified = getIsModified(table, row.original.id, "shiAvl")

          return (
            <EditableCell
              value={value}
              type="checkbox"
              onSave={onSave}
              autoSave={true}
              disabled={false}
              initialEditMode={isEmptyRow}
              isModified={isModified}
            />
          )
        },
        size: 80,
      },
      {
        accessorKey: "shiBlacklist",
        header: "Blacklist",
        cell: ({ row, table }) => {
          const value = row.getValue("shiBlacklist") as boolean
          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, "shiBlacklist", newValue)
            }
          }

          const isModified = getIsModified(table, row.original.id, "shiBlacklist")

          return (
            <EditableCell
              value={value}
              type="checkbox"
              onSave={onSave}
              autoSave={true}
              disabled={false}
              initialEditMode={isEmptyRow}
              isModified={isModified}
            />
          )
        },
        size: 100,
      },
      {
        accessorKey: "shiBcc",
        header: "BCC",
        cell: ({ row, table }) => {
          const value = row.getValue("shiBcc") as boolean
          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, "shiBcc", newValue)
            }
          }

          const isModified = getIsModified(table, row.original.id, "shiBcc")

          return (
            <EditableCell
              value={value}
              type="checkbox"
              onSave={onSave}
              autoSave={true}
              disabled={false}
              initialEditMode={isEmptyRow}
              isModified={isModified}
            />
          )
        },
        size: 80,
      },
    ],
  },
  // 액션 컬럼
  {
    id: "actions",
    header: "액션",
    cell: ({ row, table }) => {
      const isEmptyRow = String(row.original.id).startsWith('temp-')

      return (
        <div className="flex items-center gap-2">
          {!isEmptyRow && (
            <>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => table.options.meta?.onAction?.('edit', row.original)}
                className="h-8 w-8 p-0"
              >
                <Edit className="h-4 w-4" />
              </Button>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => table.options.meta?.onAction?.('delete', row.original)}
                className="h-8 w-8 p-0 text-destructive hover:text-destructive"
              >
                <Trash2 className="h-4 w-4" />
              </Button>
            </>
          )}
          {isEmptyRow && (
            <>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => table.options.meta?.onSaveEmptyRow?.(row.original.id)}
                className="h-8 w-8 p-0"
              >
                저장
              </Button>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => table.options.meta?.onCancelEmptyRow?.(row.original.id)}
                className="h-8 w-8 p-0"
              >
                취소
              </Button>
            </>
          )}
        </div>
      )
    },
    size: 100,
    enableSorting: false,
    enableHiding: false,
  },
]