import React from 'react'
import { BrowserRouter, Routes as RRDRoutes, Route, useLocation } from 'react-router-dom'
const AnyRoutes: any = RRDRoutes
import Broadcasts from './pages/Broadcasts'
import Studio from './pages/Studio'
import NextreamLanding from './pages/NextreamLanding'
import Login from './pages/Login'
import Register from './pages/Register'
import MainLayout from './components/MainLayout'

function ProtectedRoutes() {
  const AnyRoutes: any = RRDRoutes
  return (
    <MainLayout>
      <AnyRoutes>
        <Route path="/broadcasts" element={<Broadcasts />} />
        <Route path="/studio" element={<Studio />} />
        <Route path="/profile" element={<div>Perfil (placeholder)</div>} />
        <Route path="/settings" element={<div>Settings (placeholder)</div>} />
      </AnyRoutes>
    </MainLayout>
  )
}

export default function App() {
  return (
    <BrowserRouter>
  {/* Use any-cast to avoid TS incompatibility between react types and react-router-dom */}
  <AnyRoutes>
        {/* Public landing and auth routes */}
        <Route path="/" element={<NextreamLanding />} />
        <Route path="/auth/login" element={<Login />} />
        <Route path="/auth/register" element={<Register />} />

        {/* Protected routes rendered inside MainLayout */}
        <Route path="/broadcasts/*" element={<ProtectedRoutes />} />
        <Route path="/studio/*" element={<ProtectedRoutes />} />
        <Route path="/profile/*" element={<ProtectedRoutes />} />
        <Route path="/settings/*" element={<ProtectedRoutes />} />
  </AnyRoutes>
    </BrowserRouter>
  )
}