{% extends "base.html" %}

{% block title %}Study Schedule Builder - Fireflies{% endblock %}

{% block content %}
<h1 class="page-title">
    <i class="fas fa-calendar-alt me-2"></i>Study Schedule Builder
</h1>

<div class="row mb-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-calendar-plus me-2"></i>Your Study Schedule</h5>
                <div>
                    <button class="btn btn-primary" id="openBuildScheduleBtn">
                        <i class="fas fa-magic me-1"></i>Build Schedule
                    </button>
                    <a href="{{ url_for('fireflies_routes.export_calendar') }}" class="btn btn-outline-primary ms-2">
                        <i class="fas fa-file-export me-1"></i>Export Calendar
                    </a>
                </div>
            </div>
            <div class="card-body">
                {% if scheduled_sessions %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Time</th>
                                    <th>Subject</th>
                                    <th>Duration</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for session in scheduled_sessions %}
                                <tr>
                                    <td>{{ session.date }}</td>
                                    <td>{{ session.start_time }} - {{ session.end_time }}</td>
                                    <td>{{ session.subject }}</td>
                                    <td>{{ session.duration }} minutes</td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-danger delete-session-btn" data-session-id="{{ session.id }}">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center py-5">
                        <i class="fas fa-calendar-day text-muted" style="font-size: 4rem;"></i>
                        <h4 class="mt-3">No study sessions scheduled</h4>
                        <p class="text-muted">Use the "Build Schedule" button to create your optimal study plan</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6 mb-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-clock me-2"></i>Study Time Blocks</h5>
                <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addStudyBlockModal">
                    <i class="fas fa-plus me-1"></i>Add Block
                </button>
            </div>
            <div class="card-body">
                {% if study_blocks %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Day</th>
                                    <th>Start Time</th>
                                    <th>End Time</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for block in study_blocks %}
                                <tr>
                                    <td>{{ day_names[block.day_of_week] }}</td>
                                    <td>{{ block.start_time }}</td>
                                    <td>{{ block.end_time }}</td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-danger delete-block-btn" data-block-id="{{ block.id }}">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-clock text-muted" style="font-size: 3rem;"></i>
                        <h5 class="mt-3">No study blocks defined</h5>
                        <p class="text-muted">Add your available study time blocks to get started</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-md-6 mb-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-sliders-h me-2"></i>Schedule Preferences</h5>
                <button class="btn btn-sm btn-primary" id="savePreferencesBtn">
                    <i class="fas fa-save me-1"></i>Save
                </button>
            </div>
            <div class="card-body">
                <form id="preferencesForm">
                    <div class="mb-3">
                        <label for="studySessionLength" class="form-label">Study Session Length (minutes)</label>
                        <input type="number" class="form-control" id="studySessionLength" name="study_session_length" 
                               value="{{ preferences.study_session_length }}" min="15" max="120">
                    </div>
                    <div class="mb-3">
                        <label for="breakLength" class="form-label">Break Length (minutes)</label>
                        <input type="number" class="form-control" id="breakLength" name="break_length" 
                               value="{{ preferences.break_length }}" min="5" max="60">
                    </div>
                    <div class="mb-3">
                        <label for="maxDailyStudyTime" class="form-label">Maximum Daily Study Time (minutes)</label>
                        <input type="number" class="form-control" id="maxDailyStudyTime" name="max_daily_study_time" 
                               value="{{ preferences.max_daily_study_time }}" min="30" max="480">
                    </div>
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="calendarSyncEnabled" name="calendar_sync_enabled" 
                               {% if preferences.calendar_sync_enabled %}checked{% endif %}>
                        <label class="form-check-label" for="calendarSyncEnabled">Enable Calendar Sync</label>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12 mb-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-tasks me-2"></i>Homework Priority</h5>
                <a href="{{ url_for('fireflies_routes.homework_priority') }}" class="btn btn-sm btn-primary">
                    <i class="fas fa-external-link-alt me-1"></i>View Full Priority System
                </a>
            </div>
            <div class="card-body">
                {% if prioritized_homework %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Priority</th>
                                    <th>Subject</th>
                                    <th>Description</th>
                                    <th>Due Date</th>
                                    <th>Days Left</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for hw in prioritized_homework[:5] %}
                                <tr class="{% if hw.priority_level == 'high' %}table-danger{% elif hw.priority_level == 'medium' %}table-warning{% else %}table-light{% endif %}">
                                    <td>
                                        {% if hw.priority_level == 'high' %}
                                            <span class="badge bg-danger">High</span>
                                        {% elif hw.priority_level == 'medium' %}
                                            <span class="badge bg-warning text-dark">Medium</span>
                                        {% else %}
                                            <span class="badge bg-info">Low</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ hw.subject }}</td>
                                    <td>{{ hw.description|truncate(30) }}</td>
                                    <td>{{ hw.date }}</td>
                                    <td>
                                        {% if hw.days_until_due < 0 %}
                                            <span class="badge bg-danger">Overdue</span>
                                        {% elif hw.days_until_due == 0 %}
                                            <span class="badge bg-danger">Today</span>
                                        {% elif hw.days_until_due == 1 %}
                                            <span class="badge bg-warning text-dark">Tomorrow</span>
                                        {% else %}
                                            <span class="badge bg-info">{{ hw.days_until_due }} days</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-tasks text-muted" style="font-size: 3rem;"></i>
                        <h5 class="mt-3">No homework to prioritize</h5>
                        <p class="text-muted">Your homework list is empty or all tasks are completed</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12 mb-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-sync me-2"></i>External Calendar Integration</h5>
                <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addCalendarModal">
                    <i class="fas fa-plus me-1"></i>Add Calendar
                </button>
            </div>
            <div class="card-body">
                {% if external_calendars %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Type</th>
                                    <th>Calendar ID</th>
                                    <th>Last Synced</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for calendar in external_calendars %}
                                <tr>
                                    <td>
                                        {% if calendar.type == 'google' %}
                                            <i class="fab fa-google text-danger me-1"></i>Google Calendar
                                        {% elif calendar.type == 'apple' %}
                                            <i class="fab fa-apple text-dark me-1"></i>Apple Calendar
                                        {% else %}
                                            <i class="fas fa-calendar-alt text-primary me-1"></i>iCal
                                        {% endif %}
                                    </td>
                                    <td>{{ calendar.calendar_id|truncate(30) }}</td>
                                    <td>
                                        {% if calendar.last_synced %}
                                            {{ calendar.last_synced }}
                                        {% else %}
                                            <span class="text-muted">Never</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary sync-calendar-btn" data-calendar-id="{{ calendar.id }}">
                                            <i class="fas fa-sync-alt"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger delete-calendar-btn" data-calendar-id="{{ calendar.id }}">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-calendar-alt text-muted" style="font-size: 3rem;"></i>
                        <h5 class="mt-3">No external calendars connected</h5>
                        <p class="text-muted">Connect your Google Calendar or Apple Calendar to sync your study schedule</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Add Study Block Modal -->
