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

import { Button } from "@common/components";
import type { RealGridReact } from "realgrid-react";
import DataGrid from "@/components/module/DataGrid";
import type { ColumnInfo } from "@/components/type/DataGrid.type";
import {
    DomesticPopulationLeftColumnConfig,
    DomesticPopulationRightColumnConfig,
} from "@/components/util/column/management/DomesticPopulationColumn";
import { useRef } from "react";

import { UpperCodeSelectDialog } from "@/components/statistics/management/UpperCodeSelectDialog";
import type { usePopulationMappingTab } from "@/components/statistics/management/hooks/usePopulationMappingTab";
import { asGridRowData, asGridRowSetter, fromGridRow } from "@/components/statistics/management/lib/gridCast";
import type { DomesticPopulationItem } from "@/entities/statistics/model/ppltn/statistics-domestic-population-interface";
import type { DataCellClickCallbackParams } from "@/components/type/DataGrid.type";


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

type DomesticTab = ReturnType<typeof usePopulationMappingTab<DomesticPopulationItem>>;

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

const DomesticPopulationTab = ({ 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={DomesticPopulationLeftColumnConfig.rowStartNum}
                    excelExportFileSuffix="내국인전체리스트"
                    rowData={asGridRowData(tab.leftRowData)}
                    setRowData={asGridRowSetter(tab.setLeftRowData)}
                    isExcelImport={false}
                    isExcelExport={false}
                    showHeaderCheckbox={false}
                    fixedColumns={DomesticPopulationLeftColumnConfig.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={DomesticPopulationRightColumnConfig.rowStartNum}
            excelExportFileSuffix="미매핑리스트"
            rowData={asGridRowData(tab.rightRowData)}
            setRowData={asGridRowSetter(tab.setRightRowData)}
            isExcelImport={false}
            isExcelExport={false}
            showHeaderCheckbox={false}
            fixedColumns={DomesticPopulationRightColumnConfig.fixedColumns}
            enableSort={false}
             getGridRef={rightGridRef}  // ← 추가
            onDataCellClick={({ row, fieldName }) => {
                if (fieldName === "mpinCd") return;
                if (fieldName === "admdstCd") {
                    (rightGridRef.current?.gridView as any)?.commit?.();  // ← 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<DomesticPopulationItem>(row), statsYr);
            }}
        />
            </div>

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

export default DomesticPopulationTab;