@include('components.header')

<style>
    /* Custom Override for FullCalendar to match Theme */
    :root {
        --fc-button-bg-color: var(--primary-theme-color);
        --fc-button-border-color: var(--primary-theme-color);
        --fc-button-hover-bg-color: #0d2f57;
        --fc-button-hover-border-color: #0d2f57;
        --fc-button-active-bg-color: #0d2f57;
        --fc-button-active-border-color: #0d2f57;
        --fc-event-bg-color: var(--primary-theme-color);
        --fc-event-border-color: var(--primary-theme-color);
        --fc-today-bg-color: rgba(22, 70, 123, 0.05);
    }
    
    .fc .fc-toolbar-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--primary-theme-color);
    }
    
    .fc .fc-col-header-cell-cushion {
        color: var(--primary-theme-color);
        font-weight: 600;
        text-decoration: none;
    }
    
    .fc .fc-daygrid-day-number {
        color: #4b5563;
        text-decoration: none;
        font-weight: 600;
        padding: 2px 4px !important;
        font-size: 0.75rem;
    }
    
    /* Highlight Today's Date */
    .fc .fc-day-today {
        background-color: rgba(22, 70, 123, 0.1) !important;
    }
    
    .fc .fc-day-today .fc-daygrid-day-number {
        background-color: var(--primary-theme-color);
        color: white !important;
        font-weight: 700;
        border-radius: 4px;
        padding: 2px 4px !important;
    }
    
    /* Calendar day header styling */
    .fc .fc-col-header-cell {
        background-color: #f8fafc;
        border-bottom: 2px solid var(--primary-theme-color);
        padding: 6px 2px !important;
    }
    
    .fc .fc-col-header-cell-cushion {
        font-size: 0.75rem;
    }
    
    /* Calendar day cell styling - responsive */
    .fc .fc-daygrid-day {
        min-height: auto;
    }
    
    .fc .fc-daygrid-day-top {
        display: flex;
        justify-content: flex-end;
        padding: 2px;
    }
    
    .fc .fc-daygrid-day-frame {
        min-height: 60px;
        position: relative;
        overflow: hidden;
    }
    
    /* Responsive adjustments for larger screens */
    @media (min-width: 768px) {
        .fc .fc-daygrid-day-number {
            font-size: 0.85rem;
            padding: 4px 6px !important;
        }
        
        .fc .fc-day-today .fc-daygrid-day-number {
            padding: 2px 6px !important;
            border-radius: 6px;
        }
        
        .fc .fc-daygrid-day-frame {
            min-height: 80px;
        }
        
        .fc .fc-col-header-cell-cushion {
            font-size: 0.875rem;
        }
        
        .fc .fc-daygrid-day-top {
            padding: 4px;
        }
    }
    
    @media (min-width: 1024px) {
        .fc .fc-daygrid-day-number {
            font-size: 0.9rem;
            padding: 4px 8px !important;
        }
        
        .fc .fc-daygrid-day-frame {
            min-height: 90px;
        }
    }
    
    /* Event title styling */
    .fc-daygrid-day-events {
        padding: 2px 4px !important;
        min-height: 20px;
    }
    
    .fc-daygrid-event-harness {
        margin-bottom: 2px !important;
    }
    
    .fc .fc-daygrid-event {
        border-radius: 4px;
        padding: 2px 4px;
        font-size: 0.7rem;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    
    .fc .fc-daygrid-event:hover {
        transform: scale(1.02);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        z-index: 10;
    }
    
    /* Day cell with events - subtle highlight */
    .fc-day-has-events {
        background-color: rgba(22, 70, 123, 0.03);
    }
    
    /* More events link styling */
    .fc .fc-daygrid-more-link {
        color: var(--primary-theme-color);
        font-weight: 600;
        font-size: 0.7rem;
    }

    /* Scrollbar styling for details panel */
    #event-details-panel::-webkit-scrollbar {
        width: 6px;
    }
    #event-details-panel::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    #event-details-panel::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }
</style>

