import { cx } from '@/utils/cx';
import type { Lead, LeadSource } from '@/types/entities';

interface SourceGridProps {
    leads: Lead[];
    onSourceFilter: (source: LeadSource | null) => void;
    activeSource: LeadSource | null;
}

type SourceConfig = {
    source: LeadSource;
    label: string;
    icon: string;
    iconBg: string;
    iconText: string;
    countColor: string;
    delta: string;
};

const sourceConfigs: SourceConfig[] = [
    {
        source: 'FACEBOOK_AD',
        label: 'Facebook Ads',
        icon: 'f',
        iconBg: 'bg-utility-blue-50',
        iconText: 'text-utility-blue-700',
        countColor: 'text-utility-blue-700',
        delta: '+4',
    },
    {
        source: 'GOOGLE_AD',
        label: 'Google Ads',
        icon: 'G',
        iconBg: 'bg-utility-success-50',
        iconText: 'text-utility-success-700',
        countColor: 'text-utility-success-700',
        delta: '+2',
    },
    {
        source: 'INSTAGRAM',
        label: 'Instagram',
        icon: '@',
        iconBg: 'bg-utility-pink-50',
        iconText: 'text-utility-pink-700',
        countColor: 'text-utility-pink-700',
        delta: '+1',
    },
    {
        source: 'GOOGLE_MY_BUSINESS',
        label: 'Google My Business',
        icon: 'G',
        iconBg: 'bg-utility-blue-light-50',
        iconText: 'text-utility-blue-light-700',
        countColor: 'text-utility-blue-light-700',
        delta: '+3',
    },
    {
        source: 'REFERRAL',
        label: 'Referrals',
        icon: 'R',
        iconBg: 'bg-utility-purple-50',
        iconText: 'text-utility-purple-700',
        countColor: 'text-utility-purple-700',
        delta: '+2',
    },
    {
        source: 'WALK_IN',
        label: 'Walk-ins',
        icon: 'W',
        iconBg: 'bg-utility-orange-50',
        iconText: 'text-utility-orange-700',
        countColor: 'text-utility-orange-700',
        delta: '0',
    },
];

export const SourceGrid = ({ leads, onSourceFilter, activeSource }: SourceGridProps) => {
    const countBySource = (source: LeadSource): number =>
        leads.filter((l) => l.leadSource === source).length;

    const handleClick = (source: LeadSource) => {
        if (activeSource === source) {
            onSourceFilter(null);
        } else {
            onSourceFilter(source);
        }
    };

    return (
        <div className="grid grid-cols-3 gap-3">
            {sourceConfigs.map((config) => {
                const count = countBySource(config.source);
                const isActive = activeSource === config.source;

                return (
                    <button
                        key={config.source}
                        type="button"
                        onClick={() => handleClick(config.source)}
                        className={cx(
                            'cursor-pointer rounded-xl border border-secondary bg-primary p-4 text-left transition hover:shadow-md',
                            isActive && 'ring-2 ring-brand',
                        )}
                    >
                        <div className="mb-2 flex items-center gap-2">
                            <span
                                className={cx(
                                    'flex size-6 items-center justify-center rounded text-xs font-bold',
                                    config.iconBg,
                                    config.iconText,
                                )}
                            >
                                {config.icon}
                            </span>
                            <span className="text-xs text-quaternary">{config.label}</span>
                        </div>
                        <div className="flex items-baseline gap-2">
                            <span className={cx('text-xl font-bold', config.countColor)}>
                                {count}
                            </span>
                            <span
                                className={cx(
                                    'text-xs',
                                    config.delta.startsWith('+')
                                        ? 'text-success-primary'
                                        : config.delta === '0'
                                          ? 'text-quaternary'
                                          : 'text-error-primary',
                                )}
                            >
                                {config.delta === '0' ? 'same' : config.delta}
                            </span>
                        </div>
                    </button>
                );
            })}
        </div>
    );
};
