"use client"

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

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 {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

import { createQnaSchema, type CreateQnaSchema } from "@/lib/qna/validation"
import { createQna } from "../service"
import { QNA_CATEGORY_LABELS } from "@/db/schema"
import TiptapEditor from "@/components/qna/tiptap-editor"

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

export function CreateQnaDialog({ open, onOpenChange }: CreateQnaDialogProps) {
  const [isCreatePending, startCreateTransition] = React.useTransition()

  const form = useForm<CreateQnaSchema>({
    resolver: zodResolver(createQnaSchema),
    defaultValues: {
      title: "",
      content: "",
      category: undefined,
    },
  })

  function onSubmit(input: CreateQnaSchema) {
    startCreateTransition(async () => {
      try {
        const result = await createQna(input)
        
        if (result.success) {
          toast.success(result.message || "질문이 성공적으로 등록되었습니다.")
          form.reset()
          onOpenChange(false)
        } else {
          toast.error(result.error || "질문 등록에 실패했습니다.")
        }
      } catch (error) {
        toast.error("예기치 못한 오류가 발생했습니다.")
        console.error("질문 생성 오류:", error)
      }
    })
  }

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


  console.log(form.getValues(),"생성")

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-6xl max-h-[90vh] flex flex-col">
        <DialogHeader className="flex-shrink-0">
          <DialogTitle>새 질문 작성</DialogTitle>
          <DialogDescription>
            질문의 제목과 내용을 입력해주세요. 다른 사용자들이 이해하기 쉽도록 구체적으로 작성해주세요.
          </DialogDescription>
        </DialogHeader>
        
        {/* 폼 영역: flex-1으로 남은 공간 모두 사용 */}
        <div className="flex-1 overflow-hidden">
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="h-full flex flex-col space-y-4">
              {/* 카테고리와 제목은 스크롤 없이 고정 */}
              <div className="flex-shrink-0 space-y-4">
                {/* 카테고리 선택 */}
                <FormField
                  control={form.control}
                  name="category"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>카테고리 *</FormLabel>
                      <Select 
                        onValueChange={field.onChange} 
                        defaultValue={field.value}
                        disabled={isCreatePending}
                      >
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue placeholder="카테고리를 선택해주세요" />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          {QNA_CATEGORY_LABELS.map((option) => (
                            <SelectItem key={option.value} value={option.value}>
                              {option.label}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                {/* 제목 입력 */}
                <FormField
                  control={form.control}
                  name="title"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>제목 *</FormLabel>
                      <FormControl>
                        <Input
                          placeholder="질문의 제목을 입력해주세요"
                          disabled={isCreatePending}
                          className="text-base"
                          {...field}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>

              {/* 내용 입력 영역: 고정 높이로 스크롤 생성 */}
              <FormField
                control={form.control}
                name="content"
                render={({ field }) => (
                  <FormItem className="flex-1 flex flex-col min-h-0">
                    <FormLabel className="flex-shrink-0">내용 *</FormLabel>
                    <FormControl className="flex-1 min-h-0">
                      {/* 고정 높이 400px로 설정하여 스크롤 보장 */}
                      <div className="h-[400px]">
                        <TiptapEditor
                          content={field.value}
                          setContent={field.onChange}
                          disabled={isCreatePending}
                          height="400px"
                        />
                      </div>
                    </FormControl>
                    <FormMessage className="flex-shrink-0" />
                    <div className="text-sm text-muted-foreground flex-shrink-0 mt-2">
                      • 문제 상황을 구체적으로 설명해주세요<br/>
                      • 이미지 복사&붙여넣기, 드래그&드롭 지원<br/>
                      • 예상하는 결과와 실제 결과를 명시해주세요
                    </div>
                  </FormItem>
                )}
              />
            </form>
          </Form>
        </div>

        <DialogFooter className="gap-2 pt-4 border-t flex-shrink-0">
          <Button
            type="button"
            variant="outline"
            onClick={() => onOpenChange(false)}
            disabled={isCreatePending}
          >
            취소
          </Button>
          <Button
            type="submit"
            onClick={form.handleSubmit(onSubmit)}
            disabled={isCreatePending}
          >
            {isCreatePending ? "등록 중..." : "질문 등록"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}