// Error boundary around the map. Prevents a single deck.gl / three.js crash
// from whitescreening the whole app — shows a minimal fallback with a reload.

class MapErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }
  static getDerivedStateFromError(error) {
    return { hasError: true, error: error };
  }
  componentDidCatch(error, info) {
    // Keep the console signal — don't swallow silently
    console.error('[MapErrorBoundary]', error, info);
  }
  render() {
    if (this.state.hasError) {
      return (
        <div style={{
          position:'absolute', inset:0, display:'grid', placeItems:'center',
          background:'var(--bg)', color:'var(--fg)', fontFamily:"'JetBrains Mono',monospace",
          padding:24, textAlign:'center'
        }}>
          <div style={{ maxWidth:420 }}>
            <div style={{ fontSize:11, letterSpacing:'0.14em', opacity:0.55, marginBottom:14 }}>
              MAP RENDERER CRASHED
            </div>
            <div style={{ fontSize:13, lineHeight:1.6, opacity:0.85, marginBottom:20 }}>
              Something went wrong rendering the map. Your currency preferences are safe.
            </div>
            <button
              onClick={function(){ window.location.reload(); }}
              style={{
                fontFamily:"'JetBrains Mono',monospace", fontSize:11, letterSpacing:'0.14em',
                padding:'8px 16px', background:'transparent', color:'var(--fg)',
                border:'1px solid var(--line)', cursor:'pointer'
              }}>
              RELOAD
            </button>
          </div>
        </div>
      );
    }
    return this.props.children;
  }
}

window.MapErrorBoundary = MapErrorBoundary;