import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App.jsx";
import { isConfigured } from "./api.js";
import { AuthProvider, CartProvider, SettingsProvider } from "./context.jsx";
import { ToastProvider } from "./components/Toast.jsx";
import "./styles.css";

// Friendly screen instead of a crash when the Supabase keys haven't been set yet.
function SetupNeeded() {
  return (
    <div className="container page narrow">
      <h1>Almost there ☕</h1>
      <p className="lead">This site isn't connected to Supabase yet.</p>
      <div className="card">
        <ol>
          <li>Copy <code>.env.example</code> to <code>.env.local</code>.</li>
          <li>Fill in <code>VITE_SUPABASE_URL</code> and <code>VITE_SUPABASE_PUBLISHABLE_KEY</code>.</li>
          <li>Restart <code>npm run dev</code> (or rebuild before deploying).</li>
        </ol>
        <p className="muted small">See instructions.md → "Create the Supabase project".</p>
      </div>
    </div>
  );
}

createRoot(document.getElementById("root")).render(
  <StrictMode>
    {isConfigured ? (
      <BrowserRouter>
        <SettingsProvider>
          <AuthProvider>
            <CartProvider>
              <ToastProvider>
                <App />
              </ToastProvider>
            </CartProvider>
          </AuthProvider>
        </SettingsProvider>
      </BrowserRouter>
    ) : (
      <SetupNeeded />
    )}
  </StrictMode>
);