path: root/lib/tech-vendors/table/add-vendor-dialog.tsx

"use client"

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

import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"

import { Textarea } from "@/components/ui/textarea"
import { Plus, Loader2 } from "lucide-react"

import { addTechVendor } from "../service"

// 폼 스키마 정의
const addVendorSchema = z.object({
  vendorName: z.string().min(1, "업체명을 입력해주세요"),
  vendorCode: z.string().optional(),
  email: z.string().email("올바른 이메일 주소를 입력해주세요"),
  taxId: z.string().optional(),
  country: z.string().optional(),
  countryEng: z.string().optional(),
  countryFab: z.string().optional(),
  agentName: z.string().optional(),
  agentPhone: z.string().optional(),
  agentEmail: z.string().email("올바른 이메일 주소를 입력해주세요").optional().or(z.literal("")),
  address: z.string().optional(),
  phone: z.string().optional(),
  website: z.string().optional(),
  techVendorType: z.array(z.enum(["조선", "해양TOP", "해양HULL"])).min(1, "최소 하나의 벤더 타입을 선택해주세요"),
  representativeName: z.string().optional(),
  representativeEmail: z.string().email("올바른 이메일 주소를 입력해주세요").optional().or(z.literal("")),
  representativePhone: z.string().optional(),
  representativeBirth: z.string().optional(),
  isQuoteComparison: z.boolean().default(false),
})

type AddVendorFormData = z.infer<typeof addVendorSchema>

interface AddVendorDialogProps {
  onSuccess?: () => void
}

