import React, { Component, type ErrorInfo, type ReactNode } from "react";
import ReactDOM from "react-dom/client";
import { App } from "./App";
import { registerServiceWorker } from "./lib/sw";
import "./styles.css";

registerServiceWorker();

class AppErrorBoundary extends Component<{ children: ReactNode }, { failed: boolean }> {
  state = { failed: false };

  static getDerivedStateFromError() { return { failed: true }; }

  componentDidCatch(error: Error, info: ErrorInfo) {
    console.error("Endostat render error", error, info.componentStack);
  }

  render() {
    if (!this.state.failed) return this.props.children;
    return <main className="fatal-page"><section><h1>画面を読み込めませんでした</h1><p>更新データの読み込みに失敗しました。再読み込みしても改善しない場合は、ブラウザのサイトデータを削除して開き直してください。</p><button className="button primary" onClick={() => location.reload()}>再読み込み</button></section></main>;
  }
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode><AppErrorBoundary><App /></AppErrorBoundary></React.StrictMode>,
);