"use client";

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

import { ERROR_COLORS } from "@/stores/error-store";
import "@/i18n";

/**
 * 全局 404 页面
 * 当访问不存在的路由时显示
 * 消息："页面不存在"
 * 包含 "返回首页" 按钮
 * 使用中性颜色 #d9d9d9 作为背景/插图
 */
export default function NotFoundPage(): React.ReactElement {
  const { t } = useTranslation("player");

  return (
    <div
      className="flex min-h-screen flex-col items-center justify-center p-4"
      style={{ backgroundColor: ERROR_COLORS.neutral }}
    >
      <div className="w-full max-w-md rounded-2xl bg-white p-8 shadow-lg">
        <div className="flex flex-col items-center text-center">
          {/* 404 数字 */}
          <div
            className="mb-6 text-8xl font-bold tracking-tighter"
            style={{ color: ERROR_COLORS.neutral }}
          >
            404
          </div>

          {/* 图标 */}
          <div
            className="mb-6 flex size-20 items-center justify-center rounded-full"
            style={{ backgroundColor: `${ERROR_COLORS.neutral}40` }}
          >
            <FileQuestion
              className="size-10"
              style={{ color: "#666" }}
              aria-hidden
            />
          </div>

          {/* 标题 */}
          <h1 className="mb-3 text-2xl font-bold text-gray-800">
            {t("notFound.title")}
          </h1>

          {/* 描述 */}
          <p className="mb-8 text-base text-gray-500">
            {t("notFound.description")}
          </p>

          {/* 返回首页按钮 */}
          <Link
            href="/hall"
            className="inline-flex items-center justify-center gap-2 rounded-lg px-8 py-3 text-base font-medium text-white"
            style={{ backgroundColor: "#333" }}
          >
            <Home className="size-5" />
            {t("notFound.home")}
          </Link>

          {/* 帮助链接 */}
          <div className="mt-8 flex gap-4 text-sm text-gray-400">
            <Link href="/hall" className="hover:text-gray-600 hover:underline">
              {t("notFound.hall")}
            </Link>
            <span>|</span>
            <Link href="/results" className="hover:text-gray-600 hover:underline">
              {t("notFound.results")}
            </Link>
            <span>|</span>
            <Link href="/wallet" className="hover:text-gray-600 hover:underline">
              {t("notFound.wallet")}
            </Link>
          </div>
        </div>
      </div>

      {/* 品牌信息 */}
      <p className="mt-8 text-sm text-gray-500">
        Lottery © {new Date().getFullYear()}
      </p>
    </div>
  );
}
