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

import { memo, useEffect } from 'react'

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'

import { CompactVariantBlock } from './blocks/CompactVariantBlock'
import { CosmicVariantBlock } from './blocks/CosmicVariantBlock'
import { CustomVariantBlock } from './blocks/CustomVariantBlock'
import { GalaxyVariantBlock } from './blocks/GalaxyVariantBlock'
import { InteractiveVariantBlock } from './blocks/InteractiveVariantBlock'
import { MultiEmployeeVariantBlock } from './blocks/MultiEmployeeVariantBlock'
import { useEmployeeManagement } from './hooks/useEmployeeManagement'
import { useTimesheetState } from './hooks/useTimesheetState'
import { useTimesheetStats } from './hooks/useTimesheetStats'
import { useTimesheetUtils } from './hooks/useTimesheetUtils'
import type { TimesheetDemoProps, CalendarDay } from './types'

/**
 * Демо-компонент табеля учета времени с модульной архитектурой
 * 
 * Особенности модульной архитектуры:
 * - 6 различных вариантов отображения в отдельных блоках
 * - Переиспользуемые хуки для управления состоянием
 * - Типизированные пропсы для каждого блока
 * - React.memo для оптимизации производительности
 * - Централизованное управление состоянием через кастомные хуки
 */
export const TimesheetDemo = memo<TimesheetDemoProps>(function TimesheetDemo({
  initialVariant = 'galaxy',
  initialEmployee = 'employee1',
  showVariantSelector = true,
}) {
  // Хуки для управления состоянием
  const timesheetState = useTimesheetState()
  const { employees, selectedEmployee, generateEmployeeCalendarData } = useEmployeeManagement()
  const { stats } = useTimesheetStats(timesheetState.calendarData, selectedEmployee)
  const utils = useTimesheetUtils()

  // Обработчик обновления дня для интерактивного варианта
  const handleUpdateDay = (day: number, data: CalendarDay) => {
    const updatedData = timesheetState.calendarData.map(d => 
      d.day === day ? data : d,
    )
    timesheetState.setCalendarData(updatedData)
  }

  // Генерация статистики для всех сотрудников для мульти-варианта
  const employeeStats = employees.reduce((acc, employee) => {
    const calendarData = generateEmployeeCalendarData(
      employee.id,
      timesheetState.selectedMonth,
      timesheetState.selectedYear,
    )
    const { calculateStats } = useTimesheetStats([], employee)
    const stats = calculateStats(calendarData, employee)
    acc[employee.id] = stats
    return acc
  }, {} as Record<string, import('./types').TimesheetStats>)

  // Инициализация начальных значений
  useEffect(() => {
    timesheetState.setSelectedVariant(initialVariant)
    timesheetState.setSelectedEmployee(initialEmployee)
  }, [initialVariant, initialEmployee, timesheetState])

  // Генерация календарных данных при изменении сотрудника или месяца
  useEffect(() => {
    const calendarData = generateEmployeeCalendarData(
      timesheetState.selectedEmployee,
      timesheetState.selectedMonth,
      timesheetState.selectedYear,
    )
    timesheetState.setCalendarData(calendarData)
    timesheetState.setEditableCalendarData([...calendarData])
  }, [
    timesheetState.selectedEmployee,
    timesheetState.selectedMonth,
    timesheetState.selectedYear,
    generateEmployeeCalendarData,
    timesheetState,
  ])

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-violet-800 p-8">
      <div className="max-w-7xl mx-auto">
        {/* Заголовок */}
        <div className="text-center mb-8">
          <h1 className="text-4xl font-bold text-white mb-2">
            Табель учета рабочего времени
          </h1>
          <p className="text-white/70 text-lg">
            Демонстрация различных вариантов отображения и взаимодействия
          </p>
        </div>

        {/* Селектор вариантов */}
        {showVariantSelector && (
          <div className="glass-card p-6 mb-8">
            <div className="flex items-center justify-center space-x-6">
              <label className="text-white font-medium">Выберите вариант:</label>
              <Select
                value={timesheetState.selectedVariant}
                onValueChange={timesheetState.setSelectedVariant}
              >
                <SelectTrigger className="w-64 bg-white/10 border-white/20 text-white">
                  <SelectValue placeholder="Выберите вариант отображения" />
                </SelectTrigger>
                <SelectContent className="bg-gray-900 border-white/20">
                  <SelectItem value="galaxy">🌌 Галактический вариант</SelectItem>
                  <SelectItem value="cosmic">✨ Космический вариант</SelectItem>
                  <SelectItem value="custom">🎨 Кастомный вариант</SelectItem>
                  <SelectItem value="compact">📱 Компактный вариант</SelectItem>
                  <SelectItem value="interactive">🎯 Интерактивный вариант</SelectItem>
                  <SelectItem value="multi-employee">👥 Мульти-сотрудник</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        )}

        {/* Блоки вариантов отображения */}
        <div className="space-y-8">
          {timesheetState.selectedVariant === 'galaxy' && selectedEmployee && (
            <GalaxyVariantBlock
              employee={selectedEmployee}
              calendarData={timesheetState.calendarData}
              stats={stats}
              utils={utils}
              selectedMonth={timesheetState.selectedMonth}
              selectedYear={timesheetState.selectedYear}
            />
          )}

          {timesheetState.selectedVariant === 'cosmic' && selectedEmployee && (
            <CosmicVariantBlock
              employee={selectedEmployee}
              calendarData={timesheetState.calendarData}
              stats={stats}
              utils={utils}
              selectedMonth={timesheetState.selectedMonth}
              selectedYear={timesheetState.selectedYear}
            />
          )}

          {timesheetState.selectedVariant === 'custom' && selectedEmployee && (
            <CustomVariantBlock
              employee={selectedEmployee}
              calendarData={timesheetState.calendarData}
              stats={stats}
              utils={utils}
              selectedMonth={timesheetState.selectedMonth}
              selectedYear={timesheetState.selectedYear}
            />
          )}

          {timesheetState.selectedVariant === 'compact' && selectedEmployee && (
            <CompactVariantBlock
              employee={selectedEmployee}
              calendarData={timesheetState.calendarData}
              stats={stats}
              utils={utils}
              selectedMonth={timesheetState.selectedMonth}
              selectedYear={timesheetState.selectedYear}
            />
          )}

          {timesheetState.selectedVariant === 'interactive' && selectedEmployee && (
            <InteractiveVariantBlock
              employee={selectedEmployee}
              calendarData={timesheetState.calendarData}
              stats={stats}
              utils={utils}
              selectedMonth={timesheetState.selectedMonth}
              selectedYear={timesheetState.selectedYear}
              onUpdateDay={handleUpdateDay}
            />
          )}

          {timesheetState.selectedVariant === 'multi-employee' && (
            <MultiEmployeeVariantBlock
              employees={employees}
              employeeStats={employeeStats}
              selectedMonth={timesheetState.selectedMonth}
              selectedYear={timesheetState.selectedYear}
              utils={utils}
            />
          )}
        </div>

        {/* Отладочная информация */}
        <div className="mt-8 text-xs text-white/40 p-4 bg-black/20 rounded-lg">
          <div>Выбранный вариант: {timesheetState.selectedVariant}</div>
          <div>Сотрудник: {timesheetState.selectedEmployee}</div>
          <div>Период: {utils.getMonthName(timesheetState.selectedMonth)} {timesheetState.selectedYear}</div>
          <div>Календарных данных: {timesheetState.calendarData.length} дней</div>
          <div>Статистика: {stats.totalHours}ч / {stats.workDays} рабочих дней / {stats.efficiency}% эффективность</div>
        </div>
      </div>
    </div>
  )
})

TimesheetDemo.displayName = 'TimesheetDemo'