import React from 'react'

interface Props {
  children: React.ReactNode
}
interface State {
  error: Error | null
}

/**
 * Top-level renderer error boundary (M16). Before this, an exception thrown in
 * render by any view unmounted the whole shell to a blank white window with no
 * way out. This catches it, logs it (so it reaches the dev console / future log
 * sink), and shows a recover affordance.
 *
 * The fallback is intentionally dependency-free — no Fluent components, no theme
 * provider — because the error may have come from inside that very tree. It paints
 * its own full-window dark surface (matching the app's dark charcoal + toffee
 * accent) rather than reading theme tokens, so it renders identically regardless
 * of the active theme and uses only inline CSS that can't itself throw.
 */
export class ErrorBoundary 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('[AeroFetch] renderer crashed:', error, info.componentStack)
  }

  private handleReload = (): void => {
    // A full reload re-runs the renderer from a clean state; persisted data
    // (settings/history/sources) lives in main, so nothing is lost.
    window.location.reload()
  }

  render(): React.ReactNode {
    const { error } = this.state
    if (!error) return this.props.children

    return (
      <div
        role="alert"
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          gap: 16,
          minHeight: '100vh',
          padding: 32,
          textAlign: 'center',
          fontFamily: 'Segoe UI, system-ui, sans-serif',
          color: '#c8c6c4',
          background: '#201f1e'
        }}
      >
        <div style={{ fontSize: 18, fontWeight: 600, color: '#f3f2f1' }}>Something went wrong</div>
        <div style={{ maxWidth: 440, fontSize: 13, lineHeight: 1.5 }}>
          AeroFetch hit an unexpected error and couldn’t continue. Your downloads and settings are
          saved — reloading the window should bring you back.
        </div>
        <pre
          style={{
            maxWidth: 480,
            maxHeight: 120,
            overflow: 'auto',
            margin: 0,
            padding: '8px 12px',
            fontSize: 11,
            textAlign: 'left',
            color: '#d29ca0',
            background: '#2b2a29',
            borderRadius: 6
          }}
        >
          {error.message || String(error)}
        </pre>
        <button
          type="button"
          onClick={this.handleReload}
          style={{
            padding: '8px 20px',
            fontSize: 14,
            fontWeight: 600,
            color: '#1c1611',
            background: '#b5917d',
            border: 'none',
            borderRadius: 8,
            cursor: 'pointer'
          }}
        >
          Reload AeroFetch
        </button>
      </div>
    )
  }
}
