import { ReactNode } from 'react';
import clsx from 'clsx';

export type ChannelCount = {
    name?: string;
    icon?: ReactNode;
    count: number;
    dotColor?: string;
    bgColor?: string;
    textColor?: string;
    borderColor?: string;
};

export type StatCardData = {
    label: string;          // e.g. "IN STOCK"
    value: ReactNode;        // e.g. 4 or "I" or any node
    subtitle?: string;       // e.g. "products"
    color?: 'green' | 'yellow' | 'red' | 'blue' | 'purple' | 'gray';
    icon?: ReactNode;
    channels?: ChannelCount[];
};

type Props = {
    stats: StatCardData[];
    columns?: 2 | 3 | 4 | 5;
    isLoading?: boolean;
};

const colorMap: Record<
    NonNullable<StatCardData['color']>,
    { bg: string; label: string; value: string }
> = {
    green: { bg: 'bg-emerald-50 border-emerald-100', label: 'text-emerald-600', value: 'text-emerald-900' },
    yellow: { bg: 'bg-amber-50 border-amber-100', label: 'text-amber-600', value: 'text-amber-900' },
    red: { bg: 'bg-rose-50 border-rose-100', label: 'text-rose-600', value: 'text-rose-900' },
    blue: { bg: 'bg-blue-50 border-blue-100', label: 'text-blue-600', value: 'text-blue-900' },
    purple: { bg: 'bg-violet-50 border-violet-100', label: 'text-violet-600', value: 'text-violet-900' },
    gray: { bg: 'bg-slate-50 border-slate-100', label: 'text-slate-600', value: 'text-slate-900' },
};

const colsMap: Record<NonNullable<Props['columns']>, string> = {
    2: 'sm:grid-cols-2',
    3: 'sm:grid-cols-2 lg:grid-cols-3',
    4: 'sm:grid-cols-2 lg:grid-cols-4',
    5: 'sm:grid-cols-2 lg:grid-cols-5',
};

/**
 * Generic, reusable "mini dashboard" of stat cards.
 * Pass any number of stats with their own label, value, subtitle and color theme.
 */
const StatsOverview = ({ stats, columns = 3, isLoading = false }: Props) => {
    if (!stats?.length) return null;

    return (
        <div className={clsx('grid grid-cols-1 gap-4', colsMap[columns])}>
            {stats.map((stat, idx) => {
                const theme = colorMap[stat.color ?? 'gray'];
                return (
                    <div
                        key={idx}
                        className={clsx(
                            'rounded-2xl border p-4.5 transition-all hover:shadow-md flex flex-col justify-between',
                            theme.bg
                        )}
                    >
                        {/* Header */}
                        <div className="flex items-center justify-between pb-2 border-b border-black/5">
                            <p className={clsx('text-xs sm:text-sm font-black tracking-wider uppercase', theme.label)}>
                                {stat.label}
                            </p>
                            {stat.icon && <span className={clsx('opacity-90 text-base', theme.label)}>{stat.icon}</span>}
                        </div>

                        {/* Content: Main number on left, 3 Channel boxes on right */}
                        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3.5 mt-3">
                            {/* Main Big Number */}
                            <div className="shrink-0 min-w-[75px]">
                                {isLoading ? (
                                    <div className="h-9 w-20 animate-pulse rounded bg-black/10"></div>
                                ) : (
                                    <p className={clsx('font-sans text-3xl sm:text-4xl font-black tracking-tight leading-none', theme.value)}>
                                        {stat.value}
                                    </p>
                                )}
                                {stat.subtitle && (
                                    <p className="text-xs font-extrabold text-slate-400 capitalize mt-1.5">{stat.subtitle}</p>
                                )}
                            </div>

                            {/* 3 Channel Icon Boxes */}
                            {stat.channels && stat.channels.length > 0 && (
                                <div className="grid grid-cols-3 gap-2 flex-1 sm:max-w-[210px] md:max-w-[230px] lg:max-w-[240px]">
                                    {stat.channels.map((ch, cIdx) => (
                                        <div
                                            key={cIdx}
                                            title={ch.name}
                                            className={clsx(
                                                'flex flex-col items-center justify-center py-2 px-2.5 rounded-xl border transition-all duration-200 hover:shadow-xs hover:-translate-y-0.5',
                                                ch.bgColor || 'bg-white/95',
                                                ch.borderColor || 'border-slate-200',
                                                ch.textColor || 'text-slate-800'
                                            )}
                                        >
                                            <div className="flex items-center justify-center mb-1">
                                                {ch.icon ? (
                                                    <span className="flex items-center justify-center">{ch.icon}</span>
                                                ) : (
                                                    <span className={clsx('w-2.5 h-2.5 rounded-full', ch.dotColor || 'bg-slate-400')} />
                                                )}
                                            </div>
                                            <span className="font-mono font-black text-sm sm:text-base tracking-tight leading-tight">
                                                {ch.count}
                                            </span>
                                        </div>
                                    ))}
                                </div>
                            )}
                        </div>
                    </div>
                );
            })}
        </div>
    );
};

export default StatsOverview;