<body class="bg-gray-100 h-dvh flex flex-col overflow-hidden">

    @include('components.navbar')

    <div class="flex pt-14 h-full overflow-hidden">
        @include('components.sidebar', ['page' => 'schedule'])

        <main id="content" class="flex-1 p-6 transition-all duration-300 overflow-y-auto">
            <div class="max-w-7xl mx-auto h-full flex flex-col gap-6">
                <!-- Header -->
                <div class="flex justify-between items-center shrink-0">
                    <div>
                        <h1 class="text-2xl font-bold text-custom-blue">Team Schedule</h1>
                        <p class="text-sm text-gray-500">View upcoming games and practice sessions</p>
                    </div>
                </div>

                <!-- Main Content Layout - Side View Only -->
                <div id="layout-container" class="flex flex-col lg:flex-row gap-6 pb-6 w-full">
                    
                    <!-- Calendar Section -->
                    <div id="calendar-wrapper" class="bg-white rounded-xl shadow-lg p-4 flex-[2] h-[60vh] min-h-[500px] transition-all duration-300">
                        <!-- Month & Year Navigation -->
                        <div id="calendar-navigation" class="flex items-center justify-center gap-3 mb-3 pb-3 border-b border-gray-100">
                            <!-- Previous Month Button -->
                            <button id="prev-month-btn" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 hover:custom-blue hover:text-white text-gray-600 transition-colors" title="Previous Month">
                                <i class="fa-solid fa-chevron-left text-sm"></i>
                            </button>
                            
                            <!-- Month Selector -->
                            <select id="month-selector" class="bg-white border border-gray-200 rounded-lg px-3 py-2 text-sm font-semibold text-custom-blue shadow-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary-theme-color)] focus:border-transparent cursor-pointer min-w-[120px] appearance-none text-center">
                                <option value="0">January</option>
                                <option value="1">February</option>
                                <option value="2">March</option>
                                <option value="3">April</option>
                                <option value="4">May</option>
                                <option value="5">June</option>
                                <option value="6">July</option>
                                <option value="7">August</option>
                                <option value="8">September</option>
                                <option value="9">October</option>
                                <option value="10">November</option>
                                <option value="11">December</option>
                            </select>
                            
                            <!-- Year Selector -->
                            <select id="year-selector" class="bg-white border border-gray-200 rounded-lg px-3 py-2 text-sm font-semibold text-custom-blue shadow-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary-theme-color)] focus:border-transparent cursor-pointer min-w-[90px] appearance-none text-center">
                                <!-- Years will be populated by JavaScript -->
                            </select>
                            
                            <!-- Next Month Button -->
                            <button id="next-month-btn" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 hover:custom-blue hover:text-white text-gray-600 transition-colors" title="Next Month">
                                <i class="fa-solid fa-chevron-right text-sm"></i>
                            </button>
                            
                            <!-- Today Button -->
                            <button id="today-btn" class="ml-2 px-3 py-2 custom-blue text-white text-xs font-semibold rounded-lg hover:bg-[#0d2f57] transition-colors shadow-sm" title="Go to Today">
                                Today
                            </button>
                        </div>
                        <div id="calendar" class="h-[calc(100%-60px)]"></div>
                    </div>

                    <!-- Event Details Panel -->
                    <div id="event-details-panel" class="bg-white rounded-xl shadow-lg p-6 flex-1 h-auto min-h-[250px] lg:border-l-4 border-t-4 lg:border-t-0 border-custom-blue transition-all duration-300 overflow-y-auto">
                        
                        <!-- Empty State -->
                        <div id="empty-state" class="h-full flex flex-col items-center justify-center text-center text-gray-400">
                            <i class="fa-regular fa-calendar-check text-5xl mb-4 text-blue-100"></i>
                            <p class="font-medium text-gray-500">Select an event from the calendar<br>to view details</p>
                            
                            <!-- Legend - Dynamically populated with player colors -->
                            <div id="player-legend" class="mt-6 flex flex-wrap items-center justify-center gap-4 text-xs">
                                <p class="text-gray-400 w-full text-center">Loading players...</p>
                            </div>
                        </div>

                        <!-- Active Event State -->
                        <div id="event-info" class="hidden h-full flex flex-col">
                            <div class="flex items-center justify-between mb-4">
                                <span id="detail-badge" class="px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider bg-blue-100 text-custom-blue">Event</span>
                            </div>
                            
                            <h2 id="detail-title" class="text-xl font-bold text-custom-blue mb-4 leading-tight"></h2>
                            
                            <div class="space-y-4 flex-1">
                                <!-- Date & Time -->
                                <div class="flex gap-3">
                                    <div class="w-9 h-9 rounded-full bg-blue-50 flex items-center justify-center shrink-0">
                                        <i class="fa-regular fa-clock text-custom-blue text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-xs text-gray-500 uppercase font-semibold">Date & Time</p>
                                        <p id="detail-time" class="font-medium text-gray-800 mt-0.5 text-sm"></p>
                                    </div>
                                </div>

                                <!-- Player -->
                                <div class="flex gap-3">
                                    <div class="w-9 h-9 rounded-full bg-blue-50 flex items-center justify-center shrink-0">
                                        <i class="fa-solid fa-user text-custom-blue text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-xs text-gray-500 uppercase font-semibold">Player</p>
                                        <p id="detail-player" class="font-medium text-gray-800 mt-0.5 text-sm"></p>
                                    </div>
                                </div>

                                <!-- Team -->
                                <div class="flex gap-3">
                                    <div class="w-9 h-9 rounded-full bg-blue-50 flex items-center justify-center shrink-0">
                                        <i class="fa-solid fa-users text-custom-blue text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-xs text-gray-500 uppercase font-semibold">Team</p>
                                        <p id="detail-team" class="font-medium text-gray-800 mt-0.5 text-sm"></p>
                                    </div>
                                </div>

                                <!-- Match-up -->
                                <div class="flex gap-3">
                                    <div class="w-9 h-9 rounded-full bg-blue-50 flex items-center justify-center shrink-0">
                                        <i class="fa-solid fa-futbol text-custom-blue text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-xs text-gray-500 uppercase font-semibold">Match-up</p>
                                        <div id="detail-matchup" class="mt-0.5">
                                            <span id="detail-home-team" class="font-medium text-gray-800 text-sm"></span>
                                            <span class="text-gray-400 mx-1">vs</span>
                                            <span id="detail-away-team" class="font-medium text-gray-800 text-sm"></span>
                                        </div>
                                    </div>
                                </div>

                                <!-- Location -->
                                <div class="flex gap-3">
                                    <div class="w-9 h-9 rounded-full bg-blue-50 flex items-center justify-center shrink-0">
                                        <i class="fa-solid fa-location-dot text-custom-blue text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-xs text-gray-500 uppercase font-semibold">Location</p>
                                        <p id="detail-location" class="font-medium text-gray-800 mt-0.5 text-sm"></p>
                                    </div>
                                </div>

                                <!-- Division -->
                                <div class="flex gap-3">
                                    <div class="w-9 h-9 rounded-full bg-blue-50 flex items-center justify-center shrink-0">
                                        <i class="fa-solid fa-layer-group text-custom-blue text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-xs text-gray-500 uppercase font-semibold">Division</p>
                                        <p id="detail-division" class="font-medium text-gray-800 mt-0.5 text-sm"></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </main>
    </div>

    @include('components.footer')

    <!-- FullCalendar Logic -->
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js'></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            const monthSelector = document.getElementById('month-selector');
            const yearSelector = document.getElementById('year-selector');
            const prevMonthBtn = document.getElementById('prev-month-btn');
            const nextMonthBtn = document.getElementById('next-month-btn');
            const todayBtn = document.getElementById('today-btn');
            
            // Get current date
            const now = new Date();
            const currentYear = now.getFullYear();
            const currentMonth = now.getMonth();
            
            // Populate year selector (from 2010 to current year + 2)
            for (let year = 2010; year <= currentYear + 2; year++) {
                const option = document.createElement('option');
                option.value = year;
                option.textContent = year;
                if (year === currentYear) {
                    option.selected = true;
                }
                yearSelector.appendChild(option);
            }
            
            // Set current month as selected
            monthSelector.value = currentMonth;

            // Helper to parse "11:30a", "10a", "2p"
            const parseTime = (t) => {
                if (!t) return '00:00';
                let str = t.toLowerCase().trim();
                let isPM = str.includes('p');
                let timePart = str.replace(/[ap]/g, '');
                let [h, m] = timePart.split(':');
                let hour = parseInt(h);
                let min = m ? parseInt(m) : 0;
                
                if (isPM && hour < 12) hour += 12;
                if (!isPM && str.includes('a') && hour === 12) hour = 0; // 12a is 00
                
                return `${hour.toString().padStart(2, '0')}:${min.toString().padStart(2, '0')}:00`;
            };
            
            // Navigate calendar to specific month/year
            function navigateToMonthYear(month, year) {
                const targetDate = new Date(year, month, 1);
                calendar.gotoDate(targetDate);
                syncSelectorsWithCalendar();
            }
            
            // Sync selectors with current calendar view
            function syncSelectorsWithCalendar() {
                const calendarDate = calendar.getDate();
                const viewMonth = calendarDate.getMonth();
                const viewYear = calendarDate.getFullYear();
                
                // Update month selector
                monthSelector.value = viewMonth;
                
                // Update year selector (add year if not exists)
                const yearExists = Array.from(yearSelector.options).some(opt => parseInt(opt.value) === viewYear);
                if (!yearExists) {
                    const option = document.createElement('option');
                    option.value = viewYear;
                    option.textContent = viewYear;
                    
                    // Insert in sorted order
                    const options = Array.from(yearSelector.options);
                    let inserted = false;
                    for (let i = 0; i < options.length; i++) {
                        if (parseInt(options[i].value) > viewYear) {
                            yearSelector.insertBefore(option, options[i]);
                            inserted = true;
                            break;
                        }
                    }
                    if (!inserted) {
                        yearSelector.appendChild(option);
                    }
                }
                yearSelector.value = viewYear;
            }

            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                headerToolbar: false, // Disable default toolbar since we have custom navigation
                themeSystem: 'standard',
                height: '100%',
                selectable: true,
                editable: false,
                dayMaxEvents: 3,
                displayEventTime: false, // Hide time from event display
                displayEventEnd: false,
                events: async function(info, successCallback, failureCallback) {
                    try {
                        const token = localStorage.getItem('authToken');
                        const org = localStorage.getItem('organisation');
                        
                        if (!token || !org) {
                            successCallback([]); 
                            return;
                        }

                        const response = await fetch('https://api.manageyourleague.com/graphql/scheduler', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Token': token,
                                'X-Organisation': org
                            },
                            body: JSON.stringify({
                                query: `query FetchPlayerCalendarEvents {
                                    fetchPlayerCalendarEvents {
                                        success
                                        message
                                        parent_id
                                        total_children
                                        players {
                                            player_id
                                            first_name
                                            last_name
                                            team_id
                                            team_name
                                            total_events
                                            events {
                                                id
                                                game_id
                                                date
                                                time
                                                title
                                                home_team
                                                away_team
                                                division
                                                is_home_game
                                                resource_name
                                            }
                                        }
                                    }
                                }`
                            })
                        });
                        
                        const result = await response.json();
                        let allEvents = [];
                        
                        // Player color palette - vibrant, distinct colors
                        const playerColors = [
                            { bg: '#3b82f6', border: '#2563eb' },  // Blue
                            { bg: '#10b981', border: '#059669' },  // Green
                            { bg: '#f59e0b', border: '#d97706' },  // Amber
                            { bg: '#ef4444', border: '#dc2626' },  // Red
                            { bg: '#8b5cf6', border: '#7c3aed' },  // Purple
                            { bg: '#ec4899', border: '#db2777' },  // Pink
                            { bg: '#14b8a6', border: '#0d9488' },  // Teal
                            { bg: '#f97316', border: '#ea580c' },  // Orange
                            { bg: '#6366f1', border: '#4f46e5' },  // Indigo
                            { bg: '#84cc16', border: '#65a30d' },  // Lime
                        ];
                        
                        // Map to store player colors
                        const playerColorMap = {};
                        let colorIndex = 0;
                        
                        if (result.data && result.data.fetchPlayerCalendarEvents && result.data.fetchPlayerCalendarEvents.players) {
                            // First pass: assign colors to players
                            result.data.fetchPlayerCalendarEvents.players.forEach(player => {
                                if (!playerColorMap[player.player_id]) {
                                    playerColorMap[player.player_id] = playerColors[colorIndex % playerColors.length];
                                    colorIndex++;
                                }
                            });
                            
                            // Store player colors for legend
                            window.playerColorMap = {};
                            result.data.fetchPlayerCalendarEvents.players.forEach(player => {
                                window.playerColorMap[player.player_id] = {
                                    name: `${player.first_name} ${player.last_name}`,
                                    color: playerColorMap[player.player_id].bg
                                };
                            });
                            
                            // Update legend
                            updatePlayerLegend();
                            
                            // Second pass: create events with player colors
                            result.data.fetchPlayerCalendarEvents.players.forEach(player => {
                                const playerColor = playerColorMap[player.player_id];
                                
                                if (player.events) {
                                    player.events.forEach(ev => {
                                        const eventTitle = `${ev.home_team} vs ${ev.away_team}`; 
                                        let startDateTime = `${ev.date}`;
                                        if (ev.time) {
                                            startDateTime += `T${parseTime(ev.time)}`;
                                        }

                                        allEvents.push({
                                            title: eventTitle,
                                            start: startDateTime,
                                            display: 'auto',
                                            backgroundColor: playerColor.bg,
                                            borderColor: playerColor.border,
                                            textColor: '#ffffff',
                                            extendedProps: {
                                                type: ev.is_home_game ? 'Home Game' : 'Away Game',
                                                location: ev.resource_name || (ev.is_home_game ? 'Home Field' : 'Away Field'),
                                                division: ev.division || 'N/A',
                                                is_home: ev.is_home_game,
                                                player_id: player.player_id,
                                                player_name: `${player.first_name} ${player.last_name}`,
                                                player_color: playerColor.bg,
                                                team_name: player.team_name || 'N/A',
                                                home_team: ev.home_team || 'N/A',
                                                away_team: ev.away_team || 'N/A',
                                                event_title: ev.title || ''
                                            }
                                        });
                                    });
                                }
                            });
                        }
                        
                        successCallback(allEvents);
                        
                    } catch (error) {
                        console.error('Error fetching calendar events:', error);
                        failureCallback(error);
                    }
                },
                eventClick: function(info) {
                    showEventDetails(info.event);
                },
                eventDidMount: function(info) {
                    // Add standard hover effect
                    info.el.title = info.event.title;
                    info.el.style.cursor = 'pointer';
                },
                datesSet: function(info) {
                    // Sync selectors when calendar view changes (from FullCalendar's internal navigation)
                    syncSelectorsWithCalendar();
                }
            });

            calendar.render();
            
            // Initial sync
            syncSelectorsWithCalendar();

            // Month selector change handler
            monthSelector.addEventListener('change', function(e) {
                e.stopPropagation();
                const selectedMonth = parseInt(this.value);
                const selectedYear = parseInt(yearSelector.value);
                navigateToMonthYear(selectedMonth, selectedYear);
            });

            // Year selector change handler
            yearSelector.addEventListener('change', function(e) {
                e.stopPropagation();
                const selectedYear = parseInt(this.value);
                const selectedMonth = parseInt(monthSelector.value);
                navigateToMonthYear(selectedMonth, selectedYear);
            });

            // Previous month button handler
            prevMonthBtn.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                calendar.prev();
                syncSelectorsWithCalendar();
            });

            // Next month button handler
            nextMonthBtn.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                calendar.next();
                syncSelectorsWithCalendar();
            });

            // Today button handler
            todayBtn.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                calendar.today();
                syncSelectorsWithCalendar();
            });

            function showEventDetails(event) {
                // Formatting helper
                const formatDate = (date) => {
                    return date.toLocaleDateString('en-US', { 
                        weekday: 'long', 
                        year: 'numeric', 
                        month: 'long', 
                        day: 'numeric',
                        hour: '2-digit',
                        minute: '2-digit'
                    });
                };

                const props = event.extendedProps;
                
                // Populate Data
                document.getElementById('detail-title').textContent = event.title;
                document.getElementById('detail-time').textContent = formatDate(event.start);
                document.getElementById('detail-player').textContent = props.player_name || 'N/A';
                document.getElementById('detail-team').textContent = props.team_name || 'N/A';
                document.getElementById('detail-home-team').textContent = props.home_team || 'N/A';
                document.getElementById('detail-away-team').textContent = props.away_team || 'N/A';
                document.getElementById('detail-location').textContent = props.location || 'No location specified';
                document.getElementById('detail-division').textContent = props.division || 'N/A';
                
                // Update Badge with player color
                const badge = document.getElementById('detail-badge');
                badge.textContent = props.player_name || 'Event';
                
                // Use player's assigned color
                const playerColor = props.player_color || 'var(--primary-theme-color)';
                badge.style.color = playerColor;
                badge.style.backgroundColor = playerColor + '20'; // 20% opacity

                // UI Transition
                document.getElementById('empty-state').classList.add('hidden');
                const infoDiv = document.getElementById('event-info');
                infoDiv.classList.remove('hidden');
                
                // Active animate
                infoDiv.classList.add('animate-fade-in');
                setTimeout(() => infoDiv.classList.remove('animate-fade-in'), 500);
            }
            
            // Update player legend with colors
            function updatePlayerLegend() {
                const legendContainer = document.getElementById('player-legend');
                if (!legendContainer || !window.playerColorMap) return;
                
                const players = Object.values(window.playerColorMap);
                
                if (players.length === 0) {
                    legendContainer.innerHTML = '<p class="text-gray-400 w-full text-center">No players found</p>';
                    return;
                }
                
                legendContainer.innerHTML = players.map(player => `
                    <div class="flex items-center gap-2">
                        <span class="w-3 h-3 rounded-full" style="background-color: ${player.color}"></span>
                        <span class="text-gray-600 font-medium">${player.name}</span>
                    </div>
                `).join('');
            }
        });
    </script>
</body>
</html>