import type { MlPrediction } from '../../lib/types';

interface Props {
  predictions?: MlPrediction[];
}

const MODELS = ['DQN', 'PPO', 'TFT', 'Mamba2', 'xLSTM', 'TGGN', 'TLOB', 'LNN', 'KAN', 'Diffusion'];

export function EnsemblePanel({ predictions = [] }: Props) {
  // Count votes
  const votes = { buy: 0, sell: 0, hold: 0 };
  for (const p of predictions) {
    if (p.signal in votes) {
      votes[p.signal]++;
    }
  }

  const totalVotes = votes.buy + votes.sell + votes.hold;
  const consensus =
    totalVotes === 0
      ? 'hold'
      : votes.buy > votes.sell && votes.buy > votes.hold
        ? 'buy'
        : votes.sell > votes.buy && votes.sell > votes.hold
          ? 'sell'
          : 'hold';

  const consensusColor = {
    buy: 'text-[var(--color-green)]',
    sell: 'text-[var(--color-red)]',
    hold: 'text-[var(--color-yellow)]',
  }[consensus];

  return (
    <div>
      <div className="px-3 py-1.5 border-b border-[var(--color-border)]">
        <span className="text-sm font-medium">Ensemble Voting</span>
      </div>

      <div className="p-3 space-y-3">
        {/* Consensus */}
        <div className="text-center py-2">
          <div className="text-xs text-[var(--color-text-secondary)]">Consensus Signal</div>
          <div className={`text-2xl font-bold ${consensusColor}`}>
            {consensus.toUpperCase()}
          </div>
          <div className="text-xs text-[var(--color-text-secondary)]">
            {votes.buy}B / {votes.sell}S / {votes.hold}H
          </div>
        </div>

        {/* Vote bar */}
        {totalVotes > 0 && (
          <div className="flex h-3 rounded-full overflow-hidden">
            {votes.buy > 0 && (
              <div
                className="bg-[var(--color-green)]"
                style={{ width: `${(votes.buy / totalVotes) * 100}%` }}
              />
            )}
            {votes.hold > 0 && (
              <div
                className="bg-[var(--color-yellow)]"
                style={{ width: `${(votes.hold / totalVotes) * 100}%` }}
              />
            )}
            {votes.sell > 0 && (
              <div
                className="bg-[var(--color-red)]"
                style={{ width: `${(votes.sell / totalVotes) * 100}%` }}
              />
            )}
          </div>
        )}

        {/* Per-model status */}
        <div className="space-y-1">
          {MODELS.map((model) => {
            const pred = predictions.find((p) => p.model === model);
            return (
              <div key={model} className="flex justify-between text-xs">
                <span className="text-[var(--color-text-secondary)]">{model}</span>
                <span
                  className={
                    pred
                      ? {
                          buy: 'text-[var(--color-green)]',
                          sell: 'text-[var(--color-red)]',
                          hold: 'text-[var(--color-yellow)]',
                        }[pred.signal]
                      : 'text-[var(--color-text-secondary)]'
                  }
                >
                  {pred ? pred.signal.toUpperCase() : 'N/A'}
                </span>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}
