import { createRoot } from 'react-dom/client'
import { HashRouter, Navigate, Route, Routes } from 'react-router-dom'
import '@fontsource-variable/inter'
import '@fontsource-variable/jetbrains-mono'
import '../../../packages/ui/src/tokens.css'
import './app.css'
import { initTheme, PageHeader } from '@sims/ui'
import { Layout } from './Layout'
import { Login } from './Login'

/** Placeholder pages — Task 16 replaces these with the five real pages. */
function Placeholder(props: { title: string }) {
  return <PageHeader title={props.title} desc="Coming in the next build step." />
}

function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route element={<Layout />}>
          <Route path="/" element={<Placeholder title="Clients" />} />
          <Route path="/clients/:id" element={<Placeholder title="Client" />} />
          <Route path="/modules" element={<Placeholder title="Modules" />} />
          <Route path="/documents/new" element={<Placeholder title="New Document" />} />
          <Route path="/documents/:id" element={<Placeholder title="Document" />} />
          <Route path="*" element={<Navigate to="/" replace />} />
        </Route>
      </Routes>
    </HashRouter>
  )
}

initTheme()
createRoot(document.getElementById('root')!).render(<App />)