import React, { useState, useEffect } from 'react';
import { BarChart, Calendar, Timer, Square, ChevronDown, ChevronUp, Scissors, Zap, Download } from './Icons';
import { Zone, MowingHistory } from '../types/zone';
import { api } from '../services/api';

interface YearlyReportsProps {
  zones: Zone[];
}

interface YearlyStats {
  year: number;
  totalSessions: number;
  totalMowingSessions: number;
  totalTrimmingSessions: number;
  totalMinutes: number;
  totalArea: number;
  uniqueZones: number;
  averageSessionTime: number;
  monthlyBreakdown: MonthlyData[];
  zoneBreakdown: ZoneStats[];
  mowerBreakdown: MowerStats[];
  weatherBreakdown: WeatherStats[];
  activityTimeline: ActivityData[];
}

interface MonthlyData {
  month: number;
  monthName: string;
  sessions: number;
  mowingSessions: number;
  trimmingSessions: number;
  minutes: number;
  area: number;
  uniqueZones: number;
}

interface ZoneStats {
  zoneId: number;
  zoneName: string;
  sessions: number;
  mowingSessions: number;
  trimmingSessions: number;
  minutes: number;
  area: number;
  averageInterval: number;
}

interface MowerStats {
  mowerId: number;
  mowerName: string;
  mowerType: string;
  sessions: number;
  minutes: number;
  area: number;
}

interface WeatherStats {
  weather: string;
  sessions: number;
  percentage: number;
}

interface ActivityData {
  date: string;
  sessions: number;
  mowingSessions: number;
  trimmingSessions: number;
  minutes: number;
  area: number;
}

