<?php
// pages/public_calendar.php
// Public-facing specific page, whitelisted in index.php
require_once 'config/database.php';
// Allows skipping general auth but keeping database config
?>
<!-- FullCalendar CSS -->
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js'></script>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap" rel="stylesheet">

<style>
    /* Scoped styles for Calendar Page - utilizing global app variables */
    .calendar-wrapper {
        background-color: var(--card-bg);
        border-radius: var(--border-radius);
        padding: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    }
    
    h1 {
        margin: 0;
        color: var(--primary-color);
        font-size: clamp(1.5rem, 4vw, 2.5rem);
    }

    .header-subtitle {
        margin: 5px 0 20px;
        color: var(--text-color);
        opacity: 0.7;
        font-size: 0.9rem;
    }

    .calendar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 20px;
        gap: 15px;
        border-bottom: 1px solid #444;
        padding-bottom: 15px;
    }

    /* FullCalendar Overrides for Dark Theme compatibility */
    #calendar {
        font-family: inherit;
        color: var(--text-color);
    }

    .fc-theme-standard .fc-scrollgrid, 
    .fc-theme-standard td, 
    .fc-theme-standard th {
        border-color: #444;
    }

    .fc-col-header-cell-cushion, 
    .fc-daygrid-day-number,
    .fc-list-day-text, 
    .fc-list-day-side-text {
        color: var(--text-color); 
        text-decoration: none !important;
    }

    .fc-button-primary {
        background-color: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
        text-transform: capitalize;
    }
    
    .fc-button-primary:hover {
        background-color: #303f9f !important;
        border-color: #303f9f !important;
    }

    .fc-button-active {
        background-color: var(--accent-color) !important;
        border-color: var(--accent-color) !important;
        color: #000 !important;
    }

    /* Event Styling */
    .fc-event {
        cursor: pointer;
    }
    
    .fc-daygrid-event {
        background-color: rgba(63, 81, 181, 0.2); /* Primary + opacity */
        border: 1px solid var(--primary-color);
        border-radius: 4px;
        padding: 2px 4px;
        white-space: normal !important; /* Force wrap */
        height: auto !important; /* Allow growth */
    }

    .fc-event-title {
        font-weight: 600;
        color: #e0e0e0;
        white-space: normal !important; /* Force wrap title */
        overflow: hidden;
        text-overflow: ellipsis; 
    }
    
    .fc-event-time {
        font-size: 0.85em;
        color: var(--accent-color);
        white-space: nowrap; /* Keep time on one line if possible, or wrap if needed */
    }
    
    .event-prayer {
        font-size: 0.8em;
        color: #ffb74d; /* Orange tint for variety */
        margin-top: 2px;
    }

    /* List View Overrides */
    .fc-list {
        border-color: #444;
    }
    .fc-list-day-cushion {
        background-color: #333 !important;
    }
    .fc-list-event:hover td {
        background-color: #3a3a3a !important;
    }
    
    /* Loading overlay */
    .loading-overlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.7);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }
    .loading-overlay.active { display: flex; }
    .spinner {
        width: 40px; height: 40px;
        border: 4px solid var(--primary-color);
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
    @keyframes spin { 100% { transform: rotate(360deg); } }

    /* Mobile Enhancements */
    @media (max-width: 768px) {
        .calendar-wrapper {
            padding: 10px;
            border-radius: 0; /* Full width feel on mobile */
            box-shadow: none;
            background: transparent; /* Seamless blend */
        }
        
        .calendar-header {
            flex-direction: column;
            align-items: stretch;
            text-align: center;
        }

        .fc-toolbar {
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
        }
        
        .fc-toolbar-title {
            font-size: 1.2rem !important;
            width: 100%;
            text-align: center;
            margin-bottom: 5px;
        }
    }
</style>

<div class="calendar-wrapper">
    <div class="loading-overlay" id="loading">
        <div class="spinner"></div>
    </div>

    <div class="calendar-header">
        <div>
            <h1>WCS Events</h1>
            <p class="header-subtitle"><i class="far fa-calendar-alt"></i> Official Schedule & Programs</p>
        </div>
        <div>
            <a href="index.php?page=login" class="btn"><i class="fas fa-sign-in-alt"></i> Staff Login</a>
        </div>
    </div>

    <div id='calendar'></div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const loading = document.getElementById('loading');
        
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: window.innerWidth < 768 ? 'listMonth' : 'dayGridMonth',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,listMonth'
            },
            themeSystem: 'standard',
            height: 'auto',
            contentHeight: 'auto',
            dayMaxEvents: true,
            
            // Data Source
            events: {
                url: 'api/get_events.php',
                failure: function() {
                    alert('There was an error fetching events!');
                }
            },
            
            loading: function(isLoading) {
                if(isLoading) loading.classList.add('active');
                else loading.classList.remove('active');
            },

            // Event Rendering
            eventContent: function(arg) {
                let timeText = arg.timeText;
                let title = arg.event.title;
                let prayerTime = arg.event.extendedProps.prayer_time;
                
                let html = '<div class="fc-event-main-frame">';
                
                if (arg.view.type === 'dayGridMonth' || arg.view.type === 'timeGridWeek') {
                    if (timeText) {
                        html += '<div class="fc-event-time">' + timeText + '</div>';
                    }
                    html += '<div class="fc-event-title">' + title + '</div>';
                    if (prayerTime) {
                         html += '<div class="event-prayer"><i class="fas fa-pray"></i> ' + prayerTime + '</div>';
                    }
                } else {
                    return true; // Default for list view
                }

                html += '</div>';
                return { html: html };
            },
            
            // Interaction
            eventClick: function(info) {
                let props = info.event.extendedProps;
                let date = info.event.start.toLocaleDateString(undefined, {weekday:'long', month:'long', day:'numeric'});
                let time = info.event.start.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
                
                let msg = `${info.event.title}\n\n📅 ${date}\n⏰ ${time}`;
                
                if (props.prayer_time) {
                    msg += `\n🙏 Prayer Room: ${props.prayer_time}`;
                }
                if (props.desc) {
                    msg += `\n\n📝 ${props.desc}`;
                }
                alert(msg);
                info.jsEvent.preventDefault();
            },
            
            // Window Resize logic
            windowResize: function(view) {
                if (window.innerWidth < 768) {
                    calendar.changeView('listMonth');
                } else {
                    calendar.changeView('dayGridMonth');
                }
            }
        });
        
        calendar.render();
    });
</script>
