brackets/frontend/src/components/Bracket/MatchCard.tsx

// frontend/src/components/Bracket/MatchCard.tsx

import { Check } from 'lucide-react';
import { type MatchData } from '../../types';
import { printName, stringToColor } from '../../utils/helpers';
import WhistleIcon from "../../assets/whistle.svg?react"

interface MatchCardProps {
    match: MatchData;
    onClick: (match: MatchData) => void;
}

export default function MatchCard({ match, onClick }: MatchCardProps) {
    const isFinished = match.status === "Finished";
    const badgeColor = match.time ? stringToColor(match.court) : undefined;

    let borderClass = 'border-zinc-300 dark:border-zinc-700';
    if (isFinished) borderClass = 'border-orange-500 ring-2 ring-orange-500/10';

    const canInteract = match.hasTeams;
    const cursorClass = canInteract
        ? 'cursor-pointer hover:shadow-md hover:-translate-y-0.5'
        : 'cursor-default opacity-100';

    const refName = match.ref_team?.name || match.ref_label;

    return (
        <div
            id={`match-${match.id}`}
            onClick={() => canInteract && onClick(match)}
            className={`transition-colors w-64 bg-white dark:bg-zinc-900 print:bg-white! rounded-lg border ${borderClass} print:border-zinc-400! print:shadow-none! shadow-sm transition-all duration-200 print:transition-none relative z-10 flex flex-col ${cursorClass}`}
        >
            <div className="transition-colors bg-zinc-50 dark:bg-zinc-900/50 print:bg-transparent! px-3 py-1.5 flex justify-between items-center border-b border-zinc-200 dark:border-zinc-800 print:border-zinc-400! rounded-t-lg">
                <div className="flex items-center gap-2">
                    <span className="font-mono text-[10px] font-bold text-zinc-400 print:text-zinc-600!"># {match.number}</span>
                    {match.time && (
                        <span className="text-[9px] font-black text-white print:text-zinc-800! px-1.5 py-0.5 rounded-sm uppercase print:border! print:border-zinc-400! print:bg-transparent!" style={{ background: badgeColor }}>
                            {match.court}
                        </span>
                    )}
                </div>
                {isFinished ? (
                    <Check className="text-orange-500 print:hidden" size={14} strokeWidth={3} />
                ) : (
                    <span className="text-[10px] font-bold text-zinc-500 print:text-zinc-600! font-mono print:hidden">{match.time || 'TBD'}</span>
                )}
            </div>

            <div className="p-2 space-y-1.5 flex-1 flex flex-col justify-center">
                {[
                    { n: match.p1, s: match.p1_sets, win: match.winner_team_id !== null && match.winner_team_id === match.p1_team_id, real: match.p1_is_real },
                    { n: match.p2, s: match.p2_sets, win: match.winner_team_id !== null && match.winner_team_id === match.p2_team_id, real: match.p2_is_real }
                ].map((p, i) => (
                    <div key={i} className={`flex justify-between items-center ${p.win ? 'text-zinc-800 dark:text-zinc-50 print:text-black! font-black' : p.real ? 'text-zinc-600 dark:text-zinc-400 print:text-black!' : 'text-zinc-400 dark:text-zinc-600 print:text-zinc-600! italic'}`}>

                        <span className={`truncate  text-xs tracking-tight pr-2 print:hidden ${p.win ? ' font-black text-orange-500' : 'font-bold'}`}>{p.n}</span>

                        <span className="hidden print:inline-block print:whitespace-normal print:overflow-visible text-xs tracking-tight pr-2">
                            {printName(p.n)}
                        </span>

                        <span className={`print:hidden px-2 py-0.5 rounded text-[10px] font-bold ${p.win ? 'bg-orange-100 dark:bg-orange-900/30 text-orange-700' : 'bg-zinc-100 dark:bg-zinc-800 text-zinc-500'}`}>
                            {p.s}
                        </span>

                        <span className="hidden print:flex w-5 h-5 border border-zinc-300 rounded-[3px] shrink-0 items-center justify-center text-[10px] font-bold text-black">
                            {isFinished ? p.s : ''}
                        </span>
                    </div>
                ))}
            </div>

            {/* --- FLOATING REF BADGE --- */}
            {refName && !isFinished && (
                <div className="absolute -bottom-2.5 left-1/2 -translate-x-1/2 bg-zinc-100 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 text-zinc-500 dark:text-zinc-400 text-[8px] font-black uppercase tracking-widest px-2.5 py-0.5 rounded-full shadow-sm whitespace-nowrap z-20 flex items-center gap-1.5 print:hidden max-w-[90%]">
                    <WhistleIcon className="text-orange-500 shrink-0" width={12} height={12} />
                    <span className="truncate">{refName}</span>
                </div>
            )}
        </div>
    );
}