import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

class AppErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { error: null }
  }
  static getDerivedStateFromError(error) {
    return { error }
  }
  componentDidCatch(error, info) {
    console.error('[MUTQAN UI ERROR]', error, info?.componentStack || '')
  }
  render() {
    if (this.state.error) {
      return (
        <main dir="rtl" style={{minHeight:'100vh',boxSizing:'border-box',padding:'28px 18px',display:'grid',placeItems:'center',background:'#f3f8fc',color:'#102033',fontFamily:'system-ui,sans-serif'}}>
          <section style={{width:'min(100%,620px)',boxSizing:'border-box',padding:'24px',background:'#fff',border:'1px solid #dbeafe',borderRadius:'20px',boxShadow:'0 12px 36px rgba(15,60,100,.08)'}}>
            <div style={{fontSize:'13px',fontWeight:800,color:'#0369a1'}}>مُتقِن · MUTQAN</div>
            <h1 style={{fontSize:'24px',margin:'12px 0'}}>تعذّر تحميل إحدى واجهات النظام</h1>
            <p style={{lineHeight:1.8,marginBottom:'16px'}}>ظهر خطأ أثناء تشغيل الواجهة. أرسل رسالة الخطأ التالية للدعم الفني.</p>
            <pre dir="ltr" style={{whiteSpace:'pre-wrap',overflowWrap:'anywhere',padding:'12px',background:'#f8fafc',borderRadius:'10px',color:'#991b1b',fontSize:'12px'}}>{String(this.state.error?.message || this.state.error)}</pre>
            <button onClick={() => window.location.reload()} style={{border:0,borderRadius:'10px',padding:'12px 18px',background:'#0369a1',color:'#fff',fontWeight:800,cursor:'pointer'}}>إعادة تحميل الصفحة</button>
          </section>
        </main>
      )
    }
    return this.props.children
  }
}

const root = document.getElementById('root')
if (root) {
  ReactDOM.createRoot(root).render(
    <React.StrictMode>
      <AppErrorBoundary><App /></AppErrorBoundary>
    </React.StrictMode>
  )
}