import { TrophyIcon } from '@/components/ui/icons';
import { cn } from '@/lib/cn';
import { formatPoints } from '@/lib/tv/format';
import { cssVars } from '../cssVars';
import s from '../tv.module.css';

export interface PodiumEntry {
  id: string;
  name: string;
  points: number;
}

// DOM order 1-2-3 for screen readers; CSS `order` lays them out 2-1-3 like a real podium.
const places = [
  { place: 1, height: 'h-[310px]', tone: 'from-amber/50 to-amber/10 border-amber/60', badge: 'bg-amber text-on-bright', delay: '500ms' },
  { place: 2, height: 'h-[230px]', tone: 'from-violet/45 to-violet/10 border-violet/50', badge: 'bg-violet-soft text-on-bright', delay: '250ms' },
  { place: 3, height: 'h-[170px]', tone: 'from-cyan/35 to-cyan/5 border-cyan/45', badge: 'bg-cyan text-on-bright', delay: '0ms' },
] as const;

/** Classic 2-1-3 podium. Place numbers are always printed, so medals never rely on colour alone. */
export function Podium({ entries, className, label }: { entries: readonly PodiumEntry[]; className?: string; label: string }) {
  return (
    <ol aria-label={label} className={cn('grid grid-cols-3 items-end gap-[20px]', className)}>
      {places.map(({ place, height, tone, badge, delay }) => {
        const entry = entries[place - 1];
        return (
          <li key={place} className={cn('flex min-w-0 flex-col items-center gap-[14px]', !entry && 'invisible')} style={{ order: place === 1 ? 2 : place === 2 ? 1 : 3 }}>
            {entry && (
              <>
                {place === 1 && <TrophyIcon className="size-[64px] text-amber drop-shadow-[0_0_24px_rgb(255_176_32/0.6)]" />}
                {/* Inter, not the wide display face, and up to two lines: 16-character nicknames fit a 200 px column. */}
                <p className={cn('line-clamp-2 w-full text-center leading-[1.1] font-extrabold break-words', place === 1 ? 'text-[36px] text-amber-soft' : 'text-[30px]')}>{entry.name}</p>
                <p className="num font-display text-[28px] font-bold text-muted">{formatPoints(entry.points)}</p>
              </>
            )}
            <div
              className={cn('relative flex w-full justify-center rounded-t-[22px] border border-b-0 bg-gradient-to-b pt-[22px]', height, tone, s.chipIn)}
              style={cssVars({ '--delay': delay })}
            >
              <span className={cn('num grid size-[64px] place-items-center rounded-full font-display text-[34px] font-extrabold', badge)}>
                <span className="sr-only">Place </span>
                {place}
              </span>
            </div>
          </li>
        );
      })}
    </ol>
  );
}