sfera-new/src/components/admin/ui-kit/timesheet-demo/blocks/CompactVariantBlock.tsx

import { Clock, Calendar, TrendingUp, Activity, Zap, User } from 'lucide-react'
import { memo } from 'react'

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

/**
 * Компактный вариант табеля - оптимизирован для мобильных устройств
 * 
 * Особенности:
 * - Минималистичный дизайн
 * - Оптимизация для мобильных экранов
 * - Сводная информация в карточках
 * - Быстрые метрики и индикаторы
 * - Экономичное использование пространства
 */
export const CompactVariantBlock = memo<CompactVariantBlockProps>(function CompactVariantBlock({
  employee,
  calendarData,
  stats,
  utils,
  selectedMonth,
  selectedYear,
}) {
  const monthName = utils.getMonthName(selectedMonth)
  
  // Группируем дни по неделям для компактного отображения
  const weeks: number[][] = []
  const daysInMonth = utils.getDaysInMonth(selectedMonth, selectedYear)
  let currentWeek: number[] = []
  
  for (let day = 1; day <= daysInMonth; day++) {
    currentWeek.push(day)
    if (currentWeek.length === 7 || day === daysInMonth) {
      weeks.push([...currentWeek])
      currentWeek = []
    }
  }

  const workingDays = calendarData.filter(d => d.hours > 0)
  const recentDays = workingDays.slice(-5) // Последние 5 рабочих дней
  
  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'work': return '💼'
      case 'remote': return '🏠' 
      case 'business': return '✈️'
      case 'vacation': return '🏖️'
      case 'sick': return '🤒'
      default: return '📅'
    }
  }

  const getEfficiencyColor = (efficiency: number | null) => {
    if (efficiency === null) return 'text-gray-400'
    if (efficiency >= 90) return 'text-green-400'
    if (efficiency >= 70) return 'text-yellow-400'
    if (efficiency >= 50) return 'text-orange-400'
    return 'text-red-400'
  }

  return (
    <div className="compact-variant space-y-4">
      {/* Шапка профиля */}
      <div className="glass-card p-4">
        <div className="flex items-center space-x-3">
          <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
            <User className="w-6 h-6 text-white" />
          </div>
          <div className="flex-1">
            <h2 className="text-lg font-bold text-white">📱 {employee.name}</h2>
            <p className="text-white/60 text-sm">{employee.position}</p>
          </div>
          <div className="text-right">
            <div className="text-white/60 text-xs">{monthName} {selectedYear}</div>
            <div className="text-blue-400 text-sm font-medium">{stats.totalHours}ч</div>
          </div>
        </div>
      </div>

      {/* Быстрые метрики */}
      <div className="grid grid-cols-2 gap-3">
        <div className="glass-card p-4">
          <div className="flex items-center space-x-2 mb-2">
            <Clock className="w-4 h-4 text-blue-400" />
            <span className="text-white/70 text-sm">Время</span>
          </div>
          <div className="text-xl font-bold text-white">{stats.totalHours}ч</div>
          <div className="text-xs text-white/50">{stats.workDays} дней</div>
        </div>

        <div className="glass-card p-4">
          <div className="flex items-center space-x-2 mb-2">
            <TrendingUp className="w-4 h-4 text-green-400" />
            <span className="text-white/70 text-sm">Эффективность</span>
          </div>
          <div className={`text-xl font-bold ${getEfficiencyColor(stats.efficiency)}`}>
            {stats.efficiency}%
          </div>
          <div className="text-xs text-white/50">{stats.completedTasks} задач</div>
        </div>

        <div className="glass-card p-4">
          <div className="flex items-center space-x-2 mb-2">
            <Zap className="w-4 h-4 text-orange-400" />
            <span className="text-white/70 text-sm">Переработки</span>
          </div>
          <div className="text-xl font-bold text-orange-400">{stats.overtime}ч</div>
          <div className="text-xs text-white/50">{stats.weekendWork} выходных</div>
        </div>

        <div className="glass-card p-4">
          <div className="flex items-center space-x-2 mb-2">
            <Activity className="w-4 h-4 text-purple-400" />
            <span className="text-white/70 text-sm">Среднее</span>
          </div>
          <div className="text-xl font-bold text-purple-400">{stats.averageHoursPerDay}ч</div>
          <div className="text-xs text-white/50">в день</div>
        </div>
      </div>

      {/* Мини-календарь */}
      <div className="glass-card p-4">
        <div className="flex items-center space-x-2 mb-3">
          <Calendar className="w-4 h-4 text-blue-400" />
          <span className="text-white font-medium">Обзор месяца</span>
        </div>
        
        <div className="space-y-2">
          {weeks.map((week, weekIndex) => (
            <div key={weekIndex} className="flex space-x-1">
              {week.map(day => {
                const dayData = calendarData.find(d => d.day === day)
                const totalHours = dayData ? dayData.hours + dayData.overtime : 0
                
                let intensity = 0
                if (totalHours > 0) {
                  intensity = Math.min(totalHours / 10, 1) // Максимум 10 часов = 100%
                }
                
                return (
                  <div 
                    key={day}
                    className={`
                      w-8 h-8 rounded flex items-center justify-center text-xs font-medium
                      transition-all duration-200 cursor-pointer hover:scale-110
                      ${dayData && totalHours > 0 
                        ? 'bg-blue-500 text-white'
                        : 'bg-white/10 text-white/40'
                      }
                    `}
                    style={dayData && totalHours > 0 ? {
                      opacity: 0.3 + intensity * 0.7,
                      backgroundColor: `rgba(59, 130, 246, ${0.3 + intensity * 0.7})`,
                    } : {}}
                    title={dayData ? `День ${day}: ${totalHours}ч` : `День ${day}`}
                  >
                    {day}
                  </div>
                )
              })}
            </div>
          ))}
        </div>
      </div>

      {/* Последние активности */}
      <div className="glass-card p-4">
        <div className="flex items-center space-x-2 mb-3">
          <Activity className="w-4 h-4 text-green-400" />
          <span className="text-white font-medium">Последние дни</span>
        </div>
        
        <div className="space-y-2">
          {recentDays.map((day, _index) => (
            <div 
              key={day.day}
              className="flex items-center justify-between p-2 rounded bg-white/5 hover:bg-white/10 transition-colors"
            >
              <div className="flex items-center space-x-3">
                <div className="text-lg">{getStatusIcon(day.status)}</div>
                <div>
                  <div className="text-white text-sm font-medium">
                    День {day.day}
                  </div>
                  <div className="text-white/60 text-xs">
                    {day.tasks} задач
                  </div>
                </div>
              </div>
              
              <div className="text-right">
                <div className="text-white text-sm font-medium">
                  {utils.formatHours(day.hours + day.overtime)}
                </div>
                <div className={`text-xs ${getEfficiencyColor(day.efficiency)}`}>
                  {day.efficiency}%
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Краткая статистика */}
      <div className="glass-card p-4">
        <div className="text-white font-medium mb-3">Итоги</div>
        
        <div className="space-y-2 text-sm">
          <div className="flex justify-between">
            <span className="text-white/70">Отработано дней:</span>
            <span className="text-white font-medium">{stats.workDays}</span>
          </div>
          
          <div className="flex justify-between">
            <span className="text-white/70">Общее время:</span>
            <span className="text-white font-medium">{stats.totalHours}ч</span>
          </div>
          
          <div className="flex justify-between">
            <span className="text-white/70">В среднем за день:</span>
            <span className="text-white font-medium">{stats.averageHoursPerDay}ч</span>
          </div>
          
          <div className="flex justify-between">
            <span className="text-white/70">Переработки:</span>
            <span className="text-orange-400 font-medium">{stats.overtime}ч</span>
          </div>
          
          <div className="flex justify-between">
            <span className="text-white/70">Эффективность:</span>
            <span className={`font-medium ${getEfficiencyColor(stats.efficiency)}`}>
              {stats.efficiency}%
            </span>
          </div>
          
          <div className="flex justify-between">
            <span className="text-white/70">Проекты:</span>
            <span className="text-purple-400 font-medium">{stats.projects}</span>
          </div>
        </div>
      </div>

      {/* Прогресс бар общий */}
      <div className="glass-card p-4">
        <div className="text-white font-medium mb-3">Прогресс месяца</div>
        
        <div className="relative">
          <div className="h-2 bg-white/10 rounded-full overflow-hidden">
            <div 
              className="h-full bg-gradient-to-r from-blue-500 to-purple-600 transition-all duration-500"
              style={{ 
                width: `${Math.min((stats.totalHours / 160) * 100, 100)}%`, // Предполагаем 160ч = 100%
              }}
            />
          </div>
          <div className="flex justify-between mt-2 text-xs text-white/60">
            <span>0ч</span>
            <span className="text-white font-medium">{stats.totalHours}ч</span>
            <span>160ч</span>
          </div>
        </div>
      </div>
    </div>
  )
})

CompactVariantBlock.displayName = 'CompactVariantBlock'