"use client";

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

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

/**
 * Next.js 错误边界组件
 * 当页面渲染过程中发生错误时显示
 * 自动捕获 React 错误和客户端异常
 */
export default function ErrorBoundary({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}): React.ReactElement {
  const { t } = useTranslation("player");

  useEffect(() => {
    // 记录错误日志
    console.error("[ErrorBoundary] Application error:", error);
  }, [error]);

  // 判断是否是 500 服务器错误
  const isServerError = error.message?.includes("500") ||
    error.message?.includes("服务器") ||
    error.name === "LotteryApiBizError";

  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-background p-4">
      <div className="w-full max-w-md">
        <div className="flex flex-col items-center text-center">
          {/* 错误图标 */}
          <div
            className="mb-6 flex size-24 items-center justify-center rounded-full"
            style={{
              backgroundColor: isServerError
                ? `${ERROR_COLORS.error}15`
                : `${ERROR_COLORS.warning}15`,
            }}
          >
            <AlertTriangle
              className="size-12"
              style={{
                color: isServerError ? ERROR_COLORS.error : ERROR_COLORS.warning,
              }}
              aria-hidden
            />
          </div>

          {/* 错误标题 */}
          <h1 className="mb-2 text-2xl font-bold text-foreground">
            {isServerError ? t("serverError.unavailable") : t("serverError.appTitle")}
          </h1>

          {/* 错误消息 */}
          <p className="mb-2 text-base text-muted-foreground">
            {isServerError
              ? t("serverError.serverMessage")
              : t("serverError.appMessage")}
          </p>

          {/* 技术详情（开发模式） */}
          {process.env.NODE_ENV === "development" && (
            <div className="mb-6 w-full rounded-lg bg-muted p-3 text-left">
              <p className="mb-1 text-xs font-medium text-muted-foreground">
                {t("serverError.details")}
              </p>
              <code className="block max-h-32 overflow-auto whitespace-pre-wrap break-words text-xs text-destructive">
                {error.message}
              </code>
              {error.digest && (
                <p className="mt-2 text-xs text-muted-foreground">
                  {t("serverError.errorId", { id: error.digest })}
                </p>
              )}
            </div>
          )}

          {/* 操作按钮 */}
          <div className="flex flex-col gap-3 sm:flex-row">
            <button
              onClick={reset}
              className="inline-flex items-center justify-center gap-2 rounded-lg border border-current px-4 py-2 text-sm font-medium transition-colors hover:bg-current/5"
              style={{ borderColor: isServerError ? ERROR_COLORS.error : ERROR_COLORS.warning, color: isServerError ? ERROR_COLORS.error : ERROR_COLORS.warning }}
            >
              <RotateCcw className="size-4" />
              {t("actions.retry")}
            </button>

            <Link
              href="/hall"
              className="inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white"
              style={{
                backgroundColor: isServerError ? ERROR_COLORS.error : ERROR_COLORS.warning,
              }}
            >
              <Home className="size-4" />
              {t("serverError.home")}
            </Link>
          </div>

          {/* 辅助链接 */}
          <div className="mt-8 flex gap-4 text-sm text-muted-foreground">
            <button
              onClick={() => window.location.reload()}
              className="hover:text-foreground hover:underline"
            >
              {t("serverError.refreshPage")}
            </button>
            <span>|</span>
            <Link
              href="/hall"
              className="hover:text-foreground hover:underline"
            >
              {t("serverError.hall")}
            </Link>
            <span>|</span>
            <Link
              href="/wallet"
              className="hover:text-foreground hover:underline"
            >
              {t("serverError.wallet")}
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}
