"use client";

import { useEffect, useState } from "react";

import {
    Button,
    Dialog,
    DialogClose,
    DialogContent,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    Input,
    Label,
    Textarea,
} from "@common/components";

export interface ApprovalFormData {
    rjctOpnnCn: string;
    lastCfmtnPicNm: string;
    lastCfmtnPicTelNo: string;
    lastCfmtnPicDeptNm: string;
    lastCfmtnPicJbgdNm: string;
}

export interface ApprovalInputDialogProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    onConfirm?: (data: ApprovalFormData) => void | Promise<void>;
}

export function ApprovalInputDialog({
    open,
    onOpenChange,
    onConfirm,
}: ApprovalInputDialogProps) {
    const [rjctOpnnCn, setRjctOpnnCn] = useState("");
    const [lastCfmtnPicNm, setLastCfmtnPicNm] = useState("");
    const [lastCfmtnPicTelNo, setLastCfmtnPicTelNo] = useState("");
    const [lastCfmtnPicDeptNm, setLastCfmtnPicDeptNm] = useState("");
    const [lastCfmtnPicJbgdNm, setLastCfmtnPicJbgdNm] = useState("");

    const [isSubmitting, setIsSubmitting] = useState(false);

    const resetForm = () => {
        setRjctOpnnCn("");
        setLastCfmtnPicNm("");
        setLastCfmtnPicTelNo("");
        setLastCfmtnPicDeptNm("");
        setLastCfmtnPicJbgdNm("");
    };

    const handleDialogOpenChange = (nextOpen: boolean) => {
        if (!nextOpen) resetForm();
        onOpenChange(nextOpen);
    };

    useEffect(() => {
        if (!open) {
            resetForm();
        }
    }, [open]);

    const handleConfirm = async () => {
        try {
            setIsSubmitting(true);
            const formData: ApprovalFormData = {
                rjctOpnnCn: rjctOpnnCn.trim(),
                lastCfmtnPicNm: lastCfmtnPicNm.trim(),
                lastCfmtnPicTelNo: lastCfmtnPicTelNo.trim(),
                lastCfmtnPicDeptNm: lastCfmtnPicDeptNm.trim(),
                lastCfmtnPicJbgdNm: lastCfmtnPicJbgdNm.trim(),
            };
            await onConfirm?.(formData);
        } finally {
            setIsSubmitting(false);
        }
    };

    return (
        <Dialog open={open} onOpenChange={handleDialogOpenChange}>
            <DialogContent
                className="max-w-[56rem]"
                aria-describedby={undefined}
            >
                <DialogHeader>
                    <DialogTitle>승인 정보 입력</DialogTitle>
                </DialogHeader>
                <div className="flex flex-col gap-4 py-2">
                    <div className="flex flex-col gap-2">
                        <Label className="text-label">최종 확인 담당자명</Label>
                        <Input
                            value={lastCfmtnPicNm}
                            onChange={(e) => {
                                setLastCfmtnPicNm(e.target.value);
                            }}
                            className="!text-[1.3rem]"
                            placeholder="담당자명을 입력하세요."
                            disabled={isSubmitting}
                        />
                    </div>
                    <div className="flex flex-col gap-2">
                        <Label className="text-label">
                            최종 확인 담당자 전화번호
                        </Label>
                        <Input
                            value={lastCfmtnPicTelNo}
                            onChange={(e) => {
                                setLastCfmtnPicTelNo(e.target.value);
                            }}
                            className="!text-[1.3rem]"
                            placeholder="전화번호를 입력하세요."
                            disabled={isSubmitting}
                        />
                    </div>
                    <div className="flex flex-col gap-2">
                        <Label className="text-label">
                            최종 확인 담당자 부서명
                        </Label>
                        <Input
                            value={lastCfmtnPicDeptNm}
                            onChange={(e) => {
                                setLastCfmtnPicDeptNm(e.target.value);
                            }}
                            className="!text-[1.3rem]"
                            placeholder="부서명을 입력하세요."
                            disabled={isSubmitting}
                        />
                    </div>
                    <div className="flex flex-col gap-2">
                        <Label className="text-label">
                            최종 확인 담당자 직급명
                        </Label>
                        <Input
                            value={lastCfmtnPicJbgdNm}
                            onChange={(e) => {
                                setLastCfmtnPicJbgdNm(e.target.value);
                            }}
                            className="!text-[1.3rem]"
                            placeholder="직급명을 입력하세요."
                            disabled={isSubmitting}
                        />
                    </div>
                    <div className="flex flex-col gap-2">
                        <Label className="text-label">반려 의견 내용</Label>
                        <Textarea
                            value={rjctOpnnCn}
                            onChange={(e) => setRjctOpnnCn(e.target.value)}
                            className="min-h-[10rem] resize-y !text-[1.3rem] !leading-6"
                            placeholder="반려 의견 내용을 입력하세요. (선택사항)"
                            disabled={isSubmitting}
                        />
                    </div>
                </div>
                <DialogFooter>
                    <DialogClose asChild>
                        <Button
                            type="button"
                            color="gray"
                            disabled={isSubmitting}
                        >
                            취소
                        </Button>
                    </DialogClose>
                    <Button
                        type="button"
                        color="primary"
                        disabled={isSubmitting}
                        onClick={() => void handleConfirm()}
                    >
                        확인
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}