"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,
  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, getProjectsForSelect } from "@/lib/gtc-contract/service"
import { type Project } from "@/db/schema/projects"

export function CreateGtcDocumentDialog() {
  const [open, setOpen] = React.useState(false)
  const [projects, setProjects] = React.useState<Project[]>([])
  const [isCreatePending, startCreateTransition] = React.useTransition()

  React.useEffect(() => {
    if (open) {
      getProjectsForSelect().then((res) => {
        setProjects(res)
      })
    }
  }, [open])

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

  const watchedType = form.watch("type")

  async function onSubmit(data: CreateGtcDocumentSchema) {
    startCreateTransition(async () => {
      try {
        const result = await createGtcDocument(data)
        
        if (result.error) {
          toast.error(`에러: ${result.error}`)
          return
        }

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

  function handleDialogOpenChange(nextOpen: boolean) {
    if (!nextOpen) {
      form.reset()
    }
    setOpen(nextOpen)
  }

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

      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle>Create New GTC Document</DialogTitle>
          <DialogDescription>
            새 GTC 문서 정보를 입력하고 <b>Create</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>
                          <SelectItem value="standard">표준</SelectItem>
                          <SelectItem value="project">프로젝트</SelectItem>
                        </SelectContent>
                      </Select>
                    </FormControl>
                    <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})`
                                  : "프로젝트를 선택하세요..."}
                                <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>프로젝트를 찾을 수 없습니다.</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>
                        <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}
              >
                Cancel
              </Button>
              <Button type="submit" disabled={isCreatePending}>
                {isCreatePending && (
                  <Loader
                    className="mr-2 size-4 animate-spin"
                    aria-hidden="true"
                  />
                )}
                Create
              </Button>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  )
}