"use client";

interface Props {
  score: number;
  satA?: number;
  satB?: number;
}

export default function FairnessScore({ score, satA, satB }: Props) {
  const pct = Math.min(100, Math.max(0, score));
  const color =
    pct >= 80 ? "text-[#B7A6FB]" : pct >= 60 ? "text-amber-400" : "text-red-400";
  const barColor =
    pct >= 80
      ? "bg-[#B7A6FB] shadow-[0_0_8px_#B7A6FB]"
      : pct >= 60
      ? "bg-amber-400"
      : "bg-red-400";

  return (
    <div className="space-y-4">
      {/* Big score */}
      <div className="flex items-end justify-between">
        <div>
          <p className="text-[10px] text-slate-500 font-mono uppercase tracking-wider mb-1">Fairness Score</p>
          <span className={`text-4xl font-light tabular-nums ${color} text-glow`}>
            {pct.toFixed(0)}
          </span>
          <span className="text-base font-light text-slate-600 ml-1">/100</span>
        </div>
        <div className={`text-[10px] font-bold font-mono px-2 py-1 rounded border ${
          pct >= 80
            ? "text-[#B7A6FB] bg-[#B7A6FB]/10 border-[#B7A6FB]/20"
            : pct >= 60
            ? "text-amber-400 bg-amber-500/10 border-amber-500/20"
            : "text-red-400 bg-red-500/10 border-red-500/20"
        }`}>
          {pct >= 80 ? "FAIR" : pct >= 60 ? "MODERATE" : "SKEWED"}
        </div>
      </div>

      {/* Progress bar */}
      <div className="w-full h-1.5 bg-white/5 rounded-full overflow-hidden">
        <div
          className={`h-full rounded-full transition-all duration-700 ${barColor}`}
          style={{ width: `${pct}%` }}
        />
      </div>

      {/* Per-agent */}
      {satA !== undefined && satB !== undefined && (
        <div className="grid grid-cols-2 gap-3">
          <div className="bg-[#B7A6FB]/5 border border-[#B7A6FB]/20 rounded-lg p-3 text-center hover:border-[#B7A6FB]/40 transition-colors">
            <div className="text-[10px] text-slate-500 font-mono mb-1">Agent A</div>
            <div className="text-xl font-light text-[#B7A6FB] tabular-nums">{satA.toFixed(0)}%</div>
          </div>
          <div className="bg-cyan-900/10 border border-cyan-500/20 rounded-lg p-3 text-center hover:border-cyan-500/40 transition-colors">
            <div className="text-[10px] text-slate-500 font-mono mb-1">Agent B</div>
            <div className="text-xl font-light text-cyan-400 tabular-nums">{satB.toFixed(0)}%</div>
          </div>
        </div>
      )}
    </div>
  );
}