<div class="modal fade" id="addStudyBlockModal" tabindex="-1" aria-labelledby="addStudyBlockModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addStudyBlockModalLabel">Add Study Block</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addStudyBlockForm">
                    <div class="mb-3">
                        <label for="dayOfWeek" class="form-label">Day of Week</label>
                        <select class="form-select" id="dayOfWeek" name="day_of_week" required>
                            <option value="0">Monday</option>
                            <option value="1">Tuesday</option>
                            <option value="2">Wednesday</option>
                            <option value="3">Thursday</option>
                            <option value="4">Friday</option>
                            <option value="5">Saturday</option>
                            <option value="6">Sunday</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="startTime" class="form-label">Start Time</label>
                        <input type="time" class="form-control" id="startTime" name="start_time" required>
                    </div>
                    <div class="mb-3">
                        <label for="endTime" class="form-label">End Time</label>
                        <input type="time" class="form-control" id="endTime" name="end_time" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveStudyBlockBtn">Save</button>
            </div>
        </div>
    </div>
</div>

<!-- Custom Build Schedule Dialog -->
<div id="customBuildScheduleDialog" class="custom-dialog-overlay" style="display: none;">
    <div class="custom-dialog-container">
        <div class="custom-dialog">
            <div class="custom-dialog-header">
                <h5>Build Study Schedule</h5>
                <button type="button" class="btn-close" id="closeCustomDialog"></button>
            </div>
            <div class="custom-dialog-body">
                <form id="buildScheduleForm">
                    <div class="mb-3">
                        <label for="startDate" class="form-label">Start Date</label>
                        <input type="date" class="form-control" id="startDate" name="start_date" required>
                    </div>
                    <div class="mb-3">
                        <label for="daysAhead" class="form-label">Days Ahead</label>
                        <select class="form-select" id="daysAhead" name="days_ahead">
                            <option value="7">1 Week</option>
                            <option value="14">2 Weeks</option>
                            <option value="30">1 Month</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="custom-dialog-footer">
                <button type="button" class="btn btn-secondary" id="cancelCustomDialog">Cancel</button>
                <button type="button" class="btn btn-primary" id="buildScheduleBtn">Build Schedule</button>
            </div>
        </div>
    </div>
