"use client"

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

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"
// react-hook-form + shadcn/ui Form
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"

import { 
  createShipbuildingItemSchema, 

} from "../validations"
import { createShipbuildingItem } from "../service"
import { Plus } from "lucide-react"
import { toast } from "sonner"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const workTypes = [
  { value: "기장", label: "기장" },
  { value: "전장", label: "전장" },
  { value: "선실", label: "선실" },
  { value: "배관", label: "배관" },
  { value: "철의", label: "철의" },
] as const

export function AddItemDialog() {
  const [open, setOpen] = React.useState(false)
  const [isSubmitting, setIsSubmitting] = React.useState(false)
  
  // 아이템 타입에 따라 다른 폼과 스키마 사용
  const getFormAndSchema = () => {
    return {
      schema: createShipbuildingItemSchema,
      defaultValues: {
        itemCode: "",
        itemName: "",
        description: "",
        workType: "",
        shipTypes: "",
      }
    };
  };

  const { schema, defaultValues } = getFormAndSchema();
  
  // 타입 안전성을 위해 구체적인 타입 사용
  type ItemFormSchema = 
    | z.infer<typeof createShipbuildingItemSchema>

    
  const form = useForm<ItemFormSchema>({
    resolver: zodResolver(schema),
    defaultValues,
  });

  async function onSubmit(values: ItemFormSchema) {
    try {
      setIsSubmitting(true)
      
      // 타입에 따라 다른 로직 추가 가능
      const result = await createShipbuildingItem(values)
      
      if (result.success) {
        toast.success("아이템이 추가되었습니다.")
        form.reset()
        setOpen(false)
      } else {
        toast.error(result.message || "아이템 추가 실패")
      }
    } catch (error) {
      toast.error("오류가 발생했습니다.")
      console.error(error)
    } finally {
      setIsSubmitting(false)
    }
  }



  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="outline" size="sm" className="ml-auto gap-2">
          <Plus className="h-4 w-4" />
          <span className="hidden sm:inline">Add Item</span>
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px] max-h-[80vh] flex flex-col">
        <DialogHeader>
          <DialogTitle>아이템 추가</DialogTitle>
          <DialogDescription>
            {'조선 아이템을 추가합니다. 아이템 코드, 이름, 설명을 입력하세요.'}
          </DialogDescription>
        </DialogHeader>
        <div className="overflow-y-auto pr-2">
          <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={'예: SB001'} {...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="description"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>설명</FormLabel>
                    <FormControl>
                      <Textarea placeholder="설명 입력 (선택사항)" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="workType"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>기능(공종)</FormLabel>
                    <FormControl>
                      <Select
                        onValueChange={field.onChange}
                        defaultValue={field.value}
                      >
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue placeholder={'기능(공종)을 선택하세요'} />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          {workTypes.map((type) => (
                            <SelectItem key={type.value} value={type.value}>
                              {type.label}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              
              {/* 조선 아이템인 경우 선종 필드 표시 */}
              <FormField
                control={form.control}
                name="shipTypes"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>선종</FormLabel>
                      <FormControl>
                        <Input placeholder="예: A-MAX, VLCC, S-MAX" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
              />
              <DialogFooter className="mt-4">
                <Button type="submit" disabled={isSubmitting}>
                  {isSubmitting ? "추가 중..." : "추가"}
                </Button>
              </DialogFooter>
            </form>
          </Form>
        </div>
      </DialogContent>
    </Dialog>
  )
}