'use client'

interface EmployeeStatsProps {
  currentYear: number
  currentMonth: number
}

export function EmployeeStats({ currentYear, currentMonth }: EmployeeStatsProps) {
  // Генерируем дни месяца для подсчета статистики
  const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate()

  // Создаем мок-статистику для демонстрации
  const generateDayStatus = (day: number) => {
    const date = new Date(currentYear, currentMonth, day)
    const dayOfWeek = date.getDay()

    // Выходные
    if (dayOfWeek === 0 || dayOfWeek === 6) return 'weekend'

    // Некоторые случайные отпуска/больничные для демонстрации
    if ([15, 16].includes(day)) return 'vacation'
    if ([10].includes(day)) return 'sick'
    if ([22].includes(day)) return 'absent'

    return 'work'
  }

  // Подсчитываем статистику
  const stats = {
    workDays: 0,
    vacationDays: 0,
    sickDays: 0,
    absentDays: 0,
    totalHours: 0,
  }

  for (let day = 1; day <= daysInMonth; day++) {
    const status = generateDayStatus(day)
    switch (status) {
      case 'work':
        stats.workDays++
        stats.totalHours += 8
        break
      case 'vacation':
        stats.vacationDays++
        break
      case 'sick':
        stats.sickDays++
        break
      case 'absent':
        stats.absentDays++
        break
    }
  }

  return (
    <div className="grid grid-cols-4 gap-3 mt-4">
      <div className="text-center p-3 bg-white/10 rounded-lg">
        <p className="text-emerald-200 font-semibold text-lg">{stats.workDays}</p>
        <p className="text-white/60 text-xs">Рабочих дней</p>
      </div>
      <div className="text-center p-3 bg-white/10 rounded-lg">
        <p className="text-sky-200 font-semibold text-lg">{stats.vacationDays}</p>
        <p className="text-white/60 text-xs">Отпуск</p>
      </div>
      <div className="text-center p-3 bg-white/10 rounded-lg">
        <p className="text-amber-200 font-semibold text-lg">{stats.sickDays}</p>
        <p className="text-white/60 text-xs">Больничный</p>
      </div>
      <div className="text-center p-3 bg-white/5 rounded-lg">
        <p className="text-white font-semibold text-lg">{stats.totalHours}ч</p>
        <p className="text-white/60 text-xs">Всего часов</p>
      </div>
    </div>
  )
}
