// React error boundary. Catches render-tree exceptions, ships them to
// Sentry via window.apCaptureError, and renders a Win95-themed fatal
// screen with a retry that resets the boundary's error state.
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
  }
  static getDerivedStateFromError(error) {
    return { error };
  }
  componentDidCatch(error, info) {
    if (typeof window.apCaptureError === 'function') {
      window.apCaptureError(error, {
        boundary: 'root',
        componentStack: info && info.componentStack,
      });
    }
  }
  render() {
    if (!this.state.error) return this.props.children;
    const retry = () => this.setState({ error: null });
    const reload = () => { try { location.reload(); } catch (_) {} };
    return (
      <div className="boot-screen" style={{
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
        position: 'absolute', inset: 0,
      }}>
        <div style={{
          fontSize: 26, color: '#ff3eb5', letterSpacing: '0.2em',
          fontWeight: 'bold', marginBottom: 12, textAlign: 'center',
          textShadow: '0 0 12px #ff3eb5, 2px 2px 0 #6a2bd9',
        }}>
          ＦＡＴＡＬ ＥＸＣＥＰＴＩＯＮ
        </div>
        <pre style={{
          color: '#9cf09c', fontSize: 11, lineHeight: 1.4,
          margin: 0, marginBottom: 16, textAlign: 'left',
        }}>
{`> a process has performed an
>   illegal operation in ASTRAL.95
> the kernel has been notified
> retry? [Y/n]`}
        </pre>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="w95-btn" onClick={retry}
            style={{ padding: '6px 18px', fontSize: 12, fontWeight: 'bold',
              background: '#ff3eb5', color: '#fff', cursor: 'pointer' }}>
            RETRY →
          </button>
          <button className="w95-btn" onClick={reload}
            style={{ padding: '6px 14px', fontSize: 12, cursor: 'pointer' }}>
            REBOOT
          </button>
        </div>
        <div style={{ color: '#666', fontSize: 9, marginTop: 12, maxWidth: 320, textAlign: 'center' }}>
          if this keeps happening, refresh or clear cache.
          report at hello@astralproject.in
        </div>
      </div>
    );
  }
}
window.ErrorBoundary = ErrorBoundary;