'use client';

/* ════════════════════════════ ErrorBoundary ════════════════════════════
 * Vangt render crashes op en toont een fallback UI i.p.v. een lege pagina.
 */

import { Component, type ReactNode, type ErrorInfo } from 'react';
import { AlertCircle, RefreshCw } from 'lucide-react';

interface Props {
  children: ReactNode;
  fallback?: ReactNode;
  /** Optional: label om te tonen welk onderdeel crashed */
  label?: string;
}

interface State {
  error: Error | null;
  info: ErrorInfo | null;
}

export default class ErrorBoundary extends Component<Props, State> {
  state: State = { error: null, info: null };

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

  componentDidCatch(error: Error, info: ErrorInfo) {
    console.error(`[ErrorBoundary${this.props.label ? ` ${this.props.label}` : ''}]`, error, info);
    this.setState({ info });
  }

  handleRetry = () => {
    this.setState({ error: null, info: null });
  };

  render() {
    if (this.state.error) {
      if (this.props.fallback) return this.props.fallback;

      return (
        <div className="glass rounded-xl p-8 text-center max-w-lg mx-auto my-8">
          <AlertCircle className="w-10 h-10 text-accent-rose mx-auto mb-4" />
          <h3 className="text-surface-200 font-semibold mb-1">
            {this.props.label ? `Fout in ${this.props.label}` : 'Er ging iets mis'}
          </h3>
          <p className="text-xs text-surface-500 mb-2 max-w-sm mx-auto">
            {this.state.error.message || 'Onbekende fout'}
          </p>
          <button
            onClick={this.handleRetry}
            className="inline-flex items-center gap-2 px-5 py-2 rounded-xl bg-brand-600 hover:bg-brand-500 text-white text-sm font-medium transition-colors"
          >
            <RefreshCw className="w-4 h-4" />
            Probeer opnieuw
          </button>
        </div>
      );
    }

    return this.props.children;
  }
}