import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import './index.css'
import { ToastProvider } from '@/lib/toast'
import { SessionProvider } from '@/lib/session'
import { initMonitoring } from '@/lib/monitoring'
import { Landing } from '@/routes/Landing'
import { AllServices } from '@/routes/AllServices'
import { Auth } from '@/routes/Auth'
import { Role } from '@/routes/Role'
import { FindPro } from '@/routes/FindPro'
import { ProDash } from '@/routes/ProDash'
import { Stub } from '@/routes/Stub'

// Routes map 1:1 to the prototype's `view` ids (see SPEC.md §2).
const router = createBrowserRouter([
  { path: '/', element: <Landing /> },
  { path: '/services', element: <AllServices /> },
  { path: '/auth', element: <Auth /> },
  { path: '/email-sent', element: <Stub title="Check your email" note="Confirmation screen with resend." phase="Phase 1 — Auth" /> },
  { path: '/reset', element: <Stub title="Password reset" note="Request a link, then set a new password." phase="Phase 1 — Auth" /> },
  { path: '/role', element: <Role /> },
  { path: '/app', element: <FindPro /> },
  { path: '/onboarding', element: <Stub title="Pro onboarding" note="Services, experience, coverage, phone/WhatsApp, insurance." phase="Phase 3 — Pro" /> },
  { path: '/pro', element: <ProDash /> },
  { path: '/upgrade', element: <Stub title="Upgrade to PRO" note="$49/mo or $499/yr, Stripe checkout." phase="Phase 4 — Payments" /> },
  { path: '/settings', element: <Stub title="Settings + Install" note="Edit profile, location, PWA install." phase="Phase 6 — PWA" /> },
  { path: '/admin', element: <Stub title="Admin panel" note="Users table, live GPS map, promote-to-admin." phase="Phase 5 — Admin" /> },
  { path: '*', element: <Stub title="Not found" note="No screen at this path." phase="" /> },
])

initMonitoring()

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ToastProvider>
      <SessionProvider>
        <RouterProvider router={router} />
      </SessionProvider>
    </ToastProvider>
  </StrictMode>,
)