import { AlertTriangle, RefreshCw } from "lucide-react";
import { Component, type ErrorInfo, type ReactNode } from "react";

import { Button } from "@/client/components/ui/button";

interface Props {
  children: ReactNode;
  // Used by route-level boundaries to reset on navigation. When the key
  // changes, the boundary remounts and clears its captured error.
  resetKey?: string;
}

interface State {
  error: Error | null;
}

// Class component because React's error-boundary contract still lives on
// componentDidCatch / getDerivedStateFromError. Wraps the route Outlet
// in app-shell so a runtime exception in any page renders a recoverable
// surface instead of blanking the whole app.
export class ErrorBoundary extends Component<Props, State> {
  state: State = { error: null };

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

  componentDidCatch(error: Error, info: ErrorInfo): void {
    // Surface in the dev console so the stack is reachable; production
    // observability can hook here if/when we add a reporter.
    console.error("[error-boundary]", error, info.componentStack);
  }

  componentDidUpdate(prev: Props): void {
    if (prev.resetKey !== this.props.resetKey && this.state.error) {
      this.setState({ error: null });
    }
  }

  render(): ReactNode {
    if (!this.state.error) return this.props.children;
    return (
      <div className="mx-auto max-w-md py-12">
        <div className="rounded-2xl border border-red-500/30 bg-red-500/5 p-6">
          <div className="mb-3 flex items-center gap-2 text-red-400">
            <AlertTriangle className="h-5 w-5" aria-hidden="true" />
            <h1 className="font-display text-lg font-semibold">Something went wrong</h1>
          </div>
          <p className="mb-4 text-sm text-zinc-400">
            This page hit an unexpected error. The details below are useful when reporting the issue.
          </p>
          <pre className="mb-4 max-h-48 overflow-auto rounded-lg bg-zinc-900/80 p-3 font-mono text-xs text-zinc-300">
            {this.state.error.message}
          </pre>
          <div className="flex gap-2">
            <Button variant="secondary" size="sm" onClick={() => this.setState({ error: null })}>
              <RefreshCw className="h-3.5 w-3.5" aria-hidden="true" />
              Try again
            </Button>
            <Button
              variant="ghost"
              size="sm"
              onClick={() => {
                window.location.href = "/";
              }}
            >
              Go home
            </Button>
          </div>
        </div>
      </div>
    );
  }
}