import type { LucideIcon } from 'lucide-react'
import { TrendingUp, TrendingDown, Minus } from 'lucide-react'
import { Card } from '../common'

interface StatsCardProps {
  title: string
  value: number | string
  icon: LucideIcon
  trend?: 'up' | 'down' | 'stable'
  trendValue?: string
  color?: 'blue' | 'green' | 'yellow' | 'red' | 'slate'
  loading?: boolean
}

export default function StatsCard({
  title,
  value,
  icon: Icon,
  trend,
  trendValue,
  color = 'blue',
  loading = false,
}: StatsCardProps) {
  const colorStyles = {
    blue: {
      bg: 'bg-blue-50 dark:bg-blue-900/20 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/40',
      icon: 'text-blue-600 dark:text-blue-400',
      gradient: 'from-blue-500/20 to-blue-600/20',
    },
    green: {
      bg: 'bg-green-50 dark:bg-green-900/20 group-hover:bg-green-100 dark:group-hover:bg-green-900/40',
      icon: 'text-green-600 dark:text-green-400',
      gradient: 'from-green-500/20 to-green-600/20',
    },
    yellow: {
      bg: 'bg-yellow-50 dark:bg-yellow-900/20 group-hover:bg-yellow-100 dark:group-hover:bg-yellow-900/40',
      icon: 'text-yellow-600 dark:text-yellow-400',
      gradient: 'from-yellow-500/20 to-yellow-600/20',
    },
    red: {
      bg: 'bg-red-50 dark:bg-red-900/20 group-hover:bg-red-100 dark:group-hover:bg-red-900/40',
      icon: 'text-red-600 dark:text-red-400',
      gradient: 'from-red-500/20 to-red-600/20',
    },
    slate: {
      bg: 'bg-slate-50 dark:bg-slate-800 group-hover:bg-slate-100 dark:group-hover:bg-slate-700',
      icon: 'text-slate-600 dark:text-slate-400',
      gradient: 'from-slate-500/20 to-slate-600/20',
    },
  }

  const trendStyles = {
    up: {
      icon: TrendingUp,
      color: 'text-green-600 dark:text-green-400',
    },
    down: {
      icon: TrendingDown,
      color: 'text-red-600 dark:text-red-400',
    },
    stable: {
      icon: Minus,
      color: 'text-slate-500 dark:text-slate-400',
    },
  }

  const TrendIcon = trend ? trendStyles[trend].icon : null

  return (
    <Card hoverable className="stat-card group transition-all duration-300">
      <div className="flex items-start justify-between">
        <div className="flex-1">
          <p className="text-sm font-medium text-slate-500 dark:text-slate-400">{title}</p>
          {loading ? (
            <div className="mt-2 h-8 w-24 bg-slate-200 dark:bg-slate-700 rounded animate-pulse" />
          ) : (
            <div className="mt-2 flex items-baseline gap-2">
              <span className="text-2xl font-bold text-slate-900 dark:text-slate-100 tracking-tight">
                {typeof value === 'number' ? value.toLocaleString() : value}
              </span>
            </div>
          )}
          {trend && trendValue && TrendIcon && (
            <div className={`mt-2 flex items-center gap-1 text-sm ${trendStyles[trend].color}`}>
              <TrendIcon className="h-4 w-4" />
              <span>{trendValue}</span>
            </div>
          )}
        </div>
        <div className={`p-3 rounded-xl transition-colors duration-300 ${colorStyles[color].bg} bg-gradient-to-br ${colorStyles[color].gradient}`}>
          <Icon className={`h-6 w-6 ${colorStyles[color].icon}`} />
        </div>
      </div>
    </Card>
  )
}
