import { useEffect, useState } from "react";

import useSWR, { useSWRConfig } from "swr";

import { useAlertStore } from "@/shared/lib";
import { StatisticsInputStatusApi } from "@/entities/statistics/api/input/statistics-input-status-service";
import type { StatsInputStatusListRequestParams } from "@/entities/statistics/model/input/statistics-input-status-interface";
import type { StatsInputStatusListApiResponse } from "@/entities/statistics/model/input/statistics-input-status-interface";
import { LoadingWithAnimation } from "@common/components";

import ApproveButton from "@/components/button/ApproveButton";
import RejectButton from "@/components/button/RejectButton";
import DataGrid from "@/components/module/DataGrid";
import SearchForm from "@/components/module/SearchForm";
import type { SearchFormValues } from "@/components/type/SearchForm.type";
import { StatsInputStatusInpColumn } from "@/components/util/column/input/StatsInputStatusInpColumn";
import { toGridRows } from "@/components/util/grid/gridFunction";
import { useTabStore } from "@/store/tab-store";

const getStatsInputStatusFetcher = async (
    key: [string, StatsInputStatusListRequestParams],
): Promise<StatsInputStatusListApiResponse> => {
    return StatisticsInputStatusApi.getStatisticsInputStatusList(key[1]);
};

// 하수도 통계 관리 > 00. 통계 입력 현황
const StatsInputStatusInp = () => {
    const { setMessage: alert } = useAlertStore((state) => state);
    const activeTabId = useTabStore((state) => state.activeTabId);
    const [rowData, setRowData] = useState<Record<string, string | number>[]>(
        [],
    );
    const [searchParams, setSearchParams] =
        useState<StatsInputStatusListRequestParams | null>(null);

    const swrKey = searchParams
        ? (["stats-input-status", searchParams] as const)
        : null;
    const { mutate } = useSWRConfig();
    const { isLoading } = useSWR<StatsInputStatusListApiResponse>(
        swrKey,
        getStatsInputStatusFetcher,
        {
            revalidateOnFocus: true,
            onSuccess: (data) => {
                if (data.status === "success" && data.data) {
                    setRowData(toGridRows(data.data));
                } else {
                    alert(data.message ?? "조회에 실패했습니다.");
                }
            },
            onError: () => {
                alert("데이터 조회 중 오류가 발생했습니다.");
                setRowData([]);
            },
        },
    );

    useEffect(() => {
        if (activeTabId === "StatsInputStatusInp" && swrKey) {
            mutate(swrKey);
        }
    }, [activeTabId]);

    const handleSearch = (values: SearchFormValues) => {
        if (values.sido === "" || values.sido === "ALL") {
            alert("시도를 선택해주세요.");
            return;
        }
        const params: StatsInputStatusListRequestParams = {
            ctpvNm: values.sido,
            sewerBzmnCd: values.bsnmCd,
            sggNm: values.gugun === "ALL" ? "" : values.gugun,
            statsYr: values.year ?? "",
        };
        setSearchParams(params);
        mutate(["stats-input-status", params]);
    };

    const handleReset = () => {
        setSearchParams(null);
        setRowData([]);
    };

    const rejectFunc = () => {
        // 보완 요청 로직
    };

    const approveFunc = () => {
        // 승인 요청 로직
    };

    return (
        <>
            <div className="relative">
                <SearchForm onSubmit={handleSearch} onReset={handleReset} />
                <div className="card !py-0">
                    <div className="m-[0.6rem] flex items-center justify-end gap-[0.6rem]">
                        <RejectButton rejectFunc={rejectFunc} />
                        <ApproveButton approveFunc={approveFunc} />
                    </div>
                </div>
                {isLoading && (
                    <div className="[data-theme='black']:bg-transparent absolute inset-0 z-50 flex items-center justify-center rounded-lg p-10">
                        <div className="relative size-[5rem]">
                            <LoadingWithAnimation color="primary" />
                        </div>
                    </div>
                )}
                <DataGrid
                    columnInfo={StatsInputStatusInpColumn}
                    rowStartNum={2}
                    fixedColumns={3}
                    rowData={rowData}
                    setRowData={setRowData}
                    isExcelImport={false}
                    showHeaderCheckbox={true}
                />
            </div>
        </>
    );
};

export default StatsInputStatusInp;