import React, { Component, ErrorInfo } from "react";
import { AlertCircle, RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Props {
  children: React.ReactNode;
  sessionId: string;
  onRestart?: () => void;
}

interface State {
  hasError: boolean;
  error: Error | null;
}

/**
 * BUG-06 fix: Error boundary for terminal components
 * Catches xterm.js errors (WebGL context loss, canvas errors, etc.)
 * and displays a friendly recovery UI instead of crashing the app.
 */
export class TerminalErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

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

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error("[TerminalErrorBoundary] Terminal crashed:", {
      sessionId: this.props.sessionId,
      error: error.message,
      stack: error.stack,
      componentStack: errorInfo.componentStack,
    });
  }

  handleRestart = () => {
    this.setState({ hasError: false, error: null });
    this.props.onRestart?.();
  };

  render() {
    if (this.state.hasError) {
      return (
        <div
          className={cn(
            "flex flex-col items-center justify-center h-full w-full",
            "bg-background/95 backdrop-blur-sm",
            "p-6 text-center gap-4"
          )}
        >
          <div className="w-12 h-12 rounded-full bg-destructive/10 flex items-center justify-center">
            <AlertCircle className="w-6 h-6 text-destructive" />
          </div>
          <div className="space-y-2">
            <h3 className="text-lg font-semibold text-foreground">
              Terminal Crashed
            </h3>
            <p className="text-sm text-muted-foreground max-w-sm">
              {this.state.error?.message?.includes("WebGL")
                ? "WebGL context was lost. This can happen with GPU driver issues."
                : "An unexpected error occurred in the terminal."}
            </p>
          </div>
          <Button
            variant="outline"
            size="sm"
            onClick={this.handleRestart}
            className="gap-2"
          >
            <RefreshCw className="w-4 h-4" />
            Restart Terminal
          </Button>
          {this.state.error && (
            <details className="text-xs text-muted-foreground max-w-md">
              <summary className="cursor-pointer hover:text-foreground">
                Technical details
              </summary>
              <pre className="mt-2 p-2 bg-muted/50 rounded text-left overflow-auto max-h-32">
                {this.state.error.message}
              </pre>
            </details>
          )}
        </div>
      );
    }

    return this.props.children;
  }
}