"use client"

import * as React from "react"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"

import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
} from "@/components/ui/popover"
import {
  Command,
  CommandInput,
  CommandList,
  CommandGroup,
  CommandItem,
  CommandEmpty,
} from "@/components/ui/command"
import { Check, ChevronsUpDown, Loader, Plus } from "lucide-react"
import { cn } from "@/lib/utils"
import { toast } from "sonner"

import { createGtcDocumentSchema, type CreateGtcDocumentSchema } from "@/lib/gtc-contract/validations"
import { createGtcDocument, getAvailableProjectsForGtc, hasStandardGtcDocument } from "@/lib/gtc-contract/service"
import { type ProjectForFilter } from "@/lib/gtc-contract/service"
import { useSession } from "next-auth/react"
import { Input } from "@/components/ui/input"
import { useRouter } from "next/navigation"

export function CreateGtcDocumentDialog() {
  const [open, setOpen] = React.useState(false)
  const [projects, setProjects] = React.useState<ProjectForFilter[]>([])
  const [isCreatePending, startCreateTransition] = React.useTransition()
  const [defaultType, setDefaultType] = React.useState<"standard" | "project">("standard")
  const { data: session } = useSession()
  const router = useRouter()

  const currentUserId = React.useMemo(() => {
    return session?.user?.id ? Number(session.user.id) : null;
  }, [session])

  React.useEffect(() => {
    if (open) {
      // 표준 GTC 존재 여부와 사용 가능한 프로젝트 동시 조회
      Promise.all([
        hasStandardGtcDocument(),
        getAvailableProjectsForGtc()
      ]).then(([hasStandard, availableProjects]) => {
        const initialType = hasStandard ? "project" : "standard"
        setDefaultType(initialType)
        setProjects(availableProjects)
        
        // 폼 기본값 설정 (setTimeout으로 다음 틱에 실행)
        setTimeout(() => {
          form.reset({
            type: initialType,
            projectId: null,
            title: "",
            revision: 0,
            editReason: "",
          })
        }, 0)
      })
    }
  }, [open])

  const form = useForm<CreateGtcDocumentSchema>({
    resolver: zodResolver(createGtcDocumentSchema),
    defaultValues: {
      type: "standard",
      projectId: null,
      title: "",
      revision: 0,
      editReason: "",
    },
  })

  const resetForm = React.useCallback((type: "standard" | "project") => {
    form.reset({
      type,
      projectId: null,
      title: "",
      revision: 0,
      editReason: "",
    })
  }, [form])


  const watchedType = form.watch("type")

  async function onSubmit(data: CreateGtcDocumentSchema) {
    startCreateTransition(async () => {
      if (!currentUserId) {
        toast.error("로그인이 필요합니다")
        return
      }

      try {
        const result = await createGtcDocument({
          ...data,
          createdById: currentUserId
        })

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

        resetForm(defaultType)
        setOpen(false)
        router.refresh()

        toast.success("GTC 문서가 생성되었습니다.")
      } catch (error) {
        toast.error("문서 생성 중 오류가 발생했습니다.")
      }
    })
  }

  function handleDialogOpenChange(nextOpen: boolean) {
    if (!nextOpen) {
      resetForm(defaultType)
    }
    setOpen(nextOpen)
  }

  return (
    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
      <DialogTrigger asChild>
        <Button variant="default" size="sm">
          <Plus className="mr-2 h-4 w-4" />
          GTC 추가
        </Button>
      </DialogTrigger>

      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle>새 GTC 만들기</DialogTitle>
          <DialogDescription>
            새 GTC 문서 정보를 입력하고 <b>생성</b> 버튼을 누르세요.
          </DialogDescription>
        </DialogHeader>

        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)}>
            <div className="space-y-4 py-4">
              {/* 구분 (Type) */}
              <FormField
                control={form.control}
                name="type"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>구분</FormLabel>
                    <FormControl>
                      <Select
                        onValueChange={(value) => {
                          field.onChange(value)
                          // 표준으로 변경시 프로젝트 ID 초기화
                          if (value === "standard") {
                            form.setValue("projectId", null)
                          }
                        }}
                        value={field.value}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="구분을 선택하세요" />
                        </SelectTrigger>
                        <SelectContent>
                          {/* 기본값에 따라 순서 조정 */}
                          {defaultType === "project" ? (
                            <>
                              <SelectItem value="project">프로젝트</SelectItem>
                              <SelectItem value="standard">표준</SelectItem>
                            </>
                          ) : (
                            <>
                              <SelectItem value="standard">표준</SelectItem>
                              <SelectItem value="project">프로젝트</SelectItem>
                            </>
                          )}
                        </SelectContent>
                      </Select>
                    </FormControl>
                    {defaultType === "project" && (
                      <FormDescription>
                        표준 GTC 문서가 이미 존재합니다. 새 문서는 프로젝트 타입을 권장합니다.
                      </FormDescription>
                    )}
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* 프로젝트 선택 (프로젝트 타입인 경우만) */}
              {watchedType === "project" && (
                <FormField
                  control={form.control}
                  name="projectId"
                  render={({ field }) => {
                    const selectedProject = projects.find(
                      (p) => p.id === field.value
                    )
                    const [popoverOpen, setPopoverOpen] = React.useState(false)

                    return (
                      <FormItem>
                        <FormLabel>프로젝트</FormLabel>
                        <FormControl>
                          <Popover
                            open={popoverOpen}
                            onOpenChange={setPopoverOpen}
                            modal={true}
                          >
                            <PopoverTrigger asChild>
                              <Button
                                variant="outline"
                                role="combobox"
                                aria-expanded={popoverOpen}
                                className="w-full justify-between"
                              >
                                {selectedProject
                                  ? `${selectedProject.name} (${selectedProject.code})`
                                  : projects.length === 0 
                                    ? "사용 가능한 프로젝트가 없습니다"
                                    : "프로젝트를 선택하세요..."}
                                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                              </Button>
                            </PopoverTrigger>

                            <PopoverContent className="w-full p-0">
                              <Command>
                                <CommandInput
                                  placeholder="프로젝트 검색..."
                                  className="h-9"
                                />
                                <CommandList>
                                  <CommandEmpty>
                                    {projects.length === 0 
                                      ? "모든 프로젝트에 이미 GTC 문서가 있습니다."
                                      : "프로젝트를 찾을 수 없습니다."
                                    }
                                  </CommandEmpty>
                                  <CommandGroup>
                                    {projects.map((project) => {
                                      const label = `${project.name} (${project.code})`
                                      return (
                                        <CommandItem
                                          key={project.id}
                                          value={label}
                                          onSelect={() => {
                                            field.onChange(project.id)
                                            setPopoverOpen(false)
                                          }}
                                        >
                                          {label}
                                          <Check
                                            className={cn(
                                              "ml-auto h-4 w-4",
                                              selectedProject?.id === project.id
                                                ? "opacity-100"
                                                : "opacity-0"
                                            )}
                                          />
                                        </CommandItem>
                                      )
                                    })}
                                  </CommandGroup>
                                </CommandList>
                              </Command>
                            </PopoverContent>
                          </Popover>
                        </FormControl>
                        <FormDescription>
                          {projects.length === 0 && "이미 GTC 문서가 있는 프로젝트는 표시되지 않습니다."}
                        </FormDescription>
                        <FormMessage />
                      </FormItem>
                    )
                  }}
                />
              )}

              <FormField
                control={form.control}
                name="title"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>GTC 제목 (선택사항)</FormLabel>
                    <FormControl>
                      <Input
                        placeholder="GTC 제목을 입력하세요..."
                        {...field}
                      />
                    </FormControl>
                    <FormDescription>
                      워드의 제목으로 사용됩니다.
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* 편집 사유 */}
              <FormField
                control={form.control}
                name="editReason"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>편집 사유 (선택사항)</FormLabel>
                    <FormControl>
                      <Textarea
                        placeholder="편집 사유를 입력하세요..."
                        {...field}
                        rows={3}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            <DialogFooter>
              <Button
                type="button"
                variant="outline"
                onClick={() => setOpen(false)}
                disabled={isCreatePending}
              >
                취소
              </Button>
              <Button type="submit" disabled={isCreatePending}>
                {isCreatePending && (
                  <Loader
                    className="mr-2 size-4 animate-spin"
                    aria-hidden="true"
                  />
                )}
                생성
              </Button>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  )
}