'use client'

import { useEffect } from 'react'
import { AlertTriangle, RefreshCw, Home } from 'lucide-react'
import { Button } from '@/components/ui/button'
import Link from 'next/link'

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

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-red-50 flex items-center justify-center p-4" dir="rtl">
      <div className="text-center max-w-md">
        <div className="relative mb-8">
          <div className="w-20 h-20 bg-red-100 rounded-2xl flex items-center justify-center mx-auto shadow-lg shadow-red-500/10">
            <AlertTriangle className="w-10 h-10 text-red-500" />
          </div>
        </div>
        <h1 className="text-2xl font-bold text-gray-900 mb-3">حدث خطأ غير متوقع</h1>
        <p className="text-gray-500 mb-6 leading-relaxed">
          نعتذر عن هذا الخلل. يمكنك إعادة المحاولة أو العودة للصفحة الرئيسية.
        </p>
        {error.digest && (
          <p className="text-xs text-gray-400 mb-6 font-mono bg-gray-100 rounded-lg px-3 py-2 inline-block">
            رمز الخطأ: {error.digest}
          </p>
        )}
        {process.env.NODE_ENV === 'development' && error.message && (
          <p className="text-xs text-red-400 mb-6 font-mono bg-red-50 rounded-lg px-3 py-2 text-right max-h-20 overflow-auto">
            {error.message}
          </p>
        )}
        <div className="flex flex-col sm:flex-row gap-3 justify-center">
          <Button onClick={reset} className="gap-2">
            <RefreshCw className="w-4 h-4" />
            إعادة المحاولة
          </Button>
          <Button variant="outline" asChild>
            <Link href="/" className="gap-2">
              <Home className="w-4 h-4" />
              الصفحة الرئيسية
            </Link>
          </Button>
        </div>
      </div>
    </div>
  )
}