import { Toaster } from "@/components/ui/sonner";
import { ConvexAuthProvider } from "@convex-dev/auth/react";
import { ConvexReactClient } from "convex/react";
import React, { StrictMode, lazy, Suspense } from "react";import { createRoot } from "react-dom/client";
import { BrowserRouter, Outlet, Route, Routes } from "react-router";
import "./index.css";
import { RequireAuth } from "./components/RequireAuth";
import { RouteErrorBoundary } from "./components/RouteErrorBoundary";

// Recover gracefully when a deploy swaps out lazy chunks while a tab is open:
// reload once (max once per minute) instead of leaving the user on a failed import.
window.addEventListener("vite:preloadError", (event) => {
  const key = "chunk-reload-at";
  const last = Number(sessionStorage.getItem(key) || 0);
  if (Date.now() - last < 60_000) return;
  sessionStorage.setItem(key, String(Date.now()));
  event.preventDefault();
  window.location.reload();
});

// Lazy load route components for better code splitting
const Landing = lazy(() => import("./pages/Landing.tsx"));
const AuthPage = lazy(() => import("./pages/Auth.tsx"));
const PlatformLogin = lazy(() => import("./pages/PlatformLogin.tsx"));
const NotFound = lazy(() => import("./pages/NotFound.tsx"));
const AppShell = lazy(() => import("./components/layout/AppShell.tsx").then(m => ({ default: m.AppShell })));

const Dashboard = lazy(() => import("./pages/Dashboard.tsx"));
const ContactsPage = lazy(() => import("./pages/Contacts.tsx"));
const ContactDetail = lazy(() => import("./pages/ContactDetail.tsx"));
const CompaniesPage = lazy(() => import("./pages/Companies.tsx"));
const CompanyDetail = lazy(() => import("./pages/CompanyDetail.tsx"));
const EventsPage = lazy(() => import("./pages/Events.tsx"));
const EventWorkspace = lazy(() => import("./pages/EventWorkspace.tsx"));
const PartnershipsPage = lazy(() => import("./pages/Partnerships.tsx"));
const SponsorsPage = lazy(() => import("./pages/Sponsors.tsx"));
const CoursesPage = lazy(() => import("./pages/Courses.tsx"));
const CourseDetail = lazy(() => import("./pages/CourseDetail.tsx"));
const SocialPage = lazy(() => import("./pages/Social.tsx"));
const VenuesPage = lazy(() => import("./pages/Venues.tsx"));
const OutreachPage = lazy(() => import("./pages/Outreach.tsx"));
const ReferralsPage = lazy(() => import("./pages/Referrals.tsx"));
const SettingsPage = lazy(() => import("./pages/Settings.tsx"));
const StorePage = lazy(() => import("./pages/Store.tsx"));
const PublicEventRegister = lazy(() => import("./pages/PublicEventRegister.tsx"));
const InviteAccept = lazy(() => import("./pages/InviteAccept.tsx"));
const Portal = lazy(() => import("./pages/Portal.tsx"));
const VerifyCertificate = lazy(() => import("./pages/VerifyCertificate.tsx"));
const ClaimCertificate = lazy(() => import("./pages/ClaimCertificate.tsx"));
const CheckinStation = lazy(() => import("./pages/CheckinStation.tsx"));
const JoinCommunity = lazy(() => import("./pages/JoinCommunity.tsx"));
const Discover = lazy(() => import("./pages/Discover.tsx"));
const CommunitiesDirectory = lazy(() => import("./pages/CommunitiesDirectory.tsx"));
const SpeakersDirectory = lazy(() => import("./pages/SpeakersDirectory.tsx"));
const VenuesDirectory = lazy(() => import("./pages/VenuesDirectory.tsx"));
const Advertise = lazy(() => import("./pages/Advertise.tsx"));
const BookSpeaker = lazy(() => import("./pages/BookSpeaker.tsx"));
const PublicProfile = lazy(() => import("./pages/PublicProfile.tsx"));
const Feed = lazy(() => import("./pages/Feed.tsx"));
const Networks = lazy(() => import("./pages/Networks.tsx"));
const Mentorship = lazy(() => import("./pages/Mentorship.tsx"));
const Speakers = lazy(() => import("./pages/Speakers.tsx"));
const Certificates = lazy(() => import("./pages/Certificates.tsx"));
const Quizzes = lazy(() => import("./pages/Quizzes.tsx"));
const Hackathons = lazy(() => import("./pages/Hackathons.tsx"));
const Cohorts = lazy(() => import("./pages/Cohorts.tsx"));
const Giveaways = lazy(() => import("./pages/Giveaways.tsx"));
const Mail = lazy(() => import("./pages/Mail.tsx"));
const Notifications = lazy(() => import("./pages/Notifications.tsx"));
const Recap = lazy(() => import("./pages/Recap.tsx"));
const SuperAdmin = lazy(() => import("./pages/SuperAdmin.tsx"));
const Support = lazy(() => import("./pages/Support.tsx"));
const Radio = lazy(() => import("./pages/Radio.tsx"));
const SupportWidget = lazy(() => import("./pages/SupportWidget.tsx"));
const Watch = lazy(() => import("./pages/Watch.tsx"));
const Billing = lazy(() => import("./pages/Billing.tsx"));
const CertDesigner = lazy(() => import("./pages/CertDesigner.tsx"));
const Feedback = lazy(() => import("./pages/Feedback.tsx"));
const Chat = lazy(() => import("./pages/Chat.tsx"));
const Meet = lazy(() => import("./pages/Meet.tsx"));
const LinkRedirect = lazy(() => import("./pages/LinkRedirect.tsx"));
const IdVerify = lazy(() => import("./pages/IdVerify.tsx"));
const About = lazy(() => import("./pages/About.tsx"));
const Privacy = lazy(() => import("./pages/Privacy.tsx"));
const Terms = lazy(() => import("./pages/Terms.tsx"));

