"use client";

import { DotLottieReact } from "@lottiefiles/dotlottie-react";
import { cn } from "@/lib/utils";
import Link from "next/link";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";

/** Served from `public/lottie/404.lottie` (mirrored in `src/assets/lottie/404.lottie` for the repo). */
const LOTTIE_URL = "/lottie/404.lottie";

export default function NotFoundContent() {
  const { resolvedTheme } = useTheme();
  const [mounted, setMounted] = useState(false);
  const [loadError, setLoadError] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  const mode = mounted && resolvedTheme === "dark" ? "dark" : "light";

  return (
    <div
      className={cn(
        "relative isolate flex min-h-svh w-full flex-col overflow-hidden",
        "bg-gray-1 dark:bg-dark",
      )}
    >
      {/* Ambient mesh */}
      <div
        className="pointer-events-none absolute -left-1/4 top-0 h-[min(85vh,720px)] w-[min(85vw,720px)] rounded-full bg-primary/[0.22] blur-[100px] dark:bg-primary/[0.12]"
        aria-hidden
      />
      <div
        className="pointer-events-none absolute -right-1/4 bottom-0 h-[min(70vh,560px)] w-[min(70vw,560px)] rounded-full bg-blue/[0.18] blur-[90px] dark:bg-blue/[0.1]"
        aria-hidden
      />
      <div
        className="pointer-events-none absolute left-1/2 top-1/3 h-64 w-64 -translate-x-1/2 rounded-full bg-primary/[0.08] blur-3xl dark:bg-primary/[0.06]"
        aria-hidden
      />

      {/* Vignette + fine grid */}
      <div
        className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_80%_55%_at_50%_38%,transparent_0%,rgba(17,25,40,0.04)_55%,rgba(17,25,40,0.09)_100%)] dark:bg-[radial-gradient(ellipse_80%_55%_at_50%_38%,transparent_0%,rgba(0,0,0,0.35)_55%,rgba(0,0,0,0.65)_100%)]"
        aria-hidden
      />
      <div
        className={cn(
          "pointer-events-none absolute inset-0 opacity-[0.45] dark:opacity-[0.22]",
          "[background-image:linear-gradient(to_right,rgba(17,25,40,0.06)_1px,transparent_1px),linear-gradient(to_bottom,rgba(17,25,40,0.06)_1px,transparent_1px)]",
          "dark:[background-image:linear-gradient(to_right,rgba(148,163,184,0.08)_1px,transparent_1px),linear-gradient(to_bottom,rgba(148,163,184,0.08)_1px,transparent_1px)]",
        )}
        style={{
          backgroundSize: "28px 28px",
          backgroundPosition: "0 0",
        }}
        aria-hidden
      />

      {/* Frame accents */}
      <div className="pointer-events-none absolute left-5 top-5 h-16 w-16 border-l-2 border-t-2 border-primary/40 dark:border-primary/35 sm:left-8 sm:top-8" />
      <div className="pointer-events-none absolute bottom-5 right-5 h-16 w-16 border-b-2 border-r-2 border-primary/40 dark:border-primary/35 sm:bottom-8 sm:right-8" />

      <div className="relative z-10 flex flex-1 flex-col items-center justify-center px-4 py-14 sm:px-6 sm:py-16">
        <div className="w-full max-w-xl">
          {/* Gradient hairline frame */}
          <div
            className={cn(
              "rounded-[1.75rem] p-[1px] shadow-5",
              "bg-gradient-to-br from-primary/55 via-primary/[0.12] to-blue/35",
              "dark:from-primary/45 dark:via-primary/[0.08] dark:to-blue/25",
            )}
          >
            <div
              className={cn(
                "relative overflow-hidden rounded-[1.7rem]",
                "bg-white/[0.92] backdrop-blur-2xl dark:bg-dark-2/[0.88]",
                "border border-white/60 dark:border-dark-3/80",
              )}
            >
              <div
                className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/35 to-transparent"
                aria-hidden
              />

              <div className="relative px-6 pb-8 pt-7 sm:px-10 sm:pb-10 sm:pt-9">
                <div className="mb-6 flex flex-col items-center gap-3 text-center sm:mb-8">
                  <span className="inline-flex items-center gap-2 rounded-full border border-stroke/90 bg-gray-1/90 px-3 py-1 font-mono text-[10px] font-semibold uppercase tracking-[0.28em] text-gray-6 shadow-theme-xs dark:border-dark-3 dark:bg-dark/60 dark:text-dark-6">
                    <span
                      className="h-1.5 w-1.5 shrink-0 rounded-full bg-primary shadow-[0_0_10px_rgba(87,80,241,0.65)]"
                      aria-hidden
                    />
                    Route not found
                  </span>

                  <h1 className="text-[clamp(3.25rem,12vw,5.5rem)] font-bold leading-none tracking-tight">
                    <span className="bg-gradient-to-br from-dark via-dark to-gray-7 bg-clip-text text-transparent dark:from-white dark:via-white dark:to-dark-6">
                      4
                    </span>
                    <span className="bg-gradient-to-br from-primary via-primary to-blue bg-clip-text text-transparent">
                      0
                    </span>
                    <span className="bg-gradient-to-br from-dark via-dark to-gray-7 bg-clip-text text-transparent dark:from-white dark:via-white dark:to-dark-6">
                      4
                    </span>
                  </h1>

                  <p className="max-w-sm text-body-sm text-gray-6 dark:text-dark-6">
                    This URL is not mapped in the panel. The page may have moved
                    or the link could be mistyped.
                  </p>
                </div>

                <div className="relative mx-auto w-full max-w-[min(100%,400px)]">
                  <div
                    className="pointer-events-none absolute -inset-3 rounded-2xl bg-gradient-to-b from-primary/[0.07] to-transparent dark:from-primary/[0.05]"
                    aria-hidden
                  />
                  <div className="relative [&_canvas]:mx-auto [&_canvas]:block [&_canvas]:h-auto [&_canvas]:w-full">
                    {loadError ? (
                      <div
                        className={cn(
                          "flex min-h-[200px] w-full items-center justify-center rounded-2xl border border-dashed border-error/40 bg-gray-1/50 dark:border-error/35 dark:bg-dark/40",
                          "animate-pulse",
                        )}
                        role="alert"
                      >
                        <span className="text-body-xs font-medium text-gray-6 dark:text-dark-6">
                          Could not load illustration
                        </span>
                      </div>
                    ) : (
                      <DotLottieReact
                        key={mode}
                        src={LOTTIE_URL}
                        loop
                        autoplay
                        className="h-auto w-full max-w-full drop-shadow-[0_12px_40px_rgba(87,80,241,0.12)] dark:drop-shadow-[0_12px_48px_rgba(0,0,0,0.35)]"
                        aria-hidden
                        onError={() => setLoadError(true)}
                      />
                    )}
                  </div>
                </div>

                <div className="mt-8 flex flex-col items-stretch gap-3 sm:mt-10 sm:flex-row sm:items-center sm:justify-center sm:gap-4">
                  <Link
                    href="/"
                    className={cn(
                      "shadow-theme-xs relative isolate inline-flex w-full items-center justify-center overflow-hidden rounded-xl bg-gradient-to-r from-primary to-primary/85 py-[11px] px-6 text-center text-body-sm font-semibold text-white transition hover:opacity-95",
                      "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
                      "sm:flex-1 sm:max-w-[200px]",
                    )}
                  >
                    Back to dashboard
                  </Link>
                  <button
                    type="button"
                    onClick={() =>
                      typeof window !== "undefined" && window.history.back()
                    }
                    className={cn(
                      "rounded-xl border border-stroke bg-white/90 px-6 py-3 text-body-sm font-semibold text-dark shadow-theme-xs",
                      "transition hover:border-primary/40 hover:text-primary",
                      "dark:border-dark-3 dark:bg-dark/80 dark:text-white dark:hover:border-primary/35 dark:hover:bg-dark-3",
                      "sm:flex-1 sm:max-w-[200px]",
                    )}
                  >
                    Go back
                  </button>
                </div>
              </div>
            </div>
          </div>

          <p className="mt-6 text-center font-mono text-[10px] uppercase tracking-[0.35em] text-gray-5 dark:text-dark-5">
            Opp lens · admin
          </p>
        </div>
      </div>
    </div>
  );
}