'use client';

import { useEffect } from 'react';
import Link from 'next/link';
import { AlertTriangle, RefreshCw, Home } from 'lucide-react';

interface ErrorProps {
  error: Error & { digest?: string };
  reset: () => void;
}

export default function GlobalError({ error, reset }: ErrorProps) {
  useEffect(() => {
    // Log to monitoring service (e.g. Sentry) in production
    console.error('[GlobalError]', error);
  }, [error]);

  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
      <div className="text-center max-w-md">
        <div className="inline-flex items-center justify-center w-16 h-16 bg-red-50 rounded-2xl mb-6">
          <AlertTriangle className="w-8 h-8 text-red-500" />
        </div>

        <h1 className="text-2xl font-title font-bold text-gray-900 mb-2">
          Terjadi Kesalahan
        </h1>
        <p className="text-gray-500 text-sm leading-relaxed mb-2">
          Sesuatu yang tidak terduga terjadi. Tim kami telah diberitahu dan
          sedang menangani masalah ini.
        </p>

        {process.env.NODE_ENV === 'development' && error.message && (
          <pre className="mt-3 mb-6 text-left text-xs bg-gray-900 text-red-400 p-4 rounded-xl overflow-auto max-h-40 whitespace-pre-wrap">
            {error.message}
            {error.stack && '\n\n' + error.stack}
          </pre>
        )}

        <div className="flex flex-col sm:flex-row items-center justify-center gap-3 mt-6">
          <button
            onClick={reset}
            className="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold px-5 py-2.5 rounded-xl text-sm transition-colors"
          >
            <RefreshCw className="w-4 h-4" />
            Coba Lagi
          </button>
          <Link
            href="/"
            className="inline-flex items-center gap-2 border border-gray-200 hover:border-gray-300 text-gray-700 font-semibold px-5 py-2.5 rounded-xl text-sm transition-colors"
          >
            <Home className="w-4 h-4" />
            Ke Beranda
          </Link>
        </div>

        {error.digest && (
          <p className="mt-6 text-xs text-gray-400">
            Error ID:{' '}
            <code className="font-mono bg-gray-100 px-1.5 py-0.5 rounded">
              {error.digest}
            </code>
          </p>
        )}
      </div>
    </div>
  );
}