import { AgGridReact } from "ag-grid-react";
import { useRef } from "react";
import { AllCommunityModule, ModuleRegistry, type GridState } from "ag-grid-community";
import { AG_GRID_LOCALE_EN, AG_GRID_LOCALE_IT } from "@ag-grid-community/locale";
import { useI18n } from "../i18n";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";

// Register AG Grid modules once at module load time
ModuleRegistry.registerModules([AllCommunityModule]);

interface Props {
  columns: string[];
  rows: unknown[][];
}

/** Reusable read-only preview grid: columns + row tuples → AG Grid. */
export function PreviewGrid({ columns, rows }: Props) {
  const { locale } = useI18n();
  const gridMessages: Readonly<Record<string, string>> = locale === "it" ? AG_GRID_LOCALE_IT : AG_GRID_LOCALE_EN;
  const gridState = useRef<GridState>();
  const columnDefs = columns.map((col) => ({ field: col, headerName: col }));

  const rowData = rows.map((row) => {
    const obj: Record<string, unknown> = {};
    columns.forEach((col, i) => {
      obj[col] = row[i];
    });
    return obj;
  });

  return (
    <div className="overflow-hidden rounded-xl border border-border/70 shadow-xs">
      <div className="ag-theme-alpine thot-preview-grid" style={{ height: 400, width: "100%" }}>
        <AgGridReact
          key={locale}
          theme="legacy"
          columnDefs={columnDefs}
          rowData={rowData}
          localeText={gridMessages}
          initialState={gridState.current}
          onStateUpdated={({ state }) => { gridState.current = state; }}
        />
      </div>
    </div>
  );
}