// Rôle : rend la grille du tableau et connecte les cellules aux handlers du module.
import { columnIndexToName, parseCellAddress } from "./tableFormulaEngine.js";
import { HeaderLabelInput, TableRow } from "./TableGridParts.jsx";

export function TableGrid({
  data,
  textContent,
  evaluatedCells,
  editingCell,
  highlightedCell,
  selection,
  movePreview,
  columnWidths,
  rowHeaderWidth,
  draggingSelectionRef,
  onColumnLabelChange,
  onRowLabelChange,
  onCellChange,
  onFormulaSelectionStart,
  onFormulaSelectionExtend,
  onStartMoveSelection,
  onMoveSelection,
  onSelectCell,
  onExtendSelection,
  onPasteSelection,
  onCellKeyDown,
  onStartEditing,
  onEditingCellClear,
  registerInput
}) {
  return (
    <div className="table-grid-wrap legacy-scrollbar">
      <div
        className="table-grid"
        style={{
          "--table-columns": `${rowHeaderWidth}px ${columnWidths.map((width) => `minmax(${width}px, 1fr)`).join(" ")}`,
          "--table-min-width": `${rowHeaderWidth + columnWidths.reduce((total, width) => total + width, 0)}px`
        }}
        role="grid"
        aria-label={textContent.gridLabel || "Tableau"}
      >
        <span className="table-corner" aria-hidden="true" />
        {Array.from({ length: data.columns }, (_, columnIndex) => (
          <HeaderLabelInput
            className="table-header-cell table-header-input"
            key={columnIndex}
            value={data.columnLabels?.[columnIndex] || columnIndexToName(columnIndex)}
            fallback={columnIndexToName(columnIndex)}
            onSave={(value) => onColumnLabelChange(columnIndex, value)}
            aria-label={`${textContent.columnLabel || "Intitulé de colonne"} ${columnIndexToName(columnIndex)}`}
            title={`${columnIndexToName(columnIndex)} - ${textContent.columnFormulaTitle || "Référence conservée dans les formules"}`}
          />
        ))}
        {Array.from({ length: data.rows }, (_, rowIndex) => (
          <TableRow
            key={rowIndex}
            rowIndex={rowIndex}
            columns={data.columns}
            cells={data.cells}
            evaluatedCells={evaluatedCells}
            editingCell={editingCell}
            highlightedCell={highlightedCell}
            textContent={textContent}
            rowLabel={data.rowLabels?.[rowIndex] || ""}
            selection={selection}
            movePreview={movePreview}
            onRowLabelChange={onRowLabelChange}
            onFocus={(cell) => {
              const parsed = parseCellAddress(cell);
              if (parsed && !selection) onSelectCell(parsed.rowIndex, parsed.columnIndex);
            }}
            onBlur={(cell) => {
              if (editingCell === cell) onEditingCellClear();
            }}
            onCellChange={onCellChange}
            onFormulaSelectionStart={onFormulaSelectionStart}
            onFormulaSelectionExtend={onFormulaSelectionExtend}
            onStartMoveSelection={onStartMoveSelection}
            onMoveSelection={onMoveSelection}
            onSelectCell={onSelectCell}
            onExtendSelection={onExtendSelection}
            onPasteSelection={onPasteSelection}
            draggingSelectionRef={draggingSelectionRef}
            onCellKeyDown={onCellKeyDown}
            onStartEditing={onStartEditing}
            registerInput={registerInput}
          />
        ))}
      </div>
    </div>
  );
}