import { Component, StrictMode, type ReactNode } from 'react';
import { createRoot } from 'react-dom/client';
import '@fontsource/vazirmatn/400.css';
import '@fontsource/vazirmatn/500.css';
import '@fontsource/vazirmatn/600.css';
import '@fontsource/vazirmatn/700.css';
import '@fontsource/vazirmatn/800.css';
import App from './App.tsx';
import './index.css';

interface ErrorBoundaryProps {
  children: ReactNode;
}

interface ErrorBoundaryState {
  hasError: boolean;
}

class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
  state: ErrorBoundaryState = { hasError: false };

  static getDerivedStateFromError(): ErrorBoundaryState {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return (
        <main dir="rtl" style={{ minHeight: '100vh', display: 'grid', placeItems: 'center', padding: 24, background: '#FAF9F6', color: '#5B3000', fontFamily: 'Vazirmatn, sans-serif' }}>
          <section style={{ maxWidth: 520, textAlign: 'center' }}>
            <h1 style={{ fontSize: 28, marginBottom: 12 }}>نمایش سایت با مشکل روبه‌رو شد</h1>
            <p style={{ lineHeight: 2, color: '#66462C' }}>پیش‌نمایش را یک‌بار تازه‌سازی کنید. اگر مشکل ادامه داشت، خطای نمایش را از بخش خطاها بررسی کنید.</p>
            <button onClick={() => window.location.reload()} style={{ marginTop: 20, border: 0, borderRadius: 999, padding: '12px 24px', background: '#5B3000', color: '#fff', cursor: 'pointer', fontFamily: 'inherit' }}>
              تازه‌سازی صفحه
            </button>
          </section>
        </main>
      );
    }

    return this.props.children;
  }
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ErrorBoundary>
      <App />
    </ErrorBoundary>
  </StrictMode>
);