import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }
  componentDidCatch(error, info) {
    console.error("App error:", error, info);
  }
  render() {
    if (this.state.hasError) {
      return (
        <div style={{
          minHeight: "100vh", background: "#fff", color: "#0f172a",
          display: "flex", flexDirection: "column", alignItems: "center",
          justifyContent: "center", fontFamily: "monospace", padding: "2rem", gap: "1rem",
        }}>
          <p style={{ color: "#d97706", fontSize: "11px", letterSpacing: "0.3em", textTransform: "uppercase" }}>
            Runtime Error
          </p>
          <pre style={{
            background: "#f8fafc", border: "1px solid #e2e8f0", padding: "1.5rem",
            fontSize: "12px", maxWidth: "600px", overflow: "auto", lineHeight: 1.6, borderRadius: "4px",
          }}>
            {this.state.error?.toString()}
          </pre>
          <button
            onClick={() => this.setState({ hasError: false, error: null })}
            style={{
              background: "none", border: "1px solid #d97706", color: "#d97706",
              padding: "8px 20px", cursor: "pointer", fontFamily: "monospace",
              fontSize: "11px", letterSpacing: "0.2em",
            }}
          >
            RETRY
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

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