import type { LucideIcon } from 'lucide-react';

export interface TasksMatrixButtonProps {
    id: string;
    label: string;
    count: number;
    icon: LucideIcon;
    color: string;
    isActive: boolean;
    onClick: () => void;
}

const colorStyles: Record<
    string,
    {
        active: string;
        inactive: string;
        hover: string;
        textActive: string;
        textInactive: string;
        iconActive: string;
        iconInactive: string;
    }
> = {
    blue: {
        active: 'border-blue-500 bg-blue-50/80 shadow-sm ring-1 ring-blue-500/30 dark:bg-blue-900/40',
        inactive:
            'border-blue-200 bg-blue-50/30 dark:border-blue-900/30 dark:bg-blue-900/10',
        hover: 'dark:hover:bg-blue-900/20',
        textActive: 'text-blue-700 dark:text-blue-300',
        textInactive: 'text-blue-700/70 dark:text-blue-400/70',
        iconActive: 'text-blue-600 dark:text-blue-400',
        iconInactive: 'text-blue-600/70 dark:text-blue-400/70',
    },
    red: {
        active: 'border-red-500 bg-red-50/80 shadow-sm ring-1 ring-red-500/30 dark:bg-red-900/40',
        inactive:
            'border-red-200 bg-red-50/30 dark:border-red-900/30 dark:bg-red-900/10',
        hover: 'dark:hover:bg-red-900/20',
        textActive: 'text-red-700 dark:text-red-300',
        textInactive: 'text-red-700/70 dark:text-red-400/70',
        iconActive: 'text-red-600 dark:text-red-400',
        iconInactive: 'text-red-600/70 dark:text-red-400/70',
    },
    amber: {
        active: 'border-amber-500 bg-amber-50/80 shadow-sm ring-1 ring-amber-500/30 dark:bg-amber-900/40',
        inactive:
            'border-amber-200 bg-amber-50/30 dark:border-amber-900/30 dark:bg-amber-900/10',
        hover: 'dark:hover:bg-amber-900/20',
        textActive: 'text-amber-700 dark:text-amber-300',
        textInactive: 'text-amber-700/70 dark:text-amber-400/70',
        iconActive: 'text-amber-600 dark:text-amber-400',
        iconInactive: 'text-amber-600/70 dark:text-amber-400/70',
    },
    neutral: {
        active: 'border-neutral-500 bg-neutral-50/80 shadow-sm ring-1 ring-neutral-500/30 dark:bg-neutral-800/60',
        inactive:
            'border-neutral-200 bg-neutral-50/30 dark:border-neutral-800 dark:bg-neutral-900/30',
        hover: 'dark:hover:bg-neutral-800/50',
        textActive: 'text-neutral-700 dark:text-neutral-300',
        textInactive: 'text-neutral-700/70 dark:text-neutral-400/70',
        iconActive: 'text-neutral-600 dark:text-neutral-400',
        iconInactive: 'text-neutral-600/70 dark:text-neutral-400/70',
    },
    purple: {
        active: 'border-purple-500 bg-purple-50/80 shadow-sm ring-1 ring-purple-500/30 dark:bg-purple-900/40',
        inactive:
            'border-purple-200 bg-purple-50/30 dark:border-purple-900/30 dark:bg-purple-900/10',
        hover: 'dark:hover:bg-purple-900/20',
        textActive: 'text-purple-700 dark:text-purple-300',
        textInactive: 'text-purple-700/70 dark:text-purple-400/70',
        iconActive: 'text-purple-600 dark:text-purple-400',
        iconInactive: 'text-purple-600/70 dark:text-purple-400/70',
    },
    green: {
        active: 'border-green-500 bg-green-50/80 shadow-sm ring-1 ring-green-500/30 dark:bg-green-900/40',
        inactive:
            'border-green-200 bg-green-50/30 dark:border-green-900/30 dark:bg-green-900/10',
        hover: 'dark:hover:bg-green-900/20',
        textActive: 'text-green-700 dark:text-green-300',
        textInactive: 'text-green-700/70 dark:text-green-400/70',
        iconActive: 'text-green-600 dark:text-green-400',
        iconInactive: 'text-green-600/70 dark:text-green-400/70',
    },
};

export function TasksMatrixButton({
    label,
    count,
    icon: Icon,
    color,
    isActive,
    onClick,
}: TasksMatrixButtonProps) {
    const styles = colorStyles[color] || colorStyles.neutral;

    return (
        <button
            onClick={onClick}
            className={`flex w-full cursor-pointer flex-col items-start gap-2 rounded-xl border p-3 transition-all duration-200 hover:scale-[1.02] hover:shadow-md ${
                isActive ? styles.active : styles.inactive
            } ${styles.hover}`}
        >
            <span
                className={`text-2xl leading-none font-extrabold tracking-tight ${
                    isActive ? styles.textActive : styles.textInactive
                }`}
            >
                {count}
            </span>
            <div className="flex w-full min-w-0 items-center gap-1.5">
                <Icon
                    className={`shrink-0 ${isActive ? styles.iconActive : styles.iconInactive}`}
                    size={12}
                />
                <span
                    className={`text-[9px] font-bold tracking-wider whitespace-nowrap uppercase ${
                        isActive ? styles.iconActive : styles.iconInactive
                    }`}
                    title={label}
                >
                    {label}
                </span>
            </div>
        </button>
    );
}