</div>

<style>
/* Custom dialog styles */
.custom-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.custom-dialog-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    max-height: 90vh;
    max-width: 90vw;
}

.custom-dialog {
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 500px;
    max-width: 100%;
    z-index: 10000;
    margin: 30px auto;
    position: relative;
}

.custom-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    background-color: #f8f9fa;
    border-radius: 5px 5px 0 0;
}

.custom-dialog-body {
    padding: 1rem;
    max-height: 60vh;
    overflow-y: auto;
}

.custom-dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding: 1rem;
    border-top: 1px solid #dee2e6;
    gap: 0.5rem;
    background-color: #f8f9fa;
    border-radius: 0 0 5px 5px;
}

/* Dark mode support */
body.dark-mode .custom-dialog {
    background-color: #1e1e1e;
    color: #e0e0e0;
}

body.dark-mode .custom-dialog-header,
body.dark-mode .custom-dialog-footer {
    border-color: #343a40;
    background-color: #212529;
}

/* Make sure the dialog is visible on all screen sizes */
@media (max-height: 600px) {
    .custom-dialog-container {
        top: 0;
        transform: translate(-50%, 0);
        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    .custom-dialog-body {
        max-height: 40vh;
    }
}
</style>

<!-- Add Calendar Modal -->
<div class="modal fade" id="addCalendarModal" tabindex="-1" aria-labelledby="addCalendarModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addCalendarModalLabel">Add External Calendar</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addCalendarForm">
                    <div class="mb-3">
                        <label for="calendarType" class="form-label">Calendar Type</label>
                        <select class="form-select" id="calendarType" name="type" required>
                            <option value="google">Google Calendar</option>
                            <option value="apple">Apple Calendar</option>
                            <option value="ical">iCal URL</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="calendarId" class="form-label">Calendar ID/URL</label>
                        <input type="text" class="form-control" id="calendarId" name="calendar_id" required>
                        <small class="form-text text-muted">For Google Calendar, use your calendar ID. For iCal, use the URL.</small>
                    </div>
                    <div class="mb-3" id="accessTokenField" style="display: none;">
                        <label for="accessToken" class="form-label">Access Token</label>
                        <input type="text" class="form-control" id="accessToken" name="access_token">
                        <small class="form-text text-muted">Required for some calendar types.</small>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveCalendarBtn">Save</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Custom dialog handling
        const customDialog = document.getElementById('customBuildScheduleDialog');
        const openDialogBtn = document.getElementById('openBuildScheduleBtn');
        const closeDialogBtn = document.getElementById('closeCustomDialog');
        const cancelDialogBtn = document.getElementById('cancelCustomDialog');
        
        // Open dialog
        openDialogBtn.addEventListener('click', function() {
            // Set the current date if not already set
            if (!document.getElementById('startDate').value) {
                const today = new Date();
                const formattedDate = today.toISOString().split('T')[0];
                document.getElementById('startDate').value = formattedDate;
            }
            
            // Show the dialog
            customDialog.style.display = 'block';
            document.body.style.overflow = 'hidden'; // Prevent scrolling
            
            // Ensure dialog is in viewport
            setTimeout(function() {
                const dialogElement = document.querySelector('.custom-dialog');
                const viewportHeight = window.innerHeight;
                const dialogHeight = dialogElement.offsetHeight;
                
                // If dialog is taller than viewport, adjust styles
                if (dialogHeight > viewportHeight * 0.9) {
                    document.querySelector('.custom-dialog-body').style.maxHeight = (viewportHeight * 0.5) + 'px';
                }
            }, 10);
        });
        
        // Function to close dialog and reset state
        function closeDialog() {
            customDialog.style.display = 'none';
            document.body.style.overflow = ''; // Restore scrolling
            
            // Reset any custom styles that might have been applied
            document.querySelector('.custom-dialog-body').style.maxHeight = '';
        }
        
        // Close dialog (X button)
        closeDialogBtn.addEventListener('click', closeDialog);
        
        // Cancel button
        cancelDialogBtn.addEventListener('click', closeDialog);
        
        // Close when clicking outside the dialog
        customDialog.addEventListener('click', function(event) {
            if (event.target === customDialog || event.target.classList.contains('custom-dialog-container')) {
                closeDialog();
            }
        });
        
        // Handle escape key to close dialog
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape' && customDialog.style.display === 'block') {
                closeDialog();
            }
        });
        
        // Set default date for schedule builder
        const today = new Date();
        const formattedDate = today.toISOString().split('T')[0];
        document.getElementById('startDate').value = formattedDate;

        // Show/hide access token field based on calendar type
        document.getElementById('calendarType').addEventListener('change', function() {
            const accessTokenField = document.getElementById('accessTokenField');
            if (this.value === 'google') {
                accessTokenField.style.display = 'block';
            } else {
                accessTokenField.style.display = 'none';
            }
        });

        // Save study block
        document.getElementById('saveStudyBlockBtn').addEventListener('click', function() {
            const form = document.getElementById('addStudyBlockForm');
            const dayOfWeek = parseInt(form.elements['day_of_week'].value);
            const startTime = form.elements['start_time'].value;
            const endTime = form.elements['end_time'].value;

            // Validate form
            if (!startTime || !endTime) {
                alert('Please fill in all fields');
                return;
            }

            // Validate time range
            if (startTime >= endTime) {
                alert('End time must be after start time');
                return;
            }

            // Send request to add study block
            fetch('/api/study_blocks', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    day_of_week: dayOfWeek,
                    start_time: startTime,
                    end_time: endTime
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Close modal and reload page
                    const modal = bootstrap.Modal.getInstance(document.getElementById('addStudyBlockModal'));
                    modal.hide();
                    window.location.reload();
                } else {
                    alert('Error adding study block: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error adding study block');
            });
        });

        // Delete study block
        document.querySelectorAll('.delete-block-btn').forEach(button => {
            button.addEventListener('click', function() {
                const blockId = this.getAttribute('data-block-id');
                if (confirm('Are you sure you want to delete this study block?')) {
                    fetch(`/api/study_blocks/${blockId}`, {
                        method: 'DELETE'
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            window.location.reload();
                        } else {
                            alert('Error deleting study block: ' + data.message);
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('Error deleting study block');
                    });
                }
            });
        });

        // Save preferences
        document.getElementById('savePreferencesBtn').addEventListener('click', function() {
            const form = document.getElementById('preferencesForm');
            const studySessionLength = parseInt(form.elements['study_session_length'].value);
            const breakLength = parseInt(form.elements['break_length'].value);
            const maxDailyStudyTime = parseInt(form.elements['max_daily_study_time'].value);
            const calendarSyncEnabled = form.elements['calendar_sync_enabled'].checked;

            // Validate form
            if (isNaN(studySessionLength) || isNaN(breakLength) || isNaN(maxDailyStudyTime)) {
                alert('Please enter valid numbers for all fields');
                return;
            }

            // Send request to update preferences
            fetch('/api/calendar/preferences', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    study_session_length: studySessionLength,
                    break_length: breakLength,
                    max_daily_study_time: maxDailyStudyTime,
                    calendar_sync_enabled: calendarSyncEnabled
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Preferences saved successfully');
                } else {
                    alert('Error saving preferences: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error saving preferences');
            });
        });

        // Build schedule
        document.getElementById('buildScheduleBtn').addEventListener('click', function() {
            const form = document.getElementById('buildScheduleForm');
            const startDate = form.elements['start_date'].value;
            const daysAhead = parseInt(form.elements['days_ahead'].value);

            // Validate form
            if (!startDate) {
                alert('Please select a start date');
                return;
            }

            // Show loading state
            this.disabled = true;
            this.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Building...';

            // Send request to build schedule
            fetch('/api/study_schedule/build', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    start_date: startDate,
                    days_ahead: daysAhead
                })
            })
            .then(response => response.json())
            .then(data => {
                // Reset button state
                this.disabled = false;
                this.innerHTML = 'Build Schedule';

                if (data.success) {
                    // Close custom dialog
                    closeDialog();
                    
                    // Reload the page
                    window.location.reload();
                } else {
                    alert('Error building schedule: ' + data.message);
                }
            })
            .catch(error => {
                // Reset button state
                this.disabled = false;
                this.innerHTML = 'Build Schedule';

                console.error('Error:', error);
                alert('Error building schedule');
            });
        });

        // Save external calendar
        document.getElementById('saveCalendarBtn').addEventListener('click', function() {
            const form = document.getElementById('addCalendarForm');
            const calendarType = form.elements['type'].value;
            const calendarId = form.elements['calendar_id'].value;
            const accessToken = form.elements['access_token'].value;

            // Validate form
            if (!calendarId) {
                alert('Please enter a calendar ID/URL');
                return;
            }

            // Send request to add external calendar
            fetch('/api/external_calendars', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    type: calendarType,
                    calendar_id: calendarId,
                    access_token: accessToken
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Close modal and reload page
                    const modal = bootstrap.Modal.getInstance(document.getElementById('addCalendarModal'));
                    modal.hide();
                    window.location.reload();
                } else {
                    alert('Error adding external calendar: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error adding external calendar');
            });
        });

        // Delete external calendar
        document.querySelectorAll('.delete-calendar-btn').forEach(button => {
            button.addEventListener('click', function() {
                const calendarId = this.getAttribute('data-calendar-id');
                if (confirm('Are you sure you want to delete this external calendar?')) {
                    fetch(`/api/external_calendars/${calendarId}`, {
                        method: 'DELETE'
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            window.location.reload();
                        } else {
                            alert('Error deleting external calendar: ' + data.message);
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('Error deleting external calendar');
                    });
                }
            });
        });

        // Sync external calendar
        document.querySelectorAll('.sync-calendar-btn').forEach(button => {
            button.addEventListener('click', function() {
                const calendarId = this.getAttribute('data-calendar-id');
                
                // Show loading state
                this.disabled = true;
                const originalHTML = this.innerHTML;
                this.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';

                // Send request to sync calendar
                fetch('/api/calendar/sync', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        calendar_id: calendarId
                    })
                })
                .then(response => response.json())
                .then(data => {
                    // Reset button state
                    this.disabled = false;
                    this.innerHTML = originalHTML;

                    if (data.success) {
                        alert('Calendar synced successfully');
                        window.location.reload();
                    } else {
                        alert('Error syncing calendar: ' + data.message);
                    }
                })
                .catch(error => {
                    // Reset button state
                    this.disabled = false;
                    this.innerHTML = originalHTML;

                    console.error('Error:', error);
                    alert('Error syncing calendar');
                });
            });
        });

        // Delete study session
        document.querySelectorAll('.delete-session-btn').forEach(button => {
            button.addEventListener('click', function() {
                const sessionId = this.getAttribute('data-session-id');
                if (confirm('Are you sure you want to delete this study session?')) {
                    // This would typically call an API endpoint to delete the session
                    // For now, just reload the page
                    alert('This feature is not yet implemented');
                }
            });
        });
    });
</script>
{% endblock %}