import { Navigate, Route, Routes } from 'react-router'
import { RequireAuth, RequireGuest } from './auth/guards'
import AppLayout from './components/layout/AppLayout'
import Button from './components/ui/Button'
import DigitalProgressBar from './components/ui/DigitalProgressBar'
import Panel from './components/ui/Panel'

// Placeholder for the authenticated app home. The real scenario UI lands in the
// frontend feature tickets (#53–#56); for now it shows the primitives + theme.
function ScenariosPlaceholder() {
  return (
    <AppLayout>
      <Panel className="mx-auto max-w-md space-y-4">
        <h2 className="text-primary font-bold uppercase tracking-wider">
          Emergency Fund
        </h2>
        <DigitalProgressBar current={750} capacity={1000} />
        <p className="font-digital text-primary text-xl">$750 / $1000</p>
        <Button glow>+ Add Bucket</Button>
      </Panel>
    </AppLayout>
  )
}

// Placeholders replaced by the real auth screens in #52 Stories 4 (login) and 5
// (register).
function LoginPlaceholder() {
  return <div>LOGIN</div>
}

function RegisterPlaceholder() {
  return <div>REGISTER</div>
}

function App() {
  return (
    <Routes>
      {/* Guest-only routes (redirect to the app if already signed in). */}
      <Route element={<RequireGuest />}>
        <Route path="/login" element={<LoginPlaceholder />} />
        <Route path="/register" element={<RegisterPlaceholder />} />
      </Route>

      {/* Authenticated-only routes (redirect to /login if signed out). */}
      <Route element={<RequireAuth />}>
        <Route path="/" element={<ScenariosPlaceholder />} />
      </Route>

      {/* Unknown paths fall back to the app root (which re-guards). */}
      <Route path="*" element={<Navigate to="/" replace />} />
    </Routes>
  )
}

export default App