frontend/components/GlobalSync.tsx

"use client";

import { useEffect, useState } from "react";

export default function GlobalSync({ onComplete }: { onComplete: () => void }) {
  const [progress, setProgress] = useState(0);
  const [message, setMessage] = useState("Initializing Neural Sync...");

  const messages = [
    "Establishing encrypted connection...",
    "Synchronizing with Mercado Público...",
    "Activating Legal Analyst Agent...",
    "Activating Technical Reviewer Agent...",
    "Activating Commercial Strategist Agent...",
    "Orchestrating multi-agent pipeline...",
    "Ready for analysis."
  ];

  useEffect(() => {
    let currentMsg = 0;
    
    const interval = setInterval(() => {
      setProgress(prev => {
        if (prev >= 100) {
          clearInterval(interval);
          setTimeout(onComplete, 500);
          return 100;
        }
        
        // Update message based on progress
        const msgIdx = Math.floor((prev / 100) * messages.length);
        if (msgIdx !== currentMsg && messages[msgIdx]) {
          currentMsg = msgIdx;
          setMessage(messages[msgIdx]);
        }
        
        return prev + 2;
      });
    }, 40);

    return () => clearInterval(interval);
  }, [onComplete]);

  return (
    <div 
      className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-[#020202] text-white overflow-hidden cursor-pointer"
      onClick={onComplete}
      title="Click to skip"
    >
      <button 
        onClick={(e) => { e.stopPropagation(); onComplete(); }}
        className="absolute top-8 right-8 text-[10px] uppercase tracking-widest text-slate-500 hover:text-white transition-colors"
      >
        Skip Sync [ESC]
      </button>
      {/* Cinematic Grid Background */}
      <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
      
      {/* Decorative Blur Orbs */}
      <div className="absolute -top-24 -left-24 w-96 h-96 bg-purple-500/10 blur-[120px] animate-pulse" />
      <div className="absolute -bottom-24 -right-24 w-96 h-96 bg-cyan-500/10 blur-[120px] animate-pulse" />

      {/* Floating Code Snippets (Pure CSS Animations) */}
      <div className="absolute inset-0 opacity-20 pointer-events-none select-none font-mono text-[8px] md:text-[10px] text-purple-400/40">
        <div className="absolute top-[10%] left-[5%] animate-[pulse_3s_infinite]">GET /api/tenders/sync HTTP/1.1</div>
        <div className="absolute top-[20%] right-[10%] animate-[pulse_4s_infinite]">SELECT * FROM active_opportunities;</div>
        <div className="absolute bottom-[30%] left-[15%] animate-[pulse_5s_infinite]">AGENT_ORCHESTRATOR.INIT()</div>
        <div className="absolute bottom-[10%] right-[5%] animate-[pulse_6s_infinite]">Status: 200 OK | Payload: 4.2k items</div>
      </div>

      <div className="relative w-64 h-64 flex items-center justify-center mb-12">
        {/* Animated Rings - Enhanced */}
        <div className="absolute inset-0 border border-purple-500/20 rounded-full animate-[spin_12s_linear_infinite]" />
        <div className="absolute inset-4 border border-indigo-500/30 rounded-full animate-[spin_8s_linear_infinite_reverse]" />
        <div className="absolute inset-8 border border-cyan-500/40 rounded-full animate-[spin_6s_linear_infinite]" />
        
        {/* Progress Text */}
        <div className="flex flex-col items-center relative z-10">
          <span className="text-5xl font-black tracking-tighter text-white mb-1 drop-shadow-[0_0_15px_rgba(168,85,247,0.5)]">{progress}%</span>
          <span className="text-[9px] uppercase tracking-[0.4em] text-slate-500 font-black">Neural Link</span>
        </div>
      </div>

      <div className="relative z-10 space-y-6 text-center max-w-sm px-6">
        <h2 className="text-xl font-bold tracking-tight text-slate-200 animate-in fade-in slide-in-from-bottom-2 duration-300">{message}</h2>
        <div className="relative w-72 h-1.5 bg-white/5 rounded-full overflow-hidden border border-white/5">
          <div 
            className="h-full bg-gradient-to-r from-purple-600 via-indigo-500 to-cyan-400 transition-all duration-300 ease-out shadow-[0_0_10px_rgba(168,85,247,0.5)]" 
            style={{ width: `${progress}%` }} 
          />
        </div>
        <p className="text-[10px] text-slate-500 font-medium tracking-widest uppercase opacity-60">Initializing AndesOps AI Engine</p>
      </div>
      
      <div className="absolute bottom-12 flex flex-col items-center gap-2">
        <div className="w-1 h-8 bg-gradient-to-b from-purple-500/40 to-transparent" />
        <div className="text-[10px] uppercase tracking-[0.5em] text-slate-700 font-black">
          Orchestrated by REW Intelligence
        </div>
      </div>
    </div>
  );
}