"use client";

import React from "react";
import { IconButton } from "./button";
import ResetIcon from "../icons/reload.svg";
import Locale from "../locales";
import './error.scss';
import { Button} from 'antd';
import { Color } from "antd/es/color-picker";

interface IErrorBoundaryState {
  hasError: boolean;
  error: Error | null;
  info: React.ErrorInfo | null;
}

export class ErrorBoundary extends React.Component<any, IErrorBoundaryState> {
  constructor(props: any) {
    super(props);
    this.state = { hasError: false, error: null, info: null };
  }

  componentDidCatch(error: Error, info: React.ErrorInfo) {
    // Update state with error details
    this.setState({ hasError: true, error, info });
  }

  clearAndSaveData() {
    // 直接清除数据，不下载备份
    localStorage.clear();
    location.reload();
  }

  render() {
    if (this.state.hasError) {
      // Render error message
      return (
        <div className="error">
          <div className="error-icon">❌</div>
          <h2 className="error-title">哎呀，出了点小问题！</h2>
          <p className="error-desc">系统遇到了意外状况，别担心，我们的技术团队已经收到通知。您可以尝试刷新页面或清除数据来解决问题。</p>
          <div className="error-actions">
            {/* <IconButton
              icon={<ResetIcon />}
              text="Clear All Data"
              onClick={() => {
                this.clearAndSaveData();
              }}
              bordered
            /> */}
            <Button className="btn" type="primary" onClick={()=>{
              location.reload();
            }}> 刷新页面</Button>
            <Button className="btn btn-outline" onClick={() => {
                this.clearAndSaveData();
              }}>清除所有数据</Button>
          </div>

          {/* 注释掉错误信息 */}
          {/* <pre>
            <code>{this.state.error?.toString()}</code>
            <code>{this.state.info?.componentStack}</code>
          </pre> */}

          <div style={{ display: "flex", justifyContent: "center" }}>
            {/* <IconButton
              icon={<ResetIcon />}
              text="Clear All Data"
              onClick={() => {
                this.clearAndSaveData();
              }}
              bordered
            /> */}
          </div>
        </div>
      );
    }
    // if no error occurred, render children
    return this.props.children;
  }
}