function RouteLoading() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="animate-pulse text-muted-foreground">Loading...</div>
    </div>
  );
}

/** Hard guard so runtime errors never leave the page as a blank screen. */
class RootErrorBoundary extends React.Component<
  { children: React.ReactNode },
  { hasError: boolean; message: string; stack: string }
> {
  state = { hasError: false, message: "", stack: "" };
  static getDerivedStateFromError(error: Error) {
    return {
      hasError: true,
      message: error.message || "Unknown runtime error",
      stack: error.stack || "",
    };
  }
  componentDidCatch(err: Error) {
    console.error("[Preview] Root crash:", err);
  }
  render() {
    if (this.state.hasError) {
      return (
        <div className="min-h-screen flex items-center justify-center bg-background text-foreground p-6">
          <div className="max-w-lg text-center">
            <p className="text-sm font-semibold">Preview runtime error</p>
            <p className="mt-2 text-xs text-muted-foreground break-words">
              {this.state.message}
            </p>
            {this.state.stack && (
              <pre className="mt-3 text-left text-[10px] leading-4 text-muted-foreground/80 max-h-40 overflow-auto rounded border border-border/60 p-2">
                {this.state.stack}
              </pre>
            )}
          </div>
        </div>
      );
    }
    return this.props.children;
  }
}

