"use client";

import Link from "next/link";
import { FileQuestion, Home } from "lucide-react";
import { useTranslation } from "react-i18next";

import { PlayerMobileViewport } from "@/components/layout/player-mobile-viewport";
import { playerViewportColumnClass } from "@/lib/player-viewport";
import { cn } from "@/lib/utils";
import "@/i18n";

export default function NotFoundPage(): React.ReactElement {
  const { t } = useTranslation("player");

  return (
    <PlayerMobileViewport>
      <div
        className={cn(
          "flex min-h-dvh flex-col items-center justify-center bg-white px-4 py-8 text-slate-900",
          playerViewportColumnClass,
        )}
      >
        <div className="w-full rounded-2xl border border-[#e4eaf4] bg-white p-8 shadow-[0_10px_28px_rgba(15,23,42,0.08)]">
          <div className="flex flex-col items-center text-center">
            <div className="mb-4 flex size-16 items-center justify-center rounded-full bg-[#fff1f3]">
              <FileQuestion className="size-8 text-[#e5002c]" aria-hidden />
            </div>

            <p className="text-6xl font-black tracking-tight text-[#0b3f96]/20">404</p>

            <h1 className="mt-2 text-xl font-black text-[#0b3f96]">
              {t("notFound.title")}
            </h1>

            <p className="mt-2 text-sm leading-relaxed text-slate-500">
              {t("notFound.description")}
            </p>

            <Link
              href="/hall"
              className="mt-6 inline-flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-[#e5002c] text-sm font-bold text-white shadow-[0_8px_20px_rgba(229,0,44,0.22)] hover:bg-[#d10028]"
            >
              <Home className="size-4" aria-hidden />
              {t("notFound.home")}
            </Link>

            <div className="mt-6 flex flex-wrap items-center justify-center gap-x-3 gap-y-1 text-xs font-semibold text-[#32518d]">
              <Link href="/hall" className="hover:text-[#0b3f96] hover:underline">
                {t("notFound.hall")}
              </Link>
              <span className="text-slate-300" aria-hidden>
                |
              </span>
              <Link href="/results" className="hover:text-[#0b3f96] hover:underline">
                {t("notFound.results")}
              </Link>
              <span className="text-slate-300" aria-hidden>
                |
              </span>
              <Link href="/wallet" className="hover:text-[#0b3f96] hover:underline">
                {t("notFound.funds")}
              </Link>
            </div>
          </div>
        </div>

        <p className="mt-8 text-xs text-slate-400">
          Lottery © {new Date().getFullYear()}
        </p>
      </div>
    </PlayerMobileViewport>
  );
}