// error-boundary.jsx — catches any render-time crash so the app NEVER shows a
// blank screen requiring a manual refresh. Shows a recoverable error instead.
class ErrorBoundary extends React.Component {
  constructor(props) { super(props); this.state = { error: null }; }
  static getDerivedStateFromError(error) { return { error }; }
  componentDidCatch(error, info) { console.error("[ui-error]", error && error.message, info && info.componentStack); }
  render() {
    if (!this.state.error) return this.props.children;
    const msg = String(this.state.error.message || this.state.error);
    return (
      <div style={{ minHeight: "100vh", display: "grid", placeItems: "center", background: "var(--bg-2)", padding: 24 }}>
        <div style={{ maxWidth: 460, textAlign: "center", background: "#fff", border: "1px solid var(--border-1)", borderRadius: 16, boxShadow: "var(--shadow-lg)", padding: 28 }}>
          <div style={{ width: 52, height: 52, borderRadius: 14, background: "var(--color-danger-soft)", color: "var(--color-danger)", display: "grid", placeItems: "center", margin: "0 auto 14px" }}>
            <Icon name="alert" size={26} />
          </div>
          <div style={{ fontWeight: 800, fontSize: 17, marginBottom: 6 }}>This screen hit an error</div>
          <p style={{ fontSize: 13, color: "var(--fg-3)", lineHeight: 1.5, marginBottom: 18 }}>The rest of the app is fine — no need to refresh. You can go back and continue.</p>
          <div style={{ fontFamily: "monospace", fontSize: 11.5, color: "var(--fg-4)", background: "var(--bg-2)", borderRadius: 8, padding: "8px 10px", marginBottom: 18, wordBreak: "break-word" }}>{msg}</div>
          <div className="row" style={{ gap: 10, justifyContent: "center" }}>
            <button className="btn btn--primary" onClick={() => this.setState({ error: null })}>Back to the app</button>
            <button className="btn btn--ghost" onClick={() => location.reload()}>Reload</button>
          </div>
        </div>
      </div>
    );
  }
}
window.ErrorBoundary = ErrorBoundary;