{% extends "base.html" %}

{% block title %}Schedule - AgentOS{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-8">
        <h1 class="text-3xl font-bold text-white">Scheduled Agents</h1>
        <button onclick="refreshSchedule()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
            🔄 Refresh
        </button>
    </div>

    <!-- Schedule Table -->
    <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full">
                <thead class="bg-gray-700">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">ID</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Agent</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Task</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Schedule</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Next Run</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-700" id="scheduleTableBody">
                    {% for schedule in scheduled %}
                    <tr class="hover:bg-gray-700">
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">{{ schedule.id }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-white">{{ schedule.manifest }}</td>
                        <td class="px-6 py-4 text-sm text-gray-300 max-w-xs truncate">{{ schedule.task }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
                            {% if schedule.time %}
                                Daily at {{ schedule.time }}:00
                            {% elif schedule.repeat %}
                                Every {{ schedule.repeat }} minutes
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">{{ schedule.next_run or 'Calculating...' }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                            <button onclick="removeSchedule('{{ schedule.id }}')" 
                                    class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded text-xs">
                                Remove
                            </button>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="6" class="px-6 py-8 text-center text-gray-400">
                            No scheduled agents found
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
function refreshSchedule() {
    fetch('/api/schedule')
        .then(response => response.json())
        .then(data => {
            const tbody = document.getElementById('scheduleTableBody');
            if (data.length === 0) {
                tbody.innerHTML = '<tr><td colspan="6" class="px-6 py-8 text-center text-gray-400">No scheduled agents found</td></tr>';
                return;
            }
            
            tbody.innerHTML = data.map(schedule => `
                <tr class="hover:bg-gray-700">
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">${schedule.id}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-white">${schedule.manifest}</td>
                    <td class="px-6 py-4 text-sm text-gray-300 max-w-xs truncate">${schedule.task}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
                        ${schedule.time ? `Daily at ${schedule.time}:00` : 
                          schedule.repeat ? `Every ${schedule.repeat} minutes` : ''}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">${schedule.next_run || 'Calculating...'}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        <button onclick="removeSchedule('${schedule.id}')" 
                                class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded text-xs">
                            Remove
                        </button>
                    </td>
                </tr>
            `).join('');
        })
        .catch(error => console.error('Error refreshing schedule:', error));
}

function removeSchedule(scheduleId) {
    if (!confirm('Are you sure you want to remove this scheduled agent?')) {
        return;
    }
    
    fetch(`/api/schedule/${scheduleId}/remove`, {
        method: 'POST'
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            refreshSchedule();
        } else {
            alert('Error: ' + data.error);
        }
    })
    .catch(error => {
        console.error('Error removing schedule:', error);
        alert('Failed to remove schedule');
    });
}

// Auto-refresh every 30 seconds
setInterval(refreshSchedule, 30000);
</script>
{% endblock %}