path: root/components/data-table/editable-cell.tsx

"use client"

import * as React from "react"
import { useCallback } from "react"
import { Edit2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { cn } from "@/lib/utils"

export type EditableCellType =
  | "text"
  | "textarea"
  | "select"
  | "checkbox"
  | "number"

export interface EditableCellProps<T = any> {
  value: T
  type: EditableCellType
  onSave: (newValue: T) => void // 일괄 저장이므로 Promise 제거
  onCancel?: () => void
  onChange?: (newValue: T) => void // 값 변경 시 실시간 콜백
  className?: string
  options?: { label: string; value: T }[] // select 타입용
  placeholder?: string
  disabled?: boolean
  maxLength?: number
  validation?: (value: T) => string | null // 유효성 검증 함수
  autoSave?: boolean // 자동 저장 여부 (기본값: true)
  initialEditMode?: boolean // 초기 편집 모드 여부 (기본값: false)
  isModified?: boolean // 수정되었는지 여부
}

export function EditableCell<T = any>({
  value,
  type,
  onSave,
  onCancel,
  onChange,
  className,
  options = [],
  placeholder,
  disabled = false,
  maxLength,
  validation,
  autoSave = true,
  initialEditMode = false,
  isModified = false,
}: EditableCellProps<T>) {
  const [isEditing, setIsEditing] = React.useState(initialEditMode)
  const [editValue, setEditValue] = React.useState<T>(value)
  const [error, setError] = React.useState<string | null>(null)

  const handleFinishEdit = useCallback((overrideValue?: T) => {
    const currentValue = overrideValue !== undefined ? overrideValue : editValue

    // 유효성 검증
    if (validation && currentValue !== value) {
      const validationError = validation(currentValue)
      if (validationError) {
        setError(validationError)
        return
      }
    }

    // 값이 변경된 경우에만 저장 (일괄 저장용)
    if (currentValue !== value) {
      onSave(currentValue)
    }

    setIsEditing(false)
    setError(null)
  }, [editValue, validation, value, onSave])

  const handleCheckboxChange = useCallback((checked: boolean) => {
    const convertedValue = checked as T
    setEditValue(convertedValue)
    if (autoSave) {
      // 체크박스 변경 시 자동 저장 - 값 직접 전달
      handleFinishEdit(convertedValue)
    } else {
      // 일괄 저장 모드에서는 실시간 표시를 위해 즉시 onSave 호출
      onSave(convertedValue)
    }
  }, [autoSave, handleFinishEdit, onSave])

  const handleStartEdit = useCallback((e: React.MouseEvent) => {
    e.stopPropagation()
    if (disabled) return

    // 체크박스의 경우 즉시 토글
    if (type === "checkbox") {
      // T가 boolean이라고 가정
      const newValue = !value
      handleCheckboxChange(!!newValue)
      return
    }

    setIsEditing(true)
    setEditValue(value)
    setError(null)
  }, [disabled, value, type, handleCheckboxChange])

  const handleCancelEdit = useCallback(() => {
    // 취소 시 원래 값으로 복원하되, pendingChanges에서도 제거
    onCancel?.()
    setEditValue(value)
    setIsEditing(false)
    setError(null)
  }, [onCancel, value])

  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
    if (e.key === "Enter" && type !== "textarea") {
      e.preventDefault()
      handleFinishEdit()
    } else if (e.key === "Escape") {
      e.stopPropagation()
      handleCancelEdit()
    }
  }, [type, handleFinishEdit, handleCancelEdit])

  const handleBlur = useCallback(() => {
    handleFinishEdit()
  }, [handleFinishEdit])

  // 값 표시를 위한 헬퍼 함수
  const getDisplayValue = useCallback((val: T): string => {
    if (val === null || val === undefined) return ""
    if (typeof val === 'boolean') return val ? "true" : "false"
    return String(val)
  }, [])

  const handleSelectChange = useCallback((newValue: string) => {
    // string을 원래 타입으로 변환 시도
    let convertedValue: T = newValue as T

    // number 타입인 경우 변환
    if (typeof value === 'number') {
      const numValue = parseFloat(newValue)
      if (!isNaN(numValue)) {
        convertedValue = numValue as T
      }
    }

    setEditValue(convertedValue)
    if (autoSave) {
      // 드롭다운 선택 시 자동 저장 - 선택된 값 직접 전달
      handleFinishEdit(convertedValue)
    } else {
      // 일괄 저장 모드에서는 실시간 표시를 위해 즉시 onSave 호출
      onSave(convertedValue)
    }
  }, [value, autoSave, handleFinishEdit, onSave])

  const handleInputChange = useCallback(async (newValue: string) => {
    // string을 원래 타입으로 변환 시도
    let convertedValue: T = newValue as T

    // number 타입인 경우 변환
    if (type === 'number' && typeof value === 'number') {
      const numValue = parseFloat(newValue)
      if (!isNaN(numValue)) {
        convertedValue = numValue as T
      }
    }

    setEditValue(convertedValue)
    setError(null)

    // onChange 콜백 호출 (실시간 값 변경 알림)
    if (onChange) {
      await onChange(convertedValue)
    }

    // 실시간 표시를 위해 값이 변경될 때마다 onSave 호출 (일괄 저장용)
    if (!autoSave && convertedValue !== value) {
      onSave(convertedValue)
    }
  }, [type, value, autoSave, onSave, onChange])

  // 읽기 전용 모드
  if (!isEditing) {
    return (
      <div
        className={cn(
          "group flex items-center justify-between cursor-pointer hover:bg-muted/50 rounded px-2 py-1 min-h-[32px]",
          disabled && "cursor-not-allowed opacity-50",
          isModified && "bg-yellow-50 border border-yellow-200",
          className
        )}
        onClick={handleStartEdit}
        title={disabled ? "편집할 수 없습니다" : isModified ? "수정된 내용입니다 - 클릭하여 편집" : "클릭하여 편집"}
      >
        <div className="flex-1 truncate">
          {type === "checkbox" ? (
            <div onClick={(e) => e.stopPropagation()}>
              <Checkbox
                checked={!!value}
                onCheckedChange={handleCheckboxChange}
                disabled={disabled}
              />
            </div>
          ) : (
            <span className={cn(
              "block truncate",
              value === null || value === undefined || value === ""
                ? "text-muted-foreground italic"
                : "text-foreground"
            )}>
              {value === null || value === undefined || value === ""
                ? (placeholder || "값 없음")
                : String(value)
              }
            </span>
          )}
        </div>
        {!disabled && type !== "checkbox" && (
          <Edit2 className="w-4 h-4 opacity-0 group-hover:opacity-50 transition-opacity flex-shrink-0 ml-2" />
        )}
      </div>
    )
  }

  // 편집 모드
  return (
    <div className={cn("p-1", isModified && "bg-yellow-50 border border-yellow-200 rounded", className)}>
      {type === "text" && (
        <Input
          value={getDisplayValue(editValue)}
          onChange={(e) => handleInputChange(e.target.value)}
          onKeyDown={handleKeyDown}
          onBlur={handleBlur}
          placeholder={placeholder}
          maxLength={maxLength}
          autoFocus
          aria-label={`${placeholder || '텍스트 입력'}`}
          className={cn("h-8", error && "border-red-500", isModified && "bg-yellow-50 border-yellow-300")}
        />
      )}

      {type === "textarea" && (
        <Textarea
          value={getDisplayValue(editValue)}
          onChange={(e) => handleInputChange(e.target.value)}
          onKeyDown={handleKeyDown}
          onBlur={handleBlur}
          placeholder={placeholder}
          maxLength={maxLength}
          autoFocus
          rows={2}
          aria-label={`${placeholder || '텍스트 영역 입력'}`}
          className={cn("min-h-[60px]", error && "border-red-500", isModified && "bg-yellow-50 border-yellow-300")}
        />
      )}

      {type === "number" && (
        <Input
          type="number"
          value={getDisplayValue(editValue)}
          onChange={(e) => handleInputChange(e.target.value)}
          onKeyDown={handleKeyDown}
          onBlur={handleBlur}
          placeholder={placeholder}
          autoFocus
          aria-label={`${placeholder || '숫자 입력'}`}
          className={cn("h-8", error && "border-red-500", isModified && "bg-yellow-50 border-yellow-300")}
        />
      )}

      {type === "select" && (
        <Select
          value={getDisplayValue(editValue)}
          onValueChange={handleSelectChange}
        >
          <SelectTrigger
            className={cn("h-8", error && "border-red-500", isModified && "bg-yellow-50 border-yellow-300")}
            aria-label={`${placeholder || '옵션 선택'}`}
          >
            <SelectValue placeholder={placeholder} />
          </SelectTrigger>
          <SelectContent role="listbox" aria-label="옵션 목록">
            {options.map((option) => (
              <SelectItem key={getDisplayValue(option.value)} value={getDisplayValue(option.value)}>
                {option.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      )}

      {type === "checkbox" && (
        <div className={cn("flex items-center gap-2", isModified && "bg-yellow-50 border border-yellow-200 rounded px-2 py-1")}>
          <Checkbox
            checked={!!editValue}
            onCheckedChange={handleCheckboxChange}
            autoFocus
            aria-label={`${placeholder || '체크박스'}`}
            className={isModified ? "border-yellow-300" : ""}
          />
        </div>
      )}

      {error && (
        <div className="text-xs text-red-500 mt-1">{error}</div>
      )}
    </div>
  )
}

// 편집 가능한 컬럼을 위한 헬퍼 함수
export function createEditableColumn<TData extends Record<string, any>, TValue = any>(
  accessorKey: keyof TData,
  type: EditableCellType,
  options?: {
    header?: string
    className?: string
    placeholder?: string
    disabled?: boolean
    maxLength?: number
    selectOptions?: { label: string; value: TValue }[]
    validation?: (value: TValue) => string | null
    autoSave?: boolean
    initialEditMode?: boolean
    isModified?: (row: TData, accessorKey: keyof TData) => boolean
  }
) {
  return {
    accessorKey,
    header: options?.header || String(accessorKey),
    cell: ({ row, table }: any) => {
      const value = row.getValue(String(accessorKey))
      const onSave = (newValue: any) => {
        if (table.options.meta?.onCellUpdate) {
          table.options.meta.onCellUpdate(row.original.id, accessorKey, newValue)
        }
      }

      const onCancel = () => {
        if (table.options.meta?.onCellCancel) {
          table.options.meta.onCellCancel(row.original.id, accessorKey)
        }
      }

      // 수정 여부 확인 (우선순위: 옵션으로 전달된 함수 > 자동 감지)
      let isModified = false
      if (options?.isModified) {
        isModified = options.isModified(row.original, accessorKey)
      } else if (table.options.meta?.getPendingChanges) {
        // 자동 감지: pendingChanges에서 해당 필드가 수정되었는지 확인
        const pendingChanges = table.options.meta.getPendingChanges()
        const rowId = String(row.original.id)
        const fieldKey = String(accessorKey)
        const rowChanges = pendingChanges[rowId]
        isModified = Boolean(rowChanges && fieldKey in rowChanges)
      }

      return (
        <EditableCell
          value={value}
          type={type}
          onSave={onSave}
          onCancel={onCancel}
          className={options?.className}
          placeholder={options?.placeholder}
          disabled={options?.disabled}
          maxLength={options?.maxLength}
          options={options?.selectOptions}
          validation={options?.validation}
          autoSave={options?.autoSave}
          initialEditMode={options?.initialEditMode}
          isModified={isModified}
        />
      )
    },
  }
}