"use client";

import { useEffect } from "react";
import Link from "next/link";

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Log error to console (Sentry temporarily disabled)
    console.error("Error boundary caught:", error);
  }, [error]);

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
      <div className="max-w-md w-full text-center">
        <div className="mb-8">
          <div className="text-6xl mb-4">⚠️</div>
          <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
            Something went wrong
          </h1>
          <p className="text-gray-600 dark:text-gray-400 mb-6">
            We apologize for the inconvenience. Our team has been notified and
            is working on a fix.
          </p>
          {process.env.NODE_ENV === "development" && (
            <details className="text-left bg-red-50 dark:bg-red-900/20 p-4 rounded-lg mb-6">
              <summary className="cursor-pointer text-red-700 dark:text-red-400 font-semibold mb-2">
                Error Details (Development Only)
              </summary>
              <pre className="text-xs text-red-600 dark:text-red-300 overflow-x-auto whitespace-pre-wrap">
                {error.message}
                {error.stack}
              </pre>
              {error.digest && (
                <p className="text-xs text-red-500 mt-2">
                  Error ID: {error.digest}
                </p>
              )}
            </details>
          )}
        </div>

        <div className="space-y-3">
          <button
            type="button"
            onClick={() => reset()}
            className="w-full bg-brand-green hover:bg-green-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors"
          >
            Try Again
          </button>

          <Link
            href="/"
            className="block w-full bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-white font-semibold py-3 px-6 rounded-lg transition-colors"
          >
            Go to Homepage
          </Link>

          <Link
            href="/en/contact"
            className="block text-brand-green hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 text-sm"
          >
            Contact Support
          </Link>
        </div>

        {error.digest && (
          <p className="mt-6 text-xs text-gray-500 dark:text-gray-400">
            Reference ID: {error.digest}
          </p>
        )}
      </div>
    </div>
  );
}