import React, { useState, useEffect, useRef } from 'react';
import * as THREE from 'three';
import { 
  Shield, 
  Zap, 
  Cpu, 
  ArrowRight, 
  Github, 
  Linkedin, 
  Server,
  Activity,
  Wallet,
  Lock,
  Globe
} from 'lucide-react';

// --- Componente de Fundo Three.js com Narrativa de Qualificação de Agente ---

const NeuralBackground = () => {
  const mountRef = useRef(null);
  const scrollY = useRef(0);

  useEffect(() => {
    let width = window.innerWidth;
    let height = window.innerHeight;

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
    camera.position.z = 7;

    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(width, height);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    mountRef.current.appendChild(renderer.domElement);

    // --- Cores do Protocolo ---
    const colorSpamRed = new THREE.Color(0xff1100);    // Caos/Spam
    const colorPrivilegeGreen = new THREE.Color(0x00ffab); // Prioridade x402
    const colorShieldCyan = new THREE.Color(0x00e0ff);    // Validador
    
    const mainGroup = new THREE.Group();
    scene.add(mainGroup);

    // --- Escudo (Shield) - O Validador de Classe ---
    const shieldShape = new THREE.Shape();
    shieldShape.moveTo(0, 1.4);
    shieldShape.quadraticCurveTo(1.2, 1.4, 1.2, 0.4);
    shieldShape.quadraticCurveTo(1.2, -0.8, 0, -1.4);
    shieldShape.quadraticCurveTo(-1.2, -0.8, -1.2, 0.4);
    shieldShape.quadraticCurveTo(-1.2, 1.4, 0, 1.4);
    
    const shieldGeo = new THREE.ShapeGeometry(shieldShape);
    const shieldMat = new THREE.MeshBasicMaterial({ 
      color: colorShieldCyan, 
      wireframe: true, 
      transparent: true, 
      opacity: 0.3 
    });
    const shieldMesh = new THREE.Mesh(shieldGeo, shieldMat);
    mainGroup.add(shieldMesh);

    // Chip Central (O Cérebro do Protocolo)
    const chipGeo = new THREE.BoxGeometry(0.55, 0.55, 0.25);
    const chipMat = new THREE.MeshBasicMaterial({ color: colorShieldCyan });
    const chipMesh = new THREE.Mesh(chipGeo, chipMat);
    mainGroup.add(chipMesh);

    // --- Sistema de Spam (Vermelho - Entrada Desordenada) ---
    const spamCount = 300; 
    const spamPoints = [];
    
    for (let i = 0; i < spamCount; i++) {
      spamPoints.push({
        pos: new THREE.Vector3(-15 - Math.random() * 10, (Math.random() - 0.5) * 18, (Math.random() - 0.5) * 10),
        speed: 0.04 + Math.random() * 0.05,
        noiseSeed: Math.random() * 100
      });
    }

    const spamPointsMesh = new THREE.Points(
      new THREE.BufferGeometry(),
      new THREE.PointsMaterial({ color: colorSpamRed, size: 0.07, transparent: true, opacity: 0.8 })
    );
    mainGroup.add(spamPointsMesh);

    const spamLinesMaterial = new THREE.LineBasicMaterial({ color: colorSpamRed, transparent: true, opacity: 0.1 });
    const spamLinesGeo = new THREE.BufferGeometry();
    const spamLines = new THREE.LineSegments(spamLinesGeo, spamLinesMaterial);
    mainGroup.add(spamLines);

    // --- Sistema x402 (Verde - Saída de Privilégio) ---
    const privCount = 150;
    const privPoints = [];
    for (let i = 0; i < privCount; i++) {
      privPoints.push({
        pos: new THREE.Vector3(0, 0, 0),
        speed: 0.08 + Math.random() * 0.12,
        lane: (Math.random() - 0.5) * 4,
        active: false
      });
    }

    const privPointsMesh = new THREE.Points(
      new THREE.BufferGeometry(),
      new THREE.PointsMaterial({ color: colorPrivilegeGreen, size: 0.05 })
    );
    mainGroup.add(privPointsMesh);

    const privLinesMaterial = new THREE.LineBasicMaterial({ color: colorPrivilegeGreen, transparent: true, opacity: 0.5 });
    const privLinesGeo = new THREE.BufferGeometry();
    const privLines = new THREE.LineSegments(privLinesGeo, privLinesMaterial);
    mainGroup.add(privLines);

    // --- Eventos ---
    const onScroll = () => { scrollY.current = window.scrollY; };
    window.addEventListener('scroll', onScroll);

    // --- Loop de Animação ---
    const animate = () => {
      requestAnimationFrame(animate);
      const time = Date.now() * 0.001;
      
      // Reatividade ao Scroll
      const sF = scrollY.current * 0.0015;
      mainGroup.position.y = sF * 0.4;
      mainGroup.scale.set(1 + sF * 0.15, 1 + sF * 0.15, 1 + sF * 0.15);
      mainGroup.rotation.x = sF * 0.1;

      // Animação do Escudo Validador
      shieldMesh.rotation.y = Math.sin(time * 0.4) * 0.2;
      chipMesh.rotation.z = time * 1.2;
      chipMesh.scale.setScalar(1 + Math.sin(time * 5) * 0.05); // Pulsar de processamento

      // 1. Processar Spam (Entrada)
      const spamPosArr = new Float32Array(spamCount * 3);
      const spamLinesArr = [];
      
      spamPoints.forEach((p, i) => {
        p.pos.x += p.speed;
        
        // Atração magnética para o Shield (Efeito Funil)
        const approach = Math.max(0, (15 + p.pos.x) / 15); // 1 na origem, 0 no shield
        p.pos.y *= 0.98; 
        p.pos.z *= 0.98;
        
        // Ruído de movimento desordenado
        p.pos.y += Math.sin(time + p.noiseSeed) * 0.02;

        if (p.pos.x > 0) {
          // Quando atinge o centro, "morre" no spam para renascer na esquerda
          p.pos.x = -15 - Math.random() * 10;
          p.pos.y = (Math.random() - 0.5) * 18;
          p.pos.z = (Math.random() - 0.5) * 10;
        }

        spamPosArr[i * 3] = p.pos.x;
        spamPosArr[i * 3 + 1] = p.pos.y;
        spamPosArr[i * 3 + 2] = p.pos.z;

        // Redes de spam conectadas por proximidade
        if (i % 6 === 0) {
          const next = spamPoints[(i + 1) % spamCount];
          if (p.pos.distanceTo(next.pos) < 4) {
            spamLinesArr.push(p.pos.x, p.pos.y, p.pos.z, next.pos.x, next.pos.y, next.pos.z);
          }
        }
      });

      spamPointsMesh.geometry.setAttribute('position', new THREE.BufferAttribute(spamPosArr, 3));
      spamLines.geometry.setAttribute('position', new THREE.Float32BufferAttribute(new Float32Array(spamLinesArr), 3));

      // 2. Processar Privilégio x402 (Saída)
      const privPosArr = new Float32Array(privCount * 3);
      const privLinesArr = [];

      privPoints.forEach((p, i) => {
        p.pos.x += p.speed;
        // Movimento retilíneo de alta performance
        p.pos.y = Math.sin(p.pos.x * 0.5 + i) * 0.15 + (p.lane * 0.5);

        if (p.pos.x > 18) {
          p.pos.x = 0; // Renasce do Shield
          p.pos.y = 0;
          p.pos.z = 0;
        }

        privPosArr[i * 3] = p.pos.x;
        privPosArr[i * 3 + 1] = p.pos.y;
        privPosArr[i * 3 + 2] = p.pos.z;

        // Fluxo contínuo (Privilégio)
        privLinesArr.push(p.pos.x, p.pos.y, p.pos.z, p.pos.x - 1.5, p.pos.y, p.pos.z);
      });

      privPointsMesh.geometry.setAttribute('position', new THREE.BufferAttribute(privPosArr, 3));
      privLines.geometry.setAttribute('position', new THREE.Float32BufferAttribute(new Float32Array(privLinesArr), 3));

      renderer.render(scene, camera);
    };

    animate();

    const handleResize = () => {
      width = window.innerWidth; height = window.innerHeight;
      renderer.setSize(width, height);
      camera.aspect = width / height;
      camera.updateProjectionMatrix();
    };

    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
      window.removeEventListener('scroll', onScroll);
      if (mountRef.current) mountRef.current.removeChild(renderer.domElement);
    };
  }, []);

  return <div ref={mountRef} className="fixed inset-0 z-0 pointer-events-none opacity-90" />;
};

