'use client'

import { useEffect } from 'react'

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    console.error('Global runtime error:', error)
  }, [error])

  return (
    <html lang="ar" dir="rtl">
      <body style={{ margin: 0, fontFamily: 'Tajawal, sans-serif', background: '#0b0b0b', color: '#f8fafc' }}>
        <main
          style={{
            minHeight: '100vh',
            display: 'grid',
            placeItems: 'center',
            padding: '24px',
          }}
        >
          <section
            style={{
              width: '100%',
              maxWidth: '640px',
              border: '1px solid rgba(255,255,255,0.14)',
              borderRadius: '16px',
              padding: '24px',
              background: 'rgba(255,255,255,0.03)',
            }}
          >
            <h1 style={{ marginTop: 0, marginBottom: '10px', fontSize: '1.4rem' }}>حدث خطأ أثناء تحميل الصفحة</h1>
            <p style={{ marginTop: 0, opacity: 0.82, lineHeight: 1.8 }}>
              تم التقاط الخطأ تلقائيًا. يمكنك إعادة المحاولة الآن.
            </p>
            <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap', marginTop: '14px' }}>
              <button
                onClick={reset}
                style={{
                  border: 0,
                  background: '#f4c430',
                  color: '#111827',
                  padding: '10px 16px',
                  borderRadius: '10px',
                  fontWeight: 700,
                  cursor: 'pointer',
                }}
              >
                إعادة المحاولة
              </button>
              <button
                onClick={() => window.location.reload()}
                style={{
                  border: '1px solid rgba(255,255,255,0.24)',
                  background: 'transparent',
                  color: '#f8fafc',
                  padding: '10px 16px',
                  borderRadius: '10px',
                  fontWeight: 700,
                  cursor: 'pointer',
                }}
              >
                تحديث الصفحة
              </button>
            </div>
          </section>
        </main>
      </body>
    </html>
  )
}
