"use client";

import Link from "next/link";
import { Home, Compass } from "lucide-react";
import { motion } from "motion/react";

import { Button } from "@/components/ui/button";

export function InvalidRouteScreen() {
  return (
    <div className="relative min-h-screen overflow-hidden bg-background text-foreground flex items-center justify-center">
      {/* Ambient Background */}
      <div className="fixed inset-0 pointer-events-none">
        <div className="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-primary/5 rounded-full blur-[120px] animate-pulse" />
        <div className="absolute bottom-1/4 right-1/4 w-[400px] h-[400px] bg-violet-500/5 rounded-full blur-[100px] animate-pulse delay-1000" />
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-emerald-500/3 rounded-full blur-[140px]" />
        <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:64px_64px] [mask-image:radial-gradient(ellipse_80%_80%_at_50%_50%,#000_20%,transparent_100%)]" />
      </div>

      <main className="relative z-10 flex flex-col items-center justify-center px-6 py-16 text-center max-w-lg mx-auto">
        {/* 404 Code */}
        <motion.div
          initial={{ opacity: 0, scale: 0.8, filter: "blur(10px)" }}
          animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
          transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
          className="relative mb-6"
        >
          <div className="absolute inset-0 bg-gradient-to-r from-primary/30 via-violet-500/20 to-primary/30 blur-3xl rounded-full scale-150 animate-pulse" />
          <h1 className="relative text-9xl sm:text-[10rem] font-bold tracking-tighter leading-none bg-gradient-to-b from-foreground via-foreground to-muted-foreground/20 bg-clip-text text-transparent select-none">
            404
          </h1>
        </motion.div>

        {/* Content */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.25, duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
          className="space-y-6"
        >
          <div className="space-y-4">
            <div className="inline-flex items-center gap-2 rounded-full border border-border/50 bg-background/50 backdrop-blur-xl px-4 py-1.5 text-[11px] font-bold uppercase tracking-[0.25em] text-muted-foreground">
              <Compass className="w-3.5 h-3.5" />
              Page not found
            </div>

            <h2 className="text-2xl sm:text-3xl font-bold tracking-tight text-foreground">
              This page doesn't exist
            </h2>

            <p className="text-sm text-muted-foreground leading-relaxed max-w-sm mx-auto">
              The URL you entered doesn't match any known route. Double-check
              the address or return to the homepage.
            </p>
          </div>

          {/* Action */}
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.45, duration: 0.5 }}
            className="pt-2"
          >
            <Button
              asChild
              size="lg"
              className="rounded-xl gap-2 h-11 px-6 shadow-lg shadow-primary/15 hover:shadow-primary/25 hover:scale-[1.02] active:scale-[0.98] transition-all duration-200"
            >
              <Link href="/">
                <Home className="h-4 w-4" />
                Back to Home
              </Link>
            </Button>
          </motion.div>

          {/* Decorative footer */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.7, duration: 0.8 }}
            className="pt-16 flex items-center justify-center gap-3"
          >
            <div className="h-px w-10 bg-gradient-to-r from-transparent to-border" />
            <span className="text-[10px] uppercase tracking-[0.3em] font-semibold text-muted-foreground/40">
              LexiChain
            </span>
            <div className="h-px w-10 bg-gradient-to-l from-transparent to-border" />
          </motion.div>
        </motion.div>
      </main>
    </div>
  );
}