Server-Side Data

'use no memo'; // React Compiler와 TanStack Table mutable 인스턴스 충돌 방지

import { useState, useEffect, useCallback } from 'react';
import { getCoreRowModel, useDataGrid, DataGrid } from '@featuring-corp/data-grid';
import type { SortingState, ColumnFiltersState, PaginationState } from '@featuring-corp/data-grid';

function ServerGrid() {
  const [rows, setRows] = useState<Row[]>([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(true);

  const [pagination, setPagination] = useState<PaginationState>({ pageIndex: 0, pageSize: 20 });
  const [sorting, setSorting] = useState<SortingState>([]);

  // 상태가 바뀌면 서버에 재요청 — 네트워크 레이어는 소비자 코드
  useEffect(() => {
    setLoading(true);
    fetchRows({
      pageIndex: pagination.pageIndex,
      pageSize:  pagination.pageSize,
      sort: sorting.map(s => ({ field: s.id, dir: s.desc ? 'desc' : 'asc' })),
    }).then(res => {
      setRows(res.items);
      setTotal(res.total);
      setLoading(false);
    });
  }, [pagination.pageIndex, pagination.pageSize, sorting]);

  const table = useDataGrid<Row>({
    data:    rows,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getRowId: r => r.id,

    // manual 플래그 — TanStack이 클라이언트에서 행을 재정렬/자르지 않음
    manualPagination: true,
    manualSorting:    true,
    manualFiltering:  true,

    // 서버 total — aria-rowindex 절대좌표·getPageCount에 사용
    rowCount: total,

    // 현재 state를 외부에서 주입(controlled)
    state: { pagination, sorting },

    // 변경을 소비자 state setter로 중계 — 다음 effect가 재요청을 트리거
    onPaginationChange: setPagination,
    onSortingChange:    u => setSorting(prev => typeof u === 'function' ? u(prev) : u),

    loading,
    skeletonRows: pagination.pageSize,
  });

  return (
    <DataGrid.Root table={table}>
      <DataGrid.Header />
      <DataGrid.Body />
      <DataGrid.Empty>결과가 없습니다.</DataGrid.Empty>
      <DataGrid.Error>데이터를 불러오지 못했습니다.</DataGrid.Error>
    </DataGrid.Root>
  );
}

const table = useDataGrid<Row, ApiError>({
  data:         query.data ?? [],
  columns,
  getCoreRowModel: getCoreRowModel(),

  loading:      query.isLoading,          // true → Body가 skeleton을 렌더
  error:        query.error ?? null,       // truthy → <DataGrid.Error> 렌더
  skeletonRows: pagination.pageSize,       // loading 중 몇 행 자리를 차지할지
});

const editing = useDataGridEditing(table, {
  selection,
  onCellEdit: async ({ coord, newValue, oldValue }) => {
    // 낙관적 즉시 반영
    setRows(prev =>
      prev.map(r => r.id === coord.rowId ? { ...r, [coord.columnId]: newValue } : r)
    );
    try {
      await api.patch(coord.rowId, coord.columnId, newValue);
    } catch (err) {
      // 실패 — 이전 값으로 rollback
      setRows(prev =>
        prev.map(r => r.id === coord.rowId ? { ...r, [coord.columnId]: oldValue } : r)
      );
      toast.add({
        status: 'error',
        title: '저장 실패',
        description: err instanceof Error ? err.message : '잠시 후 다시 시도해 주세요.',
      });
      throw err; // re-throw → 그리드가 미기록 + saveStatus='error'로 인식
    }
  },
});

function EditableCell({ info }: { info: CellContext<Row, unknown> }) {
  const { saveStatus } = useDataGridCellEdit(info.cell);
  // saveStatus: 'idle' | 'pending' | 'error'

  return (
    <DataGrid.Cell cell={info.cell}>
      <DataGrid.CellDisplay>
        {/* saveStatus로 pending 스피너·error 강조 표시 */}
        {info.getValue() as string}
      </DataGrid.CellDisplay>
      <DataGrid.CellEditor>
        <DataGrid.TextEditor />
      </DataGrid.CellEditor>
    </DataGrid.Cell>
  );
}

// 행 추가 — 낙관적 패턴
async function handleAddRow(draft: Omit<Row, 'id'>) {
  const tempId = `temp-${Date.now()}`;
  // 즉시 추가
  setRows(prev => [...prev, { ...draft, id: tempId }]);
  setTotal(prev => prev + 1);
  try {
    const created = await api.createRow(draft);
    // 서버 확정값으로 교체
    setRows(prev => prev.map(r => r.id === tempId ? created : r));
  } catch {
    // 실패 — 제거
    setRows(prev => prev.filter(r => r.id !== tempId));
    setTotal(prev => prev - 1);
  }
}

// 행 삭제 — 낙관적 패턴
async function handleDeleteRow(rowId: string) {
  const snapshot = rows;
  setRows(prev => prev.filter(r => r.id !== rowId));
  setTotal(prev => prev - 1);
  try {
    await api.deleteRow(rowId);
  } catch {
    // 실패 — 복원
    setRows(snapshot);
    setTotal(prev => prev + 1);
  }
}