import { createFileRoute, Link, redirect } from "@tanstack/react-router";
import { ArrowRight, Home } from "lucide-react";
import { Button } from "@/components/ui/button";

const legacyAuthenticatedRoutes: Record<string, string> = {
  "/_authenticated/dashboard": "/dashboard",
  "/_authenticated/profile": "/profile",
  "/_authenticated/bookings": "/bookings",
  "/_authenticated/bookings/new": "/bookings/new",
};

export const Route = createFileRoute("/$")({
  beforeLoad: ({ location }) => {
    const normalizedPath = location.pathname.replace(/\/$/, "") || "/";
    const target = legacyAuthenticatedRoutes[normalizedPath];
    if (target) throw redirect({ to: target, replace: true });
  },
  head: () => ({ meta: [{ title: "Page not found · SkillKonnect" }] }),
  component: CatchAllPage,
});

function CatchAllPage() {
  return (
    <main className="min-h-screen bg-background px-4 py-16 text-foreground">
      <section className="container-prose flex min-h-[70vh] max-w-2xl flex-col items-center justify-center text-center">
        <p className="text-sm font-semibold uppercase tracking-wider text-primary">Page unavailable</p>
        <h1 className="mt-3 text-4xl font-bold tracking-tight md:text-5xl">This page has moved</h1>
        <p className="mt-3 max-w-md text-muted-foreground">
          Use the dashboard or bookings area to continue with your SkillKonnect workflow.
        </p>
        <div className="mt-8 flex flex-wrap justify-center gap-3">
          <Button asChild>
            <Link to="/dashboard" className="gap-2">
              Dashboard <ArrowRight className="h-4 w-4" />
            </Link>
          </Button>
          <Button asChild variant="outline">
            <Link to="/" className="gap-2">
              <Home className="h-4 w-4" /> Home
            </Link>
          </Button>
        </div>
      </section>
    </main>
  );
}