import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-icons/font/bootstrap-icons.css';
import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
import App from './App';

// Компонент для редиректа на статические страницы
const RedirectToStatic = () => {
  const location = useLocation();
  const hasRedirected = React.useRef(false);

  React.useEffect(() => {
    // Редирект только если маршрут не заканчивается на .html и редирект ещё не выполнен
    if (!hasRedirected.current && !location.pathname.endsWith('.html')) {
      let targetPath = location.pathname === '/' ? '/index.html' : `${location.pathname}.html`;
      hasRedirected.current = true; // Устанавливаем флаг, чтобы избежать повторного редиректа
      window.location.replace(targetPath); // Прямой редирект на статический файл
    }
  }, [location.pathname]);

  // Ничего не рендерим
  return null;
};

// Компонент для рендеринга React-логики
const RootComponent = () => {
  return (
    <div className="d-flex flex-column min-vh-100" style={{ width: '100%' }}>
      <App />
    </div>
  );
};

// Рендеринг React только для маршрута /punkrock
const rootElement = document.getElementById('root');
if (rootElement) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <React.StrictMode>
      <BrowserRouter>
        <Routes>
          <Route path="/punkrock" element={<RootComponent />} />
          <Route path="/*" element={<RedirectToStatic />} />
        </Routes>
      </BrowserRouter>
    </React.StrictMode>
  );
} else {
  console.error('Root element not found. Ensure public/index.html contains <div id="root">');
}