"use client"

import * as React from "react"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { z } from "zod"
import { Plus } from "lucide-react"
import { useRouter } from "next/navigation"

import { 
  Dialog, 
  DialogTrigger, 
  DialogContent, 
  DialogHeader, 
  DialogTitle, 
  DialogDescription, 
  DialogFooter 
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

import { useToast } from "@/hooks/use-toast"
import { createPqCriteria } from "../service"

// PQ 생성을 위한 Zod 스키마 정의
const createPqSchema = z.object({
  code: z.string().min(1, "Code is required"),
  checkPoint: z.string().min(1, "Check point is required"),
  groupName: z.string().min(1, "Group is required"),
  subGroupName: z.string().optional(),
  description: z.string().optional(),
  remarks: z.string().optional(),
  inputFormat: z.string().default("TEXT"),

});

type CreatePqFormType = z.infer<typeof createPqSchema>;

// 그룹 이름 옵션
export const groupOptions = [
  "GENERAL",
  "QMS",
  "Warranty",
  "HSE+",
  "기타",
];

// 입력 형식 옵션
const inputFormatOptions = [
  { value: "TEXT", label: "텍스트" },
  { value: "FILE", label: "파일" },
  { value: "EMAIL", label: "이메일" },
  { value: "PHONE", label: "전화번호" },
  { value: "FAX", label: "팩스번호" },
  { value: "NUMBER", label: "숫자" },
  { value: "NUMBER_WITH_UNIT", label: "숫자+단위" },
  { value: "TEXT_FILE", label: "텍스트 + 파일" },
];

interface AddPqDialogProps {
  pqListId: number;
}

export function AddPqDialog({ pqListId }: AddPqDialogProps) {
  const [open, setOpen] = React.useState(false)
  const [isSubmitting, setIsSubmitting] = React.useState(false)
  const router = useRouter()
  const { toast } = useToast()

  // react-hook-form 설정
  const form = useForm<CreatePqFormType>({
    resolver: zodResolver(createPqSchema),
    defaultValues: {
      code: "",
      checkPoint: "",
      groupName: groupOptions[0],
      subGroupName: "",
      description: "",
      remarks: "",
      inputFormat: "TEXT",

    },
  })
  const formState = form.formState

  async function onSubmit(data: CreatePqFormType) {
    try {
      setIsSubmitting(true)

      // 서버 액션 호출
      const result = await createPqCriteria(pqListId, data)

      if (!result.success) {
        toast({
          title: "오류",
          description: result.message || "PQ 항목 생성에 실패했습니다",
          variant: "destructive",
        })
        return
      }

      // 성공 시 처리
      toast({
        title: "성공",
        description: result.message || "PQ 항목이 성공적으로 생성되었습니다",
      })

      // 모달 닫고 폼 리셋
      form.reset()
      setOpen(false)

      // 페이지 새로고침
      router.refresh()

    } catch (error) {
      console.error('Error creating PQ criteria:', error)
      toast({
        title: "오류",
        description: "예상치 못한 오류가 발생했습니다",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

  function handleDialogOpenChange(nextOpen: boolean) {
    if (!nextOpen) {
      form.reset()
    }
    setOpen(nextOpen)
  }

  return (
    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
      <DialogTrigger asChild>
        <Button variant="default" size="sm">
          <Plus className="size-4" />
          Add PQ
        </Button>
      </DialogTrigger>

      <DialogContent className="sm:max-w-[600px] max-h-[80vh] flex flex-col">
        <DialogHeader>
          <DialogTitle>PQ 항목 생성</DialogTitle>
          <DialogDescription>
            새 PQ 항목을 추가합니다.
          </DialogDescription>
        </DialogHeader>

        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="flex-1 overflow-auto space-y-4">
            <div className="space-y-4 px-1">
              {/* Group Name 필드 */}
              <FormField
                control={form.control}
                name="groupName"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>대분류 <span className="text-destructive">*</span></FormLabel>
                    <Select onValueChange={field.onChange} defaultValue={field.value}>
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue placeholder="그룹을 선택하세요" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {groupOptions.map((group) => (
                          <SelectItem key={group} value={group}>
                            {group}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* Sub Group Name 필드 */}
              <FormField
                control={form.control}
                name="subGroupName"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>소분류</FormLabel>
                    <FormControl>
                      <Input
                        placeholder="서브 그룹명을 입력하세요"
                        {...field}
                        value={field.value || ""}
                      />
                    </FormControl>
                    <FormDescription>
                      세부 분류를 위한 서브 그룹명을 입력하세요 (선택사항)
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />
              {/* Code 필드 */}
              <FormField
                control={form.control}
                name="code"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>일련번호 <span className="text-destructive">*</span></FormLabel>
                    <FormControl>
                      <Input
                        placeholder="예: 1-1, A.2.3"
                        {...field}
                      />
                    </FormControl>
                    <FormDescription>
                      PQ 항목의 고유 코드를 입력하세요
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />
              {/* Check Point 필드 */}
              <FormField
                control={form.control}
                name="checkPoint"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>PQ 항목 <span className="text-destructive">*</span></FormLabel>
                    <FormControl>
                      <Input
                        placeholder="PQ 항목을 입력하세요"
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* Input Format 필드 */}
              <FormField
                control={form.control}
                name="inputFormat"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>협력업체 입력사항 <span className="text-destructive">*</span></FormLabel>
                    <Select onValueChange={field.onChange} defaultValue={field.value}>
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue placeholder="입력 형식을 선택하세요" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {inputFormatOptions.map((option) => (
                          <SelectItem key={option.value} value={option.value}>
                            {option.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* Description 필드 */}
              <FormField
                control={form.control}
                name="description"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>설명</FormLabel>
                    <FormControl>
                      <Textarea
                        placeholder="상세 설명을 입력하세요"
                        className="min-h-[100px]"
                        {...field}
                        value={field.value || ""}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* Remarks 필드 */}
              <FormField
                control={form.control}
                name="remarks"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>비고</FormLabel>
                    <FormControl>
                      <Textarea
                        placeholder="비고 사항을 입력하세요"
                        className="min-h-[80px]"
                        {...field}
                        value={field.value || ""}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            <DialogFooter>
              <Button
                type="button"
                variant="outline"
                onClick={() => {
                  form.reset();
                  setOpen(false);
                }}
              >
                취소
              </Button>
              <Button
                type="submit"
                disabled={isSubmitting || !formState.isValid}
              >
                {isSubmitting ? "생성 중..." : "생성"}
              </Button>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  )
}