path: root/lib/vendor-document-list/table/add-doc-dialog.tsx

"use client"

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

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 {
    Form,
    FormControl,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
} from "@/components/ui/form"
import { useToast } from "@/hooks/use-toast"
import { createDocument, CreateDocumentInputType, invalidateDocumentCache } from "../service"

// Zod 스키마 정의 - 빈 문자열 방지 로직 추가
const createDocumentSchema = z.object({
    docNumber: z.string().min(1, "Document number is required"),
    title: z.string().min(1, "Title is required"),
    stages: z.array(z.string().min(1, "Stage name cannot be empty"))
        .min(1, "At least one stage is required")
        .refine(stages => !stages.some(stage => stage.trim() === ""), {
            message: "Stage names cannot be empty"
        })
});

type CreateDocumentSchema = z.infer<typeof createDocumentSchema>;

interface AddDocumentListDialogProps {
    projectType: "ship" | "plant";
    contractId: number;
    onSuccess?: () => void; // ✅ onSuccess 콜백 추가
}

export function AddDocumentListDialog({ projectType, contractId, onSuccess }: AddDocumentListDialogProps) {
    const [open, setOpen] = React.useState(false);
    const [isSubmitting, setIsSubmitting] = React.useState(false);
    const router = useRouter();
    const { toast } = useToast()
    
    // 기본 스테이지 설정
    const defaultStages = projectType === "ship" 
        ? ["For Approval", "For Working"] 
        : [""];
    
    // react-hook-form 설정
    const form = useForm<CreateDocumentSchema>({
        resolver: zodResolver(createDocumentSchema),
        defaultValues: {
            docNumber: "",
            title: "",
            stages: defaultStages
        },
    });
    
    // 식물 유형일 때 단계 추가 기능
    const addStage = () => {
        const currentStages = form.getValues().stages;
        form.setValue('stages', [...currentStages, ""], { shouldValidate: true });
    };
    
    // 식물 유형일 때 단계 제거 기능
    const removeStage = (index: number) => {
        const currentStages = form.getValues().stages;
        const newStages = currentStages.filter((_, i) => i !== index);
        form.setValue('stages', newStages, { shouldValidate: true });
    };
    
    async function onSubmit(data: CreateDocumentSchema) {
        try {
            setIsSubmitting(true);
            
            // 빈 문자열 필터링 (추가 안전장치)
            const filteredStages = data.stages.filter(stage => stage.trim() !== "");
            
            if (filteredStages.length === 0) {
                toast({
                    title: "Error",
                    description: "At least one valid stage name is required",
                    variant: "destructive",
                });
                return;
            }
            
            // 서버 액션 호출 - status를 "pending"으로 설정
            const result = await createDocument({
                ...data,
                stages: filteredStages, // 필터링된 단계 사용
                status: "pending", // status 필드 추가
                contractId, // 계약 ID 추가
            } as CreateDocumentInputType);
            
            if (result.success) {
                // ✅ 캐시 무효화 시도 (에러가 나더라도 계속 진행)
                try {
                    await invalidateDocumentCache(contractId);
                } catch (cacheError) {
                    console.warn('Cache invalidation failed:', cacheError);
                }
                
                // 토스트 메시지
                toast({
                    title: "Success",
                    description: "Document created successfully",
                    variant: "default",
                });
                
                // 모달 닫기 및 폼 리셋
                form.reset({
                    docNumber: "",
                    title: "",
                    stages: defaultStages
                });
                setOpen(false);
                
                // ✅ 성공 콜백 호출 (부모 컴포넌트에서 추가 처리 가능)
                if (onSuccess) {
                    onSuccess();
                }
                
                // ✅ 라우터 새로고침 (약간의 지연을 두고 실행)
                setTimeout(() => {
                    router.refresh();
                }, 100);
                
            } else {
                // 실패 시 에러 토스트
                toast({
                    title: "Error",
                    description: result.message || "Failed to create document",
                    variant: "destructive",
                });
            }
        } catch (error) {
            console.error('Error creating document:', error);
            toast({
                title: "Error",
                description: "An unexpected error occurred",
                variant: "destructive",
            });
        } finally {
            setIsSubmitting(false);
        }
    }
    
    // 제출 전 유효성 검사
    const validateBeforeSubmit = async () => {
        // 빈 스테이지 검사
        const stages = form.getValues().stages;
        const hasEmptyStage = stages.some(stage => stage.trim() === "");
        
        if (hasEmptyStage) {
            form.setError("stages", {
                type: "manual",
                message: "Stage names cannot be empty"
            });
            return false;
        }
        
        return true;
    };
    
    function handleDialogOpenChange(nextOpen: boolean) {
        if (!nextOpen) {
            form.reset({
                docNumber: "",
                title: "",
                stages: defaultStages
            });
        }
        setOpen(nextOpen);
    }
    
    return (
        <Dialog open={open} onOpenChange={handleDialogOpenChange}>
            {/* 모달을 열기 위한 버튼 */}
            <DialogTrigger asChild>
                <Button variant="default" size="sm">
                    <Plus className="size-4 mr-1"/>
                    Add Document
                </Button>
            </DialogTrigger>
            
            <DialogContent className="sm:max-w-[500px]">
                <DialogHeader>
                    <DialogTitle>Create New Document</DialogTitle>
                    <DialogDescription>
                        새 문서 정보를 입력하고 <b>Create</b> 버튼을 누르세요.
                    </DialogDescription>
                </DialogHeader>
                
                {/* shadcn/ui Form을 이용해 react-hook-form과 연결 */}
                <Form {...form}>
                    <form onSubmit={form.handleSubmit(onSubmit, async (errors) => {
                        // 추가 유효성 검사 수행
                        console.error("Form errors:", errors);
                        const stages = form.getValues().stages;
                        if (stages.some(stage => stage.trim() === "")) {
                            toast({
                                title: "Error",
                                description: "Stage names cannot be empty",
                                variant: "destructive",
                            });
                        }
                    })} className="space-y-4">
                        {/* 문서 번호 필드 */}
                        <FormField
                            control={form.control}
                            name="docNumber"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Document Number</FormLabel>
                                    <FormControl>
                                        <Input placeholder="Enter document number" {...field} />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        
                        {/* 문서 제목 필드 */}
                        <FormField
                            control={form.control}
                            name="title"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Title</FormLabel>
                                    <FormControl>
                                        <Input placeholder="Enter document title" {...field} />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        
                        {/* 스테이지 섹션 */}
                        <div>
                            <div className="flex items-center justify-between mb-2">
                                <FormLabel>Stages</FormLabel>
                                {projectType === "plant" && (
                                    <Button
                                        type="button"
                                        variant="outline"
                                        size="sm"
                                        onClick={addStage}
                                        className="h-8 px-2"
                                    >
                                        <Plus className="h-4 w-4 mr-1" /> Add Stage
                                    </Button>
                                )}
                            </div>
                            
                            {form.watch("stages").map((stage, index) => (
                                <div key={index} className="flex items-center gap-2 mb-2">
                                    <FormField
                                        control={form.control}
                                        name={`stages.${index}`}
                                        render={({ field }) => (
                                            <FormItem className="flex-1">
                                                <FormControl>
                                                    <Input 
                                                        placeholder="Enter stage name" 
                                                        {...field} 
                                                        disabled={projectType === "ship"}
                                                    />
                                                </FormControl>
                                                <FormMessage />
                                            </FormItem>
                                        )}
                                    />
                                    {projectType === "plant" && index > 0 && (
                                        <Button
                                            type="button"
                                            variant="ghost"
                                            size="sm"
                                            onClick={() => removeStage(index)}
                                            className="h-8 w-8 p-0"
                                        >
                                            <X className="h-4 w-4" />
                                        </Button>
                                    )}
                                </div>
                            ))}
                            <FormMessage>
                                {form.formState.errors.stages?.message}
                            </FormMessage>
                        </div>
                        
                        <DialogFooter>
                            <Button
                                type="button"
                                variant="outline"
                                onClick={() => setOpen(false)}
                            >
                                Cancel
                            </Button>
                            <Button 
                                type="submit" 
                                disabled={isSubmitting || form.formState.isSubmitting}
                            >
                                {isSubmitting ? "Creating..." : "Create"}
                            </Button>
                        </DialogFooter>
                    </form>
                </Form>
            </DialogContent>
        </Dialog>
    );
}