import { ChevronRight, TrendingDown, TrendingUp } from 'lucide-react'
import { memo } from 'react'

export interface StatCardProps {
  title: string
  icon: React.ComponentType<{ className?: string }>
  current: number  // Восстанавливаем оригинальное название
  change: number
  percentChange?: number  // Из GraphQL данных
  description: string
  onClick?: () => void
}

/**
 * Компактная статистическая карточка для дашборда склада
 * 
 * Особенности:
 * - Отображает текущее значение с изменениями за период
 * - Показывает процентное изменение и абсолютное изменение
 * - Поддерживает клик для навигации
 * - Анимированные переходы при наведении
 */
export const StatCard = memo<StatCardProps>(function StatCard({
  title,
  icon: Icon,
  current,
  change,
  percentChange,
  description,
  onClick,
}) {
  // Используем percentChange из GraphQL, если доступно, иначе вычисляем локально
  const displayPercentChange =
    percentChange !== undefined && percentChange !== null && !isNaN(percentChange)
      ? percentChange
      : current > 0
        ? (change / current) * 100
        : 0

  const formatNumber = (num: number) => {
    return num.toLocaleString('ru-RU')
  }


  return (
    <div
      className={`glass-card p-3 hover:bg-white/15 transition-all duration-300 relative overflow-hidden ${
        onClick ? 'cursor-pointer hover:scale-105 group' : ''
      }`}
      onClick={onClick}
    >
      <div className="flex items-center justify-between mb-2 gap-1">
        <div className="flex items-center space-x-2 min-w-0 flex-1">
          <div className="p-1.5 bg-white/10 rounded-lg flex-shrink-0">
            <Icon className="h-3 w-3 text-white" />
          </div>
          <span className="text-white text-xs font-semibold truncate">{title}</span>
        </div>
        
        {/* Процентное изменение - всегда показываем */}
        <div className="flex items-center space-x-0.5 px-0.5 py-0.5 rounded bg-blue-500/20 flex-shrink-0">
          {change >= 0 ? (
            <TrendingUp className="h-2.5 w-2.5 text-green-400" />
          ) : (
            <TrendingDown className="h-2.5 w-2.5 text-red-400" />
          )}
          <span className={`text-[9px] font-bold ${change >= 0 ? 'text-green-400' : 'text-red-400'}`}>
            {displayPercentChange >= 100 ? `+${Math.round(displayPercentChange)}%` : `${displayPercentChange >= 0 ? '+' : ''}${displayPercentChange.toFixed(1)}%`}
          </span>
        </div>
      </div>
      
      <div className="flex items-center justify-between mb-1">
        <div className="text-lg font-bold text-white">{formatNumber(current)}</div>
        
        {/* Изменения - всегда показываем */}
        <div className="flex items-center space-x-1">
          <div
            className={`flex items-center space-x-0.5 px-1 py-0.5 rounded ${
              change >= 0 ? 'bg-green-500/20' : 'bg-red-500/20'
            }`}
          >
            <span className={`text-xs font-bold ${change >= 0 ? 'text-green-400' : 'text-red-400'}`}>
              {change >= 0 ? '+' : ''}
              {change}
            </span>
          </div>
        </div>
      </div>
      
      <div className="text-white/60 text-[10px]">{description}</div>
      
      {onClick && (
        <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
          <ChevronRight className="h-3 w-3 text-white/60" />
        </div>
      )}
    </div>
  )
})

StatCard.displayName = 'StatCard'