import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { ConvexProvider, ConvexReactClient } from "convex/react";
import { ConvexAuthProvider } from "@convex-dev/auth/react";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import "./index.css";

const address = import.meta.env.VITE_CONVEX_URL as string | undefined;

if (!address) {
  createRoot(document.getElementById("root")!).render(
    <div style={{ padding: 24, fontFamily: "system-ui, sans-serif", maxWidth: 640, margin: "80px auto" }}>
      <h1 style={{ fontSize: 18, marginBottom: 8 }}>Konfigurasi backend belum lengkap</h1>
      <p style={{ color: "#555", fontSize: 14 }}>
        Variabel lingkungan <code>VITE_CONVEX_URL</code> belum tersedia. Hubungkan proyek ke deployment Convex
        (Freebuff mengisi ini otomatis saat backend terhubung), lalu muat ulang halaman.
      </p>
    </div>,
  );
} else {
  const convex = new ConvexReactClient(address, {
    expectAuth: true,
  });

  createRoot(document.getElementById("root")!).render(
    <StrictMode>
      <ConvexProvider client={convex}>
        <ConvexAuthProvider client={convex}>
          <BrowserRouter>
            <App />
          </BrowserRouter>
        </ConvexAuthProvider>
      </ConvexProvider>
    </StrictMode>,
  );
}