PolyWeather/frontend/app/account/error.tsx

"use client";

import { RefreshCw } from "lucide-react";
import { useEffect } from "react";
import { I18nProvider, useI18n } from "@/hooks/useI18n";

function AccountErrorContent({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  const { locale } = useI18n();
  const isEn = locale === "en-US";

  useEffect(() => {
    console.error("Account page error:", error);
  }, [error]);

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        minHeight: "100vh",
        padding: "2rem",
        gap: "1rem",
        backgroundColor: "var(--color-bg-base, #0B1220)",
        color: "var(--color-text-primary, #E6EDF3)",
        fontFamily: "var(--font-data, Inter, sans-serif)",
        textAlign: "center",
      }}
    >
      <h1
        style={{
          fontSize: "1.25rem",
          fontWeight: 600,
          margin: 0,
          color: "var(--color-accent-primary, #4DA3FF)",
        }}
      >
        {isEn ? "Account Page Error" : "账户页面出错"}
      </h1>
      <p
        style={{
          color: "var(--color-text-secondary, #9FB2C7)",
          fontSize: "0.875rem",
          margin: 0,
          maxWidth: 420,
          lineHeight: 1.7,
        }}
      >
        {isEn
          ? "If this happened during payment or wallet binding, the most common cause is conflicting wallet extensions (e.g. MetaMask and Rabby open at the same time). Try disabling other wallet extensions and refresh."
          : "如果是在支付或绑定钱包时出现此问题，常见原因是钱包插件冲突（例如同时开启了 MetaMask 和 Rabby）。请尝试关闭其他钱包插件后刷新页面重试。"}
      </p>
      <button
        type="button"
        onClick={reset}
        style={{
          marginTop: "0.5rem",
          display: "inline-flex",
          alignItems: "center",
          gap: "0.5rem",
          padding: "0.5rem 1.25rem",
          borderRadius: "var(--radius-md, 10px)",
          border: "1px solid var(--color-border-default, rgba(159,178,199,0.16))",
          backgroundColor: "var(--color-bg-raised, #111A2E)",
          color: "var(--color-accent-primary, #4DA3FF)",
          cursor: "pointer",
          fontSize: "0.875rem",
          fontWeight: 500,
        }}
      >
        <RefreshCw size={14} />
        {isEn ? "Retry" : "重试"}
      </button>
    </div>
  );
}

export default function AccountErrorPage({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <I18nProvider>
      <AccountErrorContent error={error} reset={reset} />
    </I18nProvider>
  );
}