'use client';

import { useEffect } from 'react';
import { useTranslations } from 'next-intl';
import { Button, Heading } from '@/components/ui';
import { Terminal, Search, Home, Mail, Activity, Cpu } from 'lucide-react';
import { m } from 'framer-motion';
import ClientNotFoundTracker from '@/components/analytics/ClientNotFoundTracker';

export default function NotFound() {
  const t = useTranslations('Error.notFound');

  useEffect(() => {
    // Force standard solid header
    document.body.setAttribute('data-header-variant', 'standard');
    return () => {
      document.body.removeAttribute('data-header-variant');
    };
  }, []);

  return (
    <div className="relative min-h-screen flex flex-col items-center justify-center overflow-hidden bg-[#050B14] py-24 px-4">
      <ClientNotFoundTracker path="" />
      
      {/* Industrial Blueprint Background */}
      <div className="absolute inset-0 opacity-[0.03] pointer-events-none">
        <div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff_1px,transparent_1px),linear-gradient(to_bottom,#ffffff_1px,transparent_1px)] bg-[size:100px_100px]" />
        <div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff_1px,transparent_1px),linear-gradient(to_bottom,#ffffff_1px,transparent_1px)] bg-[size:20px_20px]" />
      </div>

      {/* Decorative Technical Annotations */}
      <div className="absolute inset-0 pointer-events-none overflow-hidden select-none">
        <div className="absolute top-40 left-10 text-[10px] font-mono text-primary/30 uppercase tracking-[0.2em] rotate-90 origin-left">
          Discovery_Service :: Failure
        </div>
        <div className="absolute bottom-40 right-10 text-[10px] font-mono text-primary/30 uppercase tracking-[0.2em] -rotate-90 origin-right">
          Address_Resolution :: 0x404
        </div>
        <div className="absolute top-1/4 left-20 w-32 h-px bg-primary/20" />
        <div className="absolute top-1/4 left-20 w-px h-32 bg-primary/20" />
      </div>
      
      {/* Background Glow */}
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-primary/10 blur-[150px] rounded-full pointer-events-none animate-pulse" />

      <div className="relative z-10 w-full max-w-4xl mx-auto flex flex-col items-center">
        {/* 404 Visual */}
        <div className="relative mb-12">
          <m.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="relative"
          >
            <h1 className="text-[12rem] md:text-[18rem] font-heading font-black leading-none select-none">
              <span className="relative inline-block text-transparent bg-clip-text bg-gradient-to-b from-white to-white/5 drop-shadow-[0_0_50px_rgba(var(--color-primary),0.15)]">
                404
                {/* Glitch Layers */}
                <span className="absolute inset-0 text-primary/30 translate-x-[2px] -translate-y-[1px] mix-blend-screen animate-pulse pointer-events-none">404</span>
                <span className="absolute inset-0 text-blue-500/20 -translate-x-[2px] translate-y-[1px] mix-blend-screen animate-pulse pointer-events-none">404</span>
              </span>
            </h1>
            
            {/* Search Scan Overlay */}
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
              <m.div
                animate={{ 
                  scale: [1, 1.1, 1],
                  opacity: [0.5, 1, 0.5]
                }}
                transition={{ duration: 3, repeat: Infinity }}
                className="p-5 rounded-full bg-primary/20 border border-primary/40 backdrop-blur-md shadow-[0_0_40px_rgba(var(--color-primary),0.3)]"
              >
                <Search className="w-10 h-10 text-primary" />
              </m.div>
            </div>
          </m.div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-12 gap-12 w-full items-start">
          {/* Main Content */}
          <div className="md:col-span-7 text-center md:text-left">
            <div className="inline-flex items-center gap-3 px-4 py-2 mb-6 rounded-lg bg-primary/10 border border-primary/20 text-[10px] font-mono uppercase tracking-widest text-primary">
              <Cpu className="w-4 h-4 animate-spin-slow" />
              OBJECT_NOT_FOUND :: SCAN_COMPLETE
            </div>

            <Heading level={1} className="text-3xl md:text-5xl font-bold mb-6 text-white leading-tight">
              {t('title')}
            </Heading>

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

            <div className="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
              <Button 
                href="/" 
                variant="primary" 
                className="group h-14 px-10 shadow-[0_0_30px_rgba(var(--color-primary),0.2)] hover:shadow-primary/40 transition-all"
              >
                <Home className="w-5 h-5 mr-3" />
                {t('cta')}
              </Button>
              <Button 
                href="/kontakt" 
                variant="outline" 
                className="h-14 px-8 border-white/10 text-white hover:bg-white/5"
              >
                <Mail className="w-5 h-5 mr-3" />
                Support kontaktieren
              </Button>
            </div>
          </div>

          {/* Technical Log Terminal */}
          <div className="md:col-span-5">
            <div className="bg-black/40 backdrop-blur-xl border border-white/10 rounded-2xl overflow-hidden shadow-2xl">
              <div className="bg-white/5 px-4 py-2 border-b border-white/10 flex items-center justify-between">
                <div className="flex gap-1.5">
                  <div className="w-2.5 h-2.5 rounded-full bg-primary/50" />
                  <div className="w-2.5 h-2.5 rounded-full bg-white/20" />
                  <div className="w-2.5 h-2.5 rounded-full bg-white/10" />
                </div>
                <div className="text-[10px] font-mono text-white/30 tracking-wider">DISCOVERY_LOG</div>
              </div>
              <div className="p-6 font-mono text-xs leading-relaxed overflow-hidden h-[220px]">
                <div className="text-primary/70 mb-1">[SCAN] Initializing sector sweep...</div>
                <div className="text-white/40 mb-1">[INFO] Indexing available nodes...</div>
                <div className="text-primary/50 mb-1 animate-pulse">[INFO] Searching for: {typeof window !== 'undefined' ? window.location.pathname : 'unknown_resource'}</div>
                <div className="text-red-400/80 mb-1 mt-4">[WARN] Resource 404: Not found in current branch</div>
                <div className="text-white/30 mb-1">[INFO] Redirecting to fallback_strategy...</div>
                <div className="text-primary/70 mt-4 animate-[pulse_1.5s_infinite]">_ Ready for manual redirect...</div>
              </div>
              <div className="bg-primary/10 p-3 flex items-center gap-3">
                <Activity className="w-4 h-4 text-primary" />
                <div className="text-[10px] font-bold text-primary uppercase tracking-tighter">Status: Resolution_Failed</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}