import { HorizontalScroller } from '@/components/ui/horizontal-scroller';
import { cn } from '@/lib/utils';
import type { ActivityModule, ActivityModuleCounts, ActivityOption } from '@/types/activity';
import { formatCount, isActivityModule, type Translate } from './activity-format';

const NS = 'activity';

interface Props {
    modules: ActivityOption[];
    /** null tant que le serveur ne les a pas envoyés (retour depuis l'onglet Équipe) : onglets sans chiffres. */
    counts: ActivityModuleCounts | null;
    active: ActivityModule | null;
    onChange: (module: ActivityModule | null) => void;
    locale: string;
    t: Translate;
}

/**
 * Onglets soulignés en tête du flux, un par module, chacun avec son nombre de
 * lignes. Les compteurs suivent tous les autres filtres (sauf le module) : on
 * voit OÙ est l'activité avant de cliquer. Un module à zéro reste affiché,
 * atténué — le masquer ferait croire qu'il n'existe pas.
 */
export function ActivityModuleTabs({ modules, counts, active, onChange, locale, t }: Props) {
    const tabs: Array<{ id: ActivityModule | null; label: string; count: number | null }> = [
        { id: null, label: t(NS, 'module_tab_all', 'Tout'), count: counts ? counts.all : null },
        ...modules
            .filter((module): module is ActivityOption & { id: ActivityModule } => isActivityModule(module.id))
            .map((module) => ({ id: module.id, label: module.name, count: counts ? (counts.by_module[module.id] ?? 0) : null })),
    ];

    return (
        <div data-tour="activity-modules" className="border-b">
            <HorizontalScroller className="overflow-x-auto px-1 sm:px-2">
                <div role="tablist" aria-label={t(NS, 'modules_label', 'Modules')} className="flex w-max">
                    {tabs.map((tab) => {
                        const selected = tab.id === active;

                        return (
                            <button
                                key={tab.id ?? 'all'}
                                type="button"
                                role="tab"
                                aria-selected={selected}
                                onClick={() => {
                                    if (!selected) onChange(tab.id);
                                }}
                                className={cn(
                                    // px-2.5 : les dix onglets tiennent sans défilement dès 1280 px de fenêtre.
                                    'focus-visible:ring-ring/50 -mb-px inline-flex h-10 shrink-0 items-center gap-1 border-b-2 px-2.5 text-sm whitespace-nowrap transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-inset',
                                    selected ? 'border-foreground text-foreground font-medium' : 'text-muted-foreground hover:text-foreground border-transparent',
                                )}
                            >
                                {tab.label}
                                {tab.count !== null && (
                                    <span
                                        className={cn(
                                            'text-xs tabular-nums',
                                            tab.count === 0 ? 'text-muted-foreground/50' : selected ? 'text-foreground/70' : 'text-muted-foreground',
                                        )}
                                    >
                                        {formatCount(tab.count, locale)}
                                    </span>
                                )}
                            </button>
                        );
                    })}
                </div>
            </HorizontalScroller>
        </div>
    );
}