// PaneBoundary — ErrorBoundary scoped to one Shell pane. A crash in
// the Conversation component shouldn't black-out the whole window; it
// should leave NavBar + List + StatusBar usable so the operator can
// switch sections and report the bug. Resets when the keyed section
// changes.

import React from 'react';

interface Props {
  /** Used as React key at the callsite; also shown in the panic copy. */
  sectionName: string;
  children: React.ReactNode;
}

interface State {
  error: Error | null;
}

export class PaneBoundary extends React.Component<Props, State> {
  state: State = { error: null };

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

  componentDidCatch(error: Error, info: React.ErrorInfo): void {
    console.error(`[PaneBoundary:${this.props.sectionName}]`, error, info);
  }

  render(): React.ReactNode {
    if (!this.state.error) return this.props.children;
    return (
      <div style={{
        padding: 20, height: '100%', overflow: 'auto',
        background: '#000', color: '#fff', fontFamily: 'monospace',
      }}>
        <div style={{
          color: '#ff6b6b', fontSize: 14, fontWeight: 700, marginBottom: 8,
        }}>
          {this.props.sectionName} crashed
        </div>
        <div style={{ color: '#fff', fontSize: 13, marginBottom: 8 }}>
          {this.state.error.message}
        </div>
        <pre style={{
          color: '#8b8b8b', fontSize: 11, lineHeight: 1.4,
          whiteSpace: 'pre-wrap', wordBreak: 'break-word',
        }}>
          {this.state.error.stack}
        </pre>
        <button
          onClick={() => this.setState({ error: null })}
          style={{
            marginTop: 10, padding: '6px 12px', borderRadius: 999,
            border: '1px solid #1f1f1f', background: '#111',
            color: '#fff', fontSize: 12, cursor: 'pointer',
          }}
        >Retry</button>
      </div>
    );
  }
}