"use client";

import {
    Button,
    Dialog,
    DialogContent,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    Input,
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableRow,
} from "@common/components";
import { CodeSelect } from "@/entities/code/ui/code-select";
import type { VerificationTargetManagementResponse } from "@/entities/statistics/model/verification-target-management-interface";
import {
    verificationTargetManagementSchema,
    type VerificationTargetManagementFormData,
} from "@/entities/statistics/model/verification-target-management-schema";
import { useEffect } from "react";
import { useForm, Controller } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import type { TabValue } from "./VerificationArticleManagement";

interface VerificationTargetDialogProps {
    tabValue: TabValue;
    open: boolean;
    onOpenChange: (open: boolean) => void;
    data: VerificationTargetManagementResponse | null;
    onSave: (data: VerificationTargetManagementResponse) => void;
    onDelete: (vrfcTrgtSn: number) => void;
}

export function VerificationTargetDialog({
    tabValue,
    open,
    onOpenChange,
    data,
    onSave,
    onDelete,
}: VerificationTargetDialogProps) {
    const {
        control,
        handleSubmit,
        reset,
        formState: { errors },
    } = useForm<VerificationTargetManagementFormData>({
        resolver: zodResolver(verificationTargetManagementSchema),
        defaultValues: data || undefined,
    });

    useEffect(() => {
        if (data && open) reset(data);
    }, [data, open, reset]);

    function onSubmit(formData: VerificationTargetManagementFormData) {
        if (!data) return;
        onSave({
            ...data,
            ...formData,
        } as VerificationTargetManagementResponse);
    }

    function handleDelete() {
        if (data?.vrfcTrgtSn) {
            onDelete(data.vrfcTrgtSn);
        }
    }

    if (!data) return null;

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-[800px]">
                <DialogHeader>
                    <DialogTitle>검증 항목 상세</DialogTitle>
                </DialogHeader>

                <form onSubmit={handleSubmit(onSubmit)}>
                    <Table variant="secondary">
                        <TableBody>
                            <TableRow>
                                <TableHead
                                    className="w-[150px] bg-muted font-medium"
                                    data-required
                                >
                                    통계항목
                                </TableHead>
                                <TableCell>
                                    <Controller
                                        name="statsCd"
                                        control={control}
                                        render={({ field }) => (
                                            <div className="space-y-1">
                                                <CodeSelect
                                                    upCd="STITEM"
                                                    value={field.value}
                                                    onValueChange={
                                                        field.onChange
                                                    }
                                                    placeholder="선택"
                                                />
                                            </div>
                                        )}
                                    />
                                </TableCell>
                                <TableHead
                                    className="w-[150px] bg-muted font-medium"
                                    data-required
                                >
                                    검증명
                                </TableHead>
                                <TableCell>
                                    <Controller
                                        name="vrfcTrgtNm"
                                        control={control}
                                        render={({ field }) => (
                                            <Input
                                                {...field}
                                                value={field.value || ""}
                                                placeholder="검증명"
                                            />
                                        )}
                                    />
                                </TableCell>
                            </TableRow>

                            <TableRow>
                                <TableHead
                                    className="bg-muted font-medium"
                                    data-required
                                >
                                    스키마명
                                </TableHead>
                                <TableCell>
                                    <Controller
                                        name="schmNm"
                                        control={control}
                                        render={({ field }) => (
                                            <div className="space-y-1">
                                                <Input
                                                    {...field}
                                                    placeholder="스키마명"
                                                />
                                            </div>
                                        )}
                                    />
                                </TableCell>
                                <TableHead
                                    className="bg-muted font-medium"
                                    data-required
                                >
                                    테이블명
                                </TableHead>
                                <TableCell>
                                    <Controller
                                        name="tblNm"
                                        control={control}
                                        render={({ field }) => (
                                            <div className="space-y-1">
                                                <Input
                                                    {...field}
                                                    placeholder="테이블명"
                                                />
                                            </div>
                                        )}
                                    />
                                </TableCell>
                            </TableRow>

                            <TableRow>
                                <TableHead
                                    className="bg-muted font-medium"
                                    data-required
                                >
                                    컬럼명
                                </TableHead>
                                <TableCell>
                                    <Controller
                                        name="colNm"
                                        control={control}
                                        render={({ field }) => (
                                            <div className="space-y-1">
                                                <Input
                                                    {...field}
                                                    placeholder="컬럼명"
                                                />
                                            </div>
                                        )}
                                    />
                                </TableCell>
                                <TableHead
                                    className="bg-muted font-medium"
                                    data-required
                                >
                                    PK 키
                                </TableHead>
                                <TableCell>
                                    <Controller
                                        name="pkColNm"
                                        control={control}
                                        render={({ field }) => (
                                            <div className="space-y-1">
                                                <Input
                                                    {...field}
                                                    placeholder="PK 키"
                                                />
                                            </div>
                                        )}
                                    />
                                </TableCell>
                            </TableRow>

                            {tabValue !== "IMR" && (
                                <TableRow>
                                    <TableHead className="bg-muted font-medium">
                                        중요도 계수(μ)
                                    </TableHead>
                                    <TableCell>
                                        <Controller
                                            name="ipcrCntVl"
                                            control={control}
                                            render={({ field }) => (
                                                <div className="space-y-1">
                                                    <Input
                                                        type="number"
                                                        min="0"
                                                        max="1"
                                                        step="0.1"
                                                        value={field.value ?? ""}
                                                        onChange={(e) =>
                                                            field.onChange(
                                                                e.target.value
                                                                    ? Number(
                                                                          e.target
                                                                              .value,
                                                                      )
                                                                    : null,
                                                            )
                                                        }
                                                        placeholder="(0 ~ 1, 0.1 단위)"
                                                    />
                                                </div>
                                            )}
                                        />
                                    </TableCell>
                                    <TableHead className="bg-muted font-medium">
                                        백분위수 기준값(pct)
                                    </TableHead>
                                    <TableCell>
                                        <Controller
                                            name="pctlCrtrVl"
                                            control={control}
                                            render={({ field }) => (
                                                <div className="space-y-1">
                                                    <Input
                                                        type="number"
                                                        min="0"
                                                        max="0.5"
                                                        step="0.1"
                                                        value={field.value ?? ""}
                                                        onChange={(e) =>
                                                            field.onChange(
                                                                e.target.value
                                                                    ? Number(
                                                                          e.target
                                                                              .value,
                                                                      )
                                                                    : null,
                                                            )
                                                        }
                                                        placeholder="(0 ~ 0.5, 0.1 단위)"
                                                    />
                                                </div>
                                            )}
                                        />
                                    </TableCell>
                                </TableRow>
                            )}

                            {tabValue !== "IMR" && (
                                <TableRow>
                                    <TableHead className="bg-muted font-medium">
                                        스케일 조정 계수(A)
                                    </TableHead>
                                    <TableCell>
                                        <Controller
                                            name="scopCntCntVl"
                                            control={control}
                                            render={({ field }) => (
                                                <div className="space-y-1">
                                                    <Input
                                                        type="number"
                                                        min="0"
                                                        max="1"
                                                        step="0.01"
                                                        value={field.value ?? ""}
                                                        onChange={(e) =>
                                                            field.onChange(
                                                                e.target.value
                                                                    ? Number(
                                                                          e.target
                                                                              .value,
                                                                      )
                                                                    : null,
                                                            )
                                                        }
                                                        placeholder="(0 ~ 1, 0.01 단위)"
                                                    />
                                                </div>
                                            )}
                                        />
                                    </TableCell>
                                    <TableHead className="bg-muted font-medium">
                                        임계 계수(c)
                                    </TableHead>
                                    <TableCell>
                                        <Controller
                                            name="thrsCntVl"
                                            control={control}
                                            render={({ field }) => (
                                                <div className="space-y-1">
                                                    <Input
                                                        type="number"
                                                        min="0"
                                                        max="100"
                                                        step="1"
                                                        value={field.value ?? ""}
                                                        onChange={(e) =>
                                                            field.onChange(
                                                                e.target.value
                                                                    ? Number(
                                                                          e.target
                                                                              .value,
                                                                      )
                                                                    : null,
                                                            )
                                                        }
                                                        placeholder="(0 ~ 100, 1 단위)"
                                                    />
                                                </div>
                                            )}
                                        />
                                    </TableCell>
                                </TableRow>
                            )}
                        </TableBody>
                    </Table>

                    <DialogFooter className="mt-6">
                        <Button
                            type="button"
                            color="gray"
                            onClick={() => onOpenChange(false)}
                        >
                            취소
                        </Button>
                        <Button
                            type="button"
                            color="red"
                            onClick={handleDelete}
                        >
                            삭제
                        </Button>
                        <Button type="submit" color="green">
                            저장
                        </Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    );
}