import { Component } from "react";

// Captura errores de render de sus hijos y muestra un mensaje en vez de
// dejar la pantalla en blanco. Botón para reintentar (re-monta el contenido).
export default class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
  }
  static getDerivedStateFromError(error) {
    return { error };
  }
  componentDidCatch(error, info) {
    // Log para diagnóstico en consola del navegador
    console.error("[ErrorBoundary]", error, info);
  }
  reintentar = () => this.setState({ error: null });
  render() {
    if (this.state.error) {
      return (
        <div style={{ padding: 40, display: "flex", flexDirection: "column",
                      alignItems: "center", justifyContent: "center", height: "100%",
                      textAlign: "center", color: "#475569" }}>
          <div style={{ fontSize: 40, marginBottom: 12 }}>⚠️</div>
          <div style={{ fontSize: 17, fontWeight: 700, color: "#0f172a", marginBottom: 6 }}>
            Ocurrió un problema al mostrar esta sección
          </div>
          <div style={{ fontSize: 13.5, marginBottom: 18, maxWidth: 420, lineHeight: 1.5 }}>
            El resto del dashboard sigue funcionando. Puedes reintentar o cambiar de apartado.
          </div>
          <button onClick={this.reintentar}
            style={{ height: 40, padding: "0 20px", border: "none", background: "#2563eb",
                     borderRadius: 9, fontSize: 14, fontWeight: 700, color: "#fff", cursor: "pointer" }}>
            Reintentar
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}
