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

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, message: "" };
  }
  static getDerivedStateFromError(error) {
    return { hasError: true, message: error?.message || "Unknown application error" };
  }
  componentDidCatch(error, info) {
    console.error("NepKits Hub runtime error:", error, info);
  }
  render() {
    if (this.state.hasError) {
      return (
        <div style={{minHeight:"100vh",display:"grid",placeItems:"center",background:"#f7f7f4",padding:"24px",fontFamily:"system-ui"}}>
          <div style={{maxWidth:"560px",background:"#fff",border:"1px solid #eadfd5",borderRadius:"18px",padding:"28px",boxShadow:"0 20px 60px rgba(0,0,0,.08)"}}>
            <div style={{fontSize:"11px",fontWeight:800,color:"#f97316",letterSpacing:".14em",textTransform:"uppercase"}}>NepKits Hub</div>
            <h1 style={{margin:"8px 0",fontSize:"28px"}}>The store hit a runtime error</h1>
            <p style={{color:"#6f6a65",lineHeight:1.6}}>The site loaded, but the application could not finish starting. Refresh once. If the message remains, this error details what failed:</p>
            <code style={{display:"block",padding:"12px",background:"#faf7f3",borderRadius:"10px",color:"#8c3a17",whiteSpace:"pre-wrap",wordBreak:"break-word"}}>{this.state.message}</code>
          </div>
        </div>
      );
    }
    return this.props.children;
  }
}

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