import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter, HashRouter } from 'react-router-dom';
import App from './App.jsx'
import './index.css'

// Check if we should use HashRouter (for better compatibility with some hosting environments)
const useHashRouter = import.meta.env.VITE_USE_HASH_ROUTER === 'true' || 
                     window.location.hostname === 'localhost' && window.location.port === '3000';

// Error boundary for routing issues
class RouterErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }

    static getDerivedStateFromError(error) {
        return { hasError: true };
    }

    componentDidCatch(error, errorInfo) {
        console.error('Router Error:', error, errorInfo);
    }

    render() {
        if (this.state.hasError) {
            return (
                <div className="flex items-center justify-center min-h-screen bg-gray-50">
                    <div className="text-center">
                        <h1 className="text-xl font-semibold text-gray-800 mb-4">Something went wrong</h1>
                        <p className="text-gray-600 mb-4">Please refresh the page or try again.</p>
                        <button 
                            onClick={() => window.location.reload()} 
                            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
                        >
                            Refresh Page
                        </button>
                    </div>
                </div>
            );
        }

        return this.props.children;
    }
}

// Choose the appropriate router
const Router = useHashRouter ? HashRouter : BrowserRouter;

ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <RouterErrorBoundary>
            <Router>
                <App />
            </Router>
        </RouterErrorBoundary>
    </React.StrictMode>,
)