import { cn } from '@/lib/utils';
import { formatHours } from '@/lib/format';
import type { DashboardMetrics } from '@/types';

type Measure = {
    label: string;
    value: string;
    note: string;
    wide?: boolean;
};

function Stat({ label, value, note, wide }: Measure) {
    return (
        <div
            className={cn(
                'bg-card flex flex-col gap-1 p-4',
                wide && 'col-span-2 lg:col-span-1',
            )}
        >
            <p className="text-muted-foreground text-xs">{label}</p>
            <p className="text-2xl leading-none font-semibold tabular-nums">
                {value}
            </p>
            <p className="text-muted-foreground text-xs">{note}</p>
        </div>
    );
}

/**
 * One instrument strip rather than five separate cards: the measures belong to the
 * same reading, and hairline rules keep them related without repeating a card frame.
 */
export default function StatRow({ metrics }: { metrics: DashboardMetrics }) {
    const attendance = metrics.attendance.average_percent;

    const measures: Measure[] = [
        {
            label: 'Lezioni terminate',
            value: String(metrics.meetings.ended),
            note:
                metrics.meetings.running > 0
                    ? `${metrics.meetings.running} in corso adesso`
                    : 'Nessuna lezione in corso',
        },
        {
            label: 'Lezioni da fare',
            value: String(metrics.meetings.scheduled),
            note: `${formatHours(metrics.hours.planned)} ore pianificate`,
        },
        {
            label: 'Oggi',
            value: String(metrics.meetings.today),
            note: `${metrics.meetings.this_week} questa settimana`,
        },
        {
            label: 'Ore erogate',
            value: formatHours(metrics.hours.delivered),
            note: `su ${formatHours(metrics.hours.delivered + metrics.hours.planned)} ore totali`,
        },
        {
            label: 'Presenza media',
            value: attendance === null ? '—' : `${Math.round(attendance)}%`,
            note:
                metrics.attendance.meetings_considered > 0
                    ? `su ${metrics.attendance.meetings_considered} ${
                          metrics.attendance.meetings_considered === 1
                              ? 'lezione'
                              : 'lezioni'
                      }`
                    : 'Nessuna lezione rilevata',
            wide: true,
        },
    ];

    return (
        <div className="bg-border grid grid-cols-2 gap-px overflow-hidden rounded-xl border lg:grid-cols-5">
            {measures.map((measure) => (
                <Stat key={measure.label} {...measure} />
            ))}
        </div>
    );
}