import { TrendingDown, TrendingUp } from 'lucide-react';
import type { ElementType } from 'react';

import { Card, CardContent } from '@/components/ui/card';
import { cn } from '@/lib/utils';

type StatisticCardLargeProps = {
    title: string;
    value: string | number;
    change?: string;
    changeType?: 'up' | 'down' | 'neutral' | 'none';
    icon: string | ElementType;
    iconBg?: string;
    iconColor?: string;
};

const changeTypeStyles: Record<string, string> = {
    up: 'bg-green-50 text-green-700 dark:bg-green-500/10 dark:text-green-400',
    down: 'bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-400',
    neutral: 'bg-slate-50 text-slate-700 dark:bg-slate-500/10 dark:text-slate-400',
    none: 'hidden',
};

const StatisticCardLarge = ({
    title,
    value,
    change,
    changeType = 'none',
    icon: Icon,
    iconBg = 'bg-primary/10',
    iconColor = 'text-primary',
}: StatisticCardLargeProps) => {
    const isPositive = changeType === 'up';
    const isNegative = changeType === 'down';

    const resolvedIconColor = iconColor || 'text-primary';
    const resolvedIconBg = iconBg || 'bg-primary/5';

    return (
        <Card className="group relative overflow-hidden rounded-2xl border-slate-200 bg-white transition-all duration-300 hover:shadow-md dark:border-slate-800 dark:bg-slate-950">
            <CardContent className="p-2">
                <div className="flex items-center justify-between">
                    {/* Left: Content Stack */}
                    <div className="flex flex-col space-y-2.5">
                        <p className="text-xs font-bold tracking-widest text-slate-500 uppercase">
                            {title}
                        </p>

                        <h3 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
                            {value}
                        </h3>

                        {change && (
                            <div className="pt-1">
                                <span className={cn(
                                    "inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-bold leading-none",
                                    changeTypeStyles[changeType]
                                )}>
                                    {isPositive && <TrendingUp className="h-3 w-3" />}
                                    {isNegative && <TrendingDown className="h-3 w-3" />}
                                    {change}
                                </span>
                            </div>
                        )}
                    </div>

                    {/* Right: Icon Container */}
                    <div className={cn(
                        "flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl transition-transform duration-300 group-hover:rotate-3",
                        resolvedIconBg
                    )}>
                        {typeof Icon === 'string' ? (
                            <img src={Icon} alt={title} className="h-5 w-5 object-contain" />
                        ) : (
                            <Icon className={cn("h-5 w-5", resolvedIconColor)} />
                        )}
                    </div>
                </div>
            </CardContent>

            {/* Subtle bottom accent line */}
            <div className={cn(
                "absolute bottom-0 left-0 h-1 w-full opacity-0 transition-opacity duration-300 group-hover:opacity-100",
                isPositive ? "bg-green-500" : isNegative ? "bg-red-500" : "bg-primary"
            )} />
        </Card>
    );
};

export default StatisticCardLarge;