import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App'
import { ToastProvider, Logo } from './components/UI'
import { configured } from './lib/supabase'
import { BASE_PATH } from './lib/utils'
import './styles/base.css'
import './styles/components.css'
import './styles/pages.css'

function SetupNotice() {
  return (
    <div className="container container-sm notfound" style={{ textAlign: 'left', alignItems: 'flex-start' }}>
      <Logo />
      <h1 className="display">Connect Supabase to start</h1>
      <p className="muted">Copy <code>.env.example</code> to <code>.env</code>, add your project URL and anon key, run <code>supabase/schema.sql</code> in the SQL editor, then restart <code>npm run dev</code>. See the README for the Google sign-in setup.</p>
    </div>
  )
}

createRoot(document.getElementById('root')).render(
  <StrictMode>
    {configured ? (
      <BrowserRouter basename={BASE_PATH}>
        <ToastProvider>
          <App />
        </ToastProvider>
      </BrowserRouter>
    ) : (
      <SetupNotice />
    )}
  </StrictMode>
)