const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL as string);

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <RootErrorBoundary>
      <ConvexAuthProvider client={convex}>
        <BrowserRouter>
          <Suspense fallback={<RouteLoading />}>
            <Routes>
              {/* Public */}
              <Route path="/" element={<Landing />} />
              <Route path="/store" element={<StorePage />} />
              <Route path="/events/:id/register" element={<PublicEventRegister />} />
              <Route path="/discover" element={<Discover />} />
              <Route path="/communities" element={<CommunitiesDirectory />} />
              <Route path="/speakers" element={<SpeakersDirectory />} />
              <Route path="/venues" element={<VenuesDirectory />} />
              <Route path="/advertisers" element={<Advertise />} />
              <Route path="/book/:speakerId" element={<BookSpeaker />} />
              <Route path="/u/:profileId" element={<PublicProfile />} />
              <Route path="/invite/:token" element={<InviteAccept />} />
              <Route path="/join/:slug" element={<JoinCommunity />} />
              <Route path="/verify/:code" element={<VerifyCertificate />} />
              <Route path="/claim/:eventId" element={<ClaimCertificate />} />
              <Route path="/support" element={<SupportWidget />} />
              <Route path="/watch/:eventId" element={<Watch />} />
              <Route path="/feedback/:eventId" element={<Feedback />} />
              <Route path="/l/:slug" element={<LinkRedirect />} />
              <Route path="/id/:cardNumber" element={<IdVerify />} />
              <Route path="/about" element={<About />} />
              <Route path="/privacy" element={<Privacy />} />
              <Route path="/terms" element={<Terms />} />

              {/* Auth */}
              <Route
                path="/auth"
                element={<AuthPage redirectAfterAuth="/dashboard" />}
              />
              <Route path="/platform-login" element={<PlatformLogin />} />

              {/* Protected dashboard (AppShell provides sidebar + topbar).
                  Routes are FLAT — a nested <Routes> loses the URL prefix and
                  made every sub-page fall through to the 404 page. */}
              <Route
                path="/dashboard"
                element={
                  <RequireAuth redirectImmediately>
                    <AppShell>
                      <RouteErrorBoundary>
                        <Outlet />
                      </RouteErrorBoundary>
                    </AppShell>
                  </RequireAuth>
                }
              >
                <Route index element={<Dashboard />} />
                <Route path="contacts" element={<ContactsPage />} />
                <Route path="contacts/:id" element={<ContactDetail />} />
                <Route path="companies" element={<CompaniesPage />} />
                <Route path="companies/:id" element={<CompanyDetail />} />
                <Route path="events" element={<EventsPage />} />
                <Route path="events/:id" element={<EventWorkspace />} />
                <Route path="events/:id/certdesign" element={<CertDesigner />} />
                <Route path="partnerships" element={<PartnershipsPage />} />
                <Route path="sponsors" element={<SponsorsPage />} />
                <Route path="courses" element={<CoursesPage />} />
                <Route path="courses/:id" element={<CourseDetail />} />
                <Route path="social" element={<SocialPage />} />
                <Route path="venues" element={<VenuesPage />} />
                <Route path="outreach" element={<OutreachPage />} />
                <Route path="referrals" element={<ReferralsPage />} />
                <Route path="settings" element={<SettingsPage />} />

                {/* v2 modules */}
                <Route path="feed" element={<Feed />} />
                <Route path="networks" element={<Networks />} />
                <Route path="mentorship" element={<Mentorship />} />
                <Route path="speakers" element={<Speakers />} />
                <Route path="certificates" element={<Certificates />} />
                <Route path="quizzes" element={<Quizzes />} />
                <Route path="hackathons" element={<Hackathons />} />
                <Route path="cohorts" element={<Cohorts />} />
                <Route path="giveaways" element={<Giveaways />} />
                <Route path="mail" element={<Mail />} />
                <Route path="notifications" element={<Notifications />} />
                <Route path="recap" element={<Recap />} />
                <Route path="super" element={<SuperAdmin />} />
                <Route path="checkin/:eventId" element={<CheckinStation />} />
                <Route path="checkin" element={<CheckinStation />} />
                <Route path="support" element={<Support />} />
                <Route path="radio" element={<Radio />} />
                <Route path="chat" element={<Chat />} />
                <Route path="meet" element={<Meet />} />
                <Route path="billing" element={<Billing />} />
              </Route>

              {/* Attendee portal (any signed-in user incl. volunteers) */}
              <Route
                path="/portal"
                element={
                  <RequireAuth redirectImmediately>
                    <AppShell>
                      <Portal />
                    </AppShell>
                  </RequireAuth>
                }
              />

              <Route path="*" element={<NotFound />} />
            </Routes>
          </Suspense>
        </BrowserRouter>
        <Toaster />
      </ConvexAuthProvider>
    </RootErrorBoundary>
  </StrictMode>,
);