"use client"

import * as React from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { CalendarIcon, Loader } 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(),
})

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 form = useForm<EditInvestigationSchema>({
    resolver: zodResolver(editInvestigationSchema),
    defaultValues: {
      confirmedAt: investigation?.confirmedAt || undefined,
      evaluationResult: investigation?.evaluationResult as "APPROVED" | "SUPPLEMENT" | "REJECTED" | undefined,
      investigationNotes: investigation?.investigationNotes || "",
    },
  })

  // 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 || "",
      })
    }
  }, [investigation, form])

  const handleSubmit = async (values: EditInvestigationSchema) => {
    startTransition(async () => {
      try {
        await onSubmit(values)
        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>
              )}
            />

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