frontend/src/components/BenchmarkLaunchModal.tsx

import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  BarChart3,
  Layers,
  Database,
  ShieldCheck,
  TrendingUp,
  CheckCircle2,
  Cpu,
  ArrowRight,
} from 'lucide-react';
import { useModalA11y } from '../hooks/useModalA11y';

interface BenchmarkLaunchModalProps {
  isOpen: boolean;
  onClose?: () => void;
  onComplete: () => void;
}

interface BenchmarkStageInfo {
  id: number;
  label: string;
  subtext: string;
  tag: string;
  icon: typeof BarChart3;
  color: string;
  glow: string;
}

const BENCHMARK_STAGES: BenchmarkStageInfo[] = [
  {
    id: 1,
    label: 'Kaggle & PaySim Baseline Ingestion',
    subtext: 'Loading 284,807 real-world credit card transactions & 492 fraud cases',
    tag: '284.8k Records · Loaded',
    icon: Database,
    color: '#6366f1',
    glow: 'rgba(99, 102, 241, 0.4)',
  },
  {
    id: 2,
    label: 'Non-IID Dirichlet α=0.5 Cross-Bank Partition',
    subtext: 'Synthesizing heterogeneous data skew across JPM, HSBC & DBK nodes',
    tag: 'Dirichlet α=0.5 · Bounded',
    icon: Layers,
    color: '#8b5cf6',
    glow: 'rgba(139, 92, 246, 0.4)',
  },
  {
    id: 3,
    label: 'Collaborative GNN vs Siloed Model Matrix',
    subtext: 'Benchmarking PR-AUC (0.8420 vs 0.6940) & ROC-AUC (0.9120 vs 0.8350)',
    tag: '+21.3% PR-AUC Gain',
    icon: TrendingUp,
    color: '#06b6d4',
    glow: 'rgba(6, 182, 212, 0.4)',
  },
  {
    id: 4,
    label: 'Daily Cost & False Positive Reduction Audit',
    subtext: 'Reconciling cross-bank laundering volume detection (+$836.3k detected volume)',
    tag: '+55.59% Gain',
    icon: Cpu,
    color: '#10b981',
    glow: 'rgba(16, 185, 129, 0.4)',
  },
  {
    id: 5,
    label: 'Launching Design Partner Benchmark Sandbox',
    subtext: 'Attestation verified. Opening live interactive empirical metrics canvas',
    tag: 'Sandbox Ready · v2.4',
    icon: ShieldCheck,
    color: '#38bdf8',
    glow: 'rgba(56, 189, 248, 0.4)',
  },
];

