"use client";

import { useEffect, useRef } from "react";
import { usePathname } from "next/navigation";
import Link from "next/link";
import gsap from "gsap";

export default function NotFound() {
  const root = useRef<HTMLElement>(null);
  const pathname = usePathname();

  useEffect(() => {
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) return;

    const ctx = gsap.context(() => {
      const digits = gsap.utils.toArray<HTMLElement>("[data-digit]");
      gsap.set("[data-fade]", { autoAlpha: 0, y: 14 });

      gsap
        .timeline({ defaults: { ease: "power3.out" } })
        .from(digits, {
          yPercent: -130,
          rotate: -14,
          autoAlpha: 0,
          duration: 0.7,
          ease: "back.out(1.6)",
          stagger: 0.12,
        })
        .to("[data-fade]", { autoAlpha: 1, y: 0, duration: 0.5, stagger: 0.09 }, "-=0.15")
        .add(() => {
          gsap.to(digits, {
            y: (i: number) => (i % 2 ? 7 : -7),
            duration: 2.4,
            ease: "sine.inOut",
            repeat: -1,
            yoyo: true,
            stagger: { each: 0.15, from: "center" },
          });
        });
    }, root);

    return () => ctx.revert();
  }, []);

  return (
    <main
      ref={root}
      className="flex min-h-screen flex-col items-center justify-center gap-8 px-6 text-center"
    >
      <div className="flex leading-none font-bold text-fg [font-size:clamp(6rem,26vw,13rem)]">
        <span data-digit>4</span>
        <span data-digit className="text-accent">
          0
        </span>
        <span data-digit>4</span>
      </div>

      <p data-fade className="max-w-full font-mono text-sm break-words text-muted">
        fatal: le chemin «&nbsp;
        <span className="text-fg">{pathname}</span>
        &nbsp;» n&apos;existe pas dans ce dépôt
      </p>

      <div data-fade className="flex flex-wrap justify-center gap-3">
        <Link
          href="/"
          className="rounded-md border border-line bg-surface px-4 py-2 text-sm font-semibold hover:border-muted"
        >
          ← Retour à l&apos;accueil
        </Link>
        <Link
          href="/#projets"
          className="rounded-md border border-line px-4 py-2 text-sm font-semibold text-accent hover:border-muted"
        >
          Voir les projets
        </Link>
      </div>
    </main>
  );
}