frontend/apps/st/src/components/statistics/management/ForeignPopulationTab.tsx

import { useRef } from "react";

import type { RealGridReact } from "realgrid-react";

import { Button } from "@common/components";

import DataGrid from "@/components/module/DataGrid";
import type { usePopulationMappingTab } from "@/components/statistics/management/hooks/usePopulationMappingTab";
import { asGridRowData, asGridRowSetter, fromGridRow } from "@/components/statistics/management/lib/gridCast";
import type { ForeignPopulationItem } from "@/components/statistics/management/types/population-tab-types";
import { UpperCodeSelectDialog } from "@/components/statistics/management/UpperCodeSelectDialog";
import type { ColumnInfo, GridViewWithEditCommit } from "@/components/type/DataGrid.type";
import {
    ForeignPopulationLeftColumnConfig,
    ForeignPopulationRightColumnConfig,
} from "@/components/util/column/management/ForeignPopulationColumn";

const leftColumnInfo: ColumnInfo = {
    columns: ForeignPopulationLeftColumnConfig.columns ?? [],
    columnLayout: ForeignPopulationLeftColumnConfig.columnLayout ?? [],
};
const rightColumnInfo: ColumnInfo = {
    columns: ForeignPopulationRightColumnConfig.columns ?? [],
    columnLayout: ForeignPopulationRightColumnConfig.columnLayout ?? [],
};

type ForeignTab = ReturnType<typeof usePopulationMappingTab<ForeignPopulationItem>>;

type Props = {
    tab: ForeignTab;
    statsYr: string;
    onFileButtonClick: () => void;
};

const ForeignPopulationTab = ({ tab, statsYr, onFileButtonClick }: Props) => {
    const rightGridRef = useRef<RealGridReact | null>(null);
    return (
        <div className="flex gap-2">
            <div className="flex-1 min-w-0">
                <div className="flex items-center mb-[0.4rem]">
                    <span className="text-[1.8rem] font-semibold text-gray-700 before:content-['●'] before:mr-1 before:text-blue-500">
                        엑셀 업로드 자료 (외국인 전체 리스트)
                    </span>
                </div>
                <div className="flex justify-end pr-2 mb-[0.4rem]">
                    <Button
                        type="button"
                        onClick={onFileButtonClick}
                        className="mt-[0.5rem] px-6 py-[0.8rem] text-[1.4rem] bg-gradient-green hover:bg-gradient-green-hover"
                    >
                        <i className="diveicon di-file-excel" />
                        엑셀 업로드
                    </Button>
                </div>
                <DataGrid
                    columnInfo={leftColumnInfo}
                    rowStartNum={ForeignPopulationLeftColumnConfig.rowStartNum}
                    excelExportFileSuffix="외국인전체리스트"
                    rowData={asGridRowData(tab.leftRowData)}
                    setRowData={asGridRowSetter(tab.setLeftRowData)}
                    isExcelImport={false}
                    isExcelExport={false}
                    showHeaderCheckbox={false}
                    fixedColumns={ForeignPopulationLeftColumnConfig.fixedColumns}
                    enableSort={false}
                />
            </div>

            <div className="flex-1 min-w-0">
                <div className="flex items-center mb-[0.4rem]">
                    <span className="text-[1.8rem] font-semibold text-gray-700 before:content-['●'] before:mr-1 before:text-blue-500">
                        미매핑 리스트 (작년 대비)
                    </span>
                </div>
                <div className="flex justify-end pr-[1rem] mb-[0.4rem]">
                    <Button
                        type="button"
                        color="primary"
                        disabled={tab.isLoading || tab.rightRowData.length === 0}
                        onClick={() => void tab.handleFinal(statsYr)}
                        className="mt-[0.5rem] px-[4rem] py-[0.8rem] text-[1.4rem]"
                    >
                        반영
                    </Button>
                </div>
                
               <DataGrid
                columnInfo={rightColumnInfo}
                rowStartNum={ForeignPopulationRightColumnConfig.rowStartNum}
                excelExportFileSuffix="외국인미매핑리스트"
                rowData={asGridRowData(tab.rightRowData)}
                setRowData={asGridRowSetter(tab.setRightRowData)}
                isExcelImport={false}
                isExcelExport={false}
                showHeaderCheckbox={false}
                fixedColumns={ForeignPopulationRightColumnConfig.fixedColumns}
                enableSort={false}
              getGridRef={rightGridRef}  
            onDataCellClick={({ row, fieldName }) => {
                if (fieldName === "mpinCd") return;
                if (fieldName === "admdstCd") {
                    const gridView = rightGridRef.current?.gridView as
                        | GridViewWithEditCommit
                        | undefined;
                    gridView?.commit?.();
                    setTimeout(() => {
                        tab.setRightRowData((prev) =>
                            prev.map((r) =>
                                r.admdstCd === row.admdstCd
                                    ? { ...r, mpinCd: String(row.admdstCd ?? "") }
                                    : r,
                            ),
                        );
                    }, 0);
                    return;
                }
            }}
            onCellDblClick={({ row, fieldName }) => {
                if (fieldName !== "mpinCd") return;
                void tab.handleRightRowClick(fromGridRow<ForeignPopulationItem>(row), statsYr);
            }}
        />
            </div>

        <UpperCodeSelectDialog
    open={tab.dialogOpen}
    onOpenChange={tab.setDialogOpen}
    candidates={tab.candidates}
    codeField="admdstCd"
    nameField="admdstNm"
    onSelect={tab.handleCodeSelect}
/>
        </div>
    );
};

export default ForeignPopulationTab;