
/**
 * Global Error Page
 * Uses enhanced error boundary for better UX
 */

'use client';

import { useEffect } from 'react';
import { AlertCircle, RefreshCcw, Home } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { errorLogger } from '@/lib/error-logger';

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Log error when component mounts
    errorLogger.log(error, 'global-error-page', 'high', {
      digest: error.digest,
    });
  }, [error]);

  return (
    <div className="min-h-screen flex items-center justify-center p-4 bg-gray-50">
      <Card className="max-w-2xl w-full p-8">
        <div className="text-center">
          {/* Icon */}
          <div className="inline-flex items-center justify-center w-16 h-16 bg-red-100 rounded-full mb-6">
            <AlertCircle className="h-8 w-8 text-red-600" />
          </div>
          
          {/* Title */}
          <h1 className="text-3xl font-bold text-gray-900 mb-3">
            Something went wrong!
          </h1>
          
          {/* Description */}
          <p className="text-gray-600 mb-2">
            We encountered an unexpected error while loading this page.
          </p>
          <p className="text-sm text-gray-500 mb-8">
            Our team has been notified and we're working to fix this issue.
          </p>

          {/* Error Message (in development) */}
          {process.env.NODE_ENV === 'development' && (
            <div className="mb-6 p-4 bg-gray-100 rounded-lg text-left">
              <p className="text-sm font-mono text-gray-800 break-all">
                <strong>Error:</strong> {error.message}
              </p>
              {error.digest && (
                <p className="text-xs text-gray-600 mt-2">
                  <strong>Digest:</strong> {error.digest}
                </p>
              )}
            </div>
          )}

          {/* Action Buttons */}
          <div className="flex flex-col sm:flex-row gap-3 justify-center">
            <Button
              onClick={reset}
              variant="default"
              className="gap-2"
            >
              <RefreshCcw className="h-4 w-4" />
              Try Again
            </Button>

            <Button
              onClick={() => (window.location.href = '/')}
              variant="outline"
              className="gap-2"
            >
              <Home className="h-4 w-4" />
              Go Home
            </Button>
          </div>

          {/* Support Message */}
          <p className="text-sm text-gray-500 mt-8">
            Need help? Contact us at{' '}
            <a 
              href="mailto:support@quote2contract.com" 
              className="text-emerald-600 hover:underline"
            >
              support@quote2contract.com
            </a>
          </p>
        </div>
      </Card>
    </div>
  );
}
