import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter, Route, Routes } from 'react-router-dom'
import './index.css'
import { StoreProvider } from './lib/games'
import Layout from './components/Layout'
import Home from './pages/Home'
import StorePage from './pages/StorePage'
import GamePage from './pages/GamePage'
import { Favorites, Profile } from './pages/Misc'
import Admin from './pages/Admin'

class AppErrorBoundary extends React.Component<{ children: React.ReactNode }, { error: string | null }> {
  state = { error: null as string | null }
  static getDerivedStateFromError(error: Error) { return { error: error.message || 'Error inesperado' } }
  componentDidCatch(error: Error) { console.error('[NOAH STORE] Error de interfaz:', error) }
  render() {
    if (this.state.error) return (
      <div style={{minHeight:'100vh',background:'#070817',color:'#fff',fontFamily:'system-ui',display:'grid',placeItems:'center',padding:24}}>
        <div style={{maxWidth:560,background:'#15152b',border:'1px solid #44336b',borderRadius:24,padding:28}}>
          <div style={{fontSize:12,letterSpacing:3,color:'#c4a0ff',fontWeight:800}}>NOAH STORE</div>
          <h1 style={{fontSize:26,margin:'12px 0'}}>No se pudo cargar la página</h1>
          <p style={{color:'#c7c2d8',lineHeight:1.6}}>La aplicación encontró un error. Recarga la página. Si continúa, copia este mensaje y envíalo para corregirlo:</p>
          <pre style={{whiteSpace:'pre-wrap',overflowWrap:'anywhere',background:'#090a18',padding:14,borderRadius:12,color:'#ffb5c2'}}>{this.state.error}</pre>
          <button onClick={() => window.location.reload()} style={{marginTop:12,background:'#792de0',color:'white',border:0,borderRadius:30,padding:'12px 20px',fontWeight:700}}>Recargar</button>
        </div>
      </div>
    )
    return this.props.children
  }
}

const rootElement = document.getElementById('root')
if (!rootElement) throw new Error('No se encontró el elemento #root en index.html')

ReactDOM.createRoot(rootElement).render(
  <AppErrorBoundary>
  <React.StrictMode>
    <BrowserRouter>
      <StoreProvider>
        <Routes>
          <Route element={<Layout />}>
            <Route index element={<Home />} />
            <Route path="store" element={<StorePage />} />
            <Route path="game/:slug" element={<GamePage />} />
            <Route path="favorites" element={<Favorites />} />
            <Route path="profile" element={<Profile />} />
            <Route path="admin" element={<Admin />} />
            <Route path="*" element={<StorePage />} />
          </Route>
        </Routes>
      </StoreProvider>
    </BrowserRouter>
  </React.StrictMode>
  </AppErrorBoundary>,
)