import React, { Component, ErrorInfo, ReactNode } from 'react';
import { AlertTriangle, RefreshCw } from 'lucide-react';

interface Props {
  children?: ReactNode;
}

interface State {
  hasError: boolean;
  error?: Error;
}

class ErrorBoundary extends Component<Props, State> {
  public state: State = {
    hasError: false
  };

  public static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error };
  }

  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error("Uncaught error:", error, errorInfo);
  }

  private handleReload = () => {
      window.location.reload();
  }

  public render() {
    if (this.state.hasError) {
      return (
        <div className="min-h-screen flex items-center justify-center bg-slate-50 dark:bg-slate-900 p-4">
          <div className="bg-white dark:bg-slate-800 p-8 rounded-xl shadow-lg max-w-md w-full text-center border border-slate-200 dark:border-slate-700">
            <div className="w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mx-auto mb-4">
                <AlertTriangle className="text-red-600 dark:text-red-400" size={32} />
            </div>
            <h1 className="text-xl font-bold text-slate-800 dark:text-white mb-2">Đã xảy ra lỗi hệ thống</h1>
            <p className="text-slate-500 dark:text-slate-400 mb-6 text-sm">
              Hệ thống gặp sự cố không mong muốn. Vui lòng tải lại trang hoặc liên hệ bộ phận kỹ thuật.
            </p>
            <div className="bg-slate-100 dark:bg-slate-900 p-3 rounded text-left mb-6 overflow-hidden">
                <p className="font-mono text-xs text-red-500 break-all">
                    {this.state.error?.toString()}
                </p>
            </div>
            <button 
                onClick={this.handleReload}
                className="flex items-center justify-center gap-2 w-full bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
            >
                <RefreshCw size={18} /> Tải lại trang
            </button>
          </div>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;