"use client"

import * as React from "react"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"

import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { createProcurementItemSchema, CreateProcurementItemSchema } from "../validations"
import { createProcurementItem } from "../service"

interface AddProcurementItemDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onSuccess?: () => void
}

export function AddProcurementItemDialog({
  open,
  onOpenChange,
  onSuccess
}: AddProcurementItemDialogProps) {
  // react-hook-form 세팅
  const form = useForm<CreateProcurementItemSchema>({
    resolver: zodResolver(createProcurementItemSchema),
    defaultValues: {
      itemCode: "",
      itemName: "",
      material: "",
      specification: "",
      unit: "",
      isActive: "Y",
    },
  })

  async function onSubmit(data: CreateProcurementItemSchema) {
    const result = await createProcurementItem({
      itemCode: data.itemCode,
      itemName: data.itemName,
      material: data.material ?? null,
      specification: data.specification ?? null,
      unit: data.unit ?? null,
      isActive: data.isActive || 'Y',
    })

    if (result.error) {
      alert(`에러: ${result.error}`)
      return
    }

    // 성공 시 모달 닫고 폼 리셋
    form.reset()
    onOpenChange(false)
    onSuccess?.()
  }

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

  return (
    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle>새 품목 추가</DialogTitle>
          <DialogDescription>
            새 품목 정보를 입력하고 <b>추가</b> 버튼을 누르세요.
          </DialogDescription>
        </DialogHeader>

        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
            <FormField
              control={form.control}
              name="itemCode"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>품목코드</FormLabel>
                  <FormControl>
                    <Input placeholder="예: ITEM001" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="itemName"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>품목명 *</FormLabel>
                  <FormControl>
                    <Input placeholder="예: 강관" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="material"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>재질</FormLabel>
                  <FormControl>
                    <Input placeholder="예: SS400" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="specification"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>규격</FormLabel>
                  <FormControl>
                    <Input placeholder="예: 50x50x2.3T" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="unit"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>단위</FormLabel>
                  <FormControl>
                    <Input placeholder="예: EA, M, KG" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="isActive"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>활성화여부</FormLabel>
                  <Select onValueChange={field.onChange} defaultValue={field.value}>
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="활성화 여부를 선택하세요" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      <SelectItem value="Y">활성</SelectItem>
                      <SelectItem value="N">비활성</SelectItem>
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />

            <DialogFooter>
              <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
                취소
              </Button>
              <Button type="submit" disabled={form.formState.isSubmitting}>
                {form.formState.isSubmitting ? "추가 중..." : "추가"}
              </Button>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  )
}