export function AddVendorDialog({ onSuccess }: AddVendorDialogProps) {
  const [open, setOpen] = React.useState(false)
  const [isLoading, setIsLoading] = React.useState(false)

  const form = useForm<AddVendorFormData>({
    resolver: zodResolver(addVendorSchema),
    defaultValues: {
      vendorName: "",
      vendorCode: "",
      email: "",
      taxId: "",
      country: "",
      countryEng: "",
      countryFab: "",
      agentName: "",
      agentPhone: "",
      agentEmail: "",
      address: "",
      phone: "",
      website: "",
      techVendorType: [],
      representativeName: "",
      representativeEmail: "",
      representativePhone: "",
      representativeBirth: "",
      isQuoteComparison: false,
    },
  })

  const onSubmit = async (data: AddVendorFormData) => {
    setIsLoading(true)
    try {
      const result = await addTechVendor({
        ...data,
        vendorCode: data.vendorCode || null,
        country: data.country || null,
        countryEng: data.countryEng || null,
        countryFab: data.countryFab || null,
        agentName: data.agentName || null,
        agentPhone: data.agentPhone || null,
        agentEmail: data.agentEmail || null,
        address: data.address || null,
        phone: data.phone || null,
        website: data.website || null,
        techVendorType: data.techVendorType.join(','),
        representativeName: data.representativeName || null,
        representativeEmail: data.representativeEmail || null,
        representativePhone: data.representativePhone || null,
        representativeBirth: data.representativeBirth || null,
        taxId: data.taxId || "",
        isQuoteComparison: data.isQuoteComparison,
      })

      if (result.success) {
        toast.success("벤더가 성공적으로 추가되었습니다.")
        form.reset()
        setOpen(false)
        onSuccess?.()
      } else {
        toast.error(result.error || "벤더 추가 중 오류가 발생했습니다.")
      }
    } catch (error) {
      console.error("벤더 추가 오류:", error)
      toast.error("벤더 추가 중 오류가 발생했습니다.")
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button size="sm" className="gap-2">
          <Plus className="size-4" />
          벤더 추가
        </Button>
      </DialogTrigger>
      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>새 기술영업 벤더 추가</DialogTitle>
          <DialogDescription>
            새로운 기술영업 벤더 정보를 입력하고 사용자 계정을 생성합니다.
          </DialogDescription>
        </DialogHeader>

        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            {/* 기본 정보 */}
            <div className="space-y-4">
              <h3 className="text-lg font-medium">기본 정보</h3>
              <div className="grid grid-cols-2 gap-4">
                <FormField
                  control={form.control}
                  name="vendorName"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>업체명 *</FormLabel>
                      <FormControl>
                        <Input placeholder="업체명을 입력하세요" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="vendorCode"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>업체 코드</FormLabel>
                      <FormControl>
                        <Input placeholder="업체 코드를 입력하세요" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <FormField
                  control={form.control}
                  name="email"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>이메일 *</FormLabel>
                      <FormControl>
                        <Input type="email" placeholder="이메일을 입력하세요" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="taxId"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>사업자등록번호</FormLabel>
                      <FormControl>
                        <Input placeholder="사업자등록번호를 입력하세요" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>

              <FormField
                control={form.control}
                name="techVendorType"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>벤더 타입 *</FormLabel>
                    <div className="space-y-2">
                      {["조선", "해양TOP", "해양HULL"].map((type) => (
                        <div key={type} className="flex items-center space-x-2">
                          <input
                            type="checkbox"
                            id={type}
                            checked={field.value?.includes(type as "조선" | "해양TOP" | "해양HULL")}
                            onChange={(e) => {
                              const currentValue = field.value || [];
                              if (e.target.checked) {
                                field.onChange([...currentValue, type]);
                              } else {
                                field.onChange(currentValue.filter((v) => v !== type));
                              }
                            }}
                            className="w-4 h-4"
                          />
                          <label htmlFor={type} className="text-sm font-medium cursor-pointer">
                            {type}
                          </label>
                        </div>
                      ))}
                    </div>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="isQuoteComparison"
                render={({ field }) => (
                  <FormItem className="flex flex-row items-start space-x-3 space-y-0">
                    <FormControl>
                      <input
                        type="checkbox"
                        checked={field.value}
                        onChange={field.onChange}
                        className="w-4 h-4 mt-1"
                      />
                    </FormControl>
                    <div className="space-y-1 leading-none">
                      <FormLabel className="cursor-pointer">
                        견적비교용 벤더
                      </FormLabel>
                      <p className="text-sm text-muted-foreground">
                        체크 시 초대 메일을 발송하고 벤더가 직접 가입할 수 있습니다.
                      </p>
                    </div>
                  </FormItem>
                )}
              />
            </div>

            {/* 연락처 정보 */}
            <div className="space-y-4">
              <h3 className="text-lg font-medium">연락처 정보</h3>
              <div className="grid grid-cols-2 gap-4">
                <FormField
                  control={form.control}
                  name="phone"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>전화번호</FormLabel>
                      <FormControl>
                        <Input placeholder="전화번호를 입력하세요" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="website"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>웹사이트</FormLabel>
                      <FormControl>
                        <Input placeholder="웹사이트 URL을 입력하세요" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>

              <FormField
                control={form.control}
                name="address"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>주소</FormLabel>
                    <FormControl>
                      <Textarea placeholder="주소를 입력하세요" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            {/* 국가 정보 */}
            <div className="space-y-4">
              <h3 className="text-lg font-medium">국가 정보</h3>
              <div className="grid grid-cols-3 gap-4">
                <FormField
                  control={form.control}
                  name="country"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>국가</FormLabel>
                      <FormControl>
                        <Input placeholder="국가를 입력하세요" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="countryEng"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>국가 (영문)</FormLabel>
                      <FormControl>
                        <Input placeholder="국가 영문명을 입력하세요" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="countryFab"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>제조국가</FormLabel>
                      <FormControl>
                        <Input placeholder="제조국가를 입력하세요" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>
            </div>

            {/* 대표자 정보 */}
            <div className="space-y-4">
              <h3 className="text-lg font-medium">대표자 정보</h3>
              <div className="grid grid-cols-2 gap-4">
                <FormField
                  control={form.control}
                  name="representativeName"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>대표자명</FormLabel>
                      <FormControl>
                        <Input placeholder="대표자명을 입력하세요" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="representativePhone"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>대표자 전화번호</FormLabel>
                      <FormControl>
                        <Input placeholder="대표자 전화번호를 입력하세요" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <FormField
                  control={form.control}
                  name="representativeEmail"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>대표자 이메일</FormLabel>
                      <FormControl>
                        <Input type="email" placeholder="대표자 이메일을 입력하세요" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="representativeBirth"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>대표자 생년월일</FormLabel>
                      <FormControl>
                        <Input placeholder="YYYY-MM-DD" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>
            </div>

            <DialogFooter>
              <Button
                type="button"
                variant="outline"
                onClick={() => setOpen(false)}
                disabled={isLoading}
              >
                취소
              </Button>
              <Button type="submit" disabled={isLoading}>
                {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                벤더 추가
              </Button>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  )
}