frontend/components/ModelPerformanceCard.tsx

'use client';

interface ModelPerformanceCardProps {
  vqcAccuracy: number;
  qaoaAccuracy: number;
  qnnAccuracy: number;
}

export default function ModelPerformanceCard({
  vqcAccuracy,
  qaoaAccuracy,
  qnnAccuracy
}: ModelPerformanceCardProps) {
  const models = [
    { name: 'VQC', percentage: vqcAccuracy, weight: 40 },
    { name: 'QAOA', percentage: qaoaAccuracy, weight: 30 },
    { name: 'QNN', percentage: qnnAccuracy, weight: 30 },
  ];

  return (
    <div className="card-purple rounded-3xl p-6 card-hover h-full">
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center">
            <Atom className="w-5 h-5" />
          </div>
          <div>
            <h3 className="text-xl font-bold">QUANTUM MODELS</h3>
            <p className="text-xs text-white/60">Performance Overview</p>
          </div>
        </div>
        <button className="text-white/60 hover:text-white transition-colors">
          <MoreIcon />
        </button>
      </div>

      {/* Circular Progress Indicators */}
      <div className="flex justify-center gap-6 mb-6">
        {models.map((model, index) => (
          <div key={model.name} className="flex flex-col items-center">
            <div className="relative w-20 h-20">
              <svg className="w-full h-full -rotate-90" viewBox="0 0 100 100">
                {/* Background circle */}
                <circle
                  cx="50"
                  cy="50"
                  r="40"
                  fill="none"
                  stroke="rgba(255,255,255,0.2)"
                  strokeWidth="8"
                />
                {/* Progress circle */}
                <circle
                  cx="50"
                  cy="50"
                  r="40"
                  fill="none"
                  stroke="white"
                  strokeWidth="8"
                  strokeLinecap="round"
                  strokeDasharray={`${model.percentage * 2.51} 251`}
                  className="transition-all duration-1000"
                />
              </svg>
              <div className="absolute inset-0 flex items-center justify-center">
                <span className="text-lg font-bold">{model.percentage}%</span>
              </div>
            </div>
            <span className="mt-2 text-sm font-semibold">{model.name}</span>
            <span className="text-xs text-white/60">Weight: {model.weight}%</span>
          </div>
        ))}
      </div>

      {/* Ensemble Info */}
      <div className="bg-white/10 rounded-2xl p-4">
        <div className="flex items-center justify-between mb-3">
          <span className="text-sm text-white/80">ENSEMBLE ACCURACY</span>
          <span className="text-xs bg-white/20 px-2 py-0.5 rounded-full">
            20% Quantum Weight
          </span>
        </div>
        <div className="flex items-baseline gap-2">
          <span className="text-3xl font-bold">
            {((vqcAccuracy * 0.4 + qaoaAccuracy * 0.3 + qnnAccuracy * 0.3)).toFixed(1)}%
          </span>
          <span className="text-sm text-white/60">combined quantum</span>
        </div>
      </div>

      {/* Legend */}
      <div className="mt-4 flex items-center justify-center gap-4 text-xs text-white/60">
        <div className="flex items-center gap-2">
          <div className="w-3 h-3 rounded-full bg-white" />
          <span>Active</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-3 h-3 rounded-full bg-white/30" />
          <span>Remaining</span>
        </div>
      </div>
    </div>
  );
}

function Atom({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <circle cx="12" cy="12" r="1" />
      <ellipse cx="12" cy="12" rx="10" ry="4" />
      <ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(60 12 12)" />
      <ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(120 12 12)" />
    </svg>
  );
}

function MoreIcon() {
  return (
    <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
      <circle cx="12" cy="5" r="2" />
      <circle cx="12" cy="12" r="2" />
      <circle cx="12" cy="19" r="2" />
    </svg>
  );
}