"use client"

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

import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
  FormDescription,
} from "@/components/ui/form"

import { type GtcClauseTreeView } from "@/db/schema/gtc"
import { updateGtcClauseSchema, type UpdateGtcClauseSchema } from "@/lib/gtc-contract/gtc-clauses/validations"
import { updateGtcClause } from "@/lib/gtc-contract/gtc-clauses/service"
import { useSession } from "next-auth/react"
import { MarkdownImageEditor } from "./markdown-image-editor"

interface ClauseImage {
  id: string
  url: string
  fileName: string
  size: number
  savedName?: string
  mimeType?: string
  width?: number
  height?: number
  hash?: string
}


export interface UpdateGtcClauseSheetProps
  extends React.ComponentPropsWithRef<typeof Sheet> {
  gtcClause: GtcClauseTreeView | null
  documentId: number
}

export function UpdateGtcClauseSheet({ gtcClause, documentId, ...props }: UpdateGtcClauseSheetProps) {
  const [isUpdatePending, startUpdateTransition] = React.useTransition()
  const { data: session } = useSession()
  const [images, setImages] = React.useState<ClauseImage[]>([])
  const [rawFiles, setRawFiles] = React.useState<File[]>([])
  const [removedImageIds, setRemovedImageIds] = React.useState<string[]>([])


  const currentUserId = React.useMemo(() => {
    return session?.user?.id ? Number(session.user.id) : null
  }, [session])
  
  const form = useForm<UpdateGtcClauseSchema>({
    resolver: zodResolver(updateGtcClauseSchema),
    defaultValues: {
      itemNumber: "",
      category: "",
      subtitle: "",
      content: "",
      // numberVariableName: "",
      // subtitleVariableName: "",
      // contentVariableName: "",
      editReason: "",
      isActive: true,
    },
  })

  React.useEffect(() => {
    if (gtcClause) {
      form.reset({
        itemNumber: gtcClause.itemNumber,
        category: gtcClause.category || "",
        subtitle: gtcClause.subtitle,
        content: gtcClause.content || "",
        editReason: "",
        isActive: gtcClause.isActive,
      })
      // ✅ 초기 이미지 세팅
      setImages((gtcClause.images as any[]) || [])
      setRawFiles([])
      setRemovedImageIds([])
    }
  }, [gtcClause, form])

  

  async function onSubmit(input: UpdateGtcClauseSchema) {
    startUpdateTransition(async () => {
      if (!gtcClause || !currentUserId) {
        toast.error("조항 정보를 찾을 수 없습니다.")
        return
      }

      try {
        const result = await updateGtcClause(gtcClause.id, {
          ...input,
          images: images, // 이미지 배열 추가
          updatedById: currentUserId,
        })

        if (result.error) {
          toast.error(result.error)
          return
        }

        form.reset()
        props.onOpenChange?.(false)
        toast.success("GTC 조항이 업데이트되었습니다!")
      } catch (error) {
        toast.error("조항 업데이트 중 오류가 발생했습니다.")
      }
    })
  }

  const getDepthBadge = (depth: number) => {
    const levels = ["1단계", "2단계", "3단계", "4단계", "5단계+"]
    return levels[depth] || levels[4]
  }

  const handleContentImageChange = (content: string, newImages: ClauseImage[]) => {
    form.setValue("content", content)
    setImages(newImages)
  }


  return (
    <Sheet {...props}>
      <SheetContent className="flex flex-col sm:max-w-xl h-full">
        <SheetHeader className="text-left flex-shrink-0">
          <SheetTitle>GTC 조항 수정</SheetTitle>
          <SheetDescription>
            조항 정보를 수정하고 변경사항을 저장하세요
          </SheetDescription>
        </SheetHeader>

        {/* 조항 정보 표시 */}
        <div className="space-y-2 p-3 bg-muted/50 rounded-lg flex-shrink-0">
          <div className="text-sm font-medium">현재 조항 정보</div>
          <div className="text-xs text-muted-foreground space-y-1">
            <div className="flex items-center gap-2">
              <span>위치:</span>
              <Badge variant="outline">
                {getDepthBadge(gtcClause?.depth || 0)}
              </Badge>
              {gtcClause?.fullPath && (
                <span className="font-mono">{gtcClause.fullPath}</span>
              )}
            </div>
            {gtcClause?.parentItemNumber && (
              <div>부모 조항: {gtcClause.parentItemNumber} - {gtcClause.parentSubtitle}</div>
            )}
            {gtcClause?.childrenCount > 0 && (
              <div>하위 조항: {gtcClause.childrenCount}개</div>
            )}
          </div>
        </div>

        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(onSubmit)}
            className="flex flex-col flex-1 min-h-0"
          >
            {/* 스크롤 가능한 폼 내용 영역 */}
            <div className="flex-1 overflow-y-auto px-1">
              <div className="space-y-4 py-2">
                {/* 채번 */}
                <FormField
                  control={form.control}
                  name="itemNumber"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>채번 *</FormLabel>
                      <FormControl>
                        <Input 
                          placeholder="예: 1, 1.1, 2.3.1, A, B-1 등"
                          {...field} 
                        />
                      </FormControl>
                      <FormDescription>
                        조항의 번호입니다. 영문, 숫자, 점(.), 하이픈(-), 언더스코어(_)를 사용할 수 있습니다.
                      </FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                {/* 분류 */}
                <FormField
                  control={form.control}
                  name="category"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>분류</FormLabel>
                      <FormControl>
                        <Input 
                          placeholder="예: 일반조항, 특수조항, 기술조항 등"
                          {...field} 
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                {/* 소제목 */}
                <FormField
                  control={form.control}
                  name="subtitle"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>소제목 *</FormLabel>
                      <FormControl>
                        <Input 
                          placeholder="예: PREAMBLE, DEFINITIONS, GENERAL CONDITIONS 등"
                          {...field} 
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                {/* 상세항목 */}
                <FormField
                  control={form.control}
                  name="content"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>상세항목 (선택사항)</FormLabel>
                      <FormControl>
                        <MarkdownImageEditor
                          content={field.value || ""}
                          images={images}
                          onChange={handleContentImageChange}
                          placeholder="조항의 상세 내용을 입력하세요... 이미지를 추가하려면 '이미지 추가' 버튼을 클릭하세요."
                          rows={8}
                        />
                      </FormControl>
                      <FormDescription>
                        조항의 실제 내용입니다. 텍스트와 이미지를 조합할 수 있으며, 하위 조항들을 그룹핑하는 제목용 조항인 경우 비워둘 수 있습니다.
                      </FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                {/* PDFTron 변수명 섹션 */}
                {/* <div className="space-y-3 p-3 border rounded-lg">
                  <div className="flex items-center gap-2">
                    <Info className="h-4 w-4 text-muted-foreground" />
                    <span className="text-sm font-medium">PDFTron 변수명 설정</span>
                    {gtcClause?.hasAllVariableNames && (
                      <Badge variant="default" className="text-xs">설정됨</Badge>
                    )}
                  </div>
                  
                  <div className="grid grid-cols-1 gap-3">
                    <FormField
                      control={form.control}
                      name="numberVariableName"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>채번 변수명</FormLabel>
                          <FormControl>
                            <Input {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />

                    <FormField
                      control={form.control}
                      name="subtitleVariableName"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>소제목 변수명</FormLabel>
                          <FormControl>
                            <Input {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />

                    <FormField
                      control={form.control}
                      name="contentVariableName"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>상세항목 변수명</FormLabel>
                          <FormControl>
                            <Input {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </div>
                </div> */}

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

            <SheetFooter className="gap-2 pt-2 sm:space-x-0">
              <SheetClose asChild>
                <Button type="button" variant="outline">
                  Cancel
                </Button>
              </SheetClose>

              <Button type="submit" disabled={isUpdatePending}>
                {isUpdatePending && (
                  <Loader
                    className="mr-2 size-4 animate-spin"
                    aria-hidden="true"
                  />
                )}
                Save
              </Button>
            </SheetFooter>
          </form>
        </Form>
      </SheetContent>
    </Sheet>
  )
}