import { AlertTriangle, Bell, Calendar, CreditCard, Users, Wrench } from 'lucide-react';
import { type NotificationCategory, type NotificationFilter } from '@/hooks/use-notifications';
import { cn } from '@/lib/utils';

interface FilterTab {
    key: NotificationFilter;
    label: string;
    icon: React.ElementType;
}

const FILTERS: FilterTab[] = [
    { key: 'all', label: 'All', icon: Bell },
    { key: 'bookings', label: 'Bookings', icon: Calendar },
    { key: 'payments', label: 'Payments', icon: CreditCard },
    { key: 'operations', label: 'Operations', icon: Wrench },
    { key: 'system', label: 'System', icon: AlertTriangle },
    { key: 'customers', label: 'Customers', icon: Users },
];

interface NotificationFiltersProps {
    activeFilter: NotificationFilter;
    categoryCounts: Partial<Record<NotificationCategory, number>>;
    totalUnread: number;
    onFilterChange: (filter: NotificationFilter) => void;
}

export function NotificationFilters({
    activeFilter,
    categoryCounts,
    totalUnread,
    onFilterChange,
}: NotificationFiltersProps) {
    const getCount = (key: NotificationFilter): number => {
        if (key === 'all') return totalUnread;
        return categoryCounts[key as NotificationCategory] ?? 0;
    };

    return (
        <div className="flex gap-1 overflow-x-auto border-b border-border px-3 pb-0 scrollbar-none">
            {FILTERS.map(({ key, label, icon: Icon }) => {
                const count = getCount(key);
                const isActive = activeFilter === key;

                return (
                    <button
                        key={key}
                        type="button"
                        onClick={() => onFilterChange(key)}
                        className={cn(
                            'flex shrink-0 items-center gap-1.5 border-b-2 px-2.5 py-2.5 text-xs font-medium transition-colors',
                            isActive
                                ? 'border-primary text-primary'
                                : 'border-transparent text-muted-foreground hover:text-foreground',
                        )}
                    >
                        <Icon className="h-3.5 w-3.5" />
                        {label}
                        {count > 0 && (
                            <span
                                className={cn(
                                    'flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-semibold leading-none',
                                    isActive
                                        ? 'bg-primary text-primary-foreground'
                                        : 'bg-muted text-muted-foreground',
                                )}
                            >
                                {count > 99 ? '99+' : count}
                            </span>
                        )}
                    </button>
                );
            })}
        </div>
    );
}