"use client";
import * as React from 'react';
import { ErrorInfo, ReactNode } from 'react';
import { AlertTriangle, RefreshCcw } from 'lucide-react';

interface Props {
  children: ReactNode;
}

interface State {
  hasError: boolean;
  error: Error | null;
}

export class ErrorBoundary extends React.Component<Props, State> {
  public state: State;

  constructor(props: Props) {
    super(props);
    this.state = {
      hasError: false,
      error: null
    };
  }

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

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

  private handleRetry = () => {
    this.setState({ hasError: false, error: null });
    window.location.reload();
  };

  public override render(): ReactNode {
    if (this.state.hasError) {
      return (
        <div className="min-h-screen bg-medical-gray-50 flex items-center justify-center p-6" dir="rtl">
          <div className="max-w-md w-full bg-white rounded-[3rem] p-12 shadow-2xl text-center border border-medical-gray-100">
            <div className="w-24 h-24 bg-rose-50 rounded-[2.5rem] flex items-center justify-center mx-auto mb-8">
              <AlertTriangle className="w-12 h-12 text-rose-500" />
            </div>
            
            <h1 className="text-3xl font-black text-medical-gray-900 mb-4">متأسفانه خطایی رخ داده است</h1>
            <p className="text-medical-gray-500 mb-10 font-medium leading-relaxed">
              مشکلی در بارگذاری این بخش پیش آمده است. لطفاً برای ادامه دوباره تلاش کنید.
            </p>

            <button
              onClick={this.handleRetry}
              className="w-full bg-canina-blue text-white py-5 rounded-2xl font-black flex items-center justify-center gap-3 hover:scale-105 transition-all shadow-xl shadow-canina-blue/20"
            >
              <RefreshCcw className="w-5 h-5" />
              تلاش مجدد
            </button>
            
            <div className="mt-8 pt-8 border-t border-medical-gray-50 flex items-center justify-center gap-2">
               <div className="w-8 h-8 bg-canina-blue rounded-xl flex items-center justify-center text-white font-bold text-xs italic">C</div>
               <span className="text-[10px] font-black text-medical-gray-300 uppercase tracking-widest">Canina Pharma Support</span>
            </div>
          </div>
        </div>
      );
    }

    return this.props.children;
  }
}