import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import {
  Outlet,
  Link,
  createRootRouteWithContext,
  useRouter,
  HeadContent,
  Scripts,
} from "@tanstack/react-router";

import appCss from "../styles.css?url";
import { Header } from "@/components/Header";
import { Footer } from "@/components/Footer";
import { Toaster } from "@/components/ui/sonner";

function NotFoundComponent() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-background px-4">
      <div className="max-w-md text-center">
        <div className="flex items-center justify-center gap-3 mb-6">
          <span className="h-px w-10 bg-brand-red" />
          <span className="eyebrow">Error 404</span>
          <span className="h-px w-10 bg-brand-red" />
        </div>
        <h1 className="display-xl text-brand-red">404</h1>
        <h2 className="mt-4 text-xl uppercase tracking-editorial extralight">Page not found</h2>
        <p className="mt-4 text-sm text-muted-foreground extralight">
          The page you're looking for doesn't exist or has been moved.
        </p>
        <div className="mt-8 flex justify-center">
          <Link to="/" className="inline-flex items-center justify-center gap-3 bg-brand-red text-white uppercase tracking-wider-x extralight border border-brand-red hover:bg-transparent hover:text-brand-red transition-colors duration-300 h-12 px-8 text-[11px]">
            Go home
          </Link>
        </div>
      </div>
    </div>
  );
}

function ErrorComponent({ error, reset }: { error: Error; reset: () => void }) {
  console.error(error);
  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">
        <div className="flex items-center justify-center gap-3 mb-6">
          <span className="h-px w-10 bg-brand-red" />
          <span className="eyebrow">Something went wrong</span>
          <span className="h-px w-10 bg-brand-red" />
        </div>
        <h1 className="text-xl uppercase tracking-editorial extralight">This page didn't load</h1>
        <p className="mt-4 text-sm text-muted-foreground extralight">Try again or head home.</p>
        <div className="mt-8 flex flex-wrap justify-center gap-3">
          <button onClick={() => { router.invalidate(); reset(); }} className="inline-flex items-center justify-center gap-3 bg-brand-red text-white uppercase tracking-wider-x extralight border border-brand-red hover:bg-transparent hover:text-brand-red transition-colors duration-300 h-11 px-6 text-[11px]">Try again</button>
          <a href="/" className="inline-flex items-center justify-center gap-3 bg-transparent text-foreground uppercase tracking-wider-x extralight border border-border hover:border-brand-red hover:text-brand-red transition-colors duration-300 h-11 px-6 text-[11px]">Go home</a>
        </div>
      </div>
    </div>
  );
}

export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
  head: () => ({
    meta: [
      { charSet: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { title: "Classic Paints — Premium Paints Made in Bangladesh" },
      { name: "description", content: "Classic Chemical Industries Ltd. — premium decorative and industrial coatings engineered for Bangladesh. Founded 2021 by Jamuna Spacetech Joint Venture Ltd." },
      { name: "theme-color", content: "#E11B22" },
      { property: "og:title", content: "Classic Paints — Premium Paints Made in Bangladesh" },
      { name: "twitter:title", content: "Classic Paints — Premium Paints Made in Bangladesh" },
      { property: "og:description", content: "Classic Chemical Industries Ltd. — premium decorative and industrial coatings engineered for Bangladesh. Founded 2021 by Jamuna Spacetech Joint Venture Ltd." },
      { name: "twitter:description", content: "Classic Chemical Industries Ltd. — premium decorative and industrial coatings engineered for Bangladesh. Founded 2021 by Jamuna Spacetech Joint Venture Ltd." },
      { property: "og:image", content: "https://pub-bb2e103a32db4e198524a2e9ed8f35b4.r2.dev/5f6e053e-1087-4b46-8a21-e97fb10df365/id-preview-699fab10--d4459bf8-9f7a-4a4b-a4ce-6bf43736e898.lovable.app-1778498721294.png" },
      { name: "twitter:image", content: "https://pub-bb2e103a32db4e198524a2e9ed8f35b4.r2.dev/5f6e053e-1087-4b46-8a21-e97fb10df365/id-preview-699fab10--d4459bf8-9f7a-4a4b-a4ce-6bf43736e898.lovable.app-1778498721294.png" },
      { name: "twitter:card", content: "summary_large_image" },
      { property: "og:type", content: "website" },
    ],
    links: [
      { rel: "stylesheet", href: appCss },
      { rel: "preconnect", href: "https://fonts.googleapis.com" },
      { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" },
      { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&family=Outfit:wght@200;300;400;500;600;700;800&display=swap" },
    ],
  }),
  shellComponent: RootShell,
  component: RootComponent,
  notFoundComponent: NotFoundComponent,
  errorComponent: ErrorComponent,
});

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

function RootComponent() {
  const { queryClient } = Route.useRouteContext();
  return (
    <QueryClientProvider client={queryClient}>
      <Header />
      <main className="min-h-screen">
        <Outlet />
      </main>
      <Footer />
      <Toaster richColors position="top-center" />
    </QueryClientProvider>
  );
}