import { reportClientError } from "@/lib/errorReporting";
import { Component, type ReactNode } from "react";
import { Layout } from "@/components/Layout";
import { AlertTriangle, RefreshCw } from "lucide-react";

interface Props {
  children: ReactNode;
  fallbackMessage?: string;
}

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

/**
 * L-2: Catches rendering errors and shows a friendly fallback UI
 * instead of a white screen. Works as a wrapper around page content.
 */
export class ErrorBoundary 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, info: React.ErrorInfo) {
    console.error("[ErrorBoundary]", error, info.componentStack);
    reportClientError("react", error);
  }

  handleReset = () => {
    this.setState({ hasError: false, error: null });
  };

  render() {
    if (this.state.hasError) {
      return (
        <div className="flex flex-col items-center justify-center min-h-[400px] gap-6 p-8">
          <div className="h-20 w-20 rounded-full bg-chart-red/10 border border-chart-red/20 flex items-center justify-center">
            <AlertTriangle size={32} strokeWidth={1.5} className="text-chart-red" />
          </div>
          <div className="text-center space-y-2 max-w-md">
            <h2 className="text-xl font-bold text-foreground">Something went wrong</h2>
            <p className="text-sm text-muted-foreground leading-relaxed">
              {this.props.fallbackMessage || "An unexpected error occurred while rendering this page. Please try again."}
            </p>
            {this.state.error && (
              <details className="mt-3 text-left">
                <summary className="text-xs text-muted-foreground cursor-pointer hover:text-foreground transition-colors">
                  Technical details
                </summary>
                <pre className="mt-2 p-3 bg-muted rounded-lg text-[11px] text-muted-foreground overflow-auto max-h-32 font-mono">
                  {this.state.error.message}
                </pre>
              </details>
            )}
          </div>
          <button
            onClick={this.handleReset}
            className="flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 transition-colors"
          >
            <RefreshCw size={14} strokeWidth={1.5} />
            Try Again
          </button>
        </div>
      );
    }

    return this.props.children;
  }
}