import { createFileRoute, useSearch } from "@tanstack/react-router";
import { useLandingTheme, type LandingThemeId, LANDING_THEMES } from "@/lib/landing-themes";
import { ThemeClassic } from "@/components/landing/theme-classic";
import { ThemeX } from "@/components/landing/theme-x";
import { ThemeStackAdapt } from "@/components/landing/theme-stackadapt";
import { ThemeMeta } from "@/components/landing/theme-meta";
import { ThemeVibe } from "@/components/landing/theme-vibe";

type Search = { theme?: LandingThemeId };

export const Route = createFileRoute("/home")({
  validateSearch: (s: Record<string, unknown>): Search => {
    const t = s.theme as string | undefined;
    return LANDING_THEMES.some((x) => x.id === t) ? { theme: t as LandingThemeId } : {};
  },
  head: () => ({
    meta: [
      { title: "VotersAlert — AI Political Ad Booking & Outreach Platform" },
      {
        name: "description",
        content:
          "Verified political advertisers create, launch, and optimize compliant multi-channel campaigns to consent-based supporters by State, LGA, and Ward.",
      },
    ],
  }),
  component: LandingPage,
});

function LandingPage() {
  const { theme: previewTheme } = useSearch({ from: "/home" });
  const [storedTheme, , mounted] = useLandingTheme();
  // Render classic on SSR to avoid hydration mismatch; switch after mount.
  const active: LandingThemeId = mounted ? (previewTheme ?? storedTheme) : "classic";

  switch (active) {
    case "x":
      return <ThemeX />;
    case "stackadapt":
      return <ThemeStackAdapt />;
    case "meta":
      return <ThemeMeta />;
    case "vibe":
      return <ThemeVibe />;
    case "classic":
    default:
      return <ThemeClassic />;
  }
}