import React, { StrictMode, Component, ReactNode, ErrorInfo } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import { AuthProvider } from './context/AuthContext';
import './index.css';

interface Props {
  children: ReactNode;
}

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

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

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

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

  public render() {
    if (this.state.hasError) {
      return (
        <div className="w-screen h-screen bg-[#06080e] text-slate-100 flex flex-col items-center justify-center p-6 select-none font-sans">
          <div className="max-w-md w-full p-6 bg-slate-900/90 border border-white/10 rounded-2xl shadow-2xl flex flex-col items-center text-center backdrop-blur-xl">
            <div className="w-12 h-12 rounded-2xl bg-amber-500/20 text-amber-400 flex items-center justify-center mb-4 text-2xl font-bold">
              ⚡
            </div>
            <h2 className="text-lg font-semibold text-white mb-2">Restableciendo Lienzo</h2>
            <p className="text-xs text-slate-400 mb-5 leading-relaxed">
              Ocurrió un inconveniente al cargar el estado. Puedes reiniciar el lienzo para volver al estado inicial seguro.
            </p>
            {this.state.error && (
              <pre className="text-[10px] text-rose-300 bg-black/40 p-2.5 rounded-lg border border-rose-500/20 w-full mb-4 text-left overflow-x-auto">
                {this.state.error.message}
              </pre>
            )}
            <div className="flex gap-2 w-full">
              <button
                type="button"
                className="flex-1 py-2 px-4 bg-amber-400 hover:bg-amber-300 text-slate-950 text-xs font-bold rounded-xl transition-all shadow-lg shadow-amber-500/20"
                onClick={() => {
                  try {
                    localStorage.removeItem('flowcraft_ai_current_flow');
                    localStorage.removeItem('flowcraft_ai_canvas_settings');
                  } catch {
                    // Ignore
                  }
                  window.location.reload();
                }}
              >
                Reiniciar Lienzo
              </button>
              <button
                type="button"
                className="py-2 px-4 bg-white/10 hover:bg-white/15 text-white text-xs font-semibold rounded-xl transition-all"
                onClick={() => window.location.reload()}
              >
                Reintentar
              </button>
            </div>
          </div>
        </div>
      );
    }

    return this.props.children;
  }
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ErrorBoundary>
      <AuthProvider>
        <App />
      </AuthProvider>
    </ErrorBoundary>
  </StrictMode>
);