const YearlyReports: React.FC<YearlyReportsProps> = ({ zones }) => {
  const [selectedYear, setSelectedYear] = useState(new Date().getFullYear());
  const [yearlyStats, setYearlyStats] = useState<YearlyStats | null>(null);
  const [availableYears, setAvailableYears] = useState<number[]>([]);
  const [loading, setLoading] = useState(true);
  const [expandedSection, setExpandedSection] = useState<string | null>('overview');

  useEffect(() => {
    loadYearlyData();
  }, [selectedYear]);

  const loadYearlyData = async () => {
    setLoading(true);
    try {
      // Get all history data for the year
      const startDate = new Date(selectedYear, 0, 1).toISOString();
      const endDate = new Date(selectedYear, 11, 31, 23, 59, 59).toISOString();
      
      // Fetch all data for the year (using large limit)
      const historyResponse = await api.getMowingHistory(undefined, 10000, 0);
      
      // Filter data for the selected year
      const yearData = historyResponse.data.filter(entry => {
        const entryDate = new Date(entry.mowedDate);
        return entryDate.getFullYear() === selectedYear;
      });

      // Calculate comprehensive statistics
      const stats = calculateYearlyStats(yearData, selectedYear);
      setYearlyStats(stats);

      // Get available years from all data
      const years = [...new Set(historyResponse.data.map(entry => 
        new Date(entry.mowedDate).getFullYear()
      ))].sort((a, b) => b - a);
      setAvailableYears(years);

    } catch (error) {
      console.error('Failed to load yearly data:', error);
    } finally {
      setLoading(false);
    }
  };

  const calculateYearlyStats = (data: MowingHistory[], year: number): YearlyStats => {
    const monthNames = [
      'January', 'February', 'March', 'April', 'May', 'June',
      'July', 'August', 'September', 'October', 'November', 'December'
    ];

    // Basic totals
    const totalSessions = data.length;
    const totalMowingSessions = data.filter(d => d.activityType !== 'trimming').length;
    const totalTrimmingSessions = data.filter(d => d.activityType === 'trimming').length;
    const totalMinutes = data.reduce((sum, d) => sum + (d.duration || 0), 0);
    const totalArea = data.reduce((sum, d) => sum + d.zoneArea, 0);
    const uniqueZones = new Set(data.map(d => d.zoneId)).size;
    const averageSessionTime = totalSessions > 0 ? Math.round(totalMinutes / totalSessions) : 0;

    // Monthly breakdown
    const monthlyBreakdown: MonthlyData[] = [];
    for (let month = 0; month < 12; month++) {
      const monthData = data.filter(d => new Date(d.mowedDate).getMonth() === month);
      monthlyBreakdown.push({
        month: month + 1,
        monthName: monthNames[month],
        sessions: monthData.length,
        mowingSessions: monthData.filter(d => d.activityType !== 'trimming').length,
        trimmingSessions: monthData.filter(d => d.activityType === 'trimming').length,
        minutes: monthData.reduce((sum, d) => sum + (d.duration || 0), 0),
        area: monthData.reduce((sum, d) => sum + d.zoneArea, 0),
        uniqueZones: new Set(monthData.map(d => d.zoneId)).size,
      });
    }

    // Zone breakdown
    const zoneMap = new Map<number, ZoneStats>();
    data.forEach(entry => {
      if (!zoneMap.has(entry.zoneId)) {
        zoneMap.set(entry.zoneId, {
          zoneId: entry.zoneId,
          zoneName: entry.zoneName,
          sessions: 0,
          mowingSessions: 0,
          trimmingSessions: 0,
          minutes: 0,
          area: 0,
          averageInterval: 0,
        });
      }
      const zoneStats = zoneMap.get(entry.zoneId)!;
      zoneStats.sessions++;
      if (entry.activityType === 'trimming') {
        zoneStats.trimmingSessions++;
      } else {
        zoneStats.mowingSessions++;
      }
      zoneStats.minutes += entry.duration || 0;
      zoneStats.area += entry.zoneArea;
    });

    // Calculate average intervals for zones
    zoneMap.forEach((stats, zoneId) => {
      const zoneEntries = data.filter(d => d.zoneId === zoneId && d.activityType !== 'trimming')
        .sort((a, b) => new Date(a.mowedDate).getTime() - new Date(b.mowedDate).getTime());
      
      if (zoneEntries.length > 1) {
        const intervals = [];
        for (let i = 1; i < zoneEntries.length; i++) {
          const daysDiff = Math.round(
            (new Date(zoneEntries[i].mowedDate).getTime() - new Date(zoneEntries[i-1].mowedDate).getTime()) 
            / (1000 * 60 * 60 * 24)
          );
          intervals.push(daysDiff);
        }
        stats.averageInterval = Math.round(intervals.reduce((sum, interval) => sum + interval, 0) / intervals.length);
      }
    });

    const zoneBreakdown = Array.from(zoneMap.values()).sort((a, b) => b.sessions - a.sessions);

    // Mower breakdown
    const mowerMap = new Map<number, MowerStats>();
    data.forEach(entry => {
      if (entry.mowerId) {
        if (!mowerMap.has(entry.mowerId)) {
          mowerMap.set(entry.mowerId, {
            mowerId: entry.mowerId,
            mowerName: entry.mowerName || 'Unknown',
            mowerType: entry.mowerType || 'Unknown',
            sessions: 0,
            minutes: 0,
            area: 0,
          });
        }
        const mowerStats = mowerMap.get(entry.mowerId)!;
        mowerStats.sessions++;
        mowerStats.minutes += entry.duration || 0;
        mowerStats.area += entry.zoneArea;
      }
    });
    const mowerBreakdown = Array.from(mowerMap.values()).sort((a, b) => b.sessions - a.sessions);

    // Weather breakdown
    const weatherMap = new Map<string, number>();
    data.forEach(entry => {
      if (entry.weather) {
        weatherMap.set(entry.weather, (weatherMap.get(entry.weather) || 0) + 1);
      }
    });
    const weatherBreakdown: WeatherStats[] = Array.from(weatherMap.entries())
      .map(([weather, sessions]) => ({
        weather,
        sessions,
        percentage: Math.round((sessions / totalSessions) * 100),
      }))
      .sort((a, b) => b.sessions - a.sessions);

    // Activity timeline (daily aggregation)
    const timelineMap = new Map<string, ActivityData>();
    data.forEach(entry => {
      const date = new Date(entry.mowedDate).toISOString().split('T')[0];
      if (!timelineMap.has(date)) {
        timelineMap.set(date, {
          date,
          sessions: 0,
          mowingSessions: 0,
          trimmingSessions: 0,
          minutes: 0,
          area: 0,
        });
      }
      const dayStats = timelineMap.get(date)!;
      dayStats.sessions++;
      if (entry.activityType === 'trimming') {
        dayStats.trimmingSessions++;
      } else {
        dayStats.mowingSessions++;
      }
      dayStats.minutes += entry.duration || 0;
      dayStats.area += entry.zoneArea;
    });
    const activityTimeline = Array.from(timelineMap.values()).sort((a, b) => a.date.localeCompare(b.date));

    return {
      year,
      totalSessions,
      totalMowingSessions,
      totalTrimmingSessions,
      totalMinutes,
      totalArea,
      uniqueZones,
      averageSessionTime,
      monthlyBreakdown,
      zoneBreakdown,
      mowerBreakdown,
      weatherBreakdown,
      activityTimeline,
    };
  };

  const formatDuration = (minutes: number) => {
    if (minutes < 60) return `${minutes}м`;
    const hours = Math.floor(minutes / 60);
    const mins = minutes % 60;
    return mins > 0 ? `${hours}ч ${mins}м` : `${hours}ч`;
  };

  const getMowerIcon = (type: string) => {
    switch (type.toLowerCase()) {
      case 'battery':
        return '🔋';
      case 'electric':
        return '⚡';
      case 'gas':
      case 'petrol':
        return '⛽';
      default:
        return '🚜';
    }
  };

  const exportToCSV = () => {
    if (!yearlyStats) return;

    const csvData = [
      ['Yearly Mowing Report', selectedYear],
      [''],
      ['Summary'],
      ['Total Sessions', yearlyStats.totalSessions],
      ['Mowing Sessions', yearlyStats.totalMowingSessions],
      ['Trimming Sessions', yearlyStats.totalTrimmingSessions],
      ['Total Time', formatDuration(yearlyStats.totalMinutes)],
      ['Total Area', `${yearlyStats.totalArea.toLocaleString()} sq ft`],
      ['Unique Zones', yearlyStats.uniqueZones],
      ['Average Session Time', formatDuration(yearlyStats.averageSessionTime)],
      [''],
      ['Monthly Breakdown'],
      ['Month', 'Sessions', 'Mowing', 'Trimming', 'Time', 'Area (sq ft)'],
      ...yearlyStats.monthlyBreakdown.map(month => [
        month.monthName,
        month.sessions,
        month.mowingSessions,
        month.trimmingSessions,
        formatDuration(month.minutes),
        month.area.toLocaleString(),
      ]),
      [''],
      ['Zone Breakdown'],
      ['Zone', 'Sessions', 'Mowing', 'Trimming', 'Time', 'Area (sq ft)', 'Avg Interval (days)'],
      ...yearlyStats.zoneBreakdown.map(zone => [
        zone.zoneName,
        zone.sessions,
        zone.mowingSessions,
        zone.trimmingSessions,
        formatDuration(zone.minutes),
        zone.area.toLocaleString(),
        zone.averageInterval || 'N/A',
      ]),
    ];

    const csvContent = csvData.map(row => row.join(',')).join('\n');
    const blob = new Blob([csvContent], { type: 'text/csv' });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `lawn-mowing-report-${selectedYear}.csv`;
    a.click();
    window.URL.revokeObjectURL(url);
  };

  const toggleSection = (section: string) => {
    setExpandedSection(expandedSection === section ? null : section);
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center py-12">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-green-600"></div>
      </div>
    );
  }

  if (!yearlyStats) {
    return (
      <div className="text-center py-12">
        <BarChart className="mx-auto h-12 w-12 text-gray-400" />
        <h3 className="mt-2 text-sm font-medium text-gray-900">No data available</h3>
        <p className="mt-1 text-sm text-gray-500">No mowing data found for {selectedYear}</p>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h2 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
            <BarChart className="h-6 w-6 text-green-600" />
            Ежегодные отчеты
          </h2>
          <p className="text-gray-600 mt-1">Всесторонний анализ мероприятий по уходу за газоном</p>
        </div>
        
        <div className="flex gap-3">
          <select
            value={selectedYear}
            onChange={(e) => setSelectedYear(parseInt(e.target.value))}
            className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
          >
            {availableYears.map(year => (
              <option key={year} value={year}>{year}</option>
            ))}
          </select>
          
          <button
            onClick={exportToCSV}
            className="flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors duration-200"
          >
            <Download className="h-4 w-4" />
            Экспорт в CSV
          </button>
        </div>
      </div>

      {/* Overview Stats */}
      <div className="bg-white rounded-lg shadow-md">
        <button
          onClick={() => toggleSection('overview')}
          className="w-full px-6 py-4 flex items-center justify-between text-left border-b hover:bg-gray-50 transition-colors duration-200"
        >
          <h3 className="text-lg font-semibold text-gray-900">
            {selectedYear} Обзор
          </h3>
          {expandedSection === 'overview' ? (
            <ChevronUp className="h-5 w-5 text-gray-500" />
          ) : (
            <ChevronDown className="h-5 w-5 text-gray-500" />
          )}
        </button>
        
        {expandedSection === 'overview' && (
          <div className="p-6">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              <div className="bg-blue-50 rounded-lg p-4 border border-blue-200">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-blue-600">Всего сессий</p>
                    <p className="text-2xl font-bold text-blue-900">{yearlyStats.totalSessions}</p>
                    <p className="text-xs text-blue-700">
                      {yearlyStats.totalMowingSessions} покосов, {yearlyStats.totalTrimmingSessions} подравниваний
                    </p>
                  </div>
                  <Scissors className="h-8 w-8 text-blue-600" />
                </div>
              </div>

              <div className="bg-green-50 rounded-lg p-4 border border-green-200">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-green-600">Всего времени</p>
                    <p className="text-2xl font-bold text-green-900">
                      {formatDuration(yearlyStats.totalMinutes)}
                    </p>
                    <p className="text-xs text-green-700">
                      В среднем: {formatDuration(yearlyStats.averageSessionTime)}/сессию
                    </p>
                  </div>
                  <Timer className="h-8 w-8 text-green-600" />
                </div>
              </div>

              <div className="bg-purple-50 rounded-lg p-4 border border-purple-200">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-purple-600">Общая площадь</p>
                    <p className="text-2xl font-bold text-purple-900">
                      {yearlyStats.totalArea.toLocaleString()}
                    </p>
                    <p className="text-xs text-purple-700">м2 обработано</p>
                  </div>
                  <Square className="h-8 w-8 text-purple-600" />
                </div>
              </div>

              <div className="bg-orange-50 rounded-lg p-4 border border-orange-200">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-orange-600">Активнфе зоны</p>
                    <p className="text-2xl font-bold text-orange-900">{yearlyStats.uniqueZones}</p>
                    <p className="text-xs text-orange-700">зон обработано</p>
                  </div>
                  <Calendar className="h-8 w-8 text-orange-600" />
                </div>
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Monthly Breakdown */}
      <div className="bg-white rounded-lg shadow-md">
        <button
          onClick={() => toggleSection('monthly')}
          className="w-full px-6 py-4 flex items-center justify-between text-left border-b hover:bg-gray-50 transition-colors duration-200"
        >
          <h3 className="text-lg font-semibold text-gray-900">Разбивка по месяцам</h3>
          {expandedSection === 'monthly' ? (
            <ChevronUp className="h-5 w-5 text-gray-500" />
          ) : (
            <ChevronDown className="h-5 w-5 text-gray-500" />
          )}
        </button>
        
        {expandedSection === 'monthly' && (
          <div className="p-6">
            <div className="overflow-x-auto">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Месяц</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Сессии</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Скошено</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Поравнено</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Время</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Площадь</th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {yearlyStats.monthlyBreakdown.map((month) => (
                    <tr key={month.month} className="hover:bg-gray-50">
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                        {month.monthName}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {month.sessions}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        <div className="flex items-center gap-1">
                          <Scissors className="h-4 w-4 text-green-600" />
                          {month.mowingSessions}
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        <div className="flex items-center gap-1">
                          <Zap className="h-4 w-4 text-purple-600" />
                          {month.trimmingSessions}
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {formatDuration(month.minutes)}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {month.area.toLocaleString()} м2
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}
      </div>

      {/* Zone Performance */}
      <div className="bg-white rounded-lg shadow-md">
        <button
          onClick={() => toggleSection('zones')}
          className="w-full px-6 py-4 flex items-center justify-between text-left border-b hover:bg-gray-50 transition-colors duration-200"
        >
          <h3 className="text-lg font-semibold text-gray-900">Производительность по зонам</h3>
          {expandedSection === 'zones' ? (
            <ChevronUp className="h-5 w-5 text-gray-500" />
          ) : (
            <ChevronDown className="h-5 w-5 text-gray-500" />
          )}
        </button>
        
        {expandedSection === 'zones' && (
          <div className="p-6">
            <div className="overflow-x-auto">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Зона</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Сессии</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Скошено</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Подравнено</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Время</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Площадь</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Средний интервал</th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {yearlyStats.zoneBreakdown.map((zone) => (
                    <tr key={zone.zoneId} className="hover:bg-gray-50">
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                        {zone.zoneName}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {zone.sessions}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        <div className="flex items-center gap-1">
                          <Scissors className="h-4 w-4 text-green-600" />
                          {zone.mowingSessions}
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        <div className="flex items-center gap-1">
                          <Zap className="h-4 w-4 text-purple-600" />
                          {zone.trimmingSessions}
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {formatDuration(zone.minutes)}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {zone.area.toLocaleString()} кв.м.
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {zone.averageInterval ? `${zone.averageInterval} дней` : 'N/A'}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}
      </div>

      {/* Equipment Usage */}
      {yearlyStats.mowerBreakdown.length > 0 && (
        <div className="bg-white rounded-lg shadow-md">
          <button
            onClick={() => toggleSection('equipment')}
            className="w-full px-6 py-4 flex items-center justify-between text-left border-b hover:bg-gray-50 transition-colors duration-200"
          >
            <h3 className="text-lg font-semibold text-gray-900">Использование оборудования</h3>
            {expandedSection === 'equipment' ? (
              <ChevronUp className="h-5 w-5 text-gray-500" />
            ) : (
              <ChevronDown className="h-5 w-5 text-gray-500" />
            )}
          </button>
          
          {expandedSection === 'equipment' && (
            <div className="p-6">
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {yearlyStats.mowerBreakdown.map((mower) => (
                  <div key={mower.mowerId} className="bg-gray-50 rounded-lg p-4 border">
                    <div className="flex items-center gap-3 mb-3">
                      <span className="text-2xl">{getMowerIcon(mower.mowerType)}</span>
                      <div>
                        <h4 className="font-medium text-gray-900">{mower.mowerName}</h4>
                        <p className="text-sm text-gray-600">{mower.mowerType}</p>
                      </div>
                    </div>
                    <div className="space-y-2 text-sm">
                      <div className="flex justify-between">
                        <span className="text-gray-600">Сессии:</span>
                        <span className="font-medium">{mower.sessions}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-600">Время:</span>
                        <span className="font-medium">{formatDuration(mower.minutes)}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-600">Площадь:</span>
                        <span className="font-medium">{mower.area.toLocaleString()} м2</span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      )}

      {/* Weather Analysis */}
      {yearlyStats.weatherBreakdown.length > 0 && (
        <div className="bg-white rounded-lg shadow-md">
          <button
            onClick={() => toggleSection('weather')}
            className="w-full px-6 py-4 flex items-center justify-between text-left border-b hover:bg-gray-50 transition-colors duration-200"
          >
            <h3 className="text-lg font-semibold text-gray-900">Анализ погоды</h3>
            {expandedSection === 'weather' ? (
              <ChevronUp className="h-5 w-5 text-gray-500" />
            ) : (
              <ChevronDown className="h-5 w-5 text-gray-500" />
            )}
          </button>
          
          {expandedSection === 'weather' && (
            <div className="p-6">
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {yearlyStats.weatherBreakdown.map((weather) => (
                  <div key={weather.weather} className="bg-gray-50 rounded-lg p-4 border">
                    <div className="flex items-center justify-between mb-2">
                      <h4 className="font-medium text-gray-900">{weather.weather}</h4>
                      <span className="text-sm font-medium text-blue-600">{weather.percentage}%</span>
                    </div>
                    <div className="w-full bg-gray-200 rounded-full h-2 mb-2">
                      <div 
                        className="bg-blue-600 h-2 rounded-full"
                        style={{ width: `${weather.percentage}%` }}
                      ></div>
                    </div>
                    <p className="text-sm text-gray-600">{weather.sessions} сессий</p>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
};

export default YearlyReports;