// =============================================================================
// 🧑‍💼 EMPLOYEE STATS BLOCK V2
// =============================================================================
// Блок статистики сотрудников

'use client'

import { Users, UserCheck, Plane, HeartPulse, UserX, DollarSign } from 'lucide-react'
import React from 'react'

import { Card } from '@/components/ui/card'

import type { EmployeeStats } from '../types'

interface EmployeeStatsBlockProps {
  stats: EmployeeStats | null
  loading?: boolean
}

export const EmployeeStatsBlock = React.memo(function EmployeeStatsBlock({
  stats,
  loading = false,
}: EmployeeStatsBlockProps) {
  
  if (loading || !stats) {
    return (
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
        {Array.from({ length: 6 }).map((_, i) => (
          <Card key={i} className="glass-card p-4">
            <div className="animate-pulse">
              <div className="h-4 bg-white/10 rounded mb-2"></div>
              <div className="h-6 bg-white/20 rounded"></div>
            </div>
          </Card>
        ))}
      </div>
    )
  }

  const formatSalary = (salary?: number) => {
    if (!salary) return '-'
    return new Intl.NumberFormat('ru-RU', {
      style: 'currency',
      currency: 'RUB',
      maximumFractionDigits: 0,
    }).format(salary)
  }

  const statItems = [
    {
      icon: Users,
      label: 'Всего',
      value: stats.total,
      color: 'from-blue-500 to-blue-600',
    },
    {
      icon: UserCheck,
      label: 'Активных',
      value: stats.active,
      color: 'from-green-500 to-green-600',
    },
    {
      icon: Plane,
      label: 'В отпуске',
      value: stats.vacation,
      color: 'from-blue-500 to-blue-600',
    },
    {
      icon: HeartPulse,
      label: 'На больничном',
      value: stats.sick,
      color: 'from-orange-500 to-orange-600',
    },
    {
      icon: UserX,
      label: 'Уволенных',
      value: stats.fired,
      color: 'from-red-500 to-red-600',
    },
    {
      icon: DollarSign,
      label: 'Средняя ЗП',
      value: formatSalary(stats.averageSalary),
      color: 'from-purple-500 to-purple-600',
      isText: true,
    },
  ]

  return (
    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
      {statItems.map((item, index) => {
        const Icon = item.icon
        
        return (
          <Card key={index} className="glass-card p-4">
            <div className="flex items-center space-x-3">
              <div className={`p-2 rounded-lg bg-gradient-to-r ${item.color} bg-opacity-20`}>
                <Icon className="h-4 w-4 text-white" />
              </div>
              
              <div>
                <p className="text-white/60 text-xs uppercase font-medium">
                  {item.label}
                </p>
                <p className="text-white text-lg font-bold">
                  {item.isText ? item.value : item.value.toLocaleString('ru-RU')}
                </p>
              </div>
            </div>
          </Card>
        )
      })}
    </div>
  )
})