"use client"

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

import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import {
  Select,
  SelectContent,
  // SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"

import { updatePqCriteria } from "../service"
import { groupOptions } from "./add-pq-dialog"
import { Checkbox } from "@/components/ui/checkbox"
import { uploadPqCriteriaFileAction, getPqCriteriaAttachments } from "@/lib/pq/service"
import { Dropzone, DropzoneInput, DropzoneZone, DropzoneUploadIcon, DropzoneTitle, DropzoneDescription } from "@/components/ui/dropzone"
import { FileList, FileListHeader, FileListInfo, FileListItem, FileListName, FileListDescription, FileListAction } from "@/components/ui/file-list"
import { X, Loader2 } from "lucide-react"

// PQ 수정을 위한 Zod 스키마 정의
const updatePqSchema = z.object({
  code: z.string().min(1, "Code is required"),
  checkPoint: z.string().min(1, "Check point is required"),
  groupName: z.string().min(1, "Group is required"),
  description: z.string().optional(),
  remarks: z.string().optional(),
  inputFormat: z.string().default("TEXT"),

  subGroupName: z.string().optional(),
  type: z.string().optional(),
});

type UpdatePqSchema = z.infer<typeof updatePqSchema>;

// 입력 형식 옵션
const inputFormatOptions = [
  { value: "TEXT", label: "텍스트" },
  { value: "FILE", label: "파일" },
  { value: "EMAIL", label: "이메일" },
  { value: "PHONE", label: "전화번호" },
  { value: "NUMBER", label: "숫자" },
  { value: "NUMBER_WITH_UNIT", label: "숫자+단위" },
  { value: "TEXT_FILE", label: "텍스트 + 파일" }
];

const typeOptions = [
  { value: "내자", label: "내자" },
  { value: "외자", label: "외자" },
  { value: "내외자", label: "내외자" },
];

interface UpdatePqSheetProps
  extends React.ComponentPropsWithRef<typeof Sheet> {
  pq: {
    id: number;
    code: string;
    checkPoint: string;
    description: string | null;
    remarks: string | null;
    groupName: string | null;
    inputFormat: string;
  
    subGroupName: string | null;
    type?: string | null;
  } | null
}

export function UpdatePqSheet({ pq, ...props }: UpdatePqSheetProps) {
  const [isUpdatePending, startUpdateTransition] = React.useTransition()
  const [isUploading, setIsUploading] = React.useState(false)
  const [attachments, setAttachments] = React.useState<
    { fileName: string; url: string; size?: number; originalFileName?: string }[]
  >([])
  const router = useRouter()

  const form = useForm<UpdatePqSchema>({
    resolver: zodResolver(updatePqSchema),
    defaultValues: {
      code: pq?.code ?? "",
      checkPoint: pq?.checkPoint ?? "",
      groupName: pq?.groupName ?? groupOptions[0],
      description: pq?.description ?? "",
      remarks: pq?.remarks ?? "",
      inputFormat: pq?.inputFormat ?? "TEXT",

      subGroupName: pq?.subGroupName ?? "",
      type: pq?.type ?? "내외자",
    },
  })

  // 폼 초기화 (pq가 변경될 때)
  React.useEffect(() => {
    if (pq) {
      form.reset({
        code: pq.code,
        checkPoint: pq.checkPoint,
        groupName: pq.groupName ?? groupOptions[0],
        description: pq.description ?? "",
        remarks: pq.remarks ?? "",
        inputFormat: pq.inputFormat ?? "TEXT",
  
        subGroupName: pq.subGroupName ?? "",
        type: pq.type ?? "내외자",
      });

      // 기존 첨부 로드
      getPqCriteriaAttachments(pq.id).then((res) => {
        if (res.success && res.data) {
          setAttachments(
            res.data.map((a) => ({
              fileName: a.fileName,
              url: a.filePath,
              size: a.fileSize ?? undefined,
              originalFileName: a.originalFileName || a.fileName,
            }))
          )
        } else {
          setAttachments([])
        }
      })
    }
  }, [pq, form]);

  const handleUpload = async (files: File[]) => {
    try {
      setIsUploading(true)
      for (const file of files) {
        const uploaded = await uploadPqCriteriaFileAction(file)
        setAttachments((prev) => [...prev, uploaded])
      }
      toast.success("첨부파일이 업로드되었습니다")
    } catch (error) {
      console.error(error)
      toast.error("첨부파일 업로드에 실패했습니다")
    } finally {
      setIsUploading(false)
    }
  }

  function onSubmit(input: UpdatePqSchema) {
    startUpdateTransition(async () => {
      if (!pq) return
  
      const result = await updatePqCriteria(pq.id, {
        ...input,
        attachments,
      })
  
      if (!result.success) {
        toast.error(result.message || "PQ 항목 수정에 실패했습니다")
        return
      }
  
      toast.success(result.message || "PQ 항목이 성공적으로 수정되었습니다")
      form.reset()
      props.onOpenChange?.(false)
      router.refresh()
    })
  }
  return (
    <Sheet {...props}>
      <SheetContent className="flex flex-col gap-6 sm:max-w-md">
        <SheetHeader className="text-left">
          <SheetTitle>Update PQ Criteria</SheetTitle>
          <SheetDescription>
            Update the PQ criteria details and save the changes
          </SheetDescription>
        </SheetHeader>
        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(onSubmit)}
            className="flex flex-col gap-4"
          >
            {/* Code 필드 */}
            <FormField
              control={form.control}
              name="code"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Code <span className="text-destructive">*</span></FormLabel>
                  <FormControl>
                    <Input
                      placeholder="예: 1-1, A.2.3"
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* Check Point 필드 */}
            <FormField
              control={form.control}
              name="checkPoint"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Check Point <span className="text-destructive">*</span></FormLabel>
                  <FormControl>
                    <Input
                      placeholder="검증 항목을 입력하세요"
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* Group Name 필드 (Select) */}
            <FormField
              control={form.control}
              name="groupName"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Group <span className="text-destructive">*</span></FormLabel>
                  <Select 
                    onValueChange={field.onChange} 
                    defaultValue={field.value}
                    value={field.value}
                  >
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="그룹을 선택하세요" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      {groupOptions.map((group) => (
                        <SelectItem key={group} value={group}>
                          {group}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />
            {/* Sub Group Name 필드 */}
            <FormField
              control={form.control}
              name="subGroupName"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Sub Group Name</FormLabel>
                  <FormControl>
                    <Input
                      placeholder="서브 그룹명을 입력하세요"
                      {...field}
                      value={field.value || ""}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* Type 필드 */}
            <FormField
              control={form.control}
              name="type"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>내/외자 구분</FormLabel>
                  <Select onValueChange={field.onChange} value={field.value}>
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="구분을 선택하세요" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      {typeOptions.map((option) => (
                        <SelectItem key={option.value} value={option.value}>
                          {option.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  <FormDescription>미선택 시 기본값은 내외자입니다.</FormDescription>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* Input Format 필드 */}
            <FormField
              control={form.control}
              name="inputFormat"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>입력 형식</FormLabel>
                  <Select onValueChange={field.onChange} defaultValue={field.value}>
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="입력 형식을 선택하세요" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      {inputFormatOptions.map((option) => (
                        <SelectItem key={option.value} value={option.value}>
                          {option.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* 첨부 파일 업로드 */}
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <FormLabel>첨부 파일</FormLabel>
                {isUploading && (
                  <div className="flex items-center text-xs text-muted-foreground">
                    <Loader2 className="mr-1 h-3 w-3 animate-spin" /> 업로드 중...
                  </div>
                )}
              </div>
              <Dropzone
                maxSize={6e8}
                onDropAccepted={(files) => handleUpload(files)}
                onDropRejected={() =>
                  toast.error("파일 크기/형식을 확인하세요.")
                }
                disabled={isUploading}
              >
                {() => (
                  <FormItem>
                    <DropzoneZone className="flex justify-center h-24">
                      <FormControl>
                        <DropzoneInput />
                      </FormControl>
                      <div className="flex items-center gap-4">
                        <DropzoneUploadIcon />
                        <div className="grid gap-0.5">
                          <DropzoneTitle>파일을 드래그하거나 클릭하여 업로드</DropzoneTitle>
                          <DropzoneDescription>PDF, 이미지, 문서 (최대 600MB)</DropzoneDescription>
                        </div>
                      </div>
                    </DropzoneZone>
                    <FormDescription>기준 문서 첨부가 필요한 경우 업로드하세요.</FormDescription>
                  </FormItem>
                )}
              </Dropzone>

              {attachments.length > 0 && (
                <div className="space-y-2">
                  <p className="text-sm font-medium">첨부된 파일 ({attachments.length})</p>
                  <FileList>
                    {attachments.map((file, idx) => (
                      <FileListItem key={idx}>
                        <FileListHeader>
                          <FileListInfo>
                            <FileListName>{file.originalFileName || file.fileName}</FileListName>
                            {file.size && (
                              <FileListDescription>{`${file.size} bytes`}</FileListDescription>
                            )}
                          </FileListInfo>
                          <FileListAction
                            onClick={() =>
                              setAttachments((prev) => prev.filter((_, i) => i !== idx))
                            }
                          >
                            <X className="h-4 w-4" />
                            <span className="sr-only">Remove</span>
                          </FileListAction>
                        </FileListHeader>
                      </FileListItem>
                    ))}
                  </FileList>
                </div>
              )}
            </div>

            {/* Required 체크박스 */}


            {/* Description 필드 */}
            <FormField
              control={form.control}
              name="description"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Description</FormLabel>
                  <FormControl>
                    <Textarea
                      placeholder="상세 설명을 입력하세요"
                      className="min-h-[120px] whitespace-pre-wrap"
                      {...field}
                      value={field.value || ""}
                    />
                  </FormControl>
                  <FormDescription>
                    줄바꿈이 필요한 경우 Enter 키를 누르세요. 입력한 대로 저장됩니다.
                  </FormDescription>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* Remarks 필드 */}
            <FormField
              control={form.control}
              name="remarks"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Remarks</FormLabel>
                  <FormControl>
                    <Textarea
                      placeholder="비고 사항을 입력하세요"
                      className="min-h-[80px]"
                      {...field}
                      value={field.value || ""}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <SheetFooter className="gap-2 pt-2 sm:space-x-0">
              <SheetClose asChild>
                <Button 
                  type="button" 
                  variant="outline"
                  onClick={() => form.reset()}
                >
                  Cancel
                </Button>
              </SheetClose>
              <Button disabled={isUpdatePending}>
                {isUpdatePending && (
                  <Loader
                    className="mr-2 size-4 animate-spin"
                    aria-hidden="true"
                  />
                )}
                <Save className="mr-2 size-4" /> Save
              </Button>
            </SheetFooter>
          </form>
        </Form>
      </SheetContent>
    </Sheet>
  )
}