import { Component, type ReactNode } from 'react';

// Red de seguridad: si algo revienta al renderizar (un bache, un deploy a
// medias, un dato inesperado), en vez de pantalla en negro mostramos un
// mensaje con la marca y un boton para recargar.
export default class ErrorBoundary extends Component<{ children: ReactNode }, { error: Error | null }> {
  state = { error: null as Error | null };

  static getDerivedStateFromError(error: Error) {
    return { error };
  }

  componentDidCatch(error: Error) {
    console.error('ErrorBoundary:', error);
  }

  render() {
    if (!this.state.error) return this.props.children;
    return (
      <div
        style={{
          minHeight: '100vh',
          display: 'grid',
          placeItems: 'center',
          background: '#0D0F1E',
          color: '#f2f3fa',
          fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif',
          padding: '24px',
          textAlign: 'center',
        }}
      >
        <div style={{ maxWidth: '360px' }}>
          <div style={{ fontSize: '40px', marginBottom: '10px' }}>🍽️</div>
          <h1 style={{ fontSize: '20px', fontWeight: 800, margin: '0 0 8px' }}>Algo se interrumpio</h1>
          <p style={{ color: '#8a8fAf', fontSize: '14px', lineHeight: 1.6, margin: '0 0 22px' }}>
            Tu informacion esta segura. Vuelve a cargar la pagina para continuar.
          </p>
          <button
            onClick={() => window.location.reload()}
            style={{
              background: '#FBBF24',
              color: '#0D0F1E',
              fontWeight: 700,
              border: 0,
              borderRadius: '12px',
              padding: '12px 26px',
              fontSize: '15px',
              cursor: 'pointer',
            }}
          >
            Recargar
          </button>
        </div>
      </div>
    );
  }
}