export default function BenchmarkLaunchModal({ isOpen, onClose, onComplete }: BenchmarkLaunchModalProps) {
  const [currentStageIdx, setCurrentStageIdx] = useState(0);
  const [progress, setProgress] = useState(10);

  const { containerRef } = useModalA11y<HTMLDivElement>({
    isOpen,
    onClose: onClose || onComplete,
    closeOnEscape: true,
    trapFocus: true,
    restoreFocus: true,
  });

  useEffect(() => {
    if (!isOpen) {
      setCurrentStageIdx(0);
      setProgress(10);
      return;
    }

    const TOTAL_DURATION_MS = 850;
    const UPDATE_INTERVAL_MS = 15;
    const startTime = Date.now();
    let completionTimeout: ReturnType<typeof setTimeout> | null = null;

    const timer = setInterval(() => {
      const elapsed = Date.now() - startTime;
      const rawPct = Math.min(100, 10 + (elapsed / TOTAL_DURATION_MS) * 90);
      setProgress(rawPct);

      const computedIdx = Math.min(
        BENCHMARK_STAGES.length - 1,
        Math.floor((elapsed / TOTAL_DURATION_MS) * BENCHMARK_STAGES.length)
      );
      setCurrentStageIdx(computedIdx);

      if (elapsed >= TOTAL_DURATION_MS) {
        clearInterval(timer);
        setProgress(100);
        completionTimeout = setTimeout(() => {
          onComplete();
        }, 100);
      }
    }, UPDATE_INTERVAL_MS);

    return () => {
      clearInterval(timer);
      if (completionTimeout) {
        clearTimeout(completionTimeout);
      }
    };
  }, [isOpen, onComplete]);

  if (!isOpen) return null;

  const currentStage: BenchmarkStageInfo = BENCHMARK_STAGES[currentStageIdx] ?? (BENCHMARK_STAGES[0] as BenchmarkStageInfo);
  const CurrentIcon = currentStage.icon;

  return (
    <AnimatePresence>
      <div className="fixed inset-0 z-[200] flex items-center justify-center p-3 sm:p-6 overflow-x-hidden overflow-y-auto">
        {/* Deep Backdrop with Ambient Glow */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 bg-[#03030c]/90 backdrop-blur-2xl"
        />

        {/* Modal Window Container */}
        <motion.div
          ref={containerRef}
          role="dialog"
          aria-modal="true"
          aria-labelledby="benchmark-modal-title"
          aria-describedby="benchmark-modal-desc"
          tabIndex={-1}
          initial={{ opacity: 0, scale: 0.94, y: 15 }}
          animate={{ opacity: 1, scale: 1, y: 0 }}
          exit={{ opacity: 0, scale: 0.94, y: 15 }}
          transition={{ type: 'spring', damping: 26, stiffness: 260 }}
          className="relative w-full max-w-lg rounded-3xl bg-gradient-to-b from-[#0a0c28] via-[#07081a] to-[#04050e] border border-indigo-500/30 p-5 sm:p-7 shadow-[0_0_80px_rgba(99,102,241,0.25)] space-y-5 z-10 overflow-hidden focus:outline-none"
        >
          {/* Top Edge Glow */}
          <div className="absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-cyan-400" />

          {/* Header */}
          <div className="flex items-center justify-between border-b border-white/10 pb-4 gap-2">
            <div className="flex items-center gap-3 min-w-0">
              <div className="w-10 h-10 rounded-2xl bg-indigo-500/20 border border-indigo-500/30 flex items-center justify-center text-indigo-300 shadow-inner shrink-0">
                <BarChart3 className="w-5 h-5 animate-pulse" />
              </div>
              <div className="min-w-0">
                <h3 id="benchmark-modal-title" className="text-base sm:text-lg font-bold text-white tracking-tight truncate">
                  Initializing Benchmark Sandbox
                </h3>
                <p id="benchmark-modal-desc" className="text-xs text-indigo-300/80 font-mono truncate">
                  Empirical Proof & Real Data Baseline Engine
                </p>
              </div>
            </div>
            <div className="flex items-center gap-2 shrink-0">
              <span className="text-[10px] font-mono font-bold px-2.5 py-1 rounded-full bg-indigo-500/15 text-indigo-300 border border-indigo-500/30">
                {Math.min(100, Math.round(progress))}%
              </span>
              <button
                onClick={onComplete || onClose}
                aria-label="Skip initialization and open benchmark hub"
                className="px-2.5 py-1 rounded-lg text-[10px] sm:text-[11px] font-mono text-slate-400 hover:text-white bg-white/5 hover:bg-white/10 border border-white/10 transition-all cursor-pointer flex items-center gap-1 focus:outline-none focus:ring-2 focus:ring-indigo-400"
                title="Direct jump to benchmark sandbox"
              >
                <span>Skip</span>
                <ArrowRight className="w-3 h-3" />
              </button>
            </div>
          </div>

          {/* Active Stage Animated Card */}
          <div className="p-4 rounded-2xl bg-[#02030a]/80 border border-white/10 space-y-3 relative overflow-hidden">
            <div
              className="absolute -right-8 -top-8 w-24 h-24 rounded-full blur-2xl pointer-events-none opacity-40"
              style={{ backgroundColor: currentStage.color }}
            />

            <div className="flex items-start justify-between gap-3">
              <div className="flex items-center gap-2.5 min-w-0">
                <div
                  className="w-8 h-8 rounded-xl flex items-center justify-center shrink-0 border"
                  style={{
                    backgroundColor: `${currentStage.color}20`,
                    borderColor: `${currentStage.color}50`,
                    color: currentStage.color,
                  }}
                >
                  <CurrentIcon className="w-4 h-4" />
                </div>
                <div className="min-w-0">
                  <span className="text-[10px] font-mono uppercase tracking-wider text-slate-400 block truncate">
                    Stage 0{currentStage.id} of 05
                  </span>
                  <h4 className="text-xs sm:text-sm font-bold text-slate-100 truncate">
                    {currentStage.label}
                  </h4>
                </div>
              </div>

              <span
                className="text-[9.5px] font-mono font-bold px-2.5 py-0.5 rounded-full border shrink-0"
                style={{
                  backgroundColor: `${currentStage.color}15`,
                  borderColor: `${currentStage.color}40`,
                  color: currentStage.color,
                }}
              >
                {currentStage.tag}
              </span>
            </div>

            <p className="text-xs text-slate-300 leading-relaxed font-sans pl-1">
              {currentStage.subtext}
            </p>
          </div>

          {/* Step Progression Indicators */}
          <div className="space-y-1.5">
            {BENCHMARK_STAGES.map((s, idx) => {
              const isCompleted = idx < currentStageIdx;
              const isCurrent = idx === currentStageIdx;

              return (
                <div
                  key={s.id}
                  className={`flex items-center justify-between px-3 py-1.5 rounded-xl text-xs font-mono transition-all ${
                    isCurrent
                      ? 'bg-indigo-600/15 border border-indigo-500/30 text-indigo-200'
                      : isCompleted
                      ? 'text-slate-400 opacity-80'
                      : 'text-slate-600 opacity-40'
                  }`}
                >
                  <div className="flex items-center gap-2 min-w-0">
                    {isCompleted ? (
                      <CheckCircle2 className="w-3.5 h-3.5 text-emerald-400 shrink-0" />
                    ) : isCurrent ? (
                      <span className="w-2 h-2 rounded-full bg-indigo-400 animate-ping shrink-0" />
                    ) : (
                      <span className="w-2 h-2 rounded-full bg-slate-700 shrink-0" />
                    )}
                    <span className="truncate">{s.label}</span>
                  </div>
                  <span className="text-[10px] opacity-75 shrink-0 ml-2">
                    {isCompleted ? '✓ Done' : isCurrent ? 'Active...' : 'Queued'}
                  </span>
                </div>
              );
            })}
          </div>

          {/* Progress Bar */}
          <div className="space-y-1.5 pt-1">
            <div className="w-full bg-slate-900 rounded-full h-1.5 overflow-hidden p-0.5 border border-white/5">
              <div
                className="h-full rounded-full bg-gradient-to-r from-indigo-500 via-purple-500 to-cyan-400 transition-all duration-150"
                style={{ width: `${progress}%` }}
              />
            </div>
            <div className="flex justify-between text-[10px] font-mono text-slate-500">
              <span>Authenticating Secure Sandbox...</span>
              <span>Redirecting to Benchmark Hub</span>
            </div>
          </div>
        </motion.div>
      </div>
    </AnimatePresence>
  );
}