"use client"

import * as React from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { toast } from "sonner"
import { Loader, Upload, X } from "lucide-react"
import { useRouter } from "next/navigation"

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 { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import { createInformation } from "@/lib/information/service"
import { createInformationSchema, type CreateInformationSchema } from "@/lib/information/validations"

interface AddInformationDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
}

export function AddInformationDialog({
  open,
  onOpenChange,
}: AddInformationDialogProps) {
  const router = useRouter()
  const [isLoading, setIsLoading] = React.useState(false)
  const [uploadedFile, setUploadedFile] = React.useState<File | null>(null)

  const form = useForm<CreateInformationSchema>({
    resolver: zodResolver(createInformationSchema),
    defaultValues: {
      pageCode: "",
      pageName: "",
      title: "",
      description: "",
      noticeTitle: "",
      noticeContent: "",
      attachmentFileName: "",
      attachmentFilePath: "",
      attachmentFileSize: "",
      isActive: true,
    },
  })

  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file) {
      setUploadedFile(file)
      // 파일 크기를 MB 단위로 변환
      const sizeInMB = (file.size / (1024 * 1024)).toFixed(2)
      form.setValue("attachmentFileName", file.name)
      form.setValue("attachmentFileSize", `${sizeInMB} MB`)
    }
  }

  const removeFile = () => {
    setUploadedFile(null)
    form.setValue("attachmentFileName", "")
    form.setValue("attachmentFilePath", "")
    form.setValue("attachmentFileSize", "")
  }

  const uploadFile = async (file: File): Promise<string> => {
    const formData = new FormData()
    formData.append("file", file)

    const response = await fetch("/api/upload", {
      method: "POST",
      body: formData,
    })

    if (!response.ok) {
      throw new Error("파일 업로드에 실패했습니다.")
    }

    const result = await response.json()
    return result.url
  }

  const onSubmit = async (values: CreateInformationSchema) => {
    setIsLoading(true)
    try {
      const finalValues = { ...values }

      // 파일이 있으면 업로드
      if (uploadedFile) {
        const filePath = await uploadFile(uploadedFile)
        finalValues.attachmentFilePath = filePath
      }

      const result = await createInformation(finalValues)

      if (result.success) {
        toast.success(result.message)
        form.reset()
        setUploadedFile(null)
        onOpenChange(false)
        router.refresh()
      } else {
        toast.error(result.message)
      }
    } catch (error) {
      toast.error("인포메이션 생성에 실패했습니다.")
      console.error(error)
    } finally {
      setIsLoading(false)
    }
  }

  // 다이얼로그가 닫힐 때 폼 초기화
  React.useEffect(() => {
    if (!open) {
      form.reset()
      setUploadedFile(null)
    }
  }, [open, form])

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>인포메이션 추가</DialogTitle>
          <DialogDescription>
            새로운 페이지 인포메이션을 추가합니다.
          </DialogDescription>
        </DialogHeader>

        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <FormField
                control={form.control}
                name="pageCode"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>페이지 코드</FormLabel>
                    <FormControl>
                      <Input placeholder="예: vendor-list" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="pageName"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>페이지명</FormLabel>
                    <FormControl>
                      <Input placeholder="예: 협력업체 목록" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            <FormField
              control={form.control}
              name="title"
              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="페이지 설명을 입력하세요" 
                      rows={4}
                      {...field} 
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="noticeTitle"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>공지사항 제목 (선택사항)</FormLabel>
                  <FormControl>
                    <Input placeholder="공지사항 제목을 입력하세요" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="noticeContent"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>공지사항 내용 (선택사항)</FormLabel>
                  <FormControl>
                    <Textarea 
                      placeholder="공지사항 내용을 입력하세요" 
                      rows={3}
                      {...field} 
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <div>
              <FormLabel>첨부파일</FormLabel>
              <div className="mt-2">
                {uploadedFile ? (
                  <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                    <div className="flex items-center gap-2">
                      <span className="text-sm font-medium">{uploadedFile.name}</span>
                      <span className="text-xs text-gray-500">
                        ({(uploadedFile.size / (1024 * 1024)).toFixed(2)} MB)
                      </span>
                    </div>
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      onClick={removeFile}
                    >
                      <X className="h-4 w-4" />
                    </Button>
                  </div>
                ) : (
                  <div className="border-2 border-dashed border-gray-300 rounded-lg p-4">
                    <div className="text-center">
                      <Upload className="mx-auto h-8 w-8 text-gray-400" />
                      <div className="mt-2">
                        <label
                          htmlFor="file-upload"
                          className="cursor-pointer text-sm text-blue-600 hover:text-blue-500"
                        >
                          파일을 선택하세요
                        </label>
                        <input
                          id="file-upload"
                          type="file"
                          className="hidden"
                          onChange={handleFileSelect}
                          accept=".pdf,.doc,.docx,.xlsx,.ppt,.pptx,.txt,.zip"
                        />
                      </div>
                      <p className="text-xs text-gray-500 mt-1">
                        PDF, DOC, DOCX, XLSX, PPT, PPTX, TXT, ZIP 파일만 업로드 가능
                      </p>
                    </div>
                  </div>
                )}
              </div>
            </div>

            <FormField
              control={form.control}
              name="isActive"
              render={({ field }) => (
                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                  <div className="space-y-0.5">
                    <FormLabel className="text-base">활성 상태</FormLabel>
                    <div className="text-sm text-muted-foreground">
                      활성화하면 해당 페이지에서 인포메이션 버튼이 표시됩니다.
                    </div>
                  </div>
                  <FormControl>
                    <Switch
                      checked={field.value}
                      onCheckedChange={field.onChange}
                    />
                  </FormControl>
                </FormItem>
              )}
            />

            <DialogFooter>
              <Button
                type="button"
                variant="outline"
                onClick={() => onOpenChange(false)}
                disabled={isLoading}
              >
                취소
              </Button>
              <Button type="submit" disabled={isLoading}>
                {isLoading && <Loader className="mr-2 h-4 w-4 animate-spin" />}
                생성
              </Button>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  )
}