"use client";

import { useState } from "react";
import { DataGrid } from "@rsone/components";
import SearchForm from "@/components/module/SearchForm";
import {
    Button,
    Input,
    Label,
    Select,
    SelectTrigger,
    SelectContent,
    SelectItem,
    SelectValue,
    Checkbox,
} from "@common/components";
import { verificationHistoryColumnInfo } from "@/entities/statistics/model/verification-history-column";
import { verificationHistoryMockData } from "@/entities/statistics/model/verification-history-mock";

interface VerificationFormValues {
    mu: string;
    percentile: string;
    a: string;
    c: string;
    verificationYear: string;
    checkboxOptions: {
        sidoDistribution: boolean;
        countyDistribution: boolean;
        countyDistributionUserManagement: boolean;
        lowerDistribution: boolean;
        sidoServiceAvailability: boolean;
        individualService: boolean;
        legalServiceUsage: boolean;
        excessUse: boolean;
        lowerOrgStatistics: boolean;
        studentStatistics: boolean;
        developmentStatistics: boolean;
        lowerManagementEnterprise: boolean;
    };
}

const HbStatisticsVerification = () => {
    const [verificationHistoryRowData, setVerificationHistoryRowData] =
        useState<Record<string, string | number>[]>(
            verificationHistoryMockData,
        );

    const [formValues, setFormValues] = useState<VerificationFormValues>({
        mu: "0",
        percentile: "0",
        a: "0",
        c: "0",
        verificationYear: "2025",
        checkboxOptions: {
            sidoDistribution: false,
            countyDistribution: false,
            countyDistributionUserManagement: false,
            lowerDistribution: false,
            sidoServiceAvailability: false,
            individualService: false,
            legalServiceUsage: false,
            excessUse: false,
            lowerOrgStatistics: false,
            studentStatistics: false,
            developmentStatistics: false,
            lowerManagementEnterprise: false,
        },
    });

    const handleCheckboxChange = (
        key: keyof VerificationFormValues["checkboxOptions"],
    ) => {
        setFormValues((prev) => ({
            ...prev,
            checkboxOptions: {
                ...prev.checkboxOptions,
                [key]: !prev.checkboxOptions[key],
            },
        }));
    };

    const handleInputChange = (
        key: keyof Omit<VerificationFormValues, "checkboxOptions">,
        value: string,
    ) => {
        setFormValues((prev) => ({
            ...prev,
            [key]: value,
        }));
    };

    const handleSubmit = () => {
        console.log("검증 실행:", formValues);
    };

    const handleReset = () => {
        console.log("초기화");
    };

    return (
        <div className="card card-border mt-4">
            <div className="p-2">
                {/* 통계 검증 섹션 */}
                <div className="mb-6">
                    <h3 className="px-2 text-[1.5rem] font-semibold">
                        통계 검증
                    </h3>

                    <div className="flex gap-2">
                        {/* 왼쪽: 검증 변수 */}
                        <div className="card card-border flex-[0.5] rounded p-4">
                            <h4 className="mb-3 rounded bg-gray-100 p-2 text-[1.4rem] font-medium">
                                검증 변수
                            </h4>

                            <div className="space-y-3">
                                <div className="flex items-center gap-4">
                                    <Label className="w-32 text-label">μ</Label>
                                    <Input
                                        type="number"
                                        value={formValues.mu}
                                        onChange={(e) =>
                                            handleInputChange(
                                                "mu",
                                                e.target.value,
                                            )
                                        }
                                        className="flex-1"
                                    />
                                </div>

                                <div className="flex items-center gap-4">
                                    <Label className="w-32 text-label">
                                        Percentile
                                    </Label>
                                    <Input
                                        type="number"
                                        value={formValues.percentile}
                                        onChange={(e) =>
                                            handleInputChange(
                                                "percentile",
                                                e.target.value,
                                            )
                                        }
                                        className="flex-1"
                                    />
                                </div>

                                <div className="flex items-center gap-4">
                                    <Label className="w-32 text-label">A</Label>
                                    <Input
                                        type="number"
                                        value={formValues.a}
                                        onChange={(e) =>
                                            handleInputChange(
                                                "a",
                                                e.target.value,
                                            )
                                        }
                                        className="flex-1"
                                    />
                                </div>

                                <div className="flex items-center gap-4">
                                    <Label className="w-32 text-label">C</Label>
                                    <Input
                                        type="number"
                                        value={formValues.c}
                                        onChange={(e) =>
                                            handleInputChange(
                                                "c",
                                                e.target.value,
                                            )
                                        }
                                        className="flex-1"
                                    />
                                </div>

                                <div className="flex items-center gap-4">
                                    <Label className="w-32 text-label">
                                        검증 년도
                                    </Label>
                                    <Select
                                        value={formValues.verificationYear}
                                        onValueChange={(value) =>
                                            handleInputChange(
                                                "verificationYear",
                                                value,
                                            )
                                        }
                                    >
                                        <SelectTrigger className="flex-1">
                                            <SelectValue />
                                        </SelectTrigger>
                                        <SelectContent>
                                            <SelectItem value="2025">
                                                2025년
                                            </SelectItem>
                                        </SelectContent>
                                    </Select>
                                </div>
                            </div>
                        </div>

                        {/* 오른쪽: 검증 대상 */}
                        <div className="card card-border flex-1 rounded p-4">
                            <h4 className="mb-3 rounded bg-gray-100 p-2 text-[1.4rem] font-medium">
                                검증 대상
                            </h4>

                            <div className="space-y-4 p-2">
                                <div className="grid grid-cols-4 gap-4">
                                    <div className="flex items-center gap-2">
                                        <Checkbox
                                            checked={
                                                formValues.checkboxOptions
                                                    .sidoDistribution
                                            }
                                            onCheckedChange={() =>
                                                handleCheckboxChange(
                                                    "sidoDistribution",
                                                )
                                            }
                                        />
                                        <Label className="cursor-pointer text-label">
                                            하수도 보급률
                                        </Label>
                                    </div>

                                    <div className="flex items-center gap-2">
                                        <Checkbox
                                            checked={
                                                formValues.checkboxOptions
                                                    .countyDistribution
                                            }
                                            onCheckedChange={() =>
                                                handleCheckboxChange(
                                                    "countyDistribution",
                                                )
                                            }
                                        />
                                        <Label className="cursor-pointer text-label">
                                            하수관로
                                        </Label>
                                    </div>

                                    <div className="flex items-center gap-2">
                                        <Checkbox
                                            checked={
                                                formValues.checkboxOptions
                                                    .countyDistributionUserManagement
                                            }
                                            onCheckedChange={() =>
                                                handleCheckboxChange(
                                                    "countyDistributionUserManagement",
                                                )
                                            }
                                        />
                                        <Label className="cursor-pointer text-label">
                                            하수관로 유지관리
                                        </Label>
                                    </div>

                                    <div className="flex items-center gap-2">
                                        <Checkbox
                                            checked={
                                                formValues.checkboxOptions
                                                    .lowerDistribution
                                            }
                                            onCheckedChange={() =>
                                                handleCheckboxChange(
                                                    "lowerDistribution",
                                                )
                                            }
                                        />
                                        <Label className="cursor-pointer text-label">
                                            하수저류시설 및 빗물펌프장
                                        </Label>
                                    </div>
                                </div>

                                <div className="grid grid-cols-4 gap-4">
                                    <div className="flex items-center gap-2">
                                        <Checkbox
                                            checked={
                                                formValues.checkboxOptions
                                                    .sidoServiceAvailability
                                            }
                                            onCheckedChange={() =>
                                                handleCheckboxChange(
                                                    "sidoServiceAvailability",
                                                )
                                            }
                                        />
                                        <Label className="cursor-pointer text-label">
                                            펌프장
                                        </Label>
                                    </div>

                                    <div className="flex items-center gap-2">
                                        <Checkbox
                                            checked={
                                                formValues.checkboxOptions
                                                    .individualService
                                            }
                                            onCheckedChange={() =>
                                                handleCheckboxChange(
                                                    "individualService",
                                                )
                                            }
                                        />
                                        <Label className="cursor-pointer text-label">
                                            공공하수처리시설
                                        </Label>
                                    </div>

                                    <div className="flex items-center gap-2">
                                        <Checkbox
                                            checked={
                                                formValues.checkboxOptions
                                                    .sidoServiceAvailability
                                            }
                                            onCheckedChange={() =>
                                                handleCheckboxChange(
                                                    "sidoServiceAvailability",
                                                )
                                            }
                                        />
                                        <Label className="cursor-pointer text-label">
                                            분뇨처리시설
                                        </Label>
                                    </div>

                                    <div className="flex items-center gap-2">
                                        <Checkbox
                                            checked={
                                                formValues.checkboxOptions
                                                    .individualService
                                            }
                                            onCheckedChange={() =>
                                                handleCheckboxChange(
                                                    "individualService",
                                                )
                                            }
                                        />
                                        <Label className="cursor-pointer text-label">
                                            개인하수처리시설
                                        </Label>
                                    </div>
                                </div>

                                <div className="grid grid-cols-4 gap-4">
                                    <div className="flex items-center gap-2">
                                        <Checkbox
                                            checked={
                                                formValues.checkboxOptions
                                                    .lowerOrgStatistics
                                            }
                                            onCheckedChange={() =>
                                                handleCheckboxChange(
                                                    "lowerOrgStatistics",
                                                )
                                            }
                                        />
                                        <Label className="cursor-pointer text-label">
                                            하수도재정
                                        </Label>
                                    </div>

                                    <div className="flex items-center gap-2">
                                        <Checkbox
                                            checked={
                                                formValues.checkboxOptions
                                                    .studentStatistics
                                            }
                                            onCheckedChange={() =>
                                                handleCheckboxChange(
                                                    "studentStatistics",
                                                )
                                            }
                                        />
                                        <Label className="cursor-pointer text-label">
                                            물 재이용
                                        </Label>
                                    </div>

                                    <div className="flex items-center gap-2">
                                        <Checkbox
                                            checked={
                                                formValues.checkboxOptions
                                                    .lowerOrgStatistics
                                            }
                                            onCheckedChange={() =>
                                                handleCheckboxChange(
                                                    "lowerOrgStatistics",
                                                )
                                            }
                                        />
                                        <Label className="cursor-pointer text-label">
                                            하수 및 분뇨찌꺼기(슬러지) 처리
                                        </Label>
                                    </div>

                                    <div className="flex items-center gap-2">
                                        <Checkbox
                                            checked={
                                                formValues.checkboxOptions
                                                    .studentStatistics
                                            }
                                            onCheckedChange={() =>
                                                handleCheckboxChange(
                                                    "studentStatistics",
                                                )
                                            }
                                        />
                                        <Label className="cursor-pointer text-label">
                                            하수 및 분뇨관련산업
                                        </Label>
                                    </div>
                                </div>

                                <div className="grid grid-cols-4 gap-4">
                                    <div className="flex items-center gap-2">
                                        <Checkbox
                                            checked={
                                                formValues.checkboxOptions
                                                    .lowerManagementEnterprise
                                            }
                                            onCheckedChange={() =>
                                                handleCheckboxChange(
                                                    "lowerManagementEnterprise",
                                                )
                                            }
                                        />
                                        <Label className="cursor-pointer text-label">
                                            하수도 서비스 수준
                                        </Label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* 버튼 */}
                <div className="mt-6 flex justify-center gap-4 pt-4">
                    <Button
                        color="green"
                        className="h-[3.6rem] w-[120px]"
                        onClick={handleSubmit}
                    >
                        검증 실행
                    </Button>
                    <Button
                        color="gray"
                        className="h-[3.6rem] w-[120px]"
                        onClick={handleReset}
                    >
                        초기화
                    </Button>
                </div>

                {/* 검증 이력 섹션 */}
                <div className="mt-8 border-t pt-6">
                    <h3 className="mb-4 px-2 text-[1.5rem] font-semibold">
                        검증 이력
                    </h3>
                    <DataGrid
                        columnInfo={verificationHistoryColumnInfo}
                        rowData={verificationHistoryRowData}
                        setRowData={setVerificationHistoryRowData}
                        isExcelImport={false}
                        isExcelExport={false}
                        showHeaderCheckbox={false}
                    />
                </div>
            </div>
        </div>
    );
};

export default HbStatisticsVerification;