helix-engage/src/components/admin/team-scoreboard.tsx

import { useMemo } from 'react';

import { Avatar } from '@/components/base/avatar/avatar';
import { BadgeWithDot } from '@/components/base/badges/badges';
import { cx } from '@/utils/cx';
import type { Lead, Call, Agent } from '@/types/entities';

interface TeamScoreboardProps {
    leads: Lead[];
    calls: Call[];
    agents: Agent[];
}

type AgentStats = {
    agent: Agent;
    leadsProcessed: number;
    callsMade: number;
    appointmentsBooked: number;
};

export const TeamScoreboard = ({ leads, calls, agents }: TeamScoreboardProps) => {
    const agentStats = useMemo((): AgentStats[] => {
        return agents.map((agent) => {
            const agentName = agent.name;
            const leadsProcessed = leads.filter((lead) => lead.assignedAgent === agentName).length;
            const agentCalls = calls.filter((call) => call.agentName === agentName);
            const callsMade = agentCalls.length;
            const appointmentsBooked = agentCalls.filter(
                (call) => call.disposition === 'APPOINTMENT_BOOKED',
            ).length;

            return { agent, leadsProcessed, callsMade, appointmentsBooked };
        });
    }, [leads, calls, agents]);

    const bestPerformerId = useMemo(() => {
        let bestId = '';
        let maxAppointments = -1;

        for (const stat of agentStats) {
            if (stat.appointmentsBooked > maxAppointments) {
                maxAppointments = stat.appointmentsBooked;
                bestId = stat.agent.id;
            }
        }

        return bestId;
    }, [agentStats]);

    return (
        <div className="flex gap-4 overflow-x-auto">
            {agentStats.map(({ agent, leadsProcessed, callsMade, appointmentsBooked }) => {
                const isBest = agent.id === bestPerformerId;

                return (
                    <div
                        key={agent.id}
                        className={cx(
                            'flex min-w-[260px] flex-1 flex-col gap-4 rounded-2xl border border-secondary bg-primary p-5',
                            isBest && 'ring-2 ring-success-600',
                        )}
                    >
                        <div className="flex items-center gap-3">
                            <Avatar
                                initials={agent.initials ?? undefined}
                                size="md"
                                status={agent.isOnShift ? 'online' : 'offline'}
                            />
                            <div className="flex flex-1 flex-col">
                                <span className="text-sm font-semibold text-primary">{agent.name}</span>
                                <BadgeWithDot
                                    size="sm"
                                    type="pill-color"
                                    color={agent.isOnShift ? 'success' : 'gray'}
                                >
                                    {agent.isOnShift ? 'On Shift' : 'Off Shift'}
                                </BadgeWithDot>
                            </div>
                            {isBest && (
                                <span className="text-xs font-medium text-success-primary">Top</span>
                            )}
                        </div>

                        <div className="grid grid-cols-2 gap-3">
                            <div className="flex flex-col">
                                <span className="text-xs text-tertiary">Leads</span>
                                <span className="text-lg font-bold text-primary">{leadsProcessed}</span>
                            </div>
                            <div className="flex flex-col">
                                <span className="text-xs text-tertiary">Calls</span>
                                <span className="text-lg font-bold text-primary">{callsMade}</span>
                            </div>
                            <div className="flex flex-col">
                                <span className="text-xs text-tertiary">Appointments</span>
                                <span className="text-lg font-bold text-primary">{appointmentsBooked}</span>
                            </div>
                            <div className="flex flex-col">
                                <span className="text-xs text-tertiary">Avg Response</span>
                                <span className="text-lg font-bold text-primary">
                                    {agent.avgResponseHours ?? '—'}h
                                </span>
                            </div>
                        </div>
                    </div>
                );
            })}
        </div>
    );
};