'use client'

import { TrendingUp, TrendingDown } from 'lucide-react'
import { Card } from '@/components/ui/card'

interface StatCardProps {
  title: string
  icon: React.ComponentType<{ className?: string }>
  current: number
  change: number
  description: string
  onClick?: () => void
  // ЭТАП 1: Добавляем прибыло/убыло
  arrived?: number
  departed?: number
  showMovements?: boolean
  // ЭТАП 3: Добавляем индикатор загрузки
  isLoading?: boolean
}

export function StatCard({
  title,
  icon: Icon,
  current,
  change,
  description,
  onClick,
  // ЭТАП 1: Добавляем прибыло/убыло
  arrived = 0,
  departed = 0,
  showMovements = false,
  // ЭТАП 3: Добавляем индикатор загрузки
  isLoading = false,
}: StatCardProps) {
  const formatNumber = (num: number): string => {
    if (num === 0) return '0'
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
  }

  // ЭТАП 2: Расчёт процентного изменения
  const getPercentageChange = (): string => {
    if (current === 0 || change === 0) return ''
    const percentage = Math.round((Math.abs(change) / current) * 100)
    return `${change > 0 ? '+' : '-'}${percentage}%`
  }

  return (
    <Card 
      className={`glass-card p-3 transition-all duration-300 ${
        onClick ? 'cursor-pointer hover:scale-105 hover:bg-white/15' : ''
      }`}
      onClick={onClick}
    >
      <div className="flex items-start justify-between">
        <div className="flex items-center space-x-2">
          <Icon className="w-4 h-4 text-blue-400 flex-shrink-0" />
          <div className="min-w-0">
            <p className="text-white/60 text-xs font-medium truncate">{title}</p>
            {/* ЭТАП 3: Скелетон при загрузке или реальные данные */}
            {isLoading ? (
              <div className="animate-pulse bg-white/20 h-5 w-16 rounded mt-1"></div>
            ) : (
              <p className="text-white text-lg font-bold">{formatNumber(current)}</p>
            )}
            
            {/* ОТКАТ ЭТАП 3: Убрать индикатор загрузки */}
            {/* 
            <p className="text-white text-lg font-bold">{formatNumber(current)}</p>
            */}
          </div>
        </div>
        
        {change !== 0 && (
          <div className={`flex flex-col items-end text-xs ${
            change > 0 ? 'text-green-400' : 'text-red-400'
          }`}>
            <div className="flex items-center">
              {change > 0 ? (
                <TrendingUp className="w-3 h-3 mr-1" />
              ) : (
                <TrendingDown className="w-3 h-3 mr-1" />
              )}
              {Math.abs(change)}
            </div>
            {/* ЭТАП 2: Отображение процентного изменения */}
            {getPercentageChange() && (
              <div className="text-[10px] text-white/60 mt-0.5">
                {getPercentageChange()}
              </div>
            )}
          </div>
        )}
        
        {/* ОТКАТ ЭТАП 2: Убрать процентное изменение */}
        {/* 
        {change !== 0 && (
          <div className={`flex items-center text-xs ${
            change > 0 ? 'text-green-400' : 'text-red-400'
          }`}>
            {change > 0 ? (
              <TrendingUp className="w-3 h-3 mr-1" />
            ) : (
              <TrendingDown className="w-3 h-3 mr-1" />
            )}
            {Math.abs(change)}
          </div>
        )}
        */}
      </div>
      
      {/* ЭТАП 1: Отображение прибыло/убыло */}
      {showMovements && (
        <div className="flex items-center justify-between text-[10px] mt-1 px-1">
          {/* ЭТАП 3: Скелетон для движений при загрузке */}
          {isLoading ? (
            <>
              <div className="animate-pulse bg-green-400/30 h-3 w-8 rounded"></div>
              <span className="text-white/40">|</span>
              <div className="animate-pulse bg-red-400/30 h-3 w-8 rounded"></div>
            </>
          ) : (
            <>
              <span className="text-green-400">+{formatNumber(arrived)}</span>
              <span className="text-white/40">|</span>
              <span className="text-red-400">-{formatNumber(departed)}</span>
            </>
          )}
          
          {/* ОТКАТ ЭТАП 3: Убрать скелетон для движений */}
          {/* 
          <span className="text-green-400">+{formatNumber(arrived)}</span>
          <span className="text-white/40">|</span>
          <span className="text-red-400">-{formatNumber(departed)}</span>
          */}
        </div>
      )}
      
      <p className="text-white/40 text-xs mt-1">{description}</p>
      
      {/* ОТКАТ ЭТАП 1: Убрать прибыло/убыло */}
      {/* 
      <p className="text-white/40 text-xs mt-1">{description}</p>
      */}
    </Card>
  )
}