import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { ExpenseProvider } from './providers/ExpenseDataStore';
import './index.css';
import { BrowserRouter as Router } from 'react-router-dom';

const rootElement = document.getElementById('root');
if (!rootElement) {
  throw new Error("Could not find root element to mount to");
}

console.log('[Index] 🏁 Iniciando renderizado de la app...');
const root = ReactDOM.createRoot(rootElement);
root.render(
  <React.StrictMode>
    {(() => {
      // Configurar basename dinámico
      const isDev = import.meta.env.DEV;
      const appBasePath = import.meta.env.VITE_APP_BASEPATH || '/gastos';
      const basename = appBasePath;

      // [CRITICAL FIX] Redirección automática si se accede a rutas raíz en producción sin el prefijo correcto
      if (!isDev && !window.location.pathname.startsWith(appBasePath)) {
        const current = window.location.pathname;
        if (current === '/login' || current === '/activar' || current === '/') {
          const newPath = current === '/' ? '' : current;
          window.location.replace(`${appBasePath}${newPath}${window.location.search}`);
          return null;
        }
      }

      return (
        <Router basename={basename}>
          <ExpenseProvider>
            <App />
          </ExpenseProvider>
        </Router>
      );
    })()}
  </React.StrictMode>
);