/**
 * JARVIS — Error Boundary
 * Catches unhandled React errors and shows a recovery UI.
 * Wrap around top-level components in App.jsx.
 */

import React from 'react'
import { RefreshCw, AlertTriangle } from 'lucide-react'

export default class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { hasError: false, error: null, info: null }
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error }
  }

  componentDidCatch(error, info) {
    console.error('[JARVIS ErrorBoundary]', error, info)
    this.setState({ info })
  }

  render() {
    if (!this.state.hasError) return this.props.children

    return (
      <div className="h-screen flex flex-col items-center justify-center
                      bg-jarvis-bg text-jarvis-text px-8 gap-6">
        {/* Icon */}
        <div className="w-16 h-16 rounded-2xl bg-jarvis-error/10 border border-jarvis-error/30
                        flex items-center justify-center">
          <AlertTriangle size={28} className="text-jarvis-error" />
        </div>

        {/* Message */}
        <div className="text-center">
          <h2 className="font-display text-xl font-bold text-jarvis-error tracking-wider mb-2">
            SYSTEM ERROR
          </h2>
          <p className="text-jarvis-muted text-sm max-w-md">
            An unexpected error occurred. Your conversation history is safe — refresh to restart.
          </p>
        </div>

        {/* Error details */}
        {this.state.error && (
          <div className="w-full max-w-md bg-jarvis-panel border border-jarvis-border
                          rounded-xl p-4 font-mono text-xs text-jarvis-error/80 break-all">
            {this.state.error.toString()}
          </div>
        )}

        {/* Recovery actions */}
        <div className="flex gap-3">
          <button
            onClick={() => window.location.reload()}
            className="flex items-center gap-2 btn-accent"
          >
            <RefreshCw size={14} />
            Reload JARVIS
          </button>
          <button
            onClick={() => {
              localStorage.removeItem('jarvis-store')
              window.location.reload()
            }}
            className="btn-ghost text-sm"
          >
            Clear State & Reload
          </button>
        </div>
      </div>
    )
  }
}