import React from 'react'
import ReactDOM from 'react-dom/client'
import App from '@/App.jsx'
import '@/index.css'
import { initAppearance } from '@/hooks/useTheme'
import { USE_SUPABASE } from '@/api/backend'
import { supabase } from '@/api/supabaseClient'

// Paint the saved theme before the first screen, on every route.
initAppearance()

// A Supabase build without its address or key can't do anything. Say so on the
// page instead of leaving a blank screen (the host's build settings are missing
// VITE_SUPABASE_URL / VITE_SUPABASE_ANON_KEY, or the site wasn't rebuilt after
// they were added).
function MissingConfig() {
  return (
    <main style={{ maxWidth: 520, margin: '18vh auto', padding: '0 24px', fontFamily: 'Lora, Georgia, serif', lineHeight: 1.6, color: '#4a3a3a' }}>
      <h1 style={{ fontFamily: '"Cormorant Garamond", Georgia, serif', fontWeight: 500, fontSize: 34, margin: '0 0 12px' }}>
        Ficnic can’t start yet
      </h1>
      <p style={{ margin: 0 }}>
        This copy of the site was built without its Supabase settings
        (<code>VITE_SUPABASE_URL</code> and <code>VITE_SUPABASE_ANON_KEY</code>). Add them to the
        host’s build settings, then rebuild the site.
      </p>
    </main>
  )
}

ReactDOM.createRoot(document.getElementById('root')).render(
  USE_SUPABASE && !supabase ? <MissingConfig /> : <App />
)