// src/index.js - TODO INCLUIDO (sin import dinámico)
import {
  ModuleRegistry,
  ValidationModule,
  ColumnAutoSizeModule,
  CellStyleModule,
  QuickFilterModule,
  RowSelectionModule,
  TextEditorModule,
  ClientSideRowModelModule,
  themeQuartz,
  iconSetQuartzLight,
  createGrid
} from "ag-grid-community";

import {
  MultiFilterModule,
  CellSelectionModule,
  PivotModule,
  MasterDetailModule,
  SideBarModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  StatusBarModule,
  ExcelExportModule,
  ClipboardModule,
} from "ag-grid-enterprise";

ModuleRegistry.registerModules([
  ValidationModule,
  ColumnAutoSizeModule,
  CellStyleModule,
  QuickFilterModule,
  RowSelectionModule,
  TextEditorModule,
  ClientSideRowModelModule,
  MultiFilterModule,
  CellSelectionModule,
  PivotModule,
  MasterDetailModule,
  SideBarModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  StatusBarModule,
  ExcelExportModule,
  ClipboardModule,
]);

export const Grid = (props, lang) => {
  const { data, options, api, on, class: className, style = "height: 100%; width: 100%;" } = props;
  let gridApi = null;

  const isDark = () => {
    return document.documentElement.getAttribute('data-theme') === 'dark' ||
      window.matchMedia('(prefers-color-scheme: dark)').matches;
  };

  const getTheme = (dark) => {
    return dark ? 'ag-theme-alpine-dark' : 'ag-theme-alpine';
  };

  return $html("div", {
    style,
    class: className,
    ref: (container) => {
      try {
        const initialData = typeof data === "function" ? data() : data;
        const initialOptions = typeof options === "function" ? options() : options;

        const commonEvents = [
          'onFilterChanged', 'onModelUpdated', 'onGridSizeChanged',
          'onFirstDataRendered', 'onRowValueChanged', 'onSelectionChanged',
          'onCellClicked', 'onCellDoubleClicked', 'onCellValueChanged',
          'onRowClicked', 'onSortChanged', 'onContextMenu',
          'onColumnResized', 'onColumnMoved', 'onRowDataUpdated',
          'onCellEditingStarted', 'onCellEditingStopped',
          'onPaginationChanged', 'onBodyScroll'
        ];

        const eventHandlers = {};
        commonEvents.forEach(eventName => {
          if (on?.[eventName]) {
            eventHandlers[eventName] = (params) => on[eventName](params);
          }
        });

        const gridOptions = {
          ...initialOptions,
          theme: getTheme(isDark()),
          rowData: initialData || [],
          onGridReady: (params) => {
            gridApi = params.api;
            if (api) api.current = gridApi;
            if (on?.onGridReady) on.onGridReady(params);

            if (initialOptions?.autoSizeColumns) {
              setTimeout(() => {
                if (gridApi && !gridApi.isDestroyed()) {
                  const allColumns = gridApi.getColumns();
                  if (allColumns?.length) {
                    gridApi.autoSizeColumns(allColumns);
                  }
                }
              }, 100);
            }
          },
          ...eventHandlers
        };

        gridApi = createGrid(container, gridOptions);

        const stopData = $watch([data], () => {
          if (!gridApi || gridApi.isDestroyed()) return;
          const newData = typeof data === "function" ? data() : data;
          if (Array.isArray(newData)) {
            const currentData = gridApi.getGridOption("rowData");
            if (newData !== currentData) {
              gridApi.setGridOption("rowData", newData);
            }
          }
        });

        const stopTheme = $watch([isDark], () => {
          if (gridApi && !gridApi.isDestroyed()) {
            const dark = isDark();
            const newTheme = getTheme(dark);
            const currentTheme = gridApi.getGridOption("theme");
            if (newTheme !== currentTheme) {
              gridApi.setGridOption("theme", newTheme);
            }
          }
        });

        const safeOptions = ['pagination', 'paginationPageSize', 'suppressRowClickSelection',
          'rowSelection', 'enableCellTextSelection', 'ensureDomOrder',
          'stopEditingWhenCellsLoseFocus', 'enterMovesDown', 'enterMovesDownAfterEdit'];

        const stopOptions = $watch([options], () => {
          if (!gridApi || gridApi.isDestroyed() || !options) return;
          const newOptions = typeof options === "function" ? options() : options;
          safeOptions.forEach(key => {
            if (newOptions[key] !== undefined) {
              try {
                gridApi.setGridOption(key, newOptions[key]);
              } catch (e) {
                console.warn(`Could not set grid option ${key}:`, e);
              }
            }
          });
        });

        container._cleanups.add(stopData);
        container._cleanups.add(stopTheme);
        container._cleanups.add(stopOptions);
        container._cleanups.add(() => {
          if (gridApi && !gridApi.isDestroyed()) {
            gridApi.destroy();
            if (api) api.current = null;
            gridApi = null;
          }
        });

      } catch (error) {
        console.error("Failed to initialize AG Grid:", error);
        container.innerHTML = `<div class="text-error p-4">Error loading grid: ${error.message}</div>`;
      }
    }
  });
};

// const gridApi = { current: null };
export { createGrid, themeQuartz, iconSetQuartzLight, ModuleRegistry };