import { Outlet, Link, createRootRoute, HeadContent, Scripts, useRouter } from "@tanstack/react-router";
import appCss from "../styles.css?url";
import { ThemeProvider } from "@/components/ThemeProvider";
import { LeadProvider } from "@/components/LeadProvider";
import { LeadPopup, LeadAutoTrigger } from "@/components/LeadPopup";
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { WhatsAppWidget } from "@/components/WhatsAppWidget";
import { ScrollReveal } from "@/components/ScrollReveal";

function NotFoundComponent() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-background px-4">
      <div className="max-w-md text-center">
        <h1 className="text-7xl font-bold gradient-text-gold">404</h1>
        <h2 className="mt-4 text-xl font-semibold">Page not found</h2>
        <p className="mt-2 text-sm text-muted-foreground">The page you're looking for doesn't exist.</p>
        <div className="mt-6">
          <Link to="/" className="inline-flex items-center justify-center rounded-md gradient-gold text-black px-5 py-2.5 text-sm font-semibold">Go home</Link>
        </div>
      </div>
    </div>
  );
}

function ErrorComp({ error, reset }: { error: Error; reset: () => void }) {
  const router = useRouter();
  return (
    <div className="flex min-h-screen items-center justify-center bg-background px-4">
      <div className="max-w-md text-center">
        <h2 className="text-2xl font-bold">Something went wrong</h2>
        <p className="mt-2 text-sm text-muted-foreground">{error.message}</p>
        <button onClick={() => { router.invalidate(); reset(); }} className="mt-6 gradient-gold text-black px-5 py-2.5 rounded-md text-sm font-semibold">Try again</button>
      </div>
    </div>
  );
}

export const Route = createRootRoute({
  head: () => ({
    meta: [
      { charSet: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { title: "Pune Property Club — Luxury Real Estate in Baner, Pune" },
      { name: "description", content: "Pune's premier real estate club. Buy luxury flats, villas, and commercial spaces in Baner, Balewadi, Bavdhan & Hinjewadi with expert advisory." },
      { name: "keywords", content: "Real Estate in Pune, Property in Baner, Buy Flats in Pune, Luxury Homes Pune, Commercial Property Pune" },
      { name: "author", content: "Pune Property Club" },
      { property: "og:title", content: "Pune Property Club — Luxury Real Estate in Baner, Pune" },
      { property: "og:description", content: "Pune's premier real estate club. Buy luxury flats, villas, and commercial spaces in Baner, Balewadi, Bavdhan & Hinjewadi with expert advisory." },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
      { name: "twitter:title", content: "Pune Property Club — Luxury Real Estate in Baner, Pune" },
      { name: "twitter:description", content: "Pune's premier real estate club. Buy luxury flats, villas, and commercial spaces in Baner, Balewadi, Bavdhan & Hinjewadi with expert advisory." },
      { property: "og:image", content: "https://storage.googleapis.com/gpt-engineer-file-uploads/WQHaEJ5K58SNOt6DYwDnx8lEstO2/social-images/social-1777376408622-punepropertyclub-logo.webp" },
      { name: "twitter:image", content: "https://storage.googleapis.com/gpt-engineer-file-uploads/WQHaEJ5K58SNOt6DYwDnx8lEstO2/social-images/social-1777376408622-punepropertyclub-logo.webp" },
    ],
    links: [{ rel: "stylesheet", href: appCss }],
  }),
  shellComponent: RootShell,
  component: RootComponent,
  notFoundComponent: NotFoundComponent,
  errorComponent: ErrorComp,
});

function RootShell({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head><HeadContent /></head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  );
}

function RootComponent() {
  return (
    <ThemeProvider>
      <LeadProvider>
        <div className="overflow-x-hidden w-full">
          <Navbar />
          <main className="min-h-screen pt-20 pb-20 md:pb-0"><Outlet /></main>
          <Footer />
          <WhatsAppWidget />
          <LeadPopup />
          <LeadAutoTrigger />
          <ScrollReveal />
        </div>
      </LeadProvider>
    </ThemeProvider>
  );
}
