path: root/lib/pq/pq-review-table-new/edit-investigation-dialog.tsx

"use client"

import * as React from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { CalendarIcon, Loader, Upload, X, FileText } from "lucide-react"
import { format } from "date-fns"
import { toast } from "sonner"

import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Textarea } from "@/components/ui/textarea"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Calendar } from "@/components/ui/calendar"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
import { z } from "zod"

// Validation schema for editing investigation
const editInvestigationSchema = z.object({
  confirmedAt: z.union([
    z.date(),
    z.string().transform((str) => str ? new Date(str) : undefined)
  ]).optional(),
  evaluationResult: z.enum(["APPROVED", "SUPPLEMENT", "REJECTED"]).optional(),
  investigationNotes: z.string().max(1000, "QM 의견은 1000자 이내로 입력해주세요.").optional(),
  attachments: z.array(z.instanceof(File)).optional(),
})

type EditInvestigationSchema = z.infer<typeof editInvestigationSchema>

interface EditInvestigationDialogProps {
  isOpen: boolean
  onClose: () => void
  investigation: {
    id: number
    confirmedAt?: Date | null
    evaluationResult?: string | null
    investigationNotes?: string | null
  } | null
  onSubmit: (data: EditInvestigationSchema) => Promise<void>
}

export function EditInvestigationDialog({
  isOpen,
  onClose,
  investigation,
  onSubmit,
}: EditInvestigationDialogProps) {
  const [isPending, startTransition] = React.useTransition()
  const [selectedFiles, setSelectedFiles] = React.useState<File[]>([])
  const fileInputRef = React.useRef<HTMLInputElement>(null)

  const form = useForm<EditInvestigationSchema>({
    resolver: zodResolver(editInvestigationSchema),
    defaultValues: {
      confirmedAt: investigation?.confirmedAt || undefined,
      evaluationResult: investigation?.evaluationResult as "APPROVED" | "SUPPLEMENT" | "REJECTED" | undefined,
      investigationNotes: investigation?.investigationNotes || "",
      attachments: [],
    },
  })

  // Reset form when investigation changes
  React.useEffect(() => {
    if (investigation) {
      form.reset({
        confirmedAt: investigation.confirmedAt || undefined,
        evaluationResult: investigation.evaluationResult as "APPROVED" | "SUPPLEMENT" | "REJECTED" | undefined,
        investigationNotes: investigation.investigationNotes || "",
        attachments: [],
      })
      setSelectedFiles([])
    }
  }, [investigation, form])

  // 파일 선택 핸들러
  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(event.target.files || [])
    if (files.length > 0) {
      const newFiles = [...selectedFiles, ...files]
      setSelectedFiles(newFiles)
      form.setValue('attachments', newFiles, { shouldValidate: true })
    }
  }

  // 파일 제거 핸들러
  const removeFile = (index: number) => {
    const updatedFiles = selectedFiles.filter((_, i) => i !== index)
    setSelectedFiles(updatedFiles)
    form.setValue('attachments', updatedFiles, { shouldValidate: true })
  }

  // 파일 크기 포맷팅
  const formatFileSize = (bytes: number) => {
    if (bytes === 0) return '0 Bytes'
    const k = 1024
    const sizes = ['Bytes', 'KB', 'MB', 'GB']
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
  }

  const handleSubmit = async (values: EditInvestigationSchema) => {
    startTransition(async () => {
      try {
        // 선택된 파일들을 values에 포함
        const submitData = {
          ...values,
          attachments: selectedFiles,
        }
        await onSubmit(submitData)
        toast.success("실사 정보가 업데이트되었습니다!")
        onClose()
      } catch (error) {
        console.error("실사 정보 업데이트 오류:", error)
        toast.error("실사 정보 업데이트 중 오류가 발생했습니다.")
      }
    })
  }

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>실사 정보 수정</DialogTitle>
          <DialogDescription>
            구매자체평가 실사 정보를 수정합니다.
          </DialogDescription>
        </DialogHeader>

        <Form {...form}>
          <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
            {/* 실사 확정일 */}
            <FormField
              control={form.control}
              name="confirmedAt"
              render={({ field }) => (
                <FormItem className="flex flex-col">
                  <FormLabel>실사 확정일</FormLabel>
                  <Popover>
                    <PopoverTrigger asChild>
                      <FormControl>
                        <Button
                          variant="outline"
                          className={`w-full pl-3 text-left font-normal ${!field.value && "text-muted-foreground"}`}
                        >
                          {field.value ? (
                            format(field.value, "yyyy년 MM월 dd일")
                          ) : (
                            <span>날짜를 선택하세요</span>
                          )}
                          <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                        </Button>
                      </FormControl>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0" align="start">
                      <Calendar
                        mode="single"
                        selected={field.value}
                        onSelect={field.onChange}
                        initialFocus
                      />
                    </PopoverContent>
                  </Popover>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* 평가 결과 */}
            <FormField
              control={form.control}
              name="evaluationResult"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>평가 결과</FormLabel>
                  <FormControl>
                    <Select value={field.value || ""} onValueChange={field.onChange}>
                      <SelectTrigger>
                        <SelectValue placeholder="평가 결과를 선택하세요" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectGroup>
                          <SelectItem value="APPROVED">승인</SelectItem>
                          <SelectItem value="SUPPLEMENT">보완</SelectItem>
                          <SelectItem value="REJECTED">불가</SelectItem>
                        </SelectGroup>
                      </SelectContent>
                    </Select>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* 구매 의견 */}
            <FormField
              control={form.control}
              name="investigationNotes"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>구매 의견</FormLabel>
                  <FormControl>
                    <Textarea
                      placeholder="실사에 대한 구매 의견을 입력하세요..."
                      {...field}
                      className="min-h-[80px]"
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* 첨부파일 */}
            <FormField
              control={form.control}
              name="attachments"
              render={() => (
                <FormItem>
                  <FormLabel>첨부파일</FormLabel>
                  <FormControl>
                    <div className="space-y-4">
                      {/* 파일 선택 영역 */}
                      <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
                        <input
                          ref={fileInputRef}
                          type="file"
                          multiple
                          accept=".pdf,.doc,.docx,.xls,.xlsx,.png,.jpg,.jpeg,.gif"
                          onChange={handleFileSelect}
                          className="hidden"
                        />
                        <Upload className="mx-auto h-8 w-8 text-gray-400 mb-2" />
                        <div className="text-sm text-gray-600 mb-2">
                          파일을 드래그하거나 클릭하여 선택하세요
                        </div>
                        <Button
                          type="button"
                          variant="outline"
                          onClick={() => fileInputRef.current?.click()}
                          disabled={isPending}
                        >
                          파일 선택
                        </Button>
                        <div className="text-xs text-gray-500 mt-2">
                          지원 형식: PDF, DOC, DOCX, XLS, XLSX, PNG, JPG, JPEG, GIF (최대 10MB)
                        </div>
                      </div>

                      {/* 선택된 파일 목록 */}
                      {selectedFiles.length > 0 && (
                        <div className="space-y-2">
                          <div className="text-sm font-medium">선택된 파일:</div>
                          {selectedFiles.map((file, index) => (
                            <div
                              key={index}
                              className="flex items-center justify-between p-2 bg-gray-50 rounded border"
                            >
                              <div className="flex items-center space-x-2">
                                <FileText className="h-4 w-4 text-gray-500" />
                                <div className="flex-1 min-w-0">
                                  <div className="text-sm font-medium truncate">
                                    {file.name}
                                  </div>
                                  <div className="text-xs text-gray-500">
                                    {formatFileSize(file.size)}
                                  </div>
                                </div>
                              </div>
                              <Button
                                type="button"
                                variant="ghost"
                                size="sm"
                                onClick={() => removeFile(index)}
                                disabled={isPending}
                              >
                                <X className="h-4 w-4" />
                              </Button>
                            </div>
                          ))}
                        </div>
                      )}
                    </div>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <DialogFooter>
              <Button type="button" variant="outline" onClick={onClose} disabled={isPending}>
                취소
              </Button>
              <Button type="submit" disabled={isPending}>
                {isPending && <Loader className="mr-2 h-4 w-4 animate-spin" />}
                저장
              </Button>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  )
}