// src/components/weather/WeatherAverageBar.tsx
import { getAverageEmoji, getEmojiScore } from '@/lib/weather-utils';

interface WeatherEntry {
  performanceEmoji: string | null;
  moralEmoji: string | null;
  fluxEmoji: string | null;
  valueCreationEmoji: string | null;
}

interface WeatherAverageBarProps {
  entries: WeatherEntry[];
  previousAverages?: {
    performance: number | null;
    moral: number | null;
    flux: number | null;
    valueCreation: number | null;
  } | null;
}

const AXES = [
  { key: 'performanceEmoji' as const, scoreKey: 'performance' as const, label: 'Performance' },
  { key: 'moralEmoji' as const, scoreKey: 'moral' as const, label: 'Moral' },
  { key: 'fluxEmoji' as const, scoreKey: 'flux' as const, label: 'Flux' },
  {
    key: 'valueCreationEmoji' as const,
    scoreKey: 'valueCreation' as const,
    label: 'Création de valeur',
  },
];

function getAverageScore(emojis: (string | null)[]): number | null {
  const scores = emojis.map(getEmojiScore).filter((score): score is number => score !== null);
  if (scores.length === 0) return null;
  return scores.reduce((sum, score) => sum + score, 0) / scores.length;
}

function AverageEvolutionIndicator({
  currentScore,
  previousScore,
}: {
  currentScore: number | null;
  previousScore: number | null | undefined;
}) {
  if (currentScore === null || previousScore === null || previousScore === undefined) return null;
  const delta = currentScore - previousScore;

  if (delta < 0) {
    return (
      <span
        className="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-bold"
        style={{
          backgroundColor: 'color-mix(in srgb, var(--success) 18%, transparent)',
          color: 'var(--success)',
        }}
        title="En progression"
      >
        ↑
      </span>
    );
  }

  if (delta > 0) {
    return (
      <span
        className="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-bold"
        style={{
          backgroundColor: 'color-mix(in srgb, var(--destructive) 18%, transparent)',
          color: 'var(--destructive)',
        }}
        title="En baisse"
      >
        ↓
      </span>
    );
  }

  return (
    <span
      className="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-bold"
      style={{
        backgroundColor: 'color-mix(in srgb, var(--muted) 15%, transparent)',
        color: 'var(--muted)',
      }}
      title="Stable"
    >
      →
    </span>
  );
}

export function WeatherAverageBar({ entries, previousAverages }: WeatherAverageBarProps) {
  if (entries.length === 0) return null;

  return (
    <div className="flex flex-wrap items-center gap-3 mb-4">
      <span className="text-xs font-medium text-muted uppercase tracking-wide">Moyenne équipe</span>
      {AXES.map(({ key, scoreKey, label }) => {
        const currentScore = getAverageScore(entries.map((e) => e[key]));
        const avg = getAverageEmoji(entries.map((e) => e[key]));
        return (
          <div
            key={key}
            className="flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1"
          >
            <span className="text-lg leading-none">{avg ?? '—'}</span>
            <span className="text-xs text-muted">{label}</span>
            <AverageEvolutionIndicator
              currentScore={currentScore}
              previousScore={previousAverages?.[scoreKey]}
            />
          </div>
        );
      })}
    </div>
  );
}