import { Toaster } from "@/components/ui/sonner";
import { TooltipProvider } from "@/components/ui/tooltip";
import NotFound from "@/pages/NotFound";
import { isCashOfferTrigger } from "@/lib/cashOfferTrigger";
import { useEffect, useState } from "react";
import { Route, Switch } from "wouter";
import ErrorBoundary from "./components/ErrorBoundary";
import { ThemeProvider } from "./contexts/ThemeContext";
import Home, { ThreeStepOfferDialog } from "./pages/Home";
import CountyAreaPage from "./pages/CountyAreaPage";
import {
  SellFastPage,
  HowItWorksPage,
  SituationsPage,
  LocationsPage,
  AboutPage,
  ContactPage,
  PrivacyPage,
  TermsPage,
  SellAsIsPage,
  ForeclosureHelpPage,
  InheritedPropertyPage,
  DivorceHomeSalePage,
  SellerInsightsPage,
  CompareSellingOptionsPage,
  BlogPage,
  CashSaleBenefitsPage,
} from "./pages/ContentPages";
function Router() {
  // make sure to consider if you need authentication for certain routes
  return (
    <Switch>
      <Route path="/" component={Home} />
      <Route path="/sell-your-house-fast.html" component={SellFastPage} />
      <Route path="/how-it-works.html" component={HowItWorksPage} />
      <Route path="/situations.html" component={SituationsPage} />
      <Route path="/locations.html" component={LocationsPage} />
      <Route path="/about.html" component={AboutPage} />
      <Route path="/contact.html" component={ContactPage} />
      <Route path="/privacy.html" component={PrivacyPage} />
      <Route path="/terms.html" component={TermsPage} />
      <Route path="/sell-as-is.html" component={SellAsIsPage} />
      <Route path="/foreclosure-help.html" component={ForeclosureHelpPage} />
      <Route path="/sell-inherited-property.html" component={InheritedPropertyPage} />
      <Route path="/sell-during-divorce.html" component={DivorceHomeSalePage} />
      <Route path="/seller-insights.html" component={SellerInsightsPage} />
      <Route path="/compare-selling-options.html" component={CompareSellingOptionsPage} />
      <Route path="/blog.html" component={BlogPage} />
      <Route path="/cash-sale-benefits.html" component={CashSaleBenefitsPage} />
      <Route path="/areas-we-serve/:state/:county/" component={CountyAreaPage} />
      <Route path="/areas-we-serve/:state/" component={CountyAreaPage} />
      <Route path="/404" component={NotFound} />
      <Route component={NotFound} />
    </Switch>
  );
}

function App() {
  const [isOfferOpen, setIsOfferOpen] = useState(true);

  useEffect(() => {
    const openOffer = () => setIsOfferOpen(true);
    const handleOfferClick = (event: MouseEvent) => {
      const target = event.target instanceof Element ? event.target.closest<HTMLElement>("a, button") : null;
      if (!target) return;

      const isDialogSubmit = Boolean(target.closest(".offer-modal")) && target instanceof HTMLButtonElement && target.type === "submit";
      if (isDialogSubmit) return;

      const href = target instanceof HTMLAnchorElement ? target.getAttribute("href") ?? "" : "";
      if (!isCashOfferTrigger({ href, text: target.textContent ?? "", isDialogSubmit })) return;

      event.preventDefault();
      setIsOfferOpen(true);
    };

    window.addEventListener("open-cash-offer", openOffer);
    document.addEventListener("click", handleOfferClick, true);
    return () => {
      window.removeEventListener("open-cash-offer", openOffer);
      document.removeEventListener("click", handleOfferClick, true);
    };
  }, []);

  useEffect(() => {
    document.body.classList.toggle("modal-is-open", isOfferOpen);
    return () => document.body.classList.remove("modal-is-open");
  }, [isOfferOpen]);

  return (
    <ErrorBoundary>
      <ThemeProvider defaultTheme="light">
        <TooltipProvider>
          <Toaster />
          <Router />
          {isOfferOpen && <ThreeStepOfferDialog onClose={() => setIsOfferOpen(false)} />}
        </TooltipProvider>
      </ThemeProvider>
    </ErrorBoundary>
  );
}

export default App;