// --- Componentes UI ---

const Button = ({ children, variant = 'primary', className = '', ...props }) => {
  const variants = {
    primary: 'bg-[#00E0FF] hover:bg-[#00B8E0] text-[#050505] font-bold shadow-[0_0_25px_rgba(0,224,255,0.4)]',
    secondary: 'bg-white/5 hover:bg-white/15 text-white border border-white/10 backdrop-blur-xl',
    outline: 'border border-[#00E0FF] text-[#00E0FF] hover:bg-[#00E0FF]/10',
  };
  return (
    <button className={`px-10 py-5 rounded-sm transition-all duration-500 flex items-center justify-center gap-3 text-[11px] uppercase tracking-[0.25em] font-mono border-l-2 border-r-2 border-transparent hover:border-[#00E0FF] ${variants[variant]} ${className}`} {...props}>
      {children}
    </button>
  );
};

const Badge = ({ children, color = "blue" }) => {
  const colors = {
    blue: "text-[#00E0FF] border-[#00E0FF]/40 bg-[#00E0FF]/10",
    green: "text-[#00FFAB] border-[#00FFAB]/40 bg-[#00FFAB]/10",
  };
  return <span className={`inline-block px-5 py-2 text-[10px] font-mono font-black tracking-[0.3em] uppercase border ${colors[color]} backdrop-blur-md`}>{children}</span>;
};

