'use client';

import { useEffect } from 'react';
import { useTranslations } from 'next-intl';
import { getAppServices } from '@/lib/services/create-services';
import { Container, Button, Heading } from '@/components/ui';
import Scribble from '@/components/Scribble';

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  const t = useTranslations('Error');

  useEffect(() => {
    // Treat "Failed to find Server Action" as a deployment sync issue and reload
    if (error?.message?.includes('Failed to find Server Action')) {
      window.location.reload();
      return;
    }

    const services = getAppServices();
    services.errors.captureException(error);
    services.logger.error('Application error caught by boundary', {
      message: error?.message || 'Unknown error',
      stack: error?.stack,
      digest: error?.digest,
    });
    
    // Force solid header
    document.body.setAttribute('data-force-solid-header', 'true');
    return () => {
      document.body.removeAttribute('data-force-solid-header');
    };
  }, [error]);

  return (
    <>
      <div className="relative min-h-[80vh] flex flex-col items-center justify-center overflow-hidden bg-[#050B14] py-24 px-4 mt-16">
        {/* Deep Tech Grid Background */}
        <div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)] pointer-events-none" />
        
        {/* Glowing Orb */}
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-red-500/20 blur-[120px] rounded-full pointer-events-none" />

        <div className="relative z-10 w-full max-w-2xl mx-auto">
          <div className="group relative bg-[#050B14]/80 backdrop-blur-xl rounded-[2.5rem] p-12 md:p-16 border border-white/10 shadow-2xl overflow-hidden text-center">
            {/* Inner Shimmer */}
            <div className="absolute inset-0 bg-gradient-to-br from-white/[0.05] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
            
            <div className="relative mb-8">
              <h1 className="text-8xl md:text-9xl font-heading font-black text-transparent bg-clip-text bg-gradient-to-b from-white to-white/20 drop-shadow-[0_0_30px_rgba(255,255,255,0.1)]">
                500
              </h1>
              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-1 bg-red-500/40 blur-md skew-y-[-10deg]" />
              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-px bg-red-500 skew-y-[-10deg] shadow-[0_0_15px_rgba(239,68,68,1)]" />
            </div>

            <div className="inline-flex items-center gap-3 px-4 py-1.5 mb-6 rounded-full bg-red-500/10 border border-red-500/20 text-xs font-bold uppercase tracking-wider text-red-400">
              <span className="w-2 h-2 rounded-full bg-red-500 animate-[ping_2s_infinite] shadow-[0_0_10px_rgba(239,68,68,0.8)]" />
              SYSTEM PROTOCOL: CRITICAL ERROR
            </div>

            <Heading level={2} className="text-2xl md:text-3xl font-bold mb-4 text-white">
              {t('title')}
            </Heading>

            <p className="text-white/60 mb-10 max-w-md text-lg mx-auto leading-relaxed">
              {t('description')}
            </p>

            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button onClick={() => reset()} variant="primary" className="shadow-[0_0_20px_rgba(var(--color-primary),0.3)]">
                {t('tryAgain')}
              </Button>
              <Button href="/" variant="outline" className="border-white/20 text-white hover:bg-white/5">
                {t('goHome')}
              </Button>
            </div>
          </div>
          
          {/* Decorative Base Line */}
          <div className="w-full flex justify-center mt-12 opacity-50">
            <div className="w-px h-24 bg-gradient-to-t from-red-500/50 to-transparent" />
          </div>
        </div>
      </div>
    </>
  );
}
