/* React error boundary for the design prototype. Wraps each screen so a
   single broken component doesn't blank the shell. */

class CinematonErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null, info: null };
  }
  static getDerivedStateFromError(error) { return { error }; }
  componentDidCatch(error, info) {
    this.setState({ info });
    if (window.console) console.error('[cinematon] screen error', error, info);
  }
  reset = () => this.setState({ error: null, info: null });

  render() {
    if (this.state.error) {
      return (
        <div className="ll-body" style={{padding: 32}}>
          <div className="ll-block">
            <div className="ll-block-title">Screen error</div>
            <div style={{color:'var(--fg)', marginBottom: 8}}>{String(this.state.error.message || this.state.error)}</div>
            {this.state.info && (
              <pre style={{fontFamily:'var(--font-mono)', fontSize:11, color:'var(--fg-muted)', whiteSpace:'pre-wrap', maxHeight:200, overflow:'auto'}}>
                {this.state.info.componentStack}
              </pre>
            )}
            <div className="ll-actions">
              <button className="ll-btn" onClick={this.reset}>Retry</button>
              <button className="ll-btn primary" onClick={() => window.location.reload()}>Reload page</button>
            </div>
          </div>
        </div>
      );
    }
    return this.props.children;
  }
}

window.CinematonErrorBoundary = CinematonErrorBoundary;