import { useTranslation } from 'react-i18next';
import { DataGrid } from '@mui/x-data-grid';
import { Box } from '@mui/material';

// Localización en español para MUI DataGrid
const dataGridLocaleTextES = {
  // Paginación
  MuiTablePagination: {
    labelRowsPerPage: 'Filas por página',
    labelDisplayedRows: ({ from, to, count }) =>
      `${from}–${to} de ${count !== -1 ? count : `más de ${to}`}`,
  },
  // Toolbar
  toolbarDensity: 'Densidad',
  toolbarDensityLabel: 'Densidad',
  toolbarDensityCompact: 'Compacta',
  toolbarDensityStandard: 'Estándar',
  toolbarDensityComfortable: 'Cómoda',
  toolbarFilters: 'Filtros',
  toolbarFiltersLabel: 'Mostrar filtros',
  toolbarFiltersTooltipHide: 'Ocultar filtros',
  toolbarFiltersTooltipShow: 'Mostrar filtros',
  toolbarExport: 'Exportar',
  toolbarExportLabel: 'Exportar',
  toolbarExportCSV: 'Descargar como CSV',
  toolbarExportPrint: 'Imprimir',
  toolbarColumns: 'Columnas',
  toolbarColumnsLabel: 'Seleccionar columnas',
  // Filtros
  filterPanelAddFilter: 'Agregar filtro',
  filterPanelDeleteIconLabel: 'Eliminar',
  filterPanelOperators: 'Operadores',
  filterPanelOperatorAnd: 'Y',
  filterPanelOperatorOr: 'O',
  filterPanelColumns: 'Columnas',
  filterPanelInputLabel: 'Valor',
  filterPanelInputPlaceholder: 'Valor del filtro',
  filterPanelInputPlaceholderOperator: 'Operador',
  // Sin datos
  noRowsLabel: 'No hay datos disponibles',
  noResultsOverlayLabel: 'No se encontraron resultados',
  // Errores
  errorOverlayDefaultLabel: 'Ocurrió un error',
  // Cargando
  loadingOverlayLabel: 'Cargando...',
  // Footer
  footerRowSelected: (count) =>
    count !== 1
      ? `${count} filas seleccionadas`
      : `${count} fila seleccionada`,
};

export const DBGrid = ({
  columns = [],
  rows = [],
  loading = false,
  emptyMessage,
  pageSize = 10,
  pageSizeOptions = [5, 10, 25, 50],
  height = 400,
  /** Si es true, la grilla crece con todas las filas (sin scroll vertical interno). */
  autoHeight = false,
  hideFooter = false,
  containerSx,
  className = '',
  /** Si se define, controla la paginación del grid (p. ej. Tabla: `pageSize = rows.length` para mostrar todas las filas de la página). */
  paginationModel,
  onPaginationModelChange,
  ...props
}) => {
  const { t } = useTranslation();

  // Traducir las columnas si tienen traducciones
  const translatedColumns = columns.map((col) => {
    const translatedLabel = col.translationKey 
      ? t(col.translationKey) 
      : col.label || col.headerName;
    
    return {
      ...col,
      headerName: translatedLabel,
      label: translatedLabel,
    };
  });

  // Si no hay columnas, usar columnas por defecto traducidas
  const defaultColumns = [
    { 
      field: 'id', 
      headerName: t('table.id'), 
      width: 90,
      translationKey: 'table.id',
    },
    { 
      field: 'name', 
      headerName: t('table.name'), 
      width: 200,
      translationKey: 'table.name',
    },
    { 
      field: 'email', 
      headerName: t('table.email'), 
      width: 250,
      translationKey: 'table.email',
    },
    { 
      field: 'role', 
      headerName: t('table.role'), 
      width: 150,
      translationKey: 'table.role',
    },
  ];

  const finalColumns = translatedColumns.length > 0 ? translatedColumns : defaultColumns;

  // Usar la localización en español (dataGridLocaleTextES)
  // y personalizar solo los mensajes que necesitamos
  const localeText = {
    ...dataGridLocaleTextES,
    // Personalizar mensaje de sin datos si se proporciona
    ...(emptyMessage && { noRowsLabel: emptyMessage }),
  };

  return (
    <Box
      className={className}
      sx={{ height: autoHeight ? 'auto' : (height ?? 400), width: '100%', ...containerSx }}
    >
      <DataGrid
        rows={rows}
        columns={finalColumns}
        loading={loading}
        autoHeight={autoHeight}
        pageSizeOptions={pageSizeOptions}
        {...(paginationModel !== undefined
          ? {
              paginationModel,
              ...(onPaginationModelChange !== undefined && { onPaginationModelChange }),
            }
          : {
              initialState: {
                pagination: {
                  paginationModel: {
                    pageSize,
                    page: 0,
                  },
                },
              },
            })}
        localeText={localeText}
        disableRowSelectionOnClick
        hideFooter={hideFooter}
        {...props}
      />
    </Box>
  );
};

export default DBGrid;
