import React, { useState, useEffect } from 'react';
import {
  Plus,
  Filter,
  Calendar,
  Scissors,
  AlertTriangle,
  Square,
  CheckCircle,
  Clock,
  Map,
  History,
  Zap,
  Send,
  Settings,
  X,
  BarChart
} from './Icons';
import { Zone, MowingFormData, BulkMowingFormData } from '../types/zone';
import { api } from '../services/api';
import ZoneCard from './ZoneCard';
import ZoneForm from './ZoneForm';
import SitePlan from './SitePlan';
import HistoryView from './HistoryView';
import MowingModal from './MowingModal';
import BulkMowingModal from './BulkMowingModal';
import TelegramSettings from './TelegramSettings';
import SeasonSettingsComponent from './SeasonSettings';
import YearlyReports from "./YearlyReports.tsx";

type FilterType = 'all' | 'due' | 'overdue' | 'new';
type ViewType = 'dashboard' | 'sitePlan' | 'history' | 'reports';

const Dashboard: React.FC = () => {
  const [zones, setZones] = useState<Zone[]>([]);
  const [filteredZones, setFilteredZones] = useState<Zone[]>([]);
  const [filter, setFilter] = useState<FilterType>('all');
  const [view, setView] = useState<ViewType>('dashboard');
  const [showForm, setShowForm] = useState(false);
  const [editingZone, setEditingZone] = useState<Zone | null>(null);
  const [selectedZoneId, setSelectedZoneId] = useState<number | undefined>();
  const [showMowingModal, setShowMowingModal] = useState(false);
  const [showBulkMowingModal, setShowBulkMowingModal] = useState(false);
  const [showTrimmingModal, setShowTrimmingModal] = useState(false);
  const [showBulkTrimmingModal, setShowBulkTrimmingModal] = useState(false);
  const [mowingZone, setMowingZone] = useState<Zone | null>(null);
  const [trimmingZone, setTrimmingZone] = useState<Zone | null>(null);
  const [showTelegramSettings, setShowTelegramSettings] = useState(false);
  const [showSeasonSettings, setShowSeasonSettings] = useState(false);
  const [loading, setLoading] = useState(true);
  const [mowingLoading, setMowingLoading] = useState(false);
  const [trimmingLoading, setTrimmingLoading] = useState(false);
  const [sidebarOpen, setSidebarOpen] = useState(false);

  useEffect(() => {
    loadZones();
  }, []);

  useEffect(() => {
    applyFilter();
  }, [zones, filter]);

  const loadZones = async () => {
    try {
      const data = await api.getZones();
      setZones(data);
    } catch (error) {
      console.error('Failed to load zones:', error);
    } finally {
      setLoading(false);
    }
  };

  const applyFilter = () => {
    let filtered = zones;
    switch (filter) {
      case 'due':
        filtered = zones.filter(zone => zone.isDueToday);
        break;
      case 'overdue':
        filtered = zones.filter(zone => zone.isOverdue);
        break;
      case 'new':
        filtered = zones.filter(zone => zone.isNew);
        break;
      default:
        filtered = zones;
    }
    setFilteredZones(filtered);
  };

  const handleMarkAsMowed = (zone: Zone) => {
    setMowingZone(zone);
    setShowMowingModal(true);
  };

  const handleMarkAsTrimmed = (zone: Zone) => {
    setTrimmingZone(zone);
    setShowTrimmingModal(true);
  };
  const handleMowingSubmit = async (data: MowingFormData) => {
    if (!mowingZone) return;

    setMowingLoading(true);
    try {
      await api.markAsMowed(mowingZone.id, data);
      setShowMowingModal(false);
      setMowingZone(null);
      loadZones();
    } catch (error) {
      console.error('Failed to mark as mowed:', error);
    } finally {
      setMowingLoading(false);
    }
  };

  const handleTrimmingSubmit = async (data: MowingFormData) => {
    if (!trimmingZone) return;

    setTrimmingLoading(true);
    try {
      await api.markAsTrimmed(trimmingZone.id, data);
      setShowTrimmingModal(false);
      setTrimmingZone(null);
      // Перезагрузка зон, поскольку подравнивание теперь влияет на график скашивания (задержки на 1 неделю)
      loadZones();
    } catch (error) {
      console.error('Failed to mark as trimmed:', error);
    } finally {
      setTrimmingLoading(false);
    }
  };
  const handleBulkMowingSubmit = async (data: BulkMowingFormData) => {
    setMowingLoading(true);
    try {
      await api.bulkMarkAsMowed(data);
      setShowBulkMowingModal(false);
      loadZones();
    } catch (error) {
      console.error('Failed to record bulk mowing session:', error);
    } finally {
      setMowingLoading(false);
    }
  };

  const handleBulkTrimmingSubmit = async (data: BulkMowingFormData) => {
    setTrimmingLoading(true);
    try {
      await api.bulkMarkAsMowed(data);
      setShowBulkTrimmingModal(false);
      // Перезагрузка зон, поскольку подравнивание теперь влияет на график скашивания (задержки на 1 неделю)
      loadZones();
    } catch (error) {
      console.error('Failed to record bulk trimming session:', error);
    } finally {
      setTrimmingLoading(false);
    }
  };
  const handleDeleteZone = async (id: number) => {
    if (window.confirm('Are you sure you want to delete this zone?')) {
      try {
        await api.deleteZone(id);
        loadZones();
        if (selectedZoneId === id) {
          setSelectedZoneId(undefined);
        }
      } catch (error) {
        console.error('Failed to delete zone:', error);
      }
    }
  };

  const handleFormSubmit = async () => {
    setShowForm(false);
    setEditingZone(null);
    loadZones();
  };

  const handleZoneSelect = (zone: Zone) => {
    setSelectedZoneId(zone.id);
    setView('dashboard');
    // Scroll to the zone card
    setTimeout(() => {
      const element = document.getElementById(`zone-card-${zone.id}`);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth', block: 'center' });
      }
    }, 100);
  };

  // Calculate area statistics
  const overdueCount = zones.filter(zone => zone.isOverdue).length;
  const dueCount = zones.filter(zone => zone.isDueToday).length;
  const newCount = zones.filter(zone => zone.isNew).length;
  const okCount = zones.filter(zone => zone.status === 'ok').length;
  const totalArea = zones.reduce((sum, zone) => sum + zone.area, 0);

  // Calculate mowed vs remaining area based on status
  const mowedArea = zones
      .filter(zone => zone.status === 'ok')
      .reduce((sum, zone) => sum + zone.area, 0);

  const mowedPercentage = totalArea > 0 ? (mowedArea / totalArea) * 100 : 0;

  // Check if there are zones that need mowing for bulk action
  const zonesNeedingMowing = zones.filter(zone =>
      zone.status === 'due' || zone.status === 'overdue' || zone.status === 'new'
  );

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

  return (
      <div className="min-h-screen bg-gray-50">
        <div className="flex h-screen">
          {/* Mobile sidebar overlay */}
          {sidebarOpen && (
              <div
                  className="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden"
                  onClick={() => setSidebarOpen(false)}
              />
          )}

          {/* Sidebar */}
          <div className={`fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transform transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0 ${
              sidebarOpen ? 'translate-x-0' : '-translate-x-full'
          }`}>
            <div className="flex items-center justify-between h-16 px-6 border-b">
              <div className="flex items-center gap-3">
                <Scissors className="h-8 w-8 text-green-600" />
                <h1 className="text-xl font-bold text-gray-900">Уход за газоном</h1>
              </div>
              <button
                  onClick={() => setSidebarOpen(false)}
                  className="lg:hidden text-gray-400 hover:text-gray-600"
              >
                <X className="h-6 w-6" />
              </button>
            </div>

            <nav className="mt-6 px-3">
              <div className="space-y-1">
                {/* Navigation Items */}
                <button
                    onClick={() => {
                      setView('dashboard');
                      setSidebarOpen(false);
                    }}
                    className={`w-full flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-200 ${
                        view === 'dashboard'
                            ? 'bg-green-100 text-green-900'
                            : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
                    }`}
                >
                  <Calendar className="h-5 w-5 mr-3" />
                  Сводка
                </button>

                <button
                    onClick={() => {
                      setView('sitePlan');
                      setSidebarOpen(false);
                    }}
                    className={`w-full flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-200 ${
                        view === 'sitePlan'
                            ? 'bg-green-100 text-green-900'
                            : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
                    }`}
                >
                  <Map className="h-5 w-5 mr-3" />
                  План участка
                </button>

                <button
                    onClick={() => {
                      setView('history');
                      setSidebarOpen(false);
                    }}
                    className={`w-full flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-200 ${
                        view === 'history'
                            ? 'bg-green-100 text-green-900'
                            : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
                    }`}
                >
                  <History className="h-5 w-5 mr-3" />
                  История
                </button>
              </div>
              <button
                  onClick={() => {
                    setView('reports');
                    setSidebarOpen(false);
                  }}
                  className={`w-full flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-200 ${
                      view === 'reports'
                          ? 'bg-green-100 text-green-900'
                          : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
                  }`}
              >
                <BarChart className="h-5 w-5 mr-3" />
                Отчеты
              </button>

              <div className="mt-8">
                <h3 className="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                  Действия
                </h3>
                <div className="mt-2 space-y-1">
                  <button
                      onClick={() => {
                        setShowForm(true);
                        setSidebarOpen(false);
                      }}
                      className="w-full flex items-center px-3 py-2 text-sm font-medium text-gray-600 rounded-md hover:bg-gray-50 hover:text-gray-900 transition-colors duration-200"
                  >
                    <Plus className="h-5 w-5 mr-3" />
                    Добавить зону
                  </button>

                  {/* Bulk Actions - only show on dashboard with zones needing mowing */}
                  {view === 'dashboard' && zonesNeedingMowing.length > 0 && (
                      <>
                        <button
                            onClick={() => {
                              setShowBulkMowingModal(true);
                              setSidebarOpen(false);
                            }}
                            className="w-full flex items-center px-3 py-2 text-sm font-medium text-orange-600 rounded-md hover:bg-orange-50 hover:text-orange-700 transition-colors duration-200"
                        >
                          <Scissors className="h-5 w-5 mr-3" />
                          Bulk Mow ({zonesNeedingMowing.length})
                        </button>

                        <button
                            onClick={() => {
                              setShowBulkTrimmingModal(true);
                              setSidebarOpen(false);
                            }}
                            className="w-full flex items-center px-3 py-2 text-sm font-medium text-purple-600 rounded-md hover:bg-purple-50 hover:text-purple-700 transition-colors duration-200"
                        >
                          <Zap className="h-5 w-5 mr-3" />
                          Bulk Trim
                        </button>
                      </>
                  )}
                </div>
              </div>

              <div className="mt-8">
                <h3 className="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                  Настройки
                </h3>
                <div className="mt-2 space-y-1">
                  <button
                      onClick={() => {
                        setShowTelegramSettings(true);
                        setSidebarOpen(false);
                      }}
                      className="w-full flex items-center px-3 py-2 text-sm font-medium text-gray-600 rounded-md hover:bg-gray-50 hover:text-gray-900 transition-colors duration-200"
                  >
                    <Send className="h-5 w-5 mr-3" />
                    Телеграм
                  </button>

                  <button
                      onClick={() => {
                        setShowSeasonSettings(true);
                        setSidebarOpen(false);
                      }}
                      className="w-full flex items-center px-3 py-2 text-sm font-medium text-gray-600 rounded-md hover:bg-gray-50 hover:text-gray-900 transition-colors duration-200"
                  >
                    <Settings className="h-5 w-5 mr-3" />
                    Сезон
                  </button>
                </div>
              </div>
            </nav>
          </div>

          {/* Main content */}
          <div className="flex-1 flex flex-col overflow-hidden">
            {/* Top bar */}
            <div className="bg-white shadow-sm border-b px-6 py-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-4">
                  <button
                      onClick={() => setSidebarOpen(true)}
                      className="lg:hidden text-gray-500 hover:text-gray-700"
                  >
                    <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                  </button>
                  <div>
                    <h2 className="text-2xl font-bold text-gray-900">
                      {view === 'dashboard' && 'Главная'}
                      {view === 'sitePlan' && 'План участка'}
                      {view === 'history' && 'История'}
                    </h2>
                    <p className="text-gray-600">
                      {view === 'dashboard' && 'Следите за своим графиком стрижки газона'}
                      {view === 'sitePlan' && 'Визуализируйте зоны вашего участка'}
                      {view === 'history' && 'Отслеживайте действия по уходу за газоном'}
                    </p>
                  </div>
                </div>
              </div>
            </div>

            {/* Main content area */}
            <div className="flex-1 overflow-auto">
              <div className="max-w-7xl mx-auto px-6 py-8">
                {view === 'history' ? (
                    <HistoryView zones={zones} />
                ) : view === 'reports' ? (
                    <YearlyReports zones={zones} />

                ) : view === 'sitePlan' ? (
                    <SitePlan
                        zones={zones}
                        onZoneSelect={handleZoneSelect}
                        selectedZoneId={selectedZoneId}
                    />
                ) : (
                    <>
                      {/* Stats Cards */}
                      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6 mb-8">
                        <div className="bg-white rounded-lg shadow-md p-6 border-l-4 border-green-500">
                          <div className="flex items-center justify-between">
                            <div>
                              <p className="text-sm font-medium text-gray-600">Зон</p>
                              <p className="text-2xl font-bold text-gray-900">{zones.length}</p>
                            </div>
                            <Calendar className="h-8 w-8 text-green-500" />
                          </div>
                        </div>

                        <div className="bg-white rounded-lg shadow-md p-6 border-l-4 border-purple-500">
                          <div className="flex items-center justify-between">
                            <div>
                              <p className="text-sm font-medium text-gray-600">Площадь</p>
                              <p className="text-2xl font-bold text-gray-900">{totalArea.toLocaleString()}</p>
                              <p className="text-xs text-gray-500">sq ft</p>
                            </div>
                            <Square className="h-8 w-8 text-purple-500" />
                          </div>
                        </div>

                        <div className="bg-white rounded-lg shadow-md p-6 border-l-4 border-emerald-500">
                          <div className="flex items-center justify-between">
                            <div>
                              <p className="text-sm font-medium text-gray-600">Актуально</p>
                              <p className="text-2xl font-bold text-gray-900">{okCount}</p>
                              <p className="text-xs text-gray-500">zones maintained</p>
                            </div>
                            <CheckCircle className="h-8 w-8 text-emerald-500" />
                          </div>
                        </div>
{/*
                        <div className="bg-white rounded-lg shadow-md p-6 border-l-4 border-blue-500">
                          <div className="flex items-center justify-between">
                            <div>
                              <p className="text-sm font-medium text-gray-600">New Zones</p>
                              <p className="text-2xl font-bold text-gray-900">{newCount}</p>
                              <p className="text-xs text-gray-500">not yet mowed</p>
                            </div>
                            <Calendar className="h-8 w-8 text-blue-500" />
                          </div>
                        </div>
*/}
                        <div className="bg-white rounded-lg shadow-md p-6 border-l-4 border-amber-500">
                          <div className="flex items-center justify-between">
                            <div>
                              <p className="text-sm font-medium text-gray-600">Внимание!</p>
                              <p className="text-2xl font-bold text-gray-900">{dueCount + overdueCount + newCount}</p>
                              <p className="text-xs text-gray-500">zones to mow</p>
                            </div>
                            <Clock className="h-8 w-8 text-amber-500" />
                          </div>
                        </div>

                        <div className="bg-white rounded-lg shadow-md p-6 border-l-4 border-orange-500">
                          <div className="flex items-center justify-between">
                            <div>
                              <p className="text-sm font-medium text-gray-600">Срок-сегодня</p>
                              <p className="text-2xl font-bold text-gray-900">{dueCount}</p>
                            </div>
                            <Scissors className="h-8 w-8 text-orange-500" />
                          </div>
                        </div>

                        <div className="bg-white rounded-lg shadow-md p-6 border-l-4 border-red-500">
                          <div className="flex items-center justify-between">
                            <div>
                              <p className="text-sm font-medium text-gray-600">Срок прошел</p>
                              <p className="text-2xl font-bold text-gray-900">{overdueCount}</p>
                            </div>
                            <AlertTriangle className="h-8 w-8 text-red-500" />
                          </div>
                        </div>
                      </div>

                      {/* Progress Bar */}
                      {totalArea > 0 && (
                          <div className="bg-white rounded-lg shadow-md p-6 mb-8">
                            <div className="flex items-center justify-between mb-4">
                              <h3 className="text-lg font-semibold text-gray-900">Ход скашивания</h3>
                              <span className="text-sm text-gray-600">
                          {mowedArea.toLocaleString()} / {totalArea.toLocaleString()} м2
                        </span>
                            </div>
                            <div className="w-full bg-gray-200 rounded-full h-4 mb-2">
                              <div
                                  className="bg-gradient-to-r from-green-500 to-emerald-600 h-4 rounded-full transition-all duration-500 ease-out"
                                  style={{ width: `${mowedPercentage}%` }}
                              ></div>
                            </div>
                            <div className="flex justify-between text-sm text-gray-600">
                        <span className="flex items-center gap-1">
                          <CheckCircle className="h-4 w-4 text-emerald-500" />
                          {mowedPercentage.toFixed(1)}% Завершено ({okCount} зон)
                        </span>
                              <span className="flex items-center gap-1">
                          <Clock className="h-4 w-4 text-amber-500" />
                                {(100 - mowedPercentage).toFixed(1)}% Осталось ({dueCount + overdueCount + newCount} зон)
                        </span>
                            </div>
                          </div>
                      )}

                      {/* Bulk Mowing Notice */}
                      {zonesNeedingMowing.length > 1 && (
                          <div className="bg-orange-50 border border-orange-200 rounded-lg p-4 mb-6">
                            <div className="flex items-center justify-between">
                              <div className="flex items-center gap-3">
                                <Scissors className="h-5 w-5 text-orange-600" />
                                <div>
                                  <h4 className="text-sm font-medium text-orange-800">
                                    Необходимо скосить или подравнять несколько зон
                                  </h4>
                                  <p className="text-sm text-orange-700">
                                    Используйте массовые операции для нескольких зон, за один сеанс, с пропорциональным распределением времени
                                  </p>
                                </div>
                              </div>
                              <div className="flex gap-2">
                                <button
                                    onClick={() => setShowBulkMowingModal(true)}
                                    className="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
                                >
                                  Покос ({zonesNeedingMowing.length})
                                </button>
                                <button
                                    onClick={() => setShowBulkTrimmingModal(true)}
                                    className="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
                                >
                                  Подравнование
                                </button>
                              </div>
                            </div>
                          </div>
                      )}

                      {/* Filter Buttons */}
                      <div className="mb-6">
                        <div className="flex items-center gap-2">
                          <Filter className="h-5 w-5 text-gray-500" />
                          <span className="text-sm font-medium text-gray-700">Filter:</span>
                          <div className="flex gap-2">
                            {[
                              { key: 'all' as FilterType, label: 'All Zones', count: zones.length },
                              { key: 'new' as FilterType, label: 'New Zones', count: newCount },
                              { key: 'due' as FilterType, label: 'Due Today', count: dueCount },
                              { key: 'overdue' as FilterType, label: 'Overdue', count: overdueCount },
                            ].map(({ key, label, count }) => (
                                <button
                                    key={key}
                                    onClick={() => setFilter(key)}
                                    className={`px-4 py-2 rounded-full text-sm font-medium transition-colors duration-200 ${
                                        filter === key
                                            ? 'bg-green-600 text-white shadow-md'
                                            : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-300'
                                    }`}
                                >
                                  {label} ({count})
                                </button>
                            ))}
                          </div>
                        </div>
                      </div>

                      {/* Zones Grid */}
                      {filteredZones.length === 0 ? (
                          <div className="text-center py-12">
                            <Scissors className="mx-auto h-12 w-12 text-gray-400" />
                            <h3 className="mt-2 text-sm font-medium text-gray-900">No zones found</h3>
                            <p className="mt-1 text-sm text-gray-500">
                              {filter === 'all' ? 'Get started by adding your first lawn zone.' : `No zones match the "${filter}" filter.`}
                            </p>
                          </div>
                      ) : (
                          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                            {filteredZones.map(zone => (
                                <div
                                    key={zone.id}
                                    id={`zone-card-${zone.id}`}
                                    className={`transition-all duration-300 ${
                                        selectedZoneId === zone.id
                                            ? 'ring-4 ring-blue-300 ring-opacity-50 scale-105'
                                            : ''
                                    }`}
                                >
                                  <ZoneCard
                                      zone={zone}
                                      onMarkAsMowed={handleMarkAsMowed}
                                      onMarkAsTrimmed={handleMarkAsTrimmed}
                                      onEdit={(zone) => {
                                        setEditingZone(zone);
                                        setShowForm(true);
                                      }}
                                      onDelete={handleDeleteZone}
                                  />
                                </div>
                            ))}
                          </div>
                      )}
                    </>
                )}
              </div>
            </div>
          </div>
        </div>

        {/* Zone Form Modal */}
        {showForm && (
            <ZoneForm
                zone={editingZone}
                onSubmit={handleFormSubmit}
                onCancel={() => {
                  setShowForm(false);
                  setEditingZone(null);
                }}
            />
        )}

        {/* Single Zone Mowing Modal */}
        {showMowingModal && mowingZone && (
            <MowingModal
                zoneName={mowingZone.name}
                activityType="mowing"
                onSubmit={handleMowingSubmit}
                onCancel={() => {
                  setShowMowingModal(false);
                  setMowingZone(null);
                }}
                loading={mowingLoading}
            />
        )}

        {/* Single Zone Trimming Modal */}
        {showTrimmingModal && trimmingZone && (
            <MowingModal
                zoneName={trimmingZone.name}
                activityType="trimming"
                onSubmit={handleTrimmingSubmit}
                onCancel={() => {
                  setShowTrimmingModal(false);
                  setTrimmingZone(null);
                }}
                loading={trimmingLoading}
            />
        )}
        {/* Bulk Mowing Modal */}
        {showBulkMowingModal && (
            <BulkMowingModal
                zones={zones}
                activityType="mowing"
                onSubmit={handleBulkMowingSubmit}
                onCancel={() => setShowBulkMowingModal(false)}
                loading={mowingLoading}
            />
        )}

        {/* Bulk Trimming Modal */}
        {showBulkTrimmingModal && (
            <BulkMowingModal
                zones={zones}
                activityType="trimming"
                onSubmit={handleBulkTrimmingSubmit}
                onCancel={() => setShowBulkTrimmingModal(false)}
                loading={trimmingLoading}
            />
        )}

        {/* Telegram Settings Modal */}
        {showTelegramSettings && (
            <TelegramSettings
                onClose={() => setShowTelegramSettings(false)}
            />
        )}

        {/* Season Settings Modal */}
        {showSeasonSettings && (
            <SeasonSettingsComponent
                onClose={() => setShowSeasonSettings(false)}
            />
        )}
      </div>
  );
};

export default Dashboard;