import { useState } from "react";

import SearchForm from "@/components/module/SearchForm";
// import { DataGrid } from "@rsone/components";
import DataGrid from "@/components/module/DataGrid";
import ApproveButton from "@/components/button/ApproveButton";
import RejectButton from "@/components/button/RejectButton";
import { LoadingWithAnimation } from "@common/components";

import { StatsInputStatusInpColumn } from "@/components/util/column/input/StatsInputStatusInpColumn";
import { StatisticsInputStatusApi } from "@/entities/statistics/api/statistics-input-status-service";
import type { StatsInputStatusListRequestParams } from "@/entities/statistics/model/statistics-input-status-interface";
import type { SearchFormValues } from "@/components/type/SearchForm.type";
import { useAlertStore } from "@/shared/lib";
import { toGridRows } from "@/components/util/grid/gridFunction";

// 하수도 통계 관리 > 00. 통계 입력 현황
const StatsInputStatusInp = () => {
    const { setMessage: alert } = useAlertStore((state) => state);
    const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
    const [isLoading, setIsLoading] = useState<boolean>(false);

    const handleSearch = async (values: SearchFormValues) => {
        if (values.sido === '' || values.sido === 'ALL') {
            alert('시도를 선택해주세요.');
            return;
        }

        const searchParam: StatsInputStatusListRequestParams = {
            ctpvNm: values.sido,
            sewerBzmnCd: values.bsnmCd,
            sggNm: values.gugun === 'ALL' ? '' : values.gugun,
            statsYr: values.year,
        };

        try {
            setIsLoading(true);

            const response =  await StatisticsInputStatusApi.getStatisticsInputStatusList(searchParam);

            if (response.status === 'success' && response.data) {
                setRowData(toGridRows(response.data));
            } else {
                alert(response.message);
            }
        } catch {
            alert('데이터 조회 중 오류가 발생했습니다.');
            setRowData([]);
        } finally {
            setIsLoading(false);
        }
    };

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

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

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

    return (
        <>
            <div className="relative">
                <SearchForm onSubmit={handleSearch} onReset={handleReset} isStatusMenu={true} />
                <div className="card !py-0">
                    <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
                        <RejectButton rejectFunc={rejectFunc} />
                        <ApproveButton approveFunc={approveFunc} />
                    </div>
                </div>
                {isLoading && <div className="absolute inset-0 z-50 [data-theme='black']:bg-transparent rounded-lg p-10 flex justify-center items-center">
                    <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;