"use client";

import React, { useState, useEffect } from "react";

interface CalendarDay {
  day: number;
  status: string;
  hours: number;
  overtime: number;
  workType: string | null;
  mood: string | null;
  efficiency: number | null;
  tasks: number;
  breaks: number;
}
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Progress } from "@/components/ui/progress";

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Clock,
  Star,
  Award,
  ChevronLeft,
  ChevronRight,
  Settings,
  Download,
  Filter,
  MoreHorizontal,
  MapPin,
  CheckCircle,
  XCircle,
  Coffee,
  Home,
  Plane,
  Heart,
  Zap,
  Moon,
  Activity,
  Eye,
  Plus,
  X,
} from "lucide-react";

export function TimesheetDemo() {
  const [selectedVariant, setSelectedVariant] = useState<
    | "galaxy"
    | "cosmic"
    | "custom"
    | "compact"
    | "interactive"
    | "multi-employee"
  >("galaxy");
  const [selectedEmployee, setSelectedEmployee] = useState("employee1");
  const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth());
  const [selectedYear, setSelectedYear] = useState(new Date().getFullYear());
  const [animatedStats, setAnimatedStats] = useState(false);
  const [editableCalendarData, setEditableCalendarData] = useState<
    CalendarDay[]
  >([]);
  const [calendarData, setCalendarData] = useState<CalendarDay[]>([]);

  // Данные сотрудников
  const employees = [
    {
      id: "employee1",
      name: "Алексей Космонавтов",
      position: "Senior Frontend Developer",
      avatar: "/placeholder-employee-1.jpg",
      department: "Отдел разработки",
      level: "Senior",
      experience: "5 лет",
      efficiency: 95,
      totalHours: 176,
      workDays: 22,
      overtime: 8,
      projects: 3,
    },
    {
      id: "employee2",
      name: "Мария Звездочетова",
      position: "UX/UI Designer",
      avatar: "/placeholder-employee-2.jpg",
      department: "Дизайн-студия",
      level: "Middle",
      experience: "3 года",
      efficiency: 88,
      totalHours: 168,
      workDays: 21,
      overtime: 4,
      projects: 5,
    },
    {
      id: "employee3",
      name: "Иван Галактический",
      position: "DevOps Engineer",
      avatar: "/placeholder-employee-3.jpg",
      department: "Инфраструктура",
      level: "Lead",
      experience: "7 лет",
      efficiency: 92,
      totalHours: 184,
      workDays: 23,
      overtime: 12,
      projects: 2,
    },
  ];
  
  // Состояние для универсального табеля
  const [employeesList, setEmployeesList] = useState(employees);
  const [showAddForm, setShowAddForm] = useState(false);
  const [newEmployee, setNewEmployee] = useState({
    name: '',
    position: '',
    department: '',
    level: 'Junior'
  });

  // Генерируем данные календаря для всех сотрудников
  const generateEmployeeCalendarData = () => {
    const daysInMonth = new Date(selectedYear, selectedMonth + 1, 0).getDate();
    const employeeData: { [key: string]: CalendarDay[] } = {};

    employeesList.forEach(employee => {
      employeeData[employee.id] = Array.from({ length: daysInMonth }, (_, i) => {
        const dayOfWeek = (new Date(selectedYear, selectedMonth, 1).getDay() === 0 ? 6 : new Date(selectedYear, selectedMonth, 1).getDay() - 1 + i) % 7;
        const isWeekend = dayOfWeek >= 5;

        return {
          day: i + 1,
          status: isWeekend
            ? "weekend"
            : Math.random() > 0.95
            ? "sick"
            : Math.random() > 0.9
            ? "vacation"
            : "work",
          hours: isWeekend ? 0 : Math.floor(Math.random() * 3) + 7,
          overtime: Math.random() > 0.8 ? Math.floor(Math.random() * 3) + 1 : 0,
          workType: isWeekend ? null : ["office", "remote", "hybrid"][Math.floor(Math.random() * 3)],
          mood: isWeekend ? null : ["excellent", "good", "normal", "tired"][Math.floor(Math.random() * 4)],
          efficiency: isWeekend ? null : Math.floor(Math.random() * 30) + 70,
          tasks: isWeekend ? 0 : Math.floor(Math.random() * 8) + 2,
          breaks: isWeekend ? 0 : Math.floor(Math.random() * 3) + 1,
        };
      });
    });

    return employeeData;
  };

  const [allEmployeesData, setAllEmployeesData] = useState(generateEmployeeCalendarData());

  // Добавление нового сотрудника
  const handleAddEmployee = () => {
    if (newEmployee.name && newEmployee.position) {
      const newEmp = {
        id: `employee${Date.now()}`,
        name: newEmployee.name,
        position: newEmployee.position,
        department: newEmployee.department,
        level: newEmployee.level,
        avatar: `/placeholder-employee-${employeesList.length + 1}.jpg`,
        experience: "Новый сотрудник",
        efficiency: Math.floor(Math.random() * 20) + 80,
        totalHours: 0,
        workDays: 0,
        overtime: 0,
        projects: Math.floor(Math.random() * 5) + 1,
      };
      setEmployeesList([...employeesList, newEmp]);
      setNewEmployee({ name: '', position: '', department: '', level: 'Junior' });
      setShowAddForm(false);
    }
  };

  // Удаление сотрудника
  const handleRemoveEmployee = (employeeId: string) => {
    setEmployeesList(employeesList.filter(emp => emp.id !== employeeId));
  };

  // Получение цвета для сотрудника
  const getEmployeeColor = (index: number) => {
    const colors = [
      'from-cyan-500 to-blue-500',
      'from-pink-500 to-purple-500', 
      'from-emerald-500 to-teal-500',
      'from-orange-500 to-red-500',
      'from-yellow-500 to-amber-500',
      'from-indigo-500 to-purple-500',
      'from-green-500 to-lime-500',
      'from-rose-500 to-pink-500'
    ];
    return colors[index % colors.length];
  };

  // Получение статуса дня для конкретного сотрудника
  const getDayStatus = (employeeId: string, dayIndex: number) => {
    return allEmployeesData[employeeId]?.[dayIndex] || null;
  };

  // Подсчет работающих сотрудников в конкретный день
  const getWorkingEmployeesCount = (dayIndex: number) => {
    return employeesList.filter(emp => {
      const dayData = getDayStatus(emp.id, dayIndex);
      return dayData?.status === 'work';
    }).length;
  };

  // Анимация статистики
  useEffect(() => {
    const timer = setTimeout(() => setAnimatedStats(true), 500);
    return () => clearTimeout(timer);
  }, []);

  // Обновляем данные при изменении списка сотрудников или месяца
  useEffect(() => {
    setAllEmployeesData(generateEmployeeCalendarData());
  }, [employeesList, selectedMonth, selectedYear]);

  // Инициализация данных календаря для интерактивного режима
  useEffect(() => {
    if (editableCalendarData.length === 0 && calendarData.length > 0) {
      setEditableCalendarData([...calendarData]);
    }
  }, [calendarData, editableCalendarData.length]);

  // Подсчет статистики на основе редактируемых данных
  const interactiveStats = React.useMemo(() => {
    if (editableCalendarData.length === 0) {
      return {
        totalHours: 0,
        workDays: 0,
        vacation: 0,
        sick: 0,
        overtime: 0,
        avgEfficiency: 0,
      };
    }

    const workDays = editableCalendarData.filter(
      (day) => day.status === "work"
    ).length;
    const totalHours = editableCalendarData.reduce(
      (sum, day) => sum + day.hours,
      0
    );
    const vacation = editableCalendarData.filter(
      (day) => day.status === "vacation"
    ).length;
    const sick = editableCalendarData.filter(
      (day) => day.status === "sick"
    ).length;
    const overtime = editableCalendarData.reduce(
      (sum, day) => sum + day.overtime,
      0
    );
    const avgEfficiency =
      workDays > 0
        ? Math.round(
            editableCalendarData.reduce(
              (sum, day) => sum + (day.efficiency || 0),
              0
            ) / workDays
          )
        : 0;

    return {
      totalHours,
      workDays,
      vacation,
      sick,
      overtime,
      avgEfficiency,
    };
  }, [editableCalendarData]);

  // Функция для изменения статуса дня
  const toggleDayStatus = (dayIndex: number) => {
    const statuses = ["work", "weekend", "vacation", "sick", "absent"];
    const currentDay = editableCalendarData[dayIndex];
    if (!currentDay) return;

    const currentStatusIndex = statuses.indexOf(currentDay.status);
    const nextStatusIndex = (currentStatusIndex + 1) % statuses.length;
    const newStatus = statuses[nextStatusIndex];

    const updatedData = [...editableCalendarData];
    updatedData[dayIndex] = {
      ...currentDay,
      status: newStatus,
      hours: newStatus === "work" ? 8 : 0,
      overtime: newStatus === "work" ? Math.floor(Math.random() * 3) : 0,
    };

    setEditableCalendarData(updatedData);
  };

  const currentEmployee =
    employees.find((emp) => emp.id === selectedEmployee) || employees[0];

  // Обновление данных при изменении месяца/года
  useEffect(() => {
    const generateData = () => {
      const daysInMonth = new Date(
        selectedYear,
        selectedMonth + 1,
        0
      ).getDate();
      const firstDay = new Date(selectedYear, selectedMonth, 1).getDay();
      const adjustedFirstDay = firstDay === 0 ? 6 : firstDay - 1;

      const workTypes = ["office", "remote", "hybrid"];
      const moods = ["excellent", "good", "normal", "tired"];

      return Array.from({ length: daysInMonth }, (_, i) => {
        const dayOfWeek = (adjustedFirstDay + i) % 7;
        const isWeekend = dayOfWeek >= 5;

        return {
          day: i + 1,
          status: isWeekend
            ? "weekend"
            : Math.random() > 0.95
            ? "sick"
            : Math.random() > 0.9
            ? "vacation"
            : "work",
          hours: isWeekend ? 0 : Math.floor(Math.random() * 3) + 7,
          overtime: Math.random() > 0.8 ? Math.floor(Math.random() * 3) + 1 : 0,
          workType: isWeekend
            ? null
            : workTypes[Math.floor(Math.random() * workTypes.length)],
          mood: isWeekend
            ? null
            : moods[Math.floor(Math.random() * moods.length)],
          efficiency: isWeekend ? null : Math.floor(Math.random() * 30) + 70,
          tasks: isWeekend ? 0 : Math.floor(Math.random() * 8) + 2,
          breaks: isWeekend ? 0 : Math.floor(Math.random() * 3) + 1,
        };
      });
    };

    setCalendarData(generateData());
    setAnimatedStats(false);
    const timer = setTimeout(() => setAnimatedStats(true), 300);
    return () => clearTimeout(timer);
  }, [selectedMonth, selectedYear]);

  const getStatusColor = (status: string) => {
    switch (status) {
      case "work":
        return "bg-gradient-to-r from-emerald-500 to-green-500";
      case "weekend":
        return "bg-gradient-to-r from-slate-500 to-gray-500";
      case "vacation":
        return "bg-gradient-to-r from-blue-500 to-cyan-500";
      case "sick":
        return "bg-gradient-to-r from-amber-500 to-orange-500";
      case "absent":
        return "bg-gradient-to-r from-red-500 to-rose-500";
      default:
        return "bg-gradient-to-r from-slate-500 to-gray-500";
    }
  };

  const getWorkTypeIcon = (workType: string | null) => {
    switch (workType) {
      case "office":
        return <MapPin className="h-3 w-3" />;
      case "remote":
        return <Home className="h-3 w-3" />;
      case "hybrid":
        return <Zap className="h-3 w-3" />;
      default:
        return null;
    }
  };

  const getMoodIcon = (mood: string | null) => {
    switch (mood) {
      case "excellent":
        return <Star className="h-3 w-3 text-yellow-400" />;
      case "good":
        return <CheckCircle className="h-3 w-3 text-green-400" />;
      case "normal":
        return <Clock className="h-3 w-3 text-blue-400" />;
      case "tired":
        return <Coffee className="h-3 w-3 text-orange-400" />;
      default:
        return null;
    }
  };

  const monthNames = [
    "Январь",
    "Февраль",
    "Март",
    "Апрель",
    "Май",
    "Июнь",
    "Июль",
    "Август",
    "Сентябрь",
    "Октябрь",
    "Ноябрь",
    "Декабрь",
  ];

  const dayNames = ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"];

  // Статистика
  const stats = {
    totalHours: calendarData.reduce((sum, day) => sum + day.hours, 0),
    workDays: calendarData.filter((day) => day.status === "work").length,
    weekends: calendarData.filter((day) => day.status === "weekend").length,
    vacation: calendarData.filter((day) => day.status === "vacation").length,
    sick: calendarData.filter((day) => day.status === "sick").length,
    overtime: calendarData.reduce((sum, day) => sum + day.overtime, 0),
    avgEfficiency: Math.round(
      calendarData
        .filter((day) => day.efficiency)
        .reduce(
          (sum, day, _, arr) => sum + (day.efficiency || 0) / arr.length,
          0
        )
    ),
    totalTasks: calendarData.reduce((sum, day) => sum + day.tasks, 0),
  };

  const renderGalaxyVariant = () => (
    <Card className="glass-card border-white/10 overflow-hidden relative">
      {/* Космический фон с анимацией */}
      <div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-blue-900/20 to-indigo-900/20">
        <div
          className="absolute inset-0 opacity-50"
          style={{
            backgroundImage:
              'url(\'data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.05"%3E%3Ccircle cx="7" cy="7" r="1"/%3E%3Ccircle cx="27" cy="27" r="1"/%3E%3Ccircle cx="47" cy="47" r="1"/%3E%3Ccircle cx="17" cy="37" r="1"/%3E%3Ccircle cx="37" cy="17" r="1"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\')',
          }}
        ></div>

        {/* Плавающие частицы */}
        <div className="absolute top-10 left-10 w-2 h-2 bg-purple-400/30 rounded-full animate-pulse"></div>
        <div className="absolute top-20 right-20 w-1 h-1 bg-blue-400/40 rounded-full animate-pulse delay-1000"></div>
        <div className="absolute bottom-20 left-20 w-1.5 h-1.5 bg-cyan-400/30 rounded-full animate-pulse delay-2000"></div>
        <div className="absolute bottom-10 right-10 w-1 h-1 bg-purple-300/40 rounded-full animate-pulse delay-500"></div>
      </div>

      <CardHeader className="relative z-10">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-4">
            <div className="relative">
              <Avatar className="h-16 w-16 ring-2 ring-purple-500/50 ring-offset-2 ring-offset-gray-900">
                <AvatarImage src={currentEmployee.avatar} />
                <AvatarFallback className="bg-gradient-to-br from-purple-600 to-blue-600 text-white text-lg font-bold">
                  {currentEmployee.name
                    .split(" ")
                    .map((n) => n[0])
                    .join("")}
                </AvatarFallback>
              </Avatar>
              <div className="absolute -top-1 -right-1 w-5 h-5 bg-gradient-to-r from-green-400 to-emerald-500 rounded-full flex items-center justify-center">
                <div className="w-2 h-2 bg-white rounded-full"></div>
              </div>
            </div>

            <div>
              <h3 className="text-xl font-bold text-white mb-1">
                {currentEmployee.name}
              </h3>
              <p className="text-purple-300 text-sm mb-1">
                {currentEmployee.position}
              </p>
              <div className="flex items-center space-x-3 text-xs text-white/70">
                <span>{currentEmployee.department}</span>
                <span>•</span>
                <Badge className="bg-purple-600/30 text-purple-200 border-purple-500/30">
                  {currentEmployee.level}
                </Badge>
                <span>•</span>
                <span>{currentEmployee.experience}</span>
              </div>
            </div>
          </div>

          <div className="text-right">
            <div className="text-3xl font-bold text-white mb-1 bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">
              {animatedStats ? stats.totalHours : 0}ч
            </div>
            <p className="text-purple-300 text-sm">
              Отработано в {monthNames[selectedMonth].toLowerCase()}
            </p>
            <div className="flex items-center justify-end mt-2">
              <div className="flex items-center space-x-1">
                <Star className="h-4 w-4 text-yellow-400 fill-current" />
                <span className="text-white font-medium">
                  {currentEmployee.efficiency}%
                </span>
              </div>
            </div>
          </div>
        </div>

        {/* Навигация по месяцам */}
        <div className="flex items-center justify-between mt-6">
          <div className="flex items-center space-x-4">
            <Select
              value={selectedEmployee}
              onValueChange={setSelectedEmployee}
            >
              <SelectTrigger className="w-64 glass-input bg-white/10 border-white/20 text-white hover:bg-white/15">
                <SelectValue />
              </SelectTrigger>
              <SelectContent className="bg-gray-900/95 backdrop-blur border-white/20 text-white">
                {employees.map((emp) => (
                  <SelectItem
                    key={emp.id}
                    value={emp.id}
                    className="text-white hover:bg-white/10"
                  >
                    <div className="flex items-center space-x-3">
                      <Avatar className="h-6 w-6">
                        <AvatarImage src={emp.avatar} />
                        <AvatarFallback className="bg-purple-600 text-white text-xs">
                          {emp.name
                            .split(" ")
                            .map((n) => n[0])
                            .join("")}
                        </AvatarFallback>
                      </Avatar>
                      <div>
                        <div className="font-medium">{emp.name}</div>
                        <div className="text-xs text-white/60">
                          {emp.position}
                        </div>
                      </div>
                    </div>
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="flex items-center space-x-2">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => {
                if (selectedMonth === 0) {
                  setSelectedMonth(11);
                  setSelectedYear(selectedYear - 1);
                } else {
                  setSelectedMonth(selectedMonth - 1);
                }
              }}
              className="text-white hover:bg-white/10"
            >
              <ChevronLeft className="h-4 w-4" />
            </Button>

            <div className="text-white font-semibold text-lg min-w-[140px] text-center">
              {monthNames[selectedMonth]} {selectedYear}
            </div>

            <Button
              variant="ghost"
              size="sm"
              onClick={() => {
                if (selectedMonth === 11) {
                  setSelectedMonth(0);
                  setSelectedYear(selectedYear + 1);
                } else {
                  setSelectedMonth(selectedMonth + 1);
                }
              }}
              className="text-white hover:bg-white/10"
            >
              <ChevronRight className="h-4 w-4" />
            </Button>
          </div>

          <div className="flex items-center space-x-2">
            <Button
              variant="ghost"
              size="sm"
              className="text-white hover:bg-white/10"
            >
              <Download className="h-4 w-4 mr-2" />
              Экспорт
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className="text-white hover:bg-white/10"
            >
              <Settings className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </CardHeader>

      <CardContent className="space-y-6 relative z-10">
        {/* Статистические карты */}
        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-6">
          <div className="glass-card p-4 rounded-xl border border-purple-500/30 bg-gradient-to-br from-purple-500/10 to-blue-500/10 hover:from-purple-500/20 hover:to-blue-500/20 transition-all duration-300">
            <div className="flex items-center justify-between mb-2">
              <Clock className="h-5 w-5 text-purple-400" />
              <div className="text-right">
                <div className="text-white text-lg font-bold">
                  {animatedStats ? stats.totalHours : 0}
                </div>
                <div className="text-purple-300 text-xs">Часов</div>
              </div>
            </div>
            <Progress
              value={animatedStats ? (stats.totalHours / 200) * 100 : 0}
              className="h-2 bg-white/10"
            />
          </div>

          <div className="glass-card p-4 rounded-xl border border-green-500/30 bg-gradient-to-br from-green-500/10 to-emerald-500/10 hover:from-green-500/20 hover:to-emerald-500/20 transition-all duration-300">
            <div className="flex items-center justify-between mb-2">
              <CheckCircle className="h-5 w-5 text-green-400" />
              <div className="text-right">
                <div className="text-white text-lg font-bold">
                  {animatedStats ? stats.workDays : 0}
                </div>
                <div className="text-green-300 text-xs">Рабочих дней</div>
              </div>
            </div>
            <Progress
              value={animatedStats ? (stats.workDays / 25) * 100 : 0}
              className="h-2 bg-white/10"
            />
          </div>

          <div className="glass-card p-4 rounded-xl border border-blue-500/30 bg-gradient-to-br from-blue-500/10 to-cyan-500/10 hover:from-blue-500/20 hover:to-cyan-500/20 transition-all duration-300">
            <div className="flex items-center justify-between mb-2">
              <Plane className="h-5 w-5 text-blue-400" />
              <div className="text-right">
                <div className="text-white text-lg font-bold">
                  {animatedStats ? stats.vacation : 0}
                </div>
                <div className="text-blue-300 text-xs">Отпуск</div>
              </div>
            </div>
            <Progress
              value={animatedStats ? (stats.vacation / 5) * 100 : 0}
              className="h-2 bg-white/10"
            />
          </div>

          <div className="glass-card p-4 rounded-xl border border-orange-500/30 bg-gradient-to-br from-orange-500/10 to-yellow-500/10 hover:from-orange-500/20 hover:to-yellow-500/20 transition-all duration-300">
            <div className="flex items-center justify-between mb-2">
              <Heart className="h-5 w-5 text-orange-400" />
              <div className="text-right">
                <div className="text-white text-lg font-bold">
                  {animatedStats ? stats.sick : 0}
                </div>
                <div className="text-orange-300 text-xs">Больничный</div>
              </div>
            </div>
            <Progress
              value={animatedStats ? (stats.sick / 3) * 100 : 0}
              className="h-2 bg-white/10"
            />
          </div>

          <div className="glass-card p-4 rounded-xl border border-yellow-500/30 bg-gradient-to-br from-yellow-500/10 to-amber-500/10 hover:from-yellow-500/20 hover:to-amber-500/20 transition-all duration-300">
            <div className="flex items-center justify-between mb-2">
              <Zap className="h-5 w-5 text-yellow-400" />
              <div className="text-right">
                <div className="text-white text-lg font-bold">
                  {animatedStats ? stats.overtime : 0}
                </div>
                <div className="text-yellow-300 text-xs">Переработка</div>
              </div>
            </div>
            <Progress
              value={animatedStats ? (stats.overtime / 20) * 100 : 0}
              className="h-2 bg-white/10"
            />
          </div>

          <div className="glass-card p-4 rounded-xl border border-pink-500/30 bg-gradient-to-br from-pink-500/10 to-rose-500/10 hover:from-pink-500/20 hover:to-rose-500/20 transition-all duration-300">
            <div className="flex items-center justify-between mb-2">
              <Activity className="h-5 w-5 text-pink-400" />
              <div className="text-right">
                <div className="text-white text-lg font-bold">
                  {animatedStats ? stats.avgEfficiency : 0}%
                </div>
                <div className="text-pink-300 text-xs">Эффективность</div>
              </div>
            </div>
            <Progress
              value={animatedStats ? stats.avgEfficiency : 0}
              className="h-2 bg-white/10"
            />
          </div>
        </div>

        {/* Календарь */}
        <div className="space-y-4">
          {/* Заголовки дней недели */}
          <div className="grid grid-cols-7 gap-2 text-center">
            {dayNames.map((day) => (
              <div key={day} className="text-white/70 font-medium text-sm py-2">
                {day}
              </div>
            ))}
          </div>

          {/* Дни месяца */}
          <div className="grid grid-cols-7 gap-2">
            {/* Пустые ячейки для начала месяца */}
            {Array.from({
              length:
                new Date(selectedYear, selectedMonth, 1).getDay() === 0
                  ? 6
                  : new Date(selectedYear, selectedMonth, 1).getDay() - 1,
            }).map((_, index) => (
              <div key={`empty-${index}`} className="aspect-square"></div>
            ))}

            {/* Дни месяца */}
            {calendarData.map((day, index) => (
              <div
                key={index}
                className={`
                  aspect-square p-2 rounded-xl border transition-all duration-300 hover:scale-105 cursor-pointer group
                  ${
                    day.status === "work"
                      ? "border-green-500/30 bg-gradient-to-br from-green-500/10 to-emerald-500/10 hover:from-green-500/20 hover:to-emerald-500/20"
                      : ""
                  }
                  ${
                    day.status === "weekend"
                      ? "border-gray-500/30 bg-gradient-to-br from-gray-500/10 to-slate-500/10"
                      : ""
                  }
                  ${
                    day.status === "vacation"
                      ? "border-blue-500/30 bg-gradient-to-br from-blue-500/10 to-cyan-500/10"
                      : ""
                  }
                  ${
                    day.status === "sick"
                      ? "border-orange-500/30 bg-gradient-to-br from-orange-500/10 to-yellow-500/10"
                      : ""
                  }
                  ${
                    day.status === "absent"
                      ? "border-red-500/30 bg-gradient-to-br from-red-500/10 to-rose-500/10"
                      : ""
                  }
                `}
              >
                <div className="h-full flex flex-col justify-between">
                  <div className="flex items-center justify-between">
                    <span className="text-white font-medium text-sm">
                      {day.day}
                    </span>
                    {day.workType && (
                      <div className="text-white/60">
                        {getWorkTypeIcon(day.workType)}
                      </div>
                    )}
                  </div>

                  {day.status === "work" && (
                    <div className="space-y-1">
                      <div className="flex items-center justify-between">
                        <span className="text-white/80 text-xs">
                          {day.hours}ч
                        </span>
                        {day.overtime > 0 && (
                          <span className="text-yellow-400 text-xs">
                            +{day.overtime}
                          </span>
                        )}
                      </div>

                      <div className="flex items-center justify-between">
                        {getMoodIcon(day.mood)}
                        {day.efficiency && (
                          <span className="text-white/60 text-xs">
                            {day.efficiency}%
                          </span>
                        )}
                      </div>
                    </div>
                  )}

                  {day.status !== "work" && day.status !== "weekend" && (
                    <div className="flex justify-center">
                      <div
                        className={`w-2 h-2 rounded-full ${getStatusColor(
                          day.status
                        )}`}
                      ></div>
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Легенда */}
        <div className="flex flex-wrap gap-4 text-sm justify-center">
          <div className="flex items-center gap-2 bg-white/5 px-3 py-2 rounded-lg">
            <div className="w-3 h-3 rounded-full bg-gradient-to-r from-emerald-500 to-green-500"></div>
            <span className="text-white/70">Работа</span>
          </div>
          <div className="flex items-center gap-2 bg-white/5 px-3 py-2 rounded-lg">
            <div className="w-3 h-3 rounded-full bg-gradient-to-r from-slate-500 to-gray-500"></div>
            <span className="text-white/70">Выходной</span>
          </div>
          <div className="flex items-center gap-2 bg-white/5 px-3 py-2 rounded-lg">
            <div className="w-3 h-3 rounded-full bg-gradient-to-r from-blue-500 to-cyan-500"></div>
            <span className="text-white/70">Отпуск</span>
          </div>
          <div className="flex items-center gap-2 bg-white/5 px-3 py-2 rounded-lg">
            <div className="w-3 h-3 rounded-full bg-gradient-to-r from-amber-500 to-orange-500"></div>
            <span className="text-white/70">Больничный</span>
          </div>
          <div className="flex items-center gap-2 bg-white/5 px-3 py-2 rounded-lg">
            <div className="w-3 h-3 rounded-full bg-gradient-to-r from-red-500 to-rose-500"></div>
            <span className="text-white/70">Прогул</span>
          </div>
        </div>
      </CardContent>
    </Card>
  );

  const renderCosmicVariant = () => (
    <Card className="glass-card border-white/10 overflow-hidden relative">
      {/* Космический фон с эффектом туманности */}
      <div className="absolute inset-0 bg-gradient-to-br from-indigo-900/30 via-purple-900/30 to-pink-900/30">
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-purple-600/10 via-blue-600/5 to-transparent"></div>
        <div
          className="absolute inset-0 bg-[conic-gradient(from_0deg_at_50%_50%,_var(--tw-gradient-stops))] from-transparent via-purple-500/5 to-transparent animate-spin"
          style={{ animationDuration: "20s" }}
        ></div>

        {/* Звездное поле */}
        <div className="absolute top-5 left-5 w-1 h-1 bg-white/60 rounded-full animate-pulse"></div>
        <div className="absolute top-12 right-12 w-0.5 h-0.5 bg-blue-300/70 rounded-full animate-pulse delay-300"></div>
        <div className="absolute bottom-20 left-8 w-1.5 h-1.5 bg-purple-300/50 rounded-full animate-pulse delay-700"></div>
        <div className="absolute bottom-8 right-20 w-1 h-1 bg-pink-300/60 rounded-full animate-pulse delay-1000"></div>
        <div className="absolute top-1/3 left-1/4 w-0.5 h-0.5 bg-cyan-300/80 rounded-full animate-pulse delay-500"></div>
        <div className="absolute top-2/3 right-1/3 w-1 h-1 bg-yellow-300/50 rounded-full animate-pulse delay-1200"></div>
      </div>

      <CardHeader className="relative z-10">
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center space-x-6">
            <div className="relative">
              <div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full animate-pulse opacity-50"></div>
              <Avatar className="h-20 w-20 relative z-10 ring-4 ring-gradient-to-r from-purple-400 to-pink-400 ring-offset-4 ring-offset-gray-900">
                <AvatarImage src={currentEmployee.avatar} />
                <AvatarFallback className="bg-gradient-to-br from-purple-600 via-indigo-600 to-pink-600 text-white text-xl font-bold">
                  {currentEmployee.name
                    .split(" ")
                    .map((n) => n[0])
                    .join("")}
                </AvatarFallback>
              </Avatar>

              {/* Орбитальные элементы */}
              <div className="absolute -top-2 -right-2 w-6 h-6 bg-gradient-to-r from-green-400 to-emerald-500 rounded-full flex items-center justify-center animate-bounce">
                <CheckCircle className="h-3 w-3 text-white" />
              </div>

              <div className="absolute -bottom-1 -left-1 w-4 h-4 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full flex items-center justify-center">
                <Star className="h-2 w-2 text-white fill-current" />
              </div>
            </div>

            <div>
              <h3 className="text-2xl font-bold bg-gradient-to-r from-white via-purple-200 to-pink-200 bg-clip-text text-transparent mb-2">
                {currentEmployee.name}
              </h3>
              <p className="text-purple-300 text-base mb-2 font-medium">
                {currentEmployee.position}
              </p>
              <div className="flex items-center space-x-4 text-sm">
                <Badge className="bg-gradient-to-r from-purple-600 to-indigo-600 text-white border-none">
                  {currentEmployee.department}
                </Badge>
                <Badge className="bg-gradient-to-r from-pink-600 to-rose-600 text-white border-none">
                  {currentEmployee.level}
                </Badge>
                <span className="text-white/70">
                  {currentEmployee.experience} опыта
                </span>
              </div>
            </div>
          </div>

          <div className="text-right space-y-2">
            <div className="text-4xl font-bold bg-gradient-to-r from-purple-400 via-pink-400 to-cyan-400 bg-clip-text text-transparent">
              {animatedStats ? stats.totalHours : 0}
            </div>
            <p className="text-purple-300 font-medium">
              часов в {monthNames[selectedMonth].toLowerCase()}
            </p>

            <div className="flex items-center justify-end space-x-4 mt-3">
              <div className="flex items-center space-x-2 bg-white/10 rounded-full px-3 py-1">
                <Activity className="h-4 w-4 text-cyan-400" />
                <span className="text-white font-bold">
                  {currentEmployee.efficiency}%
                </span>
              </div>
              <div className="flex items-center space-x-2 bg-white/10 rounded-full px-3 py-1">
                <Award className="h-4 w-4 text-yellow-400" />
                <span className="text-white font-bold">
                  {currentEmployee.projects}
                </span>
              </div>
            </div>
          </div>
        </div>

        {/* Панель управления */}
        <div className="flex items-center justify-between bg-white/5 rounded-2xl p-4 backdrop-blur-sm border border-white/10">
          <div className="flex items-center space-x-4">
            <Select
              value={selectedEmployee}
              onValueChange={setSelectedEmployee}
            >
              <SelectTrigger className="w-72 glass-input bg-white/10 border-white/20 text-white hover:bg-white/15 rounded-xl">
                <SelectValue />
              </SelectTrigger>
              <SelectContent className="bg-gray-900/95 backdrop-blur border-white/20 text-white rounded-xl">
                {employees.map((emp) => (
                  <SelectItem
                    key={emp.id}
                    value={emp.id}
                    className="text-white hover:bg-white/10 rounded-lg"
                  >
                    <div className="flex items-center space-x-3">
                      <Avatar className="h-8 w-8">
                        <AvatarImage src={emp.avatar} />
                        <AvatarFallback className="bg-gradient-to-br from-purple-600 to-pink-600 text-white text-xs">
                          {emp.name
                            .split(" ")
                            .map((n) => n[0])
                            .join("")}
                        </AvatarFallback>
                      </Avatar>
                      <div>
                        <div className="font-medium">{emp.name}</div>
                        <div className="text-xs text-white/60">
                          {emp.position}
                        </div>
                      </div>
                    </div>
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="flex items-center space-x-3">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => {
                if (selectedMonth === 0) {
                  setSelectedMonth(11);
                  setSelectedYear(selectedYear - 1);
                } else {
                  setSelectedMonth(selectedMonth - 1);
                }
              }}
              className="text-white hover:bg-white/10 rounded-xl"
            >
              <ChevronLeft className="h-5 w-5" />
            </Button>

            <div className="text-white font-bold text-xl min-w-[160px] text-center bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
              {monthNames[selectedMonth]} {selectedYear}
            </div>

            <Button
              variant="ghost"
              size="sm"
              onClick={() => {
                if (selectedMonth === 11) {
                  setSelectedMonth(0);
                  setSelectedYear(selectedYear + 1);
                } else {
                  setSelectedMonth(selectedMonth + 1);
                }
              }}
              className="text-white hover:bg-white/10 rounded-xl"
            >
              <ChevronRight className="h-5 w-5" />
            </Button>
          </div>

          <div className="flex items-center space-x-2">
            <Button
              variant="ghost"
              size="sm"
              className="text-white hover:bg-white/10 rounded-xl"
            >
              <Download className="h-4 w-4 mr-2" />
              Экспорт
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className="text-white hover:bg-white/10 rounded-xl"
            >
              <Filter className="h-4 w-4 mr-2" />
              Фильтр
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className="text-white hover:bg-white/10 rounded-xl"
            >
              <MoreHorizontal className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </CardHeader>

      <CardContent className="space-y-8 relative z-10">
        {/* Круговая статистика */}
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6 mb-8">
          <div className="relative group">
            <div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-2xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
            <div className="relative glass-card p-6 rounded-2xl border border-purple-500/30 hover:border-purple-400/50 transition-all duration-300">
              <div className="text-center">
                <div className="relative w-16 h-16 mx-auto mb-3">
                  <svg
                    className="w-16 h-16 transform -rotate-90"
                    viewBox="0 0 36 36"
                  >
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="rgba(255,255,255,0.1)"
                      strokeWidth={2}
                    />
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="url(#gradient-purple)"
                      strokeWidth={2}
                      strokeDasharray={`${
                        animatedStats ? (stats.totalHours / 200) * 100 : 0
                      }, 100`}
                      strokeLinecap="round"
                    />
                  </svg>
                  <div className="absolute inset-0 flex items-center justify-center">
                    <Clock className="h-6 w-6 text-purple-400" />
                  </div>
                </div>
                <div className="text-white text-2xl font-bold mb-1">
                  {animatedStats ? stats.totalHours : 0}
                </div>
                <div className="text-purple-300 text-sm">Часов</div>
              </div>
            </div>
          </div>

          <div className="relative group">
            <div className="absolute inset-0 bg-gradient-to-r from-green-500 to-emerald-500 rounded-2xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
            <div className="relative glass-card p-6 rounded-2xl border border-green-500/30 hover:border-green-400/50 transition-all duration-300">
              <div className="text-center">
                <div className="relative w-16 h-16 mx-auto mb-3">
                  <svg
                    className="w-16 h-16 transform -rotate-90"
                    viewBox="0 0 36 36"
                  >
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="rgba(255,255,255,0.1)"
                      strokeWidth={2}
                    />
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="url(#gradient-green)"
                      strokeWidth={2}
                      strokeDasharray={`${
                        animatedStats ? (stats.workDays / 25) * 100 : 0
                      }, 100`}
                      strokeLinecap="round"
                    />
                  </svg>
                  <div className="absolute inset-0 flex items-center justify-center">
                    <CheckCircle className="h-6 w-6 text-green-400" />
                  </div>
                </div>
                <div className="text-white text-2xl font-bold mb-1">
                  {animatedStats ? stats.workDays : 0}
                </div>
                <div className="text-green-300 text-sm">Рабочих</div>
              </div>
            </div>
          </div>

          <div className="relative group">
            <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-2xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
            <div className="relative glass-card p-6 rounded-2xl border border-blue-500/30 hover:border-blue-400/50 transition-all duration-300">
              <div className="text-center">
                <div className="relative w-16 h-16 mx-auto mb-3">
                  <svg
                    className="w-16 h-16 transform -rotate-90"
                    viewBox="0 0 36 36"
                  >
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="rgba(255,255,255,0.1)"
                      strokeWidth={2}
                    />
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="url(#gradient-blue)"
                      strokeWidth={2}
                      strokeDasharray={`${
                        animatedStats ? (stats.vacation / 5) * 100 : 0
                      }, 100`}
                      strokeLinecap="round"
                    />
                  </svg>
                  <div className="absolute inset-0 flex items-center justify-center">
                    <Plane className="h-6 w-6 text-blue-400" />
                  </div>
                </div>
                <div className="text-white text-2xl font-bold mb-1">
                  {animatedStats ? stats.vacation : 0}
                </div>
                <div className="text-blue-300 text-sm">Отпуск</div>
              </div>
            </div>
          </div>

          <div className="relative group">
            <div className="absolute inset-0 bg-gradient-to-r from-orange-500 to-yellow-500 rounded-2xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
            <div className="relative glass-card p-6 rounded-2xl border border-orange-500/30 hover:border-orange-400/50 transition-all duration-300">
              <div className="text-center">
                <div className="relative w-16 h-16 mx-auto mb-3">
                  <svg
                    className="w-16 h-16 transform -rotate-90"
                    viewBox="0 0 36 36"
                  >
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="rgba(255,255,255,0.1)"
                      strokeWidth={2}
                    />
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="url(#gradient-orange)"
                      strokeWidth={2}
                      strokeDasharray={`${
                        animatedStats ? (stats.sick / 3) * 100 : 0
                      }, 100`}
                      strokeLinecap="round"
                    />
                  </svg>
                  <div className="absolute inset-0 flex items-center justify-center">
                    <Heart className="h-6 w-6 text-orange-400" />
                  </div>
                </div>
                <div className="text-white text-2xl font-bold mb-1">
                  {animatedStats ? stats.sick : 0}
                </div>
                <div className="text-orange-300 text-sm">Больничный</div>
              </div>
            </div>
          </div>

          <div className="relative group">
            <div className="absolute inset-0 bg-gradient-to-r from-yellow-500 to-amber-500 rounded-2xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
            <div className="relative glass-card p-6 rounded-2xl border border-yellow-500/30 hover:border-yellow-400/50 transition-all duration-300">
              <div className="text-center">
                <div className="relative w-16 h-16 mx-auto mb-3">
                  <svg
                    className="w-16 h-16 transform -rotate-90"
                    viewBox="0 0 36 36"
                  >
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="rgba(255,255,255,0.1)"
                      strokeWidth={2}
                    />
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="url(#gradient-yellow)"
                      strokeWidth={2}
                      strokeDasharray={`${
                        animatedStats ? (stats.overtime / 20) * 100 : 0
                      }, 100`}
                      strokeLinecap="round"
                    />
                  </svg>
                  <div className="absolute inset-0 flex items-center justify-center">
                    <Zap className="h-6 w-6 text-yellow-400" />
                  </div>
                </div>
                <div className="text-white text-2xl font-bold mb-1">
                  {animatedStats ? stats.overtime : 0}
                </div>
                <div className="text-yellow-300 text-sm">Переработка</div>
              </div>
            </div>
          </div>

          <div className="relative group">
            <div className="absolute inset-0 bg-gradient-to-r from-pink-500 to-rose-500 rounded-2xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
            <div className="relative glass-card p-6 rounded-2xl border border-pink-500/30 hover:border-pink-400/50 transition-all duration-300">
              <div className="text-center">
                <div className="relative w-16 h-16 mx-auto mb-3">
                  <svg
                    className="w-16 h-16 transform -rotate-90"
                    viewBox="0 0 36 36"
                  >
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="rgba(255,255,255,0.1)"
                      strokeWidth={2}
                    />
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="url(#gradient-pink)"
                      strokeWidth={2}
                      strokeDasharray={`${
                        animatedStats ? stats.avgEfficiency : 0
                      }, 100`}
                      strokeLinecap="round"
                    />
                  </svg>
                  <div className="absolute inset-0 flex items-center justify-center">
                    <Activity className="h-6 w-6 text-pink-400" />
                  </div>
                </div>
                <div className="text-white text-2xl font-bold mb-1">
                  {animatedStats ? stats.avgEfficiency : 0}%
                </div>
                <div className="text-pink-300 text-sm">КПД</div>
              </div>
            </div>
          </div>
        </div>

        {/* Календарь в виде гексагональной сетки */}
        <div className="space-y-6">
          {/* Заголовки дней недели */}
          <div className="flex justify-center">
            <div className="grid grid-cols-7 gap-4 text-center max-w-2xl">
              {dayNames.map((day) => (
                <div
                  key={day}
                  className="text-white/70 font-bold text-lg py-3 bg-white/5 rounded-xl"
                >
                  {day}
                </div>
              ))}
            </div>
          </div>

          {/* Календарная сетка */}
          <div className="flex justify-center">
            <div className="grid grid-cols-7 gap-4 max-w-2xl">
              {/* Пустые ячейки для начала месяца */}
              {Array.from({
                length:
                  new Date(selectedYear, selectedMonth, 1).getDay() === 0
                    ? 6
                    : new Date(selectedYear, selectedMonth, 1).getDay() - 1,
              }).map((_, index) => (
                <div key={`empty-${index}`} className="aspect-square"></div>
              ))}

              {/* Дни месяца */}
              {calendarData.map((day, index) => (
                <div
                  key={index}
                  className={`
                    aspect-square p-3 rounded-2xl border-2 transition-all duration-500 hover:scale-110 cursor-pointer group relative overflow-hidden
                    ${
                      day.status === "work"
                        ? "border-green-400/50 bg-gradient-to-br from-green-500/20 to-emerald-500/20 hover:from-green-500/30 hover:to-emerald-500/30"
                        : ""
                    }
                    ${
                      day.status === "weekend"
                        ? "border-gray-400/50 bg-gradient-to-br from-gray-500/20 to-slate-500/20"
                        : ""
                    }
                    ${
                      day.status === "vacation"
                        ? "border-blue-400/50 bg-gradient-to-br from-blue-500/20 to-cyan-500/20"
                        : ""
                    }
                    ${
                      day.status === "sick"
                        ? "border-orange-400/50 bg-gradient-to-br from-orange-500/20 to-yellow-500/20"
                        : ""
                    }
                    ${
                      day.status === "absent"
                        ? "border-red-400/50 bg-gradient-to-br from-red-500/20 to-rose-500/20"
                        : ""
                    }
                  `}
                >
                  {/* Эффект свечения */}
                  <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-2xl"></div>

                  <div className="relative h-full flex flex-col justify-between z-10">
                    <div className="flex items-center justify-between">
                      <span className="text-white font-bold text-lg">
                        {day.day}
                      </span>
                      {day.workType && (
                        <div className="text-white/80">
                          {getWorkTypeIcon(day.workType)}
                        </div>
                      )}
                    </div>

                    {day.status === "work" && (
                      <div className="space-y-2">
                        <div className="flex items-center justify-between">
                          <span className="text-white font-semibold text-sm">
                            {day.hours}ч
                          </span>
                          {day.overtime > 0 && (
                            <Badge className="bg-yellow-500/30 text-yellow-200 text-xs border-yellow-400/30">
                              +{day.overtime}
                            </Badge>
                          )}
                        </div>

                        <div className="flex items-center justify-between">
                          {getMoodIcon(day.mood)}
                          {day.efficiency && (
                            <div className="text-right">
                              <div className="text-white/80 text-xs font-medium">
                                {day.efficiency}%
                              </div>
                              <div className="w-8 h-1 bg-white/20 rounded-full overflow-hidden">
                                <div
                                  className="h-full bg-gradient-to-r from-purple-400 to-pink-400 transition-all duration-1000"
                                  style={{ width: `${day.efficiency}%` }}
                                ></div>
                              </div>
                            </div>
                          )}
                        </div>
                      </div>
                    )}

                    {day.status !== "work" && day.status !== "weekend" && (
                      <div className="flex justify-center">
                        <div
                          className={`w-4 h-4 rounded-full ${getStatusColor(
                            day.status
                          )} animate-pulse`}
                        ></div>
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Расширенная легенда */}
        <div className="bg-white/5 rounded-2xl p-6 backdrop-blur-sm border border-white/10">
          <h4 className="text-white font-semibold text-lg mb-4 text-center">
            Легенда статусов
          </h4>
          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
            <div className="flex flex-col items-center space-y-2 bg-white/5 p-4 rounded-xl">
              <div className="w-6 h-6 rounded-full bg-gradient-to-r from-emerald-500 to-green-500 flex items-center justify-center">
                <CheckCircle className="h-4 w-4 text-white" />
              </div>
              <span className="text-white/70 text-sm font-medium">Работа</span>
              <span className="text-white/50 text-xs text-center">
                Обычный рабочий день
              </span>
            </div>

            <div className="flex flex-col items-center space-y-2 bg-white/5 p-4 rounded-xl">
              <div className="w-6 h-6 rounded-full bg-gradient-to-r from-slate-500 to-gray-500 flex items-center justify-center">
                <Moon className="h-4 w-4 text-white" />
              </div>
              <span className="text-white/70 text-sm font-medium">
                Выходной
              </span>
              <span className="text-white/50 text-xs text-center">
                Суббота/Воскресенье
              </span>
            </div>

            <div className="flex flex-col items-center space-y-2 bg-white/5 p-4 rounded-xl">
              <div className="w-6 h-6 rounded-full bg-gradient-to-r from-blue-500 to-cyan-500 flex items-center justify-center">
                <Plane className="h-4 w-4 text-white" />
              </div>
              <span className="text-white/70 text-sm font-medium">Отпуск</span>
              <span className="text-white/50 text-xs text-center">
                Оплачиваемый отпуск
              </span>
            </div>

            <div className="flex flex-col items-center space-y-2 bg-white/5 p-4 rounded-xl">
              <div className="w-6 h-6 rounded-full bg-gradient-to-r from-amber-500 to-orange-500 flex items-center justify-center">
                <Heart className="h-4 w-4 text-white" />
              </div>
              <span className="text-white/70 text-sm font-medium">
                Больничный
              </span>
              <span className="text-white/50 text-xs text-center">
                По болезни
              </span>
            </div>

            <div className="flex flex-col items-center space-y-2 bg-white/5 p-4 rounded-xl">
              <div className="w-6 h-6 rounded-full bg-gradient-to-r from-red-500 to-rose-500 flex items-center justify-center">
                <XCircle className="h-4 w-4 text-white" />
              </div>
              <span className="text-white/70 text-sm font-medium">Прогул</span>
              <span className="text-white/50 text-xs text-center">
                Неявка без причины
              </span>
            </div>
          </div>
        </div>
      </CardContent>

      {/* SVG градиенты для круговых диаграмм */}
      <svg width="0" height="0" style={{ position: "absolute" }}>
        <defs>
          <linearGradient
            id="gradient-purple"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop offset="0%" stopColor="#8B5CF6" />
            <stop offset="100%" stopColor="#6366F1" />
          </linearGradient>
          <linearGradient
            id="gradient-green"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop offset="0%" stopColor="#10B981" />
            <stop offset="100%" stopColor="#059669" />
          </linearGradient>
          <linearGradient
            id="gradient-blue"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop offset="0%" stopColor="#3B82F6" />
            <stop offset="100%" stopColor="#06B6D4" />
          </linearGradient>
          <linearGradient
            id="gradient-orange"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop offset="0%" stopColor="#F59E0B" />
            <stop offset="100%" stopColor="#F97316" />
          </linearGradient>
          <linearGradient
            id="gradient-yellow"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop offset="0%" stopColor="#EAB308" />
            <stop offset="100%" stopColor="#F59E0B" />
          </linearGradient>
          <linearGradient
            id="gradient-pink"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop offset="0%" stopColor="#EC4899" />
            <stop offset="100%" stopColor="#F43F5E" />
          </linearGradient>
        </defs>
      </svg>
    </Card>
  );

  const renderCustomVariant = () => (
    <Card
      className="glass-card border-white/10 overflow-hidden relative"
      style={{ height: "800px" }}
    >
      {/* Космический фон с плавающими частицами и звездным полем (из Галактического) */}
      <div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-blue-900/20 to-indigo-900/20">
        <div
          className="absolute inset-0 opacity-50"
          style={{
            backgroundImage:
              'url(\'data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.05"%3E%3Ccircle cx="7" cy="7" r="1"/%3E%3Ccircle cx="27" cy="27" r="1"/%3E%3Ccircle cx="47" cy="47" r="1"/%3E%3Ccircle cx="17" cy="37" r="1"/%3E%3Ccircle cx="37" cy="17" r="1"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\')',
          }}
        ></div>

        {/* Плавающие частицы */}
        <div className="absolute top-10 left-10 w-2 h-2 bg-purple-400/30 rounded-full animate-pulse"></div>
        <div className="absolute top-20 right-20 w-1 h-1 bg-blue-400/40 rounded-full animate-pulse delay-1000"></div>
        <div className="absolute bottom-20 left-20 w-1.5 h-1.5 bg-cyan-400/30 rounded-full animate-pulse delay-2000"></div>
        <div className="absolute bottom-32 right-32 w-1 h-1 bg-pink-400/40 rounded-full animate-pulse delay-3000"></div>
        <div className="absolute top-1/2 left-1/4 w-0.5 h-0.5 bg-white/60 rounded-full animate-pulse delay-4000"></div>
        <div className="absolute top-1/3 right-1/3 w-1 h-1 bg-indigo-400/50 rounded-full animate-pulse delay-5000"></div>

        {/* Звездное поле */}
        <div className="absolute inset-0">
          {Array.from({ length: 20 }).map((_, i) => (
            <div
              key={i}
              className="absolute w-0.5 h-0.5 bg-white/40 rounded-full animate-pulse"
              style={{
                top: `${Math.random() * 100}%`,
                left: `${Math.random() * 100}%`,
                animationDelay: `${Math.random() * 3}s`,
                animationDuration: `${2 + Math.random() * 2}s`,
              }}
            />
          ))}
        </div>
      </div>

      <CardContent className="space-y-6 relative z-10 p-6 h-full overflow-y-auto">
        {/* Заголовок сотрудника */}
        <div className="bg-white/5 rounded-2xl p-6 backdrop-blur-sm border border-white/10">
          <div className="flex items-center space-x-6">
            <Avatar className="h-20 w-20 ring-4 ring-purple-500/30">
              <AvatarImage src={currentEmployee.avatar} />
              <AvatarFallback className="bg-gradient-to-br from-purple-600 to-blue-600 text-white text-xl font-bold">
                {currentEmployee.name
                  .split(" ")
                  .map((n) => n[0])
                  .join("")}
              </AvatarFallback>
            </Avatar>

            <div className="flex-1">
              <h3 className="text-2xl font-bold text-white mb-1">
                {currentEmployee.name}
              </h3>
              <p className="text-purple-300 text-base mb-2">
                {currentEmployee.position}
              </p>
              <div className="flex items-center space-x-4 text-sm text-white/70">
                <span>{currentEmployee.department}</span>
                <span>•</span>
                <span>{currentEmployee.level}</span>
                <span>•</span>
                <span>{currentEmployee.experience}</span>
              </div>
            </div>

            {/* Круговые диаграммы статистики (из Космического) */}
            <div className="flex items-center space-x-6">
              <div className="text-center">
                <div className="relative w-16 h-16 mx-auto mb-2">
                  <svg
                    className="w-16 h-16 transform -rotate-90"
                    viewBox="0 0 36 36"
                  >
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="rgba(255,255,255,0.1)"
                      strokeWidth={2}
                    />
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="url(#gradient-purple)"
                      strokeWidth={2}
                      strokeDasharray={`${
                        animatedStats ? (stats.totalHours / 200) * 100 : 0
                      }, 100`}
                      strokeLinecap="round"
                    />
                  </svg>
                  <div className="absolute inset-0 flex items-center justify-center">
                    <span className="text-white font-bold text-sm">
                      {animatedStats ? stats.totalHours : 0}
                    </span>
                  </div>
                </div>
                <p className="text-purple-300 text-xs">Часов</p>
              </div>

              <div className="text-center">
                <div className="relative w-16 h-16 mx-auto mb-2">
                  <svg
                    className="w-16 h-16 transform -rotate-90"
                    viewBox="0 0 36 36"
                  >
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="rgba(255,255,255,0.1)"
                      strokeWidth={2}
                    />
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="url(#gradient-pink)"
                      strokeWidth={2}
                      strokeDasharray={`${
                        animatedStats ? currentEmployee.efficiency : 0
                      }, 100`}
                      strokeLinecap="round"
                    />
                  </svg>
                  <div className="absolute inset-0 flex items-center justify-center">
                    <span className="text-white font-bold text-sm">
                      {currentEmployee.efficiency}%
                    </span>
                  </div>
                </div>
                <p className="text-pink-300 text-xs">Эффективность</p>
              </div>
            </div>
          </div>
        </div>

        {/* Навигация и управление */}
        <div className="flex items-center justify-between bg-white/5 rounded-2xl p-4 backdrop-blur-sm border border-white/10">
          <div className="flex items-center space-x-4">
            <Select
              value={selectedEmployee}
              onValueChange={setSelectedEmployee}
            >
              <SelectTrigger className="w-64 glass-input bg-white/10 border-white/20 text-white hover:bg-white/15">
                <SelectValue />
              </SelectTrigger>
              <SelectContent className="bg-gray-900/95 backdrop-blur border-white/20 text-white">
                {employees.map((emp) => (
                  <SelectItem
                    key={emp.id}
                    value={emp.id}
                    className="text-white hover:bg-white/10"
                  >
                    <div className="flex items-center space-x-3">
                      <Avatar className="h-6 w-6">
                        <AvatarImage src={emp.avatar} />
                        <AvatarFallback className="bg-purple-600 text-white text-xs">
                          {emp.name
                            .split(" ")
                            .map((n) => n[0])
                            .join("")}
                        </AvatarFallback>
                      </Avatar>
                      <div>
                        <div className="font-medium">{emp.name}</div>
                        <div className="text-xs text-white/60">
                          {emp.position}
                        </div>
                      </div>
                    </div>
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="flex items-center space-x-4">
            <Button
              variant="ghost"
              size="sm"
              className="text-white hover:bg-white/10"
              onClick={() => {
                if (selectedMonth === 0) {
                  setSelectedMonth(11);
                  setSelectedYear(selectedYear - 1);
                } else {
                  setSelectedMonth(selectedMonth - 1);
                }
              }}
            >
              <ChevronLeft className="h-4 w-4" />
            </Button>

            <div className="text-center min-w-[120px]">
              <div className="text-white font-bold text-lg">
                {monthNames[selectedMonth]} {selectedYear}
              </div>
            </div>

            <Button
              variant="ghost"
              size="sm"
              className="text-white hover:bg-white/10"
              onClick={() => {
                if (selectedMonth === 11) {
                  setSelectedMonth(0);
                  setSelectedYear(selectedYear + 1);
                } else {
                  setSelectedMonth(selectedMonth + 1);
                }
              }}
            >
              <ChevronRight className="h-4 w-4" />
            </Button>
          </div>

          <div className="flex items-center space-x-2">
            <Button
              variant="ghost"
              size="sm"
              className="text-white hover:bg-white/10"
            >
              <Download className="h-4 w-4 mr-2" />
              Экспорт
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className="text-white hover:bg-white/10"
            >
              <Settings className="h-4 w-4" />
            </Button>
          </div>
        </div>

        {/* Статистика с круговыми диаграммами (из Космического) */}
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6 mb-8">
          <div className="relative group">
            <div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-2xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
            <div className="relative glass-card p-6 rounded-2xl border border-purple-500/30 hover:border-purple-400/50 transition-all duration-300 text-center">
              <div className="text-center">
                <div className="relative w-16 h-16 mx-auto mb-3">
                  <svg
                    className="w-16 h-16 transform -rotate-90"
                    viewBox="0 0 36 36"
                  >
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="rgba(255,255,255,0.1)"
                      strokeWidth={2}
                    />
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="url(#gradient-purple)"
                      strokeWidth={2}
                      strokeDasharray={`${
                        animatedStats ? (stats.totalHours / 200) * 100 : 0
                      }, 100`}
                      strokeLinecap="round"
                    />
                  </svg>
                  <div className="absolute inset-0 flex items-center justify-center">
                    <Clock className="h-6 w-6 text-purple-400" />
                  </div>
                </div>
                <div className="text-white font-bold text-2xl mb-1">
                  {animatedStats ? stats.totalHours : 0}
                </div>
                <p className="text-purple-300 text-sm font-medium">Часов</p>
              </div>
            </div>
          </div>

          <div className="relative group">
            <div className="absolute inset-0 bg-gradient-to-r from-green-500 to-emerald-500 rounded-2xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
            <div className="relative glass-card p-6 rounded-2xl border border-green-500/30 hover:border-green-400/50 transition-all duration-300 text-center">
              <div className="text-center">
                <div className="relative w-16 h-16 mx-auto mb-3">
                  <svg
                    className="w-16 h-16 transform -rotate-90"
                    viewBox="0 0 36 36"
                  >
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="rgba(255,255,255,0.1)"
                      strokeWidth={2}
                    />
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="url(#gradient-green)"
                      strokeWidth={2}
                      strokeDasharray={`${
                        animatedStats ? (stats.workDays / 25) * 100 : 0
                      }, 100`}
                      strokeLinecap="round"
                    />
                  </svg>
                  <div className="absolute inset-0 flex items-center justify-center">
                    <CheckCircle className="h-6 w-6 text-green-400" />
                  </div>
                </div>
                <div className="text-white font-bold text-2xl mb-1">
                  {animatedStats ? stats.workDays : 0}
                </div>
                <p className="text-green-300 text-sm font-medium">Рабочих</p>
              </div>
            </div>
          </div>

          <div className="relative group">
            <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-2xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
            <div className="relative glass-card p-6 rounded-2xl border border-blue-500/30 hover:border-blue-400/50 transition-all duration-300 text-center">
              <div className="text-center">
                <div className="relative w-16 h-16 mx-auto mb-3">
                  <svg
                    className="w-16 h-16 transform -rotate-90"
                    viewBox="0 0 36 36"
                  >
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="rgba(255,255,255,0.1)"
                      strokeWidth={2}
                    />
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="url(#gradient-blue)"
                      strokeWidth={2}
                      strokeDasharray={`${
                        animatedStats ? (stats.vacation / 5) * 100 : 0
                      }, 100`}
                      strokeLinecap="round"
                    />
                  </svg>
                  <div className="absolute inset-0 flex items-center justify-center">
                    <Plane className="h-6 w-6 text-blue-400" />
                  </div>
                </div>
                <div className="text-white font-bold text-2xl mb-1">
                  {animatedStats ? stats.vacation : 0}
                </div>
                <p className="text-blue-300 text-sm font-medium">Отпуск</p>
              </div>
            </div>
          </div>

          <div className="relative group">
            <div className="absolute inset-0 bg-gradient-to-r from-orange-500 to-red-500 rounded-2xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
            <div className="relative glass-card p-6 rounded-2xl border border-orange-500/30 hover:border-orange-400/50 transition-all duration-300 text-center">
              <div className="text-center">
                <div className="relative w-16 h-16 mx-auto mb-3">
                  <svg
                    className="w-16 h-16 transform -rotate-90"
                    viewBox="0 0 36 36"
                  >
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="rgba(255,255,255,0.1)"
                      strokeWidth={2}
                    />
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="url(#gradient-orange)"
                      strokeWidth={2}
                      strokeDasharray={`${
                        animatedStats ? (stats.sick / 3) * 100 : 0
                      }, 100`}
                      strokeLinecap="round"
                    />
                  </svg>
                  <div className="absolute inset-0 flex items-center justify-center">
                    <Heart className="h-6 w-6 text-orange-400" />
                  </div>
                </div>
                <div className="text-white font-bold text-2xl mb-1">
                  {animatedStats ? stats.sick : 0}
                </div>
                <p className="text-orange-300 text-sm font-medium">
                  Больничный
                </p>
              </div>
            </div>
          </div>

          <div className="relative group">
            <div className="absolute inset-0 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-2xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
            <div className="relative glass-card p-6 rounded-2xl border border-yellow-500/30 hover:border-yellow-400/50 transition-all duration-300 text-center">
              <div className="text-center">
                <div className="relative w-16 h-16 mx-auto mb-3">
                  <svg
                    className="w-16 h-16 transform -rotate-90"
                    viewBox="0 0 36 36"
                  >
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="rgba(255,255,255,0.1)"
                      strokeWidth={2}
                    />
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="url(#gradient-yellow)"
                      strokeWidth={2}
                      strokeDasharray={`${
                        animatedStats ? (stats.overtime / 20) * 100 : 0
                      }, 100`}
                      strokeLinecap="round"
                    />
                  </svg>
                  <div className="absolute inset-0 flex items-center justify-center">
                    <Zap className="h-6 w-6 text-yellow-400" />
                  </div>
                </div>
                <div className="text-white font-bold text-2xl mb-1">
                  {animatedStats ? stats.overtime : 0}
                </div>
                <p className="text-yellow-300 text-sm font-medium">
                  Переработка
                </p>
              </div>
            </div>
          </div>

          <div className="relative group">
            <div className="absolute inset-0 bg-gradient-to-r from-pink-500 to-purple-500 rounded-2xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
            <div className="relative glass-card p-6 rounded-2xl border border-pink-500/30 hover:border-pink-400/50 transition-all duration-300 text-center">
              <div className="text-center">
                <div className="relative w-16 h-16 mx-auto mb-3">
                  <svg
                    className="w-16 h-16 transform -rotate-90"
                    viewBox="0 0 36 36"
                  >
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="rgba(255,255,255,0.1)"
                      strokeWidth={2}
                    />
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="url(#gradient-pink)"
                      strokeWidth={2}
                      strokeDasharray={`${
                        animatedStats ? stats.avgEfficiency : 0
                      }, 100`}
                      strokeLinecap="round"
                    />
                  </svg>
                  <div className="absolute inset-0 flex items-center justify-center">
                    <Activity className="h-6 w-6 text-pink-400" />
                  </div>
                </div>
                <div className="text-white font-bold text-2xl mb-1">
                  {animatedStats ? stats.avgEfficiency : 0}%
                </div>
                <p className="text-pink-300 text-sm font-medium">КПД</p>
              </div>
            </div>
          </div>
        </div>

        {/* Гексагональная календарная сетка */}
        <div className="space-y-4">
          {/* Заголовки дней недели */}
          <div className="grid grid-cols-7 gap-3 text-center">
            {dayNames.map((day) => (
              <div
                key={day}
                className="text-white/70 font-bold text-sm py-2 bg-white/5 rounded-xl border border-white/10"
              >
                {day}
              </div>
            ))}
          </div>

          {/* Календарная сетка */}
          <div className="grid grid-cols-7 gap-3">
            {/* Пустые ячейки для начала месяца */}
            {Array.from({
              length:
                new Date(selectedYear, selectedMonth, 1).getDay() === 0
                  ? 6
                  : new Date(selectedYear, selectedMonth, 1).getDay() - 1,
            }).map((_, index) => (
              <div key={`empty-${index}`} className="aspect-square"></div>
            ))}

            {/* Дни месяца */}
            {calendarData.map((day) => (
              <div
                key={day.day}
                className={`
                   aspect-square p-3 rounded-2xl border-2 transition-all duration-500 hover:scale-110 cursor-pointer group relative overflow-hidden
                   ${
                     day.status === "work"
                       ? "border-green-400/50 bg-gradient-to-br from-green-500/20 to-emerald-500/20 hover:from-green-500/30 hover:to-emerald-500/30 shadow-lg shadow-green-500/20"
                       : ""
                   }
                   ${
                     day.status === "weekend"
                       ? "border-gray-400/50 bg-gradient-to-br from-gray-500/20 to-slate-500/20"
                       : ""
                   }
                   ${
                     day.status === "vacation"
                       ? "border-blue-400/50 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 shadow-lg shadow-blue-500/20"
                       : ""
                   }
                   ${
                     day.status === "sick"
                       ? "border-orange-400/50 bg-gradient-to-br from-orange-500/20 to-yellow-500/20 shadow-lg shadow-orange-500/20"
                       : ""
                   }
                   ${
                     day.status === "absent"
                       ? "border-red-400/50 bg-gradient-to-br from-red-500/20 to-rose-500/20 shadow-lg shadow-red-500/20"
                       : ""
                   }
                 `}
              >
                {/* Эффект свечения */}
                <div className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-white/10 to-transparent"></div>

                <div className="relative h-full flex flex-col justify-between z-10">
                  <div className="flex items-center justify-between">
                    <span className="text-white font-bold text-base">
                      {day.day}
                    </span>
                    {day.workType && (
                      <div className="text-white/80">
                        {getWorkTypeIcon(day.workType)}
                      </div>
                    )}
                  </div>

                  {day.status === "work" && (
                    <div className="space-y-1">
                      <div className="flex items-center justify-between">
                        <span className="text-white font-semibold text-sm">
                          {day.hours}ч
                        </span>
                        {day.overtime > 0 && (
                          <Badge className="bg-yellow-500/30 text-yellow-200 text-xs border-yellow-400/30">
                            +{day.overtime}
                          </Badge>
                        )}
                      </div>

                      <div className="flex items-center justify-between">
                        {getMoodIcon(day.mood)}
                        {day.efficiency && (
                          <div className="text-right">
                            <div className="text-white/80 text-xs font-medium">
                              {day.efficiency}%
                            </div>
                            <div className="w-8 h-1 bg-white/20 rounded-full overflow-hidden">
                              <div
                                className="h-full bg-gradient-to-r from-cyan-400 to-blue-500 transition-all duration-1000"
                                style={{
                                  width: animatedStats
                                    ? `${day.efficiency}%`
                                    : "0%",
                                }}
                              ></div>
                            </div>
                          </div>
                        )}
                      </div>
                    </div>
                  )}

                  {day.status !== "work" && day.status !== "weekend" && (
                    <div className="flex justify-center">
                      <div
                        className={`w-4 h-4 rounded-full ${getStatusColor(
                          day.status
                        )} animate-pulse shadow-lg`}
                      ></div>
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      </CardContent>

      {/* SVG градиенты для круговых диаграмм */}
      <svg width="0" height="0" style={{ position: "absolute" }}>
        <defs>
          <linearGradient
            id="gradient-purple"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop offset="0%" stopColor="#8B5CF6" />
            <stop offset="100%" stopColor="#6366F1" />
          </linearGradient>
          <linearGradient
            id="gradient-green"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop offset="0%" stopColor="#10B981" />
            <stop offset="100%" stopColor="#059669" />
          </linearGradient>
          <linearGradient
            id="gradient-blue"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop offset="0%" stopColor="#3B82F6" />
            <stop offset="100%" stopColor="#06B6D4" />
          </linearGradient>
          <linearGradient
            id="gradient-orange"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop offset="0%" stopColor="#F59E0B" />
            <stop offset="100%" stopColor="#F97316" />
          </linearGradient>
          <linearGradient
            id="gradient-yellow"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop offset="0%" stopColor="#EAB308" />
            <stop offset="100%" stopColor="#F59E0B" />
          </linearGradient>
          <linearGradient
            id="gradient-pink"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop offset="0%" stopColor="#EC4899" />
            <stop offset="100%" stopColor="#F43F5E" />
          </linearGradient>
        </defs>
      </svg>
    </Card>
  );

  // Компактный вариант для 13-дюймовых экранов
  const renderCompactVariant = () => (
    <Card
      className="glass-card border-white/10 overflow-hidden relative"
      style={{ height: "600px" }}
    >
      {/* Космический фон с плавающими частицами и звездным полем (из Галактического) */}
      <div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-blue-900/20 to-indigo-900/20">
        <div
          className="absolute inset-0 opacity-50"
          style={{
            backgroundImage:
              'url(\'data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.05"%3E%3Ccircle cx="7" cy="7" r="1"/%3E%3Ccircle cx="27" cy="27" r="1"/%3E%3Ccircle cx="47" cy="47" r="1"/%3E%3Ccircle cx="17" cy="37" r="1"/%3E%3Ccircle cx="37" cy="17" r="1"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\')',
          }}
        ></div>

        {/* Плавающие частицы */}
        <div className="absolute top-10 left-10 w-2 h-2 bg-purple-400/30 rounded-full animate-pulse"></div>
        <div className="absolute top-20 right-20 w-1 h-1 bg-blue-400/40 rounded-full animate-pulse delay-1000"></div>
        <div className="absolute bottom-20 left-20 w-1.5 h-1.5 bg-cyan-400/30 rounded-full animate-pulse delay-2000"></div>
        <div className="absolute bottom-32 right-32 w-1 h-1 bg-pink-400/40 rounded-full animate-pulse delay-3000"></div>

        {/* Звездное поле */}
        <div className="absolute inset-0">
          {Array.from({ length: 15 }).map((_, i) => (
            <div
              key={i}
              className="absolute w-0.5 h-0.5 bg-white/40 rounded-full animate-pulse"
              style={{
                top: `${Math.random() * 100}%`,
                left: `${Math.random() * 100}%`,
                animationDelay: `${Math.random() * 3}s`,
                animationDuration: `${2 + Math.random() * 2}s`,
              }}
            />
          ))}
        </div>
      </div>

      <CardContent className="space-y-4 relative z-10 p-4 h-full overflow-y-auto">
        {/* Компактный заголовок сотрудника */}
        <div className="bg-white/5 rounded-xl p-4 backdrop-blur-sm border border-white/10">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <Avatar className="h-12 w-12 ring-2 ring-purple-500/30">
                <AvatarImage src={currentEmployee.avatar} />
                <AvatarFallback className="bg-gradient-to-br from-purple-600 to-blue-600 text-white text-sm font-bold">
                  {currentEmployee.name
                    .split(" ")
                    .map((n) => n[0])
                    .join("")}
                </AvatarFallback>
              </Avatar>

              <div className="flex-1">
                <h3 className="text-lg font-bold text-white mb-1">
                  {currentEmployee.name}
                </h3>
                <p className="text-purple-300 text-sm mb-1">
                  {currentEmployee.position}
                </p>
                <div className="flex items-center space-x-3 text-xs text-white/70">
                  <span>{currentEmployee.department}</span>
                  <span>•</span>
                  <span>{currentEmployee.level}</span>
                </div>
              </div>
            </div>

            {/* Компактная навигация */}
            <div className="flex items-center space-x-2">
              <Select
                value={selectedEmployee}
                onValueChange={setSelectedEmployee}
              >
                <SelectTrigger className="w-32 bg-white/10 border-white/30 text-white text-xs">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {employees.map((emp) => (
                    <SelectItem key={emp.id} value={emp.id}>
                      {emp.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>

              <Button
                variant="ghost"
                size="sm"
                className="text-white/70 hover:text-white hover:bg-white/10 h-8 w-8 p-0"
              >
                <Settings className="h-4 w-4" />
              </Button>
              <Button
                variant="ghost"
                size="sm"
                className="text-white/70 hover:text-white hover:bg-white/10 h-8 w-8 p-0"
              >
                <Download className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </div>

        {/* Компактная статистика в одну строку */}
        <div className="grid grid-cols-6 gap-2">
          <div className="relative group">
            <div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
            <div className="relative glass-card p-3 rounded-xl border border-purple-500/30 hover:border-purple-400/50 transition-all duration-300 text-center">
              <div className="relative w-10 h-10 mx-auto mb-2">
                <svg
                  className="w-10 h-10 transform -rotate-90"
                  viewBox="0 0 36 36"
                >
                  <path
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    fill="none"
                    stroke="rgba(255,255,255,0.1)"
                    strokeWidth={2}
                  />
                  <path
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    fill="none"
                    stroke="url(#gradient-purple)"
                    strokeWidth={2}
                    strokeDasharray={`${
                      animatedStats ? (stats.totalHours / 200) * 100 : 0
                    }, 100`}
                    strokeLinecap="round"
                  />
                </svg>
                <div className="absolute inset-0 flex items-center justify-center">
                  <Clock className="h-4 w-4 text-purple-400" />
                </div>
              </div>
              <div className="text-white font-bold text-lg mb-1">
                {animatedStats ? stats.totalHours : 0}
              </div>
              <p className="text-purple-300 text-xs">Часов</p>
            </div>
          </div>

          <div className="relative group">
            <div className="absolute inset-0 bg-gradient-to-r from-green-500 to-emerald-500 rounded-xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
            <div className="relative glass-card p-3 rounded-xl border border-green-500/30 hover:border-green-400/50 transition-all duration-300 text-center">
              <div className="relative w-10 h-10 mx-auto mb-2">
                <svg
                  className="w-10 h-10 transform -rotate-90"
                  viewBox="0 0 36 36"
                >
                  <path
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    fill="none"
                    stroke="rgba(255,255,255,0.1)"
                    strokeWidth={2}
                  />
                  <path
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    fill="none"
                    stroke="url(#gradient-green)"
                    strokeWidth={2}
                    strokeDasharray={`${
                      animatedStats ? (stats.workDays / 25) * 100 : 0
                    }, 100`}
                    strokeLinecap="round"
                  />
                </svg>
                <div className="absolute inset-0 flex items-center justify-center">
                  <CheckCircle className="h-4 w-4 text-green-400" />
                </div>
              </div>
              <div className="text-white font-bold text-lg mb-1">
                {animatedStats ? stats.workDays : 0}
              </div>
              <p className="text-green-300 text-xs">Рабочих</p>
            </div>
          </div>

          <div className="relative group">
            <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
            <div className="relative glass-card p-3 rounded-xl border border-blue-500/30 hover:border-blue-400/50 transition-all duration-300 text-center">
              <div className="relative w-10 h-10 mx-auto mb-2">
                <svg
                  className="w-10 h-10 transform -rotate-90"
                  viewBox="0 0 36 36"
                >
                  <path
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    fill="none"
                    stroke="rgba(255,255,255,0.1)"
                    strokeWidth={2}
                  />
                  <path
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    fill="none"
                    stroke="url(#gradient-blue)"
                    strokeWidth={2}
                    strokeDasharray={`${
                      animatedStats ? (stats.vacation / 5) * 100 : 0
                    }, 100`}
                    strokeLinecap="round"
                  />
                </svg>
                <div className="absolute inset-0 flex items-center justify-center">
                  <Plane className="h-4 w-4 text-blue-400" />
                </div>
              </div>
              <div className="text-white font-bold text-lg mb-1">
                {animatedStats ? stats.vacation : 0}
              </div>
              <p className="text-blue-300 text-xs">Отпуск</p>
            </div>
          </div>

          <div className="relative group">
            <div className="absolute inset-0 bg-gradient-to-r from-orange-500 to-red-500 rounded-xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
            <div className="relative glass-card p-3 rounded-xl border border-orange-500/30 hover:border-orange-400/50 transition-all duration-300 text-center">
              <div className="relative w-10 h-10 mx-auto mb-2">
                <svg
                  className="w-10 h-10 transform -rotate-90"
                  viewBox="0 0 36 36"
                >
                  <path
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    fill="none"
                    stroke="rgba(255,255,255,0.1)"
                    strokeWidth={2}
                  />
                  <path
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    fill="none"
                    stroke="url(#gradient-orange)"
                    strokeWidth={2}
                    strokeDasharray={`${
                      animatedStats ? (stats.sick / 3) * 100 : 0
                    }, 100`}
                    strokeLinecap="round"
                  />
                </svg>
                <div className="absolute inset-0 flex items-center justify-center">
                  <Heart className="h-4 w-4 text-orange-400" />
                </div>
              </div>
              <div className="text-white font-bold text-lg mb-1">
                {animatedStats ? stats.sick : 0}
              </div>
              <p className="text-orange-300 text-xs">Больничный</p>
            </div>
          </div>

          <div className="relative group">
            <div className="absolute inset-0 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
            <div className="relative glass-card p-3 rounded-xl border border-yellow-500/30 hover:border-yellow-400/50 transition-all duration-300 text-center">
              <div className="relative w-10 h-10 mx-auto mb-2">
                <svg
                  className="w-10 h-10 transform -rotate-90"
                  viewBox="0 0 36 36"
                >
                  <path
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    fill="none"
                    stroke="rgba(255,255,255,0.1)"
                    strokeWidth={2}
                  />
                  <path
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    fill="none"
                    stroke="url(#gradient-yellow)"
                    strokeWidth={2}
                    strokeDasharray={`${
                      animatedStats ? (stats.overtime / 20) * 100 : 0
                    }, 100`}
                    strokeLinecap="round"
                  />
                </svg>
                <div className="absolute inset-0 flex items-center justify-center">
                  <Zap className="h-4 w-4 text-yellow-400" />
                </div>
              </div>
              <div className="text-white font-bold text-lg mb-1">
                {animatedStats ? stats.overtime : 0}
              </div>
              <p className="text-yellow-300 text-xs">Переработка</p>
            </div>
          </div>

          <div className="relative group">
            <div className="absolute inset-0 bg-gradient-to-r from-pink-500 to-purple-500 rounded-xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
            <div className="relative glass-card p-3 rounded-xl border border-pink-500/30 hover:border-pink-400/50 transition-all duration-300 text-center">
              <div className="relative w-10 h-10 mx-auto mb-2">
                <svg
                  className="w-10 h-10 transform -rotate-90"
                  viewBox="0 0 36 36"
                >
                  <path
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    fill="none"
                    stroke="rgba(255,255,255,0.1)"
                    strokeWidth={2}
                  />
                  <path
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    fill="none"
                    stroke="url(#gradient-pink)"
                    strokeWidth={2}
                    strokeDasharray={`${
                      animatedStats ? stats.avgEfficiency : 0
                    }, 100`}
                    strokeLinecap="round"
                  />
                </svg>
                <div className="absolute inset-0 flex items-center justify-center">
                  <Activity className="h-4 w-4 text-pink-400" />
                </div>
              </div>
              <div className="text-white font-bold text-lg mb-1">
                {animatedStats ? stats.avgEfficiency : 0}%
              </div>
              <p className="text-pink-300 text-xs">КПД</p>
            </div>
          </div>
        </div>

        {/* Компактная календарная сетка */}
        <div className="space-y-3">
          {/* Заголовки дней недели */}
          <div className="grid grid-cols-7 gap-2 text-center text-xs text-white/60 font-medium">
            <div>ПН</div>
            <div>ВТ</div>
            <div>СР</div>
            <div>ЧТ</div>
            <div>ПТ</div>
            <div>СБ</div>
            <div>ВС</div>
          </div>

          {/* Календарная сетка */}
          <div className="grid grid-cols-7 gap-2">
            {calendarData.map((day, index) => (
              <div
                key={index}
                className={`relative group cursor-pointer transition-all duration-300 ${
                  day.status === "work"
                    ? "bg-gradient-to-br from-emerald-500/20 to-green-500/20 border-emerald-500/30 hover:border-emerald-400/50"
                    : day.status === "weekend"
                    ? "bg-gradient-to-br from-slate-500/20 to-gray-500/20 border-slate-500/30 hover:border-slate-400/50"
                    : day.status === "vacation"
                    ? "bg-gradient-to-br from-blue-500/20 to-cyan-500/20 border-blue-500/30 hover:border-blue-400/50"
                    : day.status === "sick"
                    ? "bg-gradient-to-br from-amber-500/20 to-orange-500/20 border-amber-500/30 hover:border-amber-400/50"
                    : "bg-gradient-to-br from-red-500/20 to-rose-500/20 border-red-500/30 hover:border-red-400/50"
                } rounded-xl border backdrop-blur-sm p-2 h-16`}
              >
                <div className="flex flex-col items-center justify-center h-full">
                  <span className="text-white font-medium text-sm mb-1">
                    {day.day}
                  </span>

                  {day.status === "work" && (
                    <div className="flex items-center space-x-1 text-xs">
                      <span className="text-white/80">{day.hours}ч</span>
                      {day.overtime > 0 && (
                        <span className="text-yellow-400">+{day.overtime}</span>
                      )}
                    </div>
                  )}

                  {day.status !== "work" && day.status !== "weekend" && (
                    <div className="flex justify-center">
                      <div
                        className={`w-1.5 h-1.5 rounded-full ${
                          day.status === "vacation"
                            ? "bg-gradient-to-r from-blue-500 to-cyan-500"
                            : day.status === "sick"
                            ? "bg-gradient-to-r from-amber-500 to-orange-500"
                            : "bg-gradient-to-r from-red-500 to-rose-500"
                        }`}
                      ></div>
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Компактная легенда */}
        <div className="flex flex-wrap gap-2 text-xs justify-center">
          <div className="flex items-center gap-1 bg-white/5 px-2 py-1 rounded-lg">
            <div className="w-2 h-2 rounded-full bg-gradient-to-r from-emerald-500 to-green-500"></div>
            <span className="text-white/70">Работа</span>
          </div>
          <div className="flex items-center gap-1 bg-white/5 px-2 py-1 rounded-lg">
            <div className="w-2 h-2 rounded-full bg-gradient-to-r from-slate-500 to-gray-500"></div>
            <span className="text-white/70">Выходной</span>
          </div>
          <div className="flex items-center gap-1 bg-white/5 px-2 py-1 rounded-lg">
            <div className="w-2 h-2 rounded-full bg-gradient-to-r from-blue-500 to-cyan-500"></div>
            <span className="text-white/70">Отпуск</span>
          </div>
          <div className="flex items-center gap-1 bg-white/5 px-2 py-1 rounded-lg">
            <div className="w-2 h-2 rounded-full bg-gradient-to-r from-amber-500 to-orange-500"></div>
            <span className="text-white/70">Больничный</span>
          </div>
          <div className="flex items-center gap-1 bg-white/5 px-2 py-1 rounded-lg">
            <div className="w-2 h-2 rounded-full bg-gradient-to-r from-red-500 to-rose-500"></div>
            <span className="text-white/70">Прогул</span>
          </div>
        </div>
      </CardContent>

      {/* SVG градиенты */}
      <svg width="0" height="0">
        <defs>
          <linearGradient
            id="gradient-purple"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop offset="0%" stopColor="#8B5CF6" />
            <stop offset="100%" stopColor="#6366F1" />
          </linearGradient>
          <linearGradient
            id="gradient-green"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop offset="0%" stopColor="#10B981" />
            <stop offset="100%" stopColor="#059669" />
          </linearGradient>
          <linearGradient
            id="gradient-blue"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop offset="0%" stopColor="#3B82F6" />
            <stop offset="100%" stopColor="#06B6D4" />
          </linearGradient>
          <linearGradient
            id="gradient-orange"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop offset="0%" stopColor="#F59E0B" />
            <stop offset="100%" stopColor="#F97316" />
          </linearGradient>
          <linearGradient
            id="gradient-yellow"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop offset="0%" stopColor="#EAB308" />
            <stop offset="100%" stopColor="#F59E0B" />
          </linearGradient>
          <linearGradient
            id="gradient-pink"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop offset="0%" stopColor="#EC4899" />
            <stop offset="100%" stopColor="#F43F5E" />
          </linearGradient>
        </defs>
      </svg>
    </Card>
  );

  // Интерактивный вариант с яркими цветами и кликабельными датами
  const renderInteractiveVariant = () => (
    <Card
      className="glass-card border-white/10 overflow-hidden relative"
      style={{ height: "600px" }}
    >
      {/* Космический фон с плавающими частицами и звездным полем */}
      <div className="absolute inset-0 bg-gradient-to-br from-purple-800/30 via-blue-800/30 to-indigo-800/30">
        <div
          className="absolute inset-0 opacity-60"
          style={{
            backgroundImage:
              'url(\'data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.08"%3E%3Ccircle cx="7" cy="7" r="1"/%3E%3Ccircle cx="27" cy="27" r="1"/%3E%3Ccircle cx="47" cy="47" r="1"/%3E%3Ccircle cx="17" cy="37" r="1"/%3E%3Ccircle cx="37" cy="17" r="1"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\')',
          }}
        ></div>

        {/* Более яркие плавающие частицы */}
        <div className="absolute top-10 left-10 w-3 h-3 bg-purple-400/50 rounded-full animate-pulse"></div>
        <div className="absolute top-20 right-20 w-2 h-2 bg-blue-400/60 rounded-full animate-pulse delay-1000"></div>
        <div className="absolute bottom-20 left-20 w-2.5 h-2.5 bg-cyan-400/50 rounded-full animate-pulse delay-2000"></div>
        <div className="absolute bottom-32 right-32 w-2 h-2 bg-pink-400/60 rounded-full animate-pulse delay-3000"></div>

        {/* Более яркое звездное поле */}
        <div className="absolute inset-0">
          {Array.from({ length: 20 }).map((_, i) => (
            <div
              key={i}
              className="absolute w-1 h-1 bg-white/60 rounded-full animate-pulse"
              style={{
                top: `${Math.random() * 100}%`,
                left: `${Math.random() * 100}%`,
                animationDelay: `${Math.random() * 3}s`,
                animationDuration: `${2 + Math.random() * 2}s`,
              }}
            />
          ))}
        </div>
      </div>

      <CardContent className="space-y-4 relative z-10 p-4 h-full overflow-y-auto">
        {/* Компактный заголовок сотрудника с яркими цветами */}
        <div className="bg-white/10 rounded-xl p-4 backdrop-blur-sm border border-white/20 shadow-lg">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <Avatar className="h-12 w-12 ring-3 ring-purple-400/50">
                <AvatarImage src={currentEmployee.avatar} />
                <AvatarFallback className="bg-gradient-to-br from-purple-500 to-blue-500 text-white text-sm font-bold">
                  {currentEmployee.name
                    .split(" ")
                    .map((n) => n[0])
                    .join("")}
                </AvatarFallback>
              </Avatar>

              <div className="flex-1">
                <h3 className="text-lg font-bold text-white mb-1">
                  {currentEmployee.name}
                </h3>
                <p className="text-purple-200 text-sm mb-1">
                  {currentEmployee.position}
                </p>
                <div className="flex items-center space-x-3 text-xs text-white/80">
                  <span>{currentEmployee.department}</span>
                  <span>•</span>
                  <span>{currentEmployee.level}</span>
                </div>
              </div>
            </div>

            {/* Компактная навигация с яркими цветами */}
            <div className="flex items-center space-x-2">
              <Select
                value={selectedEmployee}
                onValueChange={setSelectedEmployee}
              >
                <SelectTrigger className="w-32 bg-white/15 border-white/40 text-white text-xs">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {employees.map((emp) => (
                    <SelectItem key={emp.id} value={emp.id}>
                      {emp.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>

              <Button
                variant="ghost"
                size="sm"
                className="text-white/80 hover:text-white hover:bg-white/20 h-8 w-8 p-0"
              >
                <Settings className="h-4 w-4" />
              </Button>
              <Button
                variant="ghost"
                size="sm"
                className="text-white/80 hover:text-white hover:bg-white/20 h-8 w-8 p-0"
              >
                <Download className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </div>

        {/* Яркая статистика в одну строку */}
        <div className="grid grid-cols-6 gap-2">
          <div className="relative group">
            <div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-indigo-400 rounded-xl opacity-30 group-hover:opacity-40 transition-opacity blur-sm"></div>
            <div className="relative glass-card p-3 rounded-xl border border-purple-400/50 hover:border-purple-300/70 transition-all duration-300 text-center">
              <div className="relative w-10 h-10 mx-auto mb-2">
                <svg
                  className="w-10 h-10 transform -rotate-90"
                  viewBox="0 0 36 36"
                >
                  <path
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    fill="none"
                    stroke="rgba(255,255,255,0.2)"
                    strokeWidth={2}
                  />
                  <path
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    fill="none"
                    stroke="url(#gradient-purple-bright)"
                    strokeWidth={2}
                    strokeDasharray={`${
                      animatedStats
                        ? (interactiveStats.totalHours / 200) * 100
                        : 0
                    }, 100`}
                    strokeLinecap="round"
                  />
                </svg>
                <div className="absolute inset-0 flex items-center justify-center">
                  <Clock className="h-4 w-4 text-purple-300" />
                </div>
              </div>
              <div className="text-white font-bold text-lg mb-1">
                {animatedStats ? interactiveStats.totalHours : 0}
              </div>
              <p className="text-purple-200 text-xs">Часов</p>
            </div>
          </div>

          <div className="relative group">
            <div className="absolute inset-0 bg-gradient-to-r from-green-400 to-emerald-400 rounded-xl opacity-30 group-hover:opacity-40 transition-opacity blur-sm"></div>
            <div className="relative glass-card p-3 rounded-xl border border-green-400/50 hover:border-green-300/70 transition-all duration-300 text-center">
              <div className="relative w-10 h-10 mx-auto mb-2">
                <svg
                  className="w-10 h-10 transform -rotate-90"
                  viewBox="0 0 36 36"
                >
                  <path
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    fill="none"
                    stroke="rgba(255,255,255,0.2)"
                    strokeWidth={2}
                  />
                  <path
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    fill="none"
                    stroke="url(#gradient-green-bright)"
                    strokeWidth={2}
                    strokeDasharray={`${
                      animatedStats ? (interactiveStats.workDays / 25) * 100 : 0
                    }, 100`}
                    strokeLinecap="round"
                  />
                </svg>
                <div className="absolute inset-0 flex items-center justify-center">
                  <CheckCircle className="h-4 w-4 text-green-300" />
                </div>
              </div>
              <div className="text-white font-bold text-lg mb-1">
                {animatedStats ? interactiveStats.workDays : 0}
              </div>
              <p className="text-green-200 text-xs">Рабочих</p>
            </div>
          </div>

          <div className="relative group">
            <div className="absolute inset-0 bg-gradient-to-r from-blue-400 to-cyan-400 rounded-xl opacity-30 group-hover:opacity-40 transition-opacity blur-sm"></div>
            <div className="relative glass-card p-3 rounded-xl border border-blue-400/50 hover:border-blue-300/70 transition-all duration-300 text-center">
              <div className="relative w-10 h-10 mx-auto mb-2">
                <svg
                  className="w-10 h-10 transform -rotate-90"
                  viewBox="0 0 36 36"
                >
                  <path
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    fill="none"
                    stroke="rgba(255,255,255,0.2)"
                    strokeWidth={2}
                  />
                  <path
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    fill="none"
                    stroke="url(#gradient-blue-bright)"
                    strokeWidth={2}
                    strokeDasharray={`${
                      animatedStats ? (interactiveStats.vacation / 5) * 100 : 0
                    }, 100`}
                    strokeLinecap="round"
                  />
                </svg>
                <div className="absolute inset-0 flex items-center justify-center">
                  <Plane className="h-4 w-4 text-blue-300" />
                </div>
              </div>
              <div className="text-white font-bold text-lg mb-1">
                {animatedStats ? interactiveStats.vacation : 0}
              </div>
              <p className="text-blue-200 text-xs">Отпуск</p>
            </div>
          </div>

          <div className="relative group">
            <div className="absolute inset-0 bg-gradient-to-r from-orange-400 to-red-400 rounded-xl opacity-30 group-hover:opacity-40 transition-opacity blur-sm"></div>
            <div className="relative glass-card p-3 rounded-xl border border-orange-400/50 hover:border-orange-300/70 transition-all duration-300 text-center">
              <div className="relative w-10 h-10 mx-auto mb-2">
                <svg
                  className="w-10 h-10 transform -rotate-90"
                  viewBox="0 0 36 36"
                >
                  <path
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    fill="none"
                    stroke="rgba(255,255,255,0.2)"
                    strokeWidth={2}
                  />
                  <path
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    fill="none"
                    stroke="url(#gradient-orange-bright)"
                    strokeWidth={2}
                    strokeDasharray={`${
                      animatedStats ? (interactiveStats.sick / 3) * 100 : 0
                    }, 100`}
                    strokeLinecap="round"
                  />
                </svg>
                <div className="absolute inset-0 flex items-center justify-center">
                  <Heart className="h-4 w-4 text-orange-300" />
                </div>
              </div>
              <div className="text-white font-bold text-lg mb-1">
                {animatedStats ? interactiveStats.sick : 0}
              </div>
              <p className="text-orange-200 text-xs">Больничный</p>
            </div>
          </div>

          <div className="relative group">
            <div className="absolute inset-0 bg-gradient-to-r from-yellow-400 to-orange-400 rounded-xl opacity-30 group-hover:opacity-40 transition-opacity blur-sm"></div>
            <div className="relative glass-card p-3 rounded-xl border border-yellow-400/50 hover:border-yellow-300/70 transition-all duration-300 text-center">
              <div className="relative w-10 h-10 mx-auto mb-2">
                <svg
                  className="w-10 h-10 transform -rotate-90"
                  viewBox="0 0 36 36"
                >
                  <path
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    fill="none"
                    stroke="rgba(255,255,255,0.2)"
                    strokeWidth={2}
                  />
                  <path
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    fill="none"
                    stroke="url(#gradient-yellow-bright)"
                    strokeWidth={2}
                    strokeDasharray={`${
                      animatedStats ? (interactiveStats.overtime / 20) * 100 : 0
                    }, 100`}
                    strokeLinecap="round"
                  />
                </svg>
                <div className="absolute inset-0 flex items-center justify-center">
                  <Zap className="h-4 w-4 text-yellow-300" />
                </div>
              </div>
              <div className="text-white font-bold text-lg mb-1">
                {animatedStats ? interactiveStats.overtime : 0}
              </div>
              <p className="text-yellow-200 text-xs">Переработка</p>
            </div>
          </div>

          <div className="relative group">
            <div className="absolute inset-0 bg-gradient-to-r from-pink-400 to-purple-400 rounded-xl opacity-30 group-hover:opacity-40 transition-opacity blur-sm"></div>
            <div className="relative glass-card p-3 rounded-xl border border-pink-400/50 hover:border-pink-300/70 transition-all duration-300 text-center">
              <div className="relative w-10 h-10 mx-auto mb-2">
                <svg
                  className="w-10 h-10 transform -rotate-90"
                  viewBox="0 0 36 36"
                >
                  <path
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    fill="none"
                    stroke="rgba(255,255,255,0.2)"
                    strokeWidth={2}
                  />
                  <path
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    fill="none"
                    stroke="url(#gradient-pink-bright)"
                    strokeWidth={2}
                    strokeDasharray={`${
                      animatedStats ? interactiveStats.avgEfficiency : 0
                    }, 100`}
                    strokeLinecap="round"
                  />
                </svg>
                <div className="absolute inset-0 flex items-center justify-center">
                  <Activity className="h-4 w-4 text-pink-300" />
                </div>
              </div>
              <div className="text-white font-bold text-lg mb-1">
                {animatedStats ? interactiveStats.avgEfficiency : 0}%
              </div>
              <p className="text-pink-200 text-xs">КПД</p>
            </div>
          </div>
        </div>

        {/* Интерактивная календарная сетка с яркими цветами */}
        <div className="space-y-3">
          {/* Заголовки дней недели */}
          <div className="grid grid-cols-7 gap-2 text-center text-xs text-white/80 font-medium">
            <div>ПН</div>
            <div>ВТ</div>
            <div>СР</div>
            <div>ЧТ</div>
            <div>ПТ</div>
            <div>СБ</div>
            <div>ВС</div>
          </div>

          {/* Интерактивная календарная сетка */}
          <div className="grid grid-cols-7 gap-2">
            {editableCalendarData.map((day, index) => (
              <div
                key={index}
                onClick={() => toggleDayStatus(index)}
                className={`relative group cursor-pointer transition-all duration-300 transform hover:scale-105 ${
                  day.status === "work"
                    ? "bg-gradient-to-br from-emerald-400/30 to-green-400/30 border-emerald-400/50 hover:border-emerald-300/70 shadow-lg shadow-emerald-500/20"
                    : day.status === "weekend"
                    ? "bg-gradient-to-br from-slate-400/30 to-gray-400/30 border-slate-400/50 hover:border-slate-300/70 shadow-lg shadow-slate-500/20"
                    : day.status === "vacation"
                    ? "bg-gradient-to-br from-blue-400/30 to-cyan-400/30 border-blue-400/50 hover:border-blue-300/70 shadow-lg shadow-blue-500/20"
                    : day.status === "sick"
                    ? "bg-gradient-to-br from-amber-400/30 to-orange-400/30 border-amber-400/50 hover:border-amber-300/70 shadow-lg shadow-amber-500/20"
                    : "bg-gradient-to-br from-red-400/30 to-rose-400/30 border-red-400/50 hover:border-red-300/70 shadow-lg shadow-red-500/20"
                } rounded-xl border backdrop-blur-sm p-2 h-16`}
              >
                <div className="flex flex-col items-center justify-center h-full">
                  <span className="text-white font-medium text-sm mb-1">
                    {day.day}
                  </span>

                  {day.status === "work" && (
                    <div className="flex items-center space-x-1 text-xs">
                      <span className="text-white/90">{day.hours}ч</span>
                      {day.overtime > 0 && (
                        <span className="text-yellow-300">+{day.overtime}</span>
                      )}
                    </div>
                  )}

                  {day.status !== "work" && day.status !== "weekend" && (
                    <div className="flex justify-center">
                      <div
                        className={`w-2 h-2 rounded-full ${
                          day.status === "vacation"
                            ? "bg-gradient-to-r from-blue-400 to-cyan-400"
                            : day.status === "sick"
                            ? "bg-gradient-to-r from-amber-400 to-orange-400"
                            : "bg-gradient-to-r from-red-400 to-rose-400"
                        }`}
                      ></div>
                    </div>
                  )}
                </div>

                {/* Индикатор интерактивности */}
                <div className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity">
                  <div className="w-1.5 h-1.5 bg-white/60 rounded-full animate-pulse"></div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Яркая легенда с подсказкой */}
        <div className="space-y-2">
          <div className="flex flex-wrap gap-2 text-xs justify-center">
            <div className="flex items-center gap-1 bg-white/10 px-2 py-1 rounded-lg border border-emerald-400/30">
              <div className="w-2 h-2 rounded-full bg-gradient-to-r from-emerald-400 to-green-400"></div>
              <span className="text-white/80">Работа</span>
            </div>
            <div className="flex items-center gap-1 bg-white/10 px-2 py-1 rounded-lg border border-slate-400/30">
              <div className="w-2 h-2 rounded-full bg-gradient-to-r from-slate-400 to-gray-400"></div>
              <span className="text-white/80">Выходной</span>
            </div>
            <div className="flex items-center gap-1 bg-white/10 px-2 py-1 rounded-lg border border-blue-400/30">
              <div className="w-2 h-2 rounded-full bg-gradient-to-r from-blue-400 to-cyan-400"></div>
              <span className="text-white/80">Отпуск</span>
            </div>
            <div className="flex items-center gap-1 bg-white/10 px-2 py-1 rounded-lg border border-amber-400/30">
              <div className="w-2 h-2 rounded-full bg-gradient-to-r from-amber-400 to-orange-400"></div>
              <span className="text-white/80">Больничный</span>
            </div>
            <div className="flex items-center gap-1 bg-white/10 px-2 py-1 rounded-lg border border-red-400/30">
              <div className="w-2 h-2 rounded-full bg-gradient-to-r from-red-400 to-rose-400"></div>
              <span className="text-white/80">Прогул</span>
            </div>
          </div>
          <div className="text-center text-xs text-white/60">
            💡 Кликните на дату, чтобы изменить статус
          </div>
        </div>
      </CardContent>

      {/* Яркие SVG градиенты */}
      <svg width="0" height="0">
        <defs>
          <linearGradient
            id="gradient-purple-bright"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop offset="0%" stopColor="#A855F7" />
            <stop offset="100%" stopColor="#7C3AED" />
          </linearGradient>
          <linearGradient
            id="gradient-green-bright"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop offset="0%" stopColor="#34D399" />
            <stop offset="100%" stopColor="#10B981" />
          </linearGradient>
          <linearGradient
            id="gradient-blue-bright"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop offset="0%" stopColor="#60A5FA" />
            <stop offset="100%" stopColor="#22D3EE" />
          </linearGradient>
          <linearGradient
            id="gradient-orange-bright"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop offset="0%" stopColor="#FB923C" />
            <stop offset="100%" stopColor="#F87171" />
          </linearGradient>
          <linearGradient
            id="gradient-yellow-bright"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop offset="0%" stopColor="#FBBF24" />
            <stop offset="100%" stopColor="#FB923C" />
          </linearGradient>
          <linearGradient
            id="gradient-pink-bright"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop offset="0%" stopColor="#F472B6" />
            <stop offset="100%" stopColor="#F87171" />
          </linearGradient>
        </defs>
      </svg>
    </Card>
  );

  // Интерактивный вариант для нескольких сотрудников с яркими цветами
  const renderMultiEmployeeInteractiveVariant = () => {

    const daysInMonth = new Date(selectedYear, selectedMonth + 1, 0).getDate();

    return (
      <div className="space-y-6">
        {/* Заголовок */}
        <Card className="glass-card border-white/10 overflow-hidden relative">
          <div className="absolute inset-0 bg-gradient-to-br from-purple-900/30 via-pink-900/30 to-cyan-900/30">
            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-purple-600/20 via-pink-600/10 to-transparent"></div>
          </div>

          <CardHeader className="relative z-10">
            <div className="flex items-center justify-between">
              <div>
                <h2 className="text-3xl font-bold bg-gradient-to-r from-cyan-400 via-purple-400 to-pink-400 bg-clip-text text-transparent mb-2">
                  Универсальный табель учета рабочего времени
                </h2>
                <p className="text-white/70 text-lg">
                  {monthNames[selectedMonth]} {selectedYear} •{" "}
                  {employeesList.length} сотрудников
                </p>
              </div>

              <div className="flex items-center space-x-4">
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => {
                    if (selectedMonth === 0) {
                      setSelectedMonth(11);
                      setSelectedYear(selectedYear - 1);
                    } else {
                      setSelectedMonth(selectedMonth - 1);
                    }
                  }}
                  className="text-white hover:bg-white/10 rounded-xl border border-cyan-400/30 hover:border-cyan-400/50"
                >
                  <ChevronLeft className="h-5 w-5" />
                </Button>

                <div className="text-white font-bold text-xl min-w-[180px] text-center bg-gradient-to-r from-cyan-400 to-pink-400 bg-clip-text text-transparent">
                  {monthNames[selectedMonth]} {selectedYear}
                </div>

                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => {
                    if (selectedMonth === 11) {
                      setSelectedMonth(0);
                      setSelectedYear(selectedYear + 1);
                    } else {
                      setSelectedMonth(selectedMonth + 1);
                    }
                  }}
                  className="text-white hover:bg-white/10 rounded-xl border border-pink-400/30 hover:border-pink-400/50"
                >
                  <ChevronRight className="h-5 w-5" />
                </Button>

                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => setShowAddForm(!showAddForm)}
                  className="text-white hover:bg-white/10 rounded-xl border border-green-400/30 hover:border-green-400/50"
                >
                  <Plus className="h-4 w-4 mr-2" />
                  Добавить сотрудника
                </Button>

                <Button
                  variant="ghost"
                  size="sm"
                  className="text-white hover:bg-white/10 rounded-xl border border-purple-400/30 hover:border-purple-400/50"
                >
                  <Download className="h-4 w-4 mr-2" />
                  Экспорт
                </Button>
              </div>
            </div>

            {/* Форма добавления сотрудника */}
            {showAddForm && (
              <div className="mt-6 p-4 bg-white/5 rounded-xl border border-white/10">
                <h3 className="text-white font-semibold mb-4">
                  Добавить нового сотрудника
                </h3>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                  <input
                    type="text"
                    placeholder="Имя Фамилия"
                    value={newEmployee.name}
                    onChange={(e) =>
                      setNewEmployee({ ...newEmployee, name: e.target.value })
                    }
                    className="px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:border-cyan-400/50"
                  />
                  <input
                    type="text"
                    placeholder="Должность"
                    value={newEmployee.position}
                    onChange={(e) =>
                      setNewEmployee({
                        ...newEmployee,
                        position: e.target.value,
                      })
                    }
                    className="px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:border-cyan-400/50"
                  />
                  <input
                    type="text"
                    placeholder="Отдел"
                    value={newEmployee.department}
                    onChange={(e) =>
                      setNewEmployee({
                        ...newEmployee,
                        department: e.target.value,
                      })
                    }
                    className="px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:border-cyan-400/50"
                  />
                  <select
                    value={newEmployee.level}
                    onChange={(e) =>
                      setNewEmployee({ ...newEmployee, level: e.target.value })
                    }
                    className="px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-cyan-400/50"
                  >
                    <option value="Junior" className="bg-gray-900">
                      Junior
                    </option>
                    <option value="Middle" className="bg-gray-900">
                      Middle
                    </option>
                    <option value="Senior" className="bg-gray-900">
                      Senior
                    </option>
                    <option value="Lead" className="bg-gray-900">
                      Lead
                    </option>
                  </select>
                </div>
                <div className="flex justify-end space-x-2 mt-4">
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => setShowAddForm(false)}
                    className="text-white/70 hover:text-white hover:bg-white/10"
                  >
                    Отмена
                  </Button>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={handleAddEmployee}
                    className="text-white hover:bg-green-500/20 border border-green-400/30"
                  >
                    Добавить
                  </Button>
                </div>
              </div>
            )}
          </CardHeader>
        </Card>

        {/* Основной табель */}
        <Card className="glass-card border-white/10 overflow-hidden relative">
          <div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-blue-900/20 to-indigo-900/20">
            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-purple-600/10 via-pink-600/5 to-transparent"></div>
          </div>

          <CardContent className="relative z-10 p-6">
            <div className="overflow-x-auto">
              <table className="w-full">
                {/* Заголовок таблицы */}
                <thead>
                  <tr>
                    <th className="text-left p-3 text-white font-semibold border-b border-white/10 sticky left-0 bg-gray-900/80 backdrop-blur min-w-[200px]">
                      Сотрудник
                    </th>
                    {Array.from({ length: daysInMonth }, (_, i) => {
                      const date = new Date(selectedYear, selectedMonth, i + 1);
                      const dayOfWeek = date.getDay();
                      const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
                      const workingCount = getWorkingEmployeesCount(i);

                      return (
                        <th
                          key={i + 1}
                          className={`text-center p-2 text-sm border-b border-white/10 min-w-[60px] ${
                            isWeekend ? "bg-gray-500/20" : ""
                          }`}
                        >
                          <div className="text-white/70 text-xs">
                            {dayNames[dayOfWeek === 0 ? 6 : dayOfWeek - 1]}
                          </div>
                          <div className="text-white font-bold text-lg">
                            {i + 1}
                          </div>
                          {workingCount > 0 && (
                            <div className="text-green-400 text-xs font-semibold mt-1">
                              {workingCount} чел.
                            </div>
                          )}
                        </th>
                      );
                    })}
                    <th className="text-center p-3 text-white font-semibold border-b border-white/10 min-w-[100px]">
                      Итого
                    </th>
                  </tr>
                </thead>

                {/* Строки сотрудников */}
                <tbody>
                  {employeesList.map((employee, employeeIndex) => {
                    const employeeData = allEmployeesData[employee.id] || [];
                    const totalHours = employeeData.reduce(
                      (sum, day) => sum + day.hours,
                      0
                    );
                    const workDays = employeeData.filter(
                      (day) => day.status === "work"
                    ).length;
                    const colorGradient = getEmployeeColor(employeeIndex);

                    return (
                      <tr
                        key={employee.id}
                        className="hover:bg-white/5 transition-colors"
                      >
                        {/* Информация о сотруднике */}
                        <td className="p-3 border-b border-white/5 sticky left-0 bg-gray-900/80 backdrop-blur">
                          <div className="flex items-center justify-between">
                            <div className="flex items-center space-x-3">
                              <Avatar
                                className={`h-10 w-10 ring-2 ring-offset-2 ring-offset-gray-900`}
                                style={{
                                  borderColor: `rgb(${
                                    employeeIndex * 50 + 100
                                  }, ${200 - employeeIndex * 30}, ${
                                    150 + employeeIndex * 40
                                  })`,
                                }}
                              >
                                <AvatarImage src={employee.avatar} />
                                <AvatarFallback
                                  className={`bg-gradient-to-br ${colorGradient} text-white text-sm font-bold`}
                                >
                                  {employee.name
                                    .split(" ")
                                    .map((n) => n[0])
                                    .join("")}
                                </AvatarFallback>
                              </Avatar>
                              <div>
                                <div className="text-white font-medium text-sm">
                                  {employee.name}
                                </div>
                                <div className="text-white/60 text-xs">
                                  {employee.position}
                                </div>
                                <div className="text-white/40 text-xs">
                                  {employee.department}
                                </div>
                              </div>
                            </div>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleRemoveEmployee(employee.id)}
                              className="text-red-400 hover:text-red-300 hover:bg-red-500/10 p-1 h-6 w-6"
                            >
                              <X className="h-3 w-3" />
                            </Button>
                          </div>
                        </td>

                        {/* Дни месяца */}
                        {employeeData.map((day, dayIndex) => {
                          const date = new Date(
                            selectedYear,
                            selectedMonth,
                            day.day
                          );
                          const isWeekend =
                            date.getDay() === 0 || date.getDay() === 6;

                          return (
                            <td
                              key={dayIndex}
                              className={`p-1 border-b border-white/5 text-center ${
                                isWeekend ? "bg-gray-500/10" : ""
                              }`}
                            >
                              <div
                                className={`
                                  w-12 h-12 mx-auto rounded-lg flex flex-col items-center justify-center text-xs font-semibold transition-all duration-300 hover:scale-110 cursor-pointer
                                  ${
                                    day.status === "work"
                                      ? "bg-gradient-to-br from-green-500/40 to-emerald-500/40 border border-green-400/50 text-white shadow-lg shadow-green-500/20"
                                      : ""
                                  }
                                  ${
                                    day.status === "weekend"
                                      ? "bg-gradient-to-br from-gray-500/30 to-slate-500/30 border border-gray-400/40 text-white/70"
                                      : ""
                                  }
                                  ${
                                    day.status === "vacation"
                                      ? "bg-gradient-to-br from-blue-500/40 to-cyan-500/40 border border-blue-400/50 text-white shadow-lg shadow-blue-500/20"
                                      : ""
                                  }
                                  ${
                                    day.status === "sick"
                                      ? "bg-gradient-to-br from-orange-500/40 to-red-500/40 border border-orange-400/50 text-white shadow-lg shadow-orange-500/20"
                                      : ""
                                  }
                                  ${
                                    day.status === "absent"
                                      ? "bg-gradient-to-br from-red-500/40 to-rose-500/40 border border-red-400/50 text-white shadow-lg shadow-red-500/20"
                                      : ""
                                  }
                                `}
                              >
                                {day.status === "work" && (
                                  <>
                                    <span className="text-xs font-bold">
                                      {day.hours}ч
                                    </span>
                                    {day.overtime > 0 && (
                                      <span className="text-yellow-300 text-xs">
                                        +{day.overtime}
                                      </span>
                                    )}
                                  </>
                                )}
                                {day.status === "weekend" && (
                                  <span className="text-xs">Вых</span>
                                )}
                                {day.status === "vacation" && (
                                  <span className="text-xs">Отп</span>
                                )}
                                {day.status === "sick" && (
                                  <span className="text-xs">Б/Л</span>
                                )}
                                {day.status === "absent" && (
                                  <span className="text-xs">Пр</span>
                                )}
                              </div>
                            </td>
                          );
                        })}

                        {/* Итого */}
                        <td className="p-3 border-b border-white/5 text-center">
                          <div className="text-white font-bold text-lg">
                            {totalHours}ч
                          </div>
                          <div className="text-white/60 text-xs">
                            {workDays} дней
                          </div>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>

                {/* Итоговая строка */}
                <tfoot>
                  <tr className="bg-white/5">
                    <td className="p-3 text-white font-semibold border-t border-white/10 sticky left-0 bg-gray-800/80 backdrop-blur">
                      Итого по дням:
                    </td>
                    {Array.from({ length: daysInMonth }, (_, dayIndex) => {
                      const workingCount = getWorkingEmployeesCount(dayIndex);
                      const totalHours = employeesList.reduce((sum, emp) => {
                        const dayData = getDayStatus(emp.id, dayIndex);
                        return sum + (dayData?.hours || 0);
                      }, 0);

                      return (
                        <td
                          key={dayIndex}
                          className="p-2 text-center border-t border-white/10"
                        >
                          {workingCount > 0 && (
                            <div className="text-white font-bold text-sm">
                              {totalHours}ч
                            </div>
                          )}
                          {workingCount > 0 && (
                            <div className="text-green-400 text-xs">
                              {workingCount} чел
                            </div>
                          )}
                        </td>
                      );
                    })}
                    <td className="p-3 text-center border-t border-white/10">
                      <div className="text-white font-bold text-lg">
                        {employeesList.reduce((sum, emp) => {
                          const empData = allEmployeesData[emp.id] || [];
                          return (
                            sum +
                            empData.reduce(
                              (daySum, day) => daySum + day.hours,
                              0
                            )
                          );
                        }, 0)}
                        ч
                      </div>
                    </td>
                  </tr>
                </tfoot>
              </table>
            </div>
          </CardContent>
        </Card>

        {/* Легенда */}
        <Card className="glass-card border-white/10">
          <div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-pink-900/20 to-cyan-900/20">
            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-purple-600/10 via-pink-600/5 to-transparent"></div>
          </div>

          <CardContent className="relative z-10 p-6">
            <h4 className="text-white font-bold text-xl mb-6 text-center bg-gradient-to-r from-cyan-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
              Легенда статусов
            </h4>
            <div className="grid grid-cols-2 md:grid-cols-5 gap-6">
              <div className="flex items-center space-x-3 bg-white/5 p-4 rounded-xl border border-green-400/30">
                <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-green-500/40 to-emerald-500/40 border border-green-400/50 flex items-center justify-center shadow-lg shadow-green-500/20">
                  <span className="text-white text-xs font-bold">8ч</span>
                </div>
                <div>
                  <span className="text-white font-bold text-sm">Работа</span>
                  <p className="text-green-300 text-xs">Рабочий день</p>
                </div>
              </div>

              <div className="flex items-center space-x-3 bg-white/5 p-4 rounded-xl border border-gray-400/30">
                <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-gray-500/30 to-slate-500/30 border border-gray-400/40 flex items-center justify-center">
                  <span className="text-white/70 text-xs font-bold">Вых</span>
                </div>
                <div>
                  <span className="text-white font-bold text-sm">Выходной</span>
                  <p className="text-gray-300 text-xs">Суббота/Воскресенье</p>
                </div>
              </div>

              <div className="flex items-center space-x-3 bg-white/5 p-4 rounded-xl border border-blue-400/30">
                <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500/40 to-cyan-500/40 border border-blue-400/50 flex items-center justify-center shadow-lg shadow-blue-500/20">
                  <span className="text-white text-xs font-bold">Отп</span>
                </div>
                <div>
                  <span className="text-white font-bold text-sm">Отпуск</span>
                  <p className="text-blue-300 text-xs">Оплачиваемый отпуск</p>
                </div>
              </div>

              <div className="flex items-center space-x-3 bg-white/5 p-4 rounded-xl border border-orange-400/30">
                <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-orange-500/40 to-red-500/40 border border-orange-400/50 flex items-center justify-center shadow-lg shadow-orange-500/20">
                  <span className="text-white text-xs font-bold">Б/Л</span>
                </div>
                <div>
                  <span className="text-white font-bold text-sm">
                    Больничный
                  </span>
                  <p className="text-orange-300 text-xs">По болезни</p>
                </div>
              </div>

              <div className="flex items-center space-x-3 bg-white/5 p-4 rounded-xl border border-red-400/30">
                <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-red-500/40 to-rose-500/40 border border-red-400/50 flex items-center justify-center shadow-lg shadow-red-500/20">
                  <span className="text-white text-xs font-bold">Пр</span>
                </div>
                <div>
                  <span className="text-white font-bold text-sm">Прогул</span>
                  <p className="text-red-300 text-xs">Неявка</p>
                </div>
              </div>
            </div>

            <div className="mt-6 text-center text-white/60 text-sm">
              <p>
                💡 В заголовках дней показано количество работающих сотрудников
              </p>
              <p>
                📊 В итоговой строке показаны общие часы и количество
                сотрудников по дням
              </p>
            </div>
          </CardContent>
        </Card>
      </div>
    );
  };

  return (
    <div className="space-y-6">
      {/* Селектор вариантов */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <div className="flex items-center justify-between">
            <CardTitle className="text-white">
              Табель учета рабочего времени
            </CardTitle>
            <div className="flex items-center space-x-4">
              <Select
                value={selectedVariant}
                onValueChange={(
                  value:
                    | "galaxy"
                    | "cosmic"
                    | "custom"
                    | "compact"
                    | "interactive"
                    | "multi-employee"
                ) => setSelectedVariant(value)}
              >
                <SelectTrigger className="w-64 glass-input bg-white/10 border-white/20 text-white">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent className="bg-gray-900/95 backdrop-blur border-white/20 text-white">
                  <SelectItem
                    value="galaxy"
                    className="text-white hover:bg-white/10"
                  >
                    Галактический стиль
                  </SelectItem>
                  <SelectItem
                    value="cosmic"
                    className="text-white hover:bg-white/10"
                  >
                    Космический стиль
                  </SelectItem>
                  <SelectItem
                    value="custom"
                    className="text-white hover:bg-white/10"
                  >
                    Кастомный стиль
                  </SelectItem>
                  <SelectItem
                    value="compact"
                    className="text-white hover:bg-white/10"
                  >
                    Компактный вид
                  </SelectItem>
                  <SelectItem
                    value="interactive"
                    className="text-white hover:bg-white/10"
                  >
                    Интерактивный режим
                  </SelectItem>
                  <SelectItem
                    value="multi-employee"
                    className="text-white hover:bg-white/10"
                  >
                    Универсальный (несколько сотрудников)
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardHeader>
      </Card>

      {/* Отображение выбранного варианта */}
      {selectedVariant === "galaxy" && renderGalaxyVariant()}
      {selectedVariant === "cosmic" && renderCosmicVariant()}
      {selectedVariant === "custom" && renderCustomVariant()}
      {selectedVariant === "compact" && renderCompactVariant()}
      {selectedVariant === "interactive" && renderInteractiveVariant()}
      {selectedVariant === "multi-employee" &&
        renderMultiEmployeeInteractiveVariant()}
    </div>
  );
}