export default function App() {
  const [isWalletConnected, setIsWalletConnected] = useState(false);
  const [simStep, setSimStep] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => setSimStep((prev) => (prev + 1) % 6), 3000);
    return () => clearInterval(timer);
  }, []);

  const terminalLogs = [
    { text: "INBOUND: Unverified Agent Request detected", color: "text-red-500" },
    { text: "FILTER: Analyzing behavior pattern (x402 candidate)", color: "text-amber-400" },
    { text: "PROTOCOL: Challenge issued -> Wallet handshake initiated", color: "text-[#00E0FF]" },
    { text: "VALIDATION: Payment 0.005 SOL verified via SPL-Token", color: "text-[#00FFAB]" },
    { text: "UPGRADE: Agent promoted to 'Privileged' class", color: "text-[#00FFAB] font-bold" },
    { text: "ROUTING: Redirecting to x402 High-Priority Lane", color: "text-white" },
  ];

  return (
    <div className="min-h-[250vh] bg-[#020202] text-gray-300 selection:bg-[#00E0FF]/40 font-mono overflow-x-hidden">
      
      <NeuralBackground />

      {/* Grid e Vinheta */}
      <div className="fixed inset-0 z-0 opacity-[0.05] pointer-events-none" style={{ backgroundImage: 'linear-gradient(#00E0FF 1px, transparent 1px), linear-gradient(90deg, #00E0FF 1px, transparent 1px)', backgroundSize: '100px 100px' }}></div>
      <div className="fixed inset-0 z-0 bg-gradient-to-tr from-[#020202] via-transparent to-[#020202] pointer-events-none opacity-60"></div>

      <nav className="fixed top-0 left-0 right-0 z-50 border-b border-white/5 bg-[#020202]/60 backdrop-blur-3xl">
        <div className="max-w-7xl mx-auto px-10 h-24 flex items-center justify-between">
          <div className="flex items-center gap-5">
            <div className="relative flex items-center justify-center w-14 h-14 bg-[#00E0FF]/5 border border-[#00E0FF]/30">
              <Shield className="w-9 h-9 text-[#00E0FF]/20" />
              <div className="absolute inset-0 flex items-center justify-center">
                <Cpu className="w-5 h-5 text-[#00E0FF] drop-shadow-[0_0_12px_rgba(0,224,255,1)]" />
              </div>
            </div>
            <div className="flex flex-col">
              <span className="text-lg font-black tracking-[0.4em] text-white leading-none uppercase">RPC PRIORITY</span>
              <span className="text-[11px] font-bold tracking-[0.2em] text-[#00E0FF]/60 leading-tight">AUTH SYSTEM</span>
            </div>
          </div>
          
          <div className="hidden lg:flex items-center gap-16 text-[12px] font-black uppercase tracking-[0.3em] text-gray-500">
            <a href="#protocol" className="hover:text-[#00E0FF] transition-all cursor-pointer">Protocolo</a>
            <a href="#sdk" className="hover:text-[#00E0FF] transition-all cursor-pointer">SDK</a>
          </div>

          <Button variant={isWalletConnected ? 'outline' : 'primary'} className="h-12 px-8" onClick={() => setIsWalletConnected(!isWalletConnected)}>
            <Wallet className="w-5 h-5" /> {isWalletConnected ? 'AGENT_VALIDATED' : 'CONECTAR AGENTE'}
          </Button>
        </div>
      </nav>

      <main className="relative z-10 pt-32">
        <section className="max-w-7xl mx-auto px-10 mb-80 pt-10 text-center md:text-left">
          <div className="max-w-5xl">
            <Badge color="blue">Validação de Agentes de Elite</Badge>
            <h1 className="text-5xl md:text-8xl font-bold text-white mt-6 mb-8 leading-[0.9] tracking-tighter uppercase">
              Diga Adeus <br />
              ao <span className="text-red-600 drop-shadow-[0_0_15px_rgba(220,38,38,0.5)]">Spam.</span> <br />
              Diga Olá ao <span className="text-[#00FFAB]">x402.</span>
            </h1>
            <p className="text-lg md:text-xl text-gray-400 max-w-2xl leading-relaxed mb-12 font-sans backdrop-blur-md bg-white/5 p-5 border-l-2 border-[#00E0FF]">
              Transforme agentes de IA desconhecidos em utilizadores de confiança. O protocolo RPC Priority filtra o ruído e garante largura de banda premium para quem paga em tempo real.
            </p>
            <div className="flex flex-wrap justify-center md:justify-start gap-6">
              <Button className="h-14 px-10" onClick={() => window.open('https://github.com/flavioparah/x402-priority-protocol')}>
                Inicie Integração <ArrowRight className="w-5 h-5" />
              </Button>
              <Button variant="secondary" className="h-14 px-10">Blueprint Técnico</Button>
            </div>
          </div>
        </section>

        <section id="protocol" className="max-w-7xl mx-auto px-10 mb-80">
          <div className="grid md:grid-cols-2 gap-10">
            <div className="p-16 bg-[#020202]/40 backdrop-blur-2xl border border-white/5 hover:border-red-500/20 transition-all group">
              <Activity className="w-12 h-12 text-red-500 mb-10 opacity-50 group-hover:opacity-100" />
              <h3 className="text-3xl font-bold text-white mb-6">Filtro de Spam</h3>
              <p className="text-gray-400 text-lg font-sans leading-relaxed">
                Elimine 99% do tráfego não monetizável. Agentes sem credenciais de pagamento são retidos na camada de caos.
              </p>
            </div>
            <div className="p-16 bg-[#00FFAB]/5 backdrop-blur-2xl border border-[#00FFAB]/20 hover:border-[#00FFAB]/50 transition-all group">
              <Zap className="w-12 h-12 text-[#00FFAB] mb-10" />
              <h3 className="text-3xl font-bold text-white mb-6">Privilégio x402</h3>
              <p className="text-gray-400 text-lg font-sans leading-relaxed">
                Agentes que cumprem o handshake x402 recebem prioridade imediata, saltando filas e garantindo latência zero.
              </p>
            </div>
          </div>
        </section>

        <section className="max-w-7xl mx-auto px-10 mb-96">
          <div className="grid lg:grid-cols-2 gap-32 items-center">
            <div className="space-y-10">
              <Badge color="green">Monitor de Qualificação</Badge>
              <h2 className="text-6xl font-bold text-white tracking-tight leading-[1.1]">Promoção de Classe em Tempo Real.</h2>
              <p className="text-xl text-gray-400 font-sans leading-relaxed">
                O nosso motor de validação monitoriza cada byte. Assim que a transação Solana é confirmada, o agente é promovido da classe "Public" para "Privileged".
              </p>
              <div className="flex items-center gap-8 p-8 bg-[#00FFAB]/5 border border-[#00FFAB]/20 rounded-sm">
                 <div className="relative">
                   <div className="w-4 h-4 rounded-full bg-[#00FFAB] animate-ping absolute"></div>
                   <div className="w-4 h-4 rounded-full bg-[#00FFAB] relative"></div>
                 </div>
                 <div className="text-white text-xl font-black tracking-widest font-mono uppercase">ESTADO: <span className="text-[#00FFAB]">X402_ACTIVE</span></div>
              </div>
            </div>
            
            <div className="bg-[#050505] border border-white/10 rounded-sm overflow-hidden shadow-2xl relative">
              <div className="absolute inset-0 bg-[#00E0FF]/5 pointer-events-none"></div>
              <div className="bg-white/5 px-8 py-5 border-b border-white/10 flex justify-between items-center relative z-10">
                <div className="text-[11px] text-[#00E0FF] font-black tracking-[0.5em] uppercase">AGENTE_PROMOTION_V1.log</div>
                <div className="flex gap-3">
                  <div className="w-3 h-3 bg-red-600/40"></div>
                  <div className="w-3 h-3 bg-green-500"></div>
                </div>
              </div>
              <div className="p-12 h-[350px] font-mono text-sm flex flex-col justify-end relative z-10 bg-black/40 backdrop-blur-xl">
                {terminalLogs.map((log, idx) => (
                  <div key={idx} className={`mb-4 transition-all duration-1000 ${idx <= simStep ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-10'} ${log.color}`}>
                    <span className="opacity-20 mr-6 tracking-normal">[{new Date().toLocaleTimeString()}]</span> {log.text}
                  </div>
                ))}
                <div className="w-3 h-5 bg-[#00FFAB] animate-pulse mt-4"></div>
              </div>
            </div>
          </div>
        </section>
      </main>

      <footer className="border-t border-white/5 py-40 bg-[#010101] relative z-20">
        <div className="max-w-7xl mx-auto px-10 grid md:grid-cols-3 gap-24">
          <div className="space-y-10">
            <div className="flex items-center gap-5">
              <div className="relative flex items-center justify-center w-12 h-12 bg-[#00E0FF]/5 border border-[#00E0FF]/40">
                <Shield className="w-7 h-7 text-[#00E0FF]/40" />
                <div className="absolute inset-0 flex items-center justify-center"><Cpu className="w-3.5 h-3.5 text-[#00E0FF]" /></div>
              </div>
              <span className="text-2xl font-black tracking-[0.4em] text-white uppercase">RPC PRIORITY</span>
            </div>
            <p className="text-gray-500 font-sans leading-relaxed text-xl">Arquitetando a infraestrutura de confiança para a economia AI-to-AI.</p>
          </div>
          <div>
            <h4 className="text-white font-black uppercase tracking-[0.4em] mb-12 text-sm">Protocolo</h4>
            <ul className="space-y-6 text-[11px] font-bold uppercase tracking-[0.3em] text-gray-500">
              <li><a href="#" className="hover:text-[#00E0FF] transition-all">Handshake x402</a></li>
              <li><a href="#" className="hover:text-[#00E0FF] transition-all">Liquidação Solana</a></li>
              <li><a href="#" className="hover:text-[#00E0FF] transition-all">Preços Dinâmicos</a></li>
            </ul>
          </div>
          <div>
             <h4 className="text-white font-black uppercase tracking-[0.4em] mb-12 text-sm">Laboratório</h4>
             <div className="flex gap-8">
                <a href="#" className="w-16 h-16 flex items-center justify-center border border-white/5 bg-white/5 text-white hover:text-[#00E0FF] hover:border-[#00E0FF]/40 transition-all"><Github className="w-8 h-8" /></a>
                <a href="#" className="w-16 h-16 flex items-center justify-center border border-white/5 bg-white/5 text-white hover:text-[#00E0FF] hover:border-[#00E0FF]/40 transition-all"><Linkedin className="w-8 h-8" /></a>
             </div>
          </div>
        </div>
        <div className="max-w-7xl mx-auto px-10 mt-40 pt-16 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-12">
          <div className="text-[12px] text-gray-600 font-black tracking-[0.5em] uppercase">© {new Date().getFullYear()} RPC PRIORITY // PROTOCOL LAYER</div>
          <div className="flex flex-wrap justify-center gap-12 text-[11px] text-[#00FFAB] font-black tracking-[0.4em] uppercase">
            <span>NO MORE SPAM</span>
            <span>HIGH PRIVILEGE ONLY</span>
            <span className="text-white/20 italic tracking-normal font-sans">v1.4.0-stable</span>
          </div>
        </div>
      </footer>
    </div>
  );
}