src/app/components/AnalyzingAnimation.tsx

import { Brain, Eye, Scan, Shield } from 'lucide-react';
import { Card } from './ui/card';
import { Progress } from './ui/progress';
import { useEffect, useState } from 'react';

export function AnalyzingAnimation() {
  const [progress, setProgress] = useState(0);
  const [currentStep, setCurrentStep] = useState(0);

  const steps = [
    { icon: Scan, label: 'Scanning UI elements...', progress: 25 },
    { icon: Eye, label: 'Detecting visual patterns...', progress: 50 },
    { icon: Brain, label: 'Running XAI analysis...', progress: 75 },
    { icon: Shield, label: 'Checking CFPB compliance...', progress: 100 },
  ];

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress((prev) => {
        if (prev >= 100) return 100;
        return prev + 2;
      });
    }, 50);

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

  useEffect(() => {
    const stepIndex = Math.floor(progress / 25);
    setCurrentStep(Math.min(stepIndex, steps.length - 1));
  }, [progress]);

  const CurrentIcon = steps[currentStep].icon;

  return (
    <Card className="p-8 bg-gradient-to-br from-blue-50 to-indigo-50 border-2 border-blue-200">
      <div className="flex flex-col items-center justify-center space-y-6">
        {/* Animated Icon */}
        <div className="relative">
          <div className="absolute inset-0 bg-blue-400 rounded-full animate-ping opacity-20" />
          <div className="relative bg-blue-600 p-6 rounded-full">
            <CurrentIcon className="w-12 h-12 text-white animate-pulse" />
          </div>
        </div>

        {/* Current Step */}
        <div className="text-center">
          <h3 className="text-xl font-semibold text-slate-900 mb-2">
            Analyzing UI for Dark Patterns
          </h3>
          <p className="text-sm text-blue-700 font-medium">
            {steps[currentStep].label}
          </p>
        </div>

        {/* Progress Bar */}
        <div className="w-full max-w-md space-y-2">
          <Progress value={progress} className="h-3" />
          <div className="flex justify-between text-xs text-slate-600">
            <span>Processing...</span>
            <span>{progress}%</span>
          </div>
        </div>

        {/* Step Indicators */}
        <div className="flex gap-3">
          {steps.map((step, index) => {
            const StepIcon = step.icon;
            const isActive = index === currentStep;
            const isCompleted = progress >= step.progress;
            
            return (
              <div
                key={index}
                className={`flex flex-col items-center gap-2 transition-all ${
                  isActive ? 'scale-110' : 'scale-100'
                }`}
              >
                <div
                  className={`p-3 rounded-full transition-colors ${
                    isCompleted
                      ? 'bg-green-500 text-white'
                      : isActive
                      ? 'bg-blue-500 text-white'
                      : 'bg-slate-200 text-slate-400'
                  }`}
                >
                  <StepIcon className="w-5 h-5" />
                </div>
              </div>
            );
          })}
        </div>

        <p className="text-xs text-slate-500 text-center max-w-md">
          Using Vision Transformer (ViT) and Explainable AI to detect psychological 
          manipulation patterns in accordance with CFPB guidelines
        </p>
      </div>
    </Card>
  );
}