import { Component, type ErrorInfo, type ReactNode } from "react";
import { withTranslation, type WithTranslation } from "react-i18next";
import { Button } from "@/components/ui/button";

interface Props extends WithTranslation {
  children: ReactNode;
}

interface State {
  error: Error | null;
}

/**
 * Ловит непойманные ошибки рендера где угодно в дереве ниже — без неё любой
 * баг в компоненте (например, неожиданный ответ бэкенда, на который никто не
 * рассчитывал) валит всё приложение в белый экран без единого сообщения.
 * React error boundary обязан быть классовым компонентом — хуки этого не умеют.
 */
class ErrorBoundaryImpl extends Component<Props, State> {
  state: State = { error: null };

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

  componentDidCatch(error: Error, info: ErrorInfo) {
    console.error("[ErrorBoundary] Непойманная ошибка рендера:", error, info.componentStack);
  }

  handleReload = () => {
    this.setState({ error: null });
    window.location.reload();
  };

  render() {
    const { error } = this.state;
    const { t } = this.props;

    if (!error) return this.props.children;

    return (
      <div className="fixed inset-0 flex flex-col items-center justify-center gap-4 bg-background p-6 text-center">
        <h1 className="text-lg font-semibold">{t("error_boundary_title")}</h1>
        <p className="max-w-sm text-sm text-muted-foreground">
          {t("error_boundary_desc")}
        </p>
        <Button onClick={this.handleReload}>{t("error_boundary_reload")}</Button>
      </div>
    );
  }
}

export const ErrorBoundary = withTranslation()(ErrorBoundaryImpl);
