import { Toaster } from "@/components/ui/sonner";
import { ConvexAuthProvider } from "@convex-dev/auth/react";
import { ConvexReactClient } from "convex/react";
import { createPersistentStorage } from "./lib/persistent-storage";
import { StrictMode, useEffect, Component, type ReactNode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter, Route, Routes, useLocation } from "react-router";
import "./index.css";

import Landing from "./pages/Landing.tsx";
import AuthPage from "./pages/Auth.tsx";
import Dashboard from "./pages/Dashboard.tsx";
import ApiDocs from "./pages/ApiDocs.tsx";
import Denied from "./pages/Denied.tsx";
import NotFound from "./pages/NotFound.tsx";

const CONVEX_URL = import.meta.env.VITE_CONVEX_URL as string;
if (!CONVEX_URL) {
  console.error("VITE_CONVEX_URL is not set! Add it in your hosting provider's environment variables.");
}
const convex = new ConvexReactClient(CONVEX_URL || "https://placeholder.convex.site");

// Persist the auth session in localStorage + a cookie fallback so users
// stay logged in between visits.
const persistentStorage = createPersistentStorage();

// Error boundary to prevent blank page from third-party plugin errors
class ErrorBoundary extends Component<{children: ReactNode}, {error: Error | null}> {
  state = { error: null as Error | null };
  static getDerivedStateFromError(error: Error) { return { error }; }
  render() {
    if (this.state.error) {
      return (
        <div style={{padding:'2rem',textAlign:'center',fontFamily:'sans-serif'}}>
          <h1>ICE MENU</h1>
          <p>Something went wrong loading the app.</p>
          <p style={{color:'#888',fontSize:'0.8rem'}}>{this.state.error.message}</p>
          <button onClick={() => { this.setState({error:null}); location.reload(); }} style={{marginTop:'1rem',padding:'0.5rem 1rem',cursor:'pointer'}}>
            Reload
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}


function RouteSyncer() {
  const location = useLocation();
  useEffect(() => {
    window.parent.postMessage(
      { type: "iframe-route-change", path: location.pathname },
      "*",
    );
  }, [location.pathname]);

  useEffect(() => {
    function handleMessage(event: MessageEvent) {
      if (event.data?.type === "navigate") {
        if (event.data.direction === "back") window.history.back();
        if (event.data.direction === "forward") window.history.forward();
      }
    }
    window.addEventListener("message", handleMessage);
    return () => window.removeEventListener("message", handleMessage);
  }, []);

  return null;
}


createRoot(document.getElementById("root")!).render(
  <ErrorBoundary>
    <StrictMode>
      <ConvexAuthProvider client={convex} storage={persistentStorage}>
        <BrowserRouter>
          <RouteSyncer />
          <Routes>
            <Route path="/" element={<Landing />} />
            <Route path="/auth" element={<AuthPage redirectAfterAuth="/dashboard" />} />
            <Route path="/dashboard" element={<Dashboard />} />
            <Route path="/api-docs" element={<ApiDocs />} />
            <Route path="/restricted-q7k2x9" element={<Denied />} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </BrowserRouter>
        <Toaster />
      </ConvexAuthProvider>
    </StrictMode>
  </ErrorBoundary>,
);