'use client'

import { useEffect } from 'react'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { 
  AlertTriangle, 
  Home, 
  RefreshCw,
  Mail,
  Bug
} from 'lucide-react'

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error('Application error:', error)
  }, [error])

  return (
    <div className="min-h-screen bg-gradient-to-br from-red-50 to-orange-100 flex items-center justify-center p-4">
      <div className="max-w-md w-full">
        <Card className="shadow-xl">
          <CardHeader className="text-center pb-2">
            <div className="mx-auto w-20 h-20 bg-red-100 rounded-full flex items-center justify-center mb-4">
              <AlertTriangle className="w-10 h-10 text-red-600" />
            </div>
            <CardTitle className="text-2xl font-bold text-gray-900">
              Terjadi Kesalahan
            </CardTitle>
            <CardDescription className="text-gray-600 mt-2">
              Maaf, terjadi kesalahan yang tidak terduga pada sistem.
            </CardDescription>
          </CardHeader>
          
          <CardContent className="space-y-4">
            <div className="bg-red-50 border border-red-200 rounded-lg p-4">
              <h3 className="font-semibold text-sm text-red-800 mb-2 flex items-center">
                <Bug className="w-4 h-4 mr-2" />
                Detail Kesalahan:
              </h3>
              <p className="text-sm text-red-700">
                {error.message || 'Terjadi kesalahan internal server'}
              </p>
              {error.digest && (
                <p className="text-xs text-red-600 mt-2">
                  Error ID: {error.digest}
                </p>
              )}
            </div>

            <div className="bg-gray-50 rounded-lg p-4">
              <h3 className="font-semibold text-sm text-gray-700 mb-2">
                Yang dapat Anda lakukan:
              </h3>
              <ul className="text-sm text-gray-600 space-y-1">
                <li>• Refresh halaman dan coba lagi</li>
                <li>• Periksa koneksi internet Anda</li>
                <li>• Coba akses halaman lain</li>
                <li>• Hubungi administrator jika masalah berlanjut</li>
              </ul>
            </div>

            <div className="flex flex-col sm:flex-row gap-3">
              <Button onClick={reset} className="flex-1">
                <RefreshCw className="w-4 h-4 mr-2" />
                Coba Lagi
              </Button>
              
              <a href="/" className="flex-1">
                <Button variant="outline" className="w-full">
                  <Home className="w-4 h-4 mr-2" />
                  Kembali ke Beranda
                </Button>
              </a>
            </div>

            <div className="text-center pt-4 border-t">
              <p className="text-sm text-gray-600 mb-2">
                Masih mengalami masalah?
              </p>
              <a href="mailto:support@polres-wonosobo.com">
                <Button variant="ghost" size="sm">
                  <Mail className="w-4 h-4 mr-2" />
                  Hubungi Support
                </Button>
              </a>
            </div>
          </CardContent>
        </Card>

        <div className="text-center mt-6">
          <p className="text-sm text-gray-500">
            © {new Date().getFullYear()} Polres Wonosobo - Sistem Layanan Digital
          </p>
        </div>
      </div>
    </div>
  )
}