path: root/lib/basic-contract/gtc-vendor/create-gtc-clause-dialog.tsx

// create-vendor-gtc-clause-dialog.tsx
"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 { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Checkbox } from "@/components/ui/checkbox"

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

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

interface ClauseImage {
  id: string
  url: string
  fileName: string
  size: number
}

interface CreateVendorGtcClauseDialogProps {
  documentId: number
  document: any
  vendorDocumentId: number
  vendorId: number
  vendorName?: string
  baseClauseId?: number // Optional - if creating a new vendor clause from scratch
  baseClause?: GtcClauseTreeView | null // Original clause to modify, if available
  parentClause?: GtcClauseTreeView | null
  onSuccess?: () => void
  open?: boolean
  onOpenChange?: (open: boolean) => void
  showTrigger?: boolean
}

export function CreateVendorGtcClauseDialog({ 
  documentId, 
  document,
  vendorDocumentId,
  vendorId,
  vendorName,
  baseClauseId,
  baseClause,
  parentClause = null,
  onSuccess,
  open: controlledOpen,
  onOpenChange: controlledOnOpenChange,
  showTrigger = true
}: CreateVendorGtcClauseDialogProps) {
  const [internalOpen, setInternalOpen] = React.useState(false)
  
  // controlled vs uncontrolled 모드
  const isControlled = controlledOpen !== undefined
  const open = isControlled ? controlledOpen : internalOpen
  const setOpen = isControlled ? controlledOnOpenChange! : setInternalOpen
  const [parentClauses, setParentClauses] = React.useState<GtcClauseTreeView[]>([])
  const [isCreatePending, startCreateTransition] = React.useTransition()
  const { data: session } = useSession()
  const [images, setImages] = React.useState<ClauseImage[]>([])

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

  React.useEffect(() => {
    if (open) {
      loadParentClauses()
    }
  }, [open, documentId])

  const loadParentClauses = async () => {
    try {
      const tree = await getGtcClausesTree(documentId)
      setParentClauses(flattenTree(tree))
    } catch (error) {
      console.error("Error loading parent clauses:", error)
    }
  }

  const form = useForm<CreateVendorGtcClauseSchema>({
    resolver: zodResolver(createVendorGtcClauseSchema),
    defaultValues: {
      documentId,
      vendorDocumentId,
      baseClauseId: baseClauseId || null,
      parentId: parentClause?.id || null,
      modifiedItemNumber: baseClause?.itemNumber || "",
      modifiedCategory: baseClause?.category || "",
      modifiedSubtitle: baseClause?.subtitle || "",
      modifiedContent: baseClause?.content || "",
      isNumberModified: false,
      isCategoryModified: false,
      isSubtitleModified: false,
      isContentModified: false,
      sortOrder: 0,
      reviewStatus: "draft",
      negotiationNote: "",
      isExcluded: false,
      editReason: "",
    },
  })

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

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

      try {
        // 사용자 정보 추가
        const result = await createVendorGtcClause({
          ...data,
          images: images,
          createdById: currentUserId,
          vendorId, // 벤더 ID 추가
          actorName: session?.user?.name || null,
          actorEmail: session?.user?.email || null,
        })
        
        if (result.error) {
          toast.error(`에러: ${result.error}`)
          return
        }

        form.reset()
        setImages([])
        setOpen(false)
        toast.success("벤더 GTC 조항이 생성되었습니다.")
        onSuccess?.()
      } catch (error) {
        toast.error("벤더 조항 생성 중 오류가 발생했습니다.")
      }
    })
  }

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

  const selectedParent = parentClauses.find(c => c.id === form.watch("parentId"))

  return (
    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
      {showTrigger && (
        <DialogTrigger asChild>
          <Button variant="default" size="sm">
            <Plus className="mr-2 h-4 w-4" />
            {baseClause 
              ? "조항 협의 생성" 
              : parentClause 
                ? "하위 조항 추가" 
                : "조항 추가"}
          </Button>
        </DialogTrigger>
      )}

      <DialogContent className="max-w-4xl h-[90vh] flex flex-col">
        <DialogHeader className="flex-shrink-0">
          <DialogTitle>
            {baseClause 
              ? `${baseClause.subtitle} 조항 협의 생성` 
              : parentClause 
                ? "하위 벤더 조항 생성" 
                : "새 벤더 조항 생성"}
          </DialogTitle>
          <DialogDescription>
            {vendorName 
              ? `${vendorName}과(와)의 GTC 조항 협의 내용을 입력하세요.` 
              : '벤더별 GTC 조항 정보를 입력하세요.'}
          </DialogDescription>
        </DialogHeader>

        {/* 기존 조항 정보 (있는 경우) */}
        {baseClause && (
          <div className="p-3 bg-muted/50 rounded-lg text-sm flex-shrink-0 mb-4">
            <div className="font-medium mb-1">원본 조항 정보</div>
            <div className="text-muted-foreground space-y-1">
              <div>채번: {baseClause.itemNumber}</div>
              {baseClause.category && <div>분류: {baseClause.category}</div>}
              <div>소제목: {baseClause.subtitle}</div>
              {baseClause.content && <div>내용: {baseClause.content.substring(0, 80)}...</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-4">
                {/* 협의 상태 */}
                <FormField
                  control={form.control}
                  name="reviewStatus"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>협의 상태</FormLabel>
                      <Select onValueChange={field.onChange} defaultValue={field.value}>
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue placeholder="협의 상태를 선택하세요" />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          <SelectItem value="draft">초안</SelectItem>
                          <SelectItem value="pending">협의 대기</SelectItem>
                          <SelectItem value="reviewing">협의 중</SelectItem>
                          <SelectItem value="approved">승인됨</SelectItem>
                          <SelectItem value="rejected">거부됨</SelectItem>
                          <SelectItem value="revised">수정됨</SelectItem>
                        </SelectContent>
                      </Select>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                {/* 제외 여부 */}
                <FormField
                  control={form.control}
                  name="isExcluded"
                  render={({ field }) => (
                    <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
                      <FormControl>
                        <Checkbox
                          checked={field.value}
                          onCheckedChange={field.onChange}
                        />
                      </FormControl>
                      <div className="space-y-1 leading-none">
                        <FormLabel>
                          이 조항을 벤더 계약에서 제외
                        </FormLabel>
                        <FormDescription>
                          체크하면 최종 계약서에서 이 조항이 제외됩니다
                        </FormDescription>
                      </div>
                    </FormItem>
                  )}
                />

                {/* 부모 조항 선택 (벤더 조항에만 필요한 경우) */}
                {!baseClause && (
                  <FormField
                    control={form.control}
                    name="parentId"
                    render={({ field }) => {
                      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"
                                >
                                  {selectedParent
                                    ? `${selectedParent.itemNumber} - ${selectedParent.subtitle}`
                                    : "부모 조항을 선택하세요... (최상위 조항인 경우 선택 안함)"}
                                  <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>
                                      <CommandItem
                                        value="none"
                                        onSelect={() => {
                                          field.onChange(null)
                                          setPopoverOpen(false)
                                        }}
                                      >
                                        최상위 조항
                                        <Check
                                          className={cn(
                                            "ml-auto h-4 w-4",
                                            !field.value ? "opacity-100" : "opacity-0"
                                          )}
                                        />
                                      </CommandItem>
                                      
                                      {parentClauses.map((clause) => (
                                        <CommandItem
                                          key={clause.id}
                                          value={`${clause.itemNumber} - ${clause.subtitle}`}
                                          onSelect={() => {
                                            field.onChange(clause.id)
                                            setPopoverOpen(false)
                                          }}
                                        >
                                          <div className="flex items-center w-full">
                                            <span style={{ marginLeft: `${clause.depth * 12}px` }}>
                                              {`${clause.itemNumber} - ${clause.subtitle}`}
                                            </span>
                                          </div>
                                          <Check
                                            className={cn(
                                              "ml-auto h-4 w-4",
                                              selectedParent?.id === clause.id
                                                ? "opacity-100" 
                                                : "opacity-0"
                                            )}
                                          />
                                        </CommandItem>
                                      ))}
                                    </CommandGroup>
                                  </CommandList>
                                </Command>
                              </PopoverContent>
                            </Popover>
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )
                    }}
                  />
                )}

                {/* 채번 수정 */}
                <div className="space-y-2 border rounded-lg p-3">
                  <FormField
                    control={form.control}
                    name="isNumberModified"
                    render={({ field }) => (
                      <FormItem className="flex flex-row items-center space-x-3 space-y-0">
                        <FormControl>
                          <Checkbox
                            checked={field.value}
                            onCheckedChange={field.onChange}
                          />
                        </FormControl>
                        <FormLabel className="font-normal cursor-pointer">
                          채번 수정
                        </FormLabel>
                      </FormItem>
                    )}
                  />
                  
                  {form.watch("isNumberModified") && (
                    <FormField
                      control={form.control}
                      name="modifiedItemNumber"
                      render={({ field }) => (
                        <FormItem>
                          <FormControl>
                            <Input 
                              placeholder="수정할 채번 입력"
                              {...field} 
                            />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  )}
                </div>

                {/* 분류 수정 */}
                <div className="space-y-2 border rounded-lg p-3">
                  <FormField
                    control={form.control}
                    name="isCategoryModified"
                    render={({ field }) => (
                      <FormItem className="flex flex-row items-center space-x-3 space-y-0">
                        <FormControl>
                          <Checkbox
                            checked={field.value}
                            onCheckedChange={field.onChange}
                          />
                        </FormControl>
                        <FormLabel className="font-normal cursor-pointer">
                          분류 수정
                        </FormLabel>
                      </FormItem>
                    )}
                  />
                  
                  {form.watch("isCategoryModified") && (
                    <FormField
                      control={form.control}
                      name="modifiedCategory"
                      render={({ field }) => (
                        <FormItem>
                          <FormControl>
                            <Input 
                              placeholder="수정할 분류 입력"
                              {...field} 
                            />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  )}
                </div>

                {/* 소제목 수정 */}
                <div className="space-y-2 border rounded-lg p-3">
                  <FormField
                    control={form.control}
                    name="isSubtitleModified"
                    render={({ field }) => (
                      <FormItem className="flex flex-row items-center space-x-3 space-y-0">
                        <FormControl>
                          <Checkbox
                            checked={field.value}
                            onCheckedChange={field.onChange}
                          />
                        </FormControl>
                        <FormLabel className="font-normal cursor-pointer">
                          소제목 수정
                        </FormLabel>
                      </FormItem>
                    )}
                  />
                  
                  {form.watch("isSubtitleModified") && (
                    <FormField
                      control={form.control}
                      name="modifiedSubtitle"
                      render={({ field }) => (
                        <FormItem>
                          <FormControl>
                            <Input 
                              placeholder="수정할 소제목 입력"
                              {...field} 
                            />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  )}
                </div>

                {/* 내용 수정 */}
                <div className="space-y-2 border rounded-lg p-3">
                  <FormField
                    control={form.control}
                    name="isContentModified"
                    render={({ field }) => (
                      <FormItem className="flex flex-row items-center space-x-3 space-y-0">
                        <FormControl>
                          <Checkbox
                            checked={field.value}
                            onCheckedChange={field.onChange}
                          />
                        </FormControl>
                        <FormLabel className="font-normal cursor-pointer">
                          상세항목 수정
                        </FormLabel>
                      </FormItem>
                    )}
                  />
                  
                  {form.watch("isContentModified") && (
                    <FormField
                      control={form.control}
                      name="modifiedContent"
                      render={({ field }) => (
                        <FormItem>
                          <FormControl>
                            <MarkdownImageEditor
                              content={field.value || ""}
                              images={images}
                              onChange={handleContentImageChange}
                              placeholder="수정할 내용을 입력하세요..."
                              rows={6}
                            />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  )}
                </div>

                {/* 협의 노트 */}
                <FormField
                  control={form.control}
                  name="negotiationNote"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>협의 메모</FormLabel>
                      <FormControl>
                        <Textarea
                          placeholder="협의 과정에서의 메모나 특이사항을 기록하세요..."
                          {...field}
                          rows={3}
                        />
                      </FormControl>
                      <FormDescription>
                        벤더와의 협의 내용이나 변경 사유를 기록합니다
                      </FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />

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

            <DialogFooter className="flex-shrink-0 border-t pt-4">
              <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>
  )
}

// 트리를 평면 배열로 변환하는 유틸리티 함수
function flattenTree(tree: any[]): any[] {
  const result: any[] = []
  
  function traverse(nodes: any[]) {
    for (const node of nodes) {
      result.push(node)
      if (node.children && node.children.length > 0) {
        traverse(node.children)
      }
    }
  }
  
  traverse(tree)
  return result
}