<div class="space-y-6">
    <!-- Header -->
    <div class="flex justify-between items-center">
        <div>
            <p class="text-gray-500 dark:text-gray-400 mt-1">Manage staggered restart times for all servers</p>
        </div>
        <div class="flex gap-3">
            <button hx-post="/admin/scheduler/import-servers" 
                    hx-swap="none"
                    hx-on::after-request="htmx.ajax('GET', '/admin/scheduler/table-only', '#scheduler-table')"
                    class="bg-gray-600 hover:bg-gray-500 text-white px-4 py-2 rounded transition">
                ↻ Import Servers
            </button>
        </div>
    </div>

    <!-- Node Configuration Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <% configs.forEach(config => { %>
            <div class="bg-white dark:bg-darkcard rounded-lg p-4 border border-gray-200 dark:border-gray-700">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-bold <%= config.node === 'TX1' ? 'text-fire' : 'text-frost' %>">
                        <%= config.node %> Node
                    </h2>
                    <div class="flex gap-2">
                        <button hx-get="/admin/scheduler/audit/<%= config.node %>" 
                                hx-target="#modal-container"
                                class="bg-yellow-600 hover:bg-yellow-500 text-white px-3 py-1 rounded text-sm transition">
                            Audit
                        </button>
                        <button hx-post="/admin/scheduler/sync/<%= config.node %>" 
                                hx-swap="none"
                                hx-on::after-request="htmx.ajax('GET', '/admin/scheduler/table-only', '#scheduler-table')"
                                class="bg-green-600 hover:bg-green-500 text-white px-3 py-1 rounded text-sm transition">
                            Sync All
                        </button>
                    </div>
                </div>
                <form action="/admin/scheduler/update-config" method="POST" class="flex gap-4 items-end">
                    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                    <input type="hidden" name="node" value="<%= config.node %>">
                    <div class="flex-1">
                        <label class="block text-sm text-gray-500 dark:text-gray-400 mb-1">Base Time (Central)</label>
                        <input type="time" name="base_time" value="<%= config.base_time.substring(0,5) %>" 
                               class="w-full bg-gray-100 dark:bg-darkbg border border-gray-300 dark:border-gray-600 rounded px-3 py-2 text-gray-900 dark:text-white">
                    </div>
                    <div class="w-24">
                        <label class="block text-sm text-gray-500 dark:text-gray-400 mb-1">Interval</label>
                        <input type="number" name="interval_minutes" value="<%= config.interval_minutes %>" min="1" max="30"
                               class="w-full bg-gray-100 dark:bg-darkbg border border-gray-300 dark:border-gray-600 rounded px-3 py-2 text-gray-900 dark:text-white">
                    </div>
                    <button type="submit" class="bg-gray-600 hover:bg-gray-500 text-white px-4 py-2 rounded transition">
                        Update
                    </button>
                </form>
                <p class="text-xs text-gray-500 mt-2">
                    Last updated: <%= config.updated_at ? new Date(config.updated_at).toLocaleString() : 'Never' %> 
                    by <%= config.updated_by || 'Unknown' %>
                </p>
            </div>
        <% }) %>
    </div>

    <!-- Server Table -->
    <div id="scheduler-table" class="bg-white dark:bg-darkcard rounded overflow-hidden border border-gray-200 dark:border-gray-700">
        <table class="w-full text-left">
            <thead class="bg-gray-100 dark:bg-darkbg text-gray-600 dark:text-gray-300">
                <tr>
                    <th class="p-3 w-10"></th>
                    <th class="p-3">Server</th>
                    <th class="p-3">Node</th>
                    <th class="p-3">Restart Time (Central)</th>
                    <th class="p-3">Status</th>
                    <th class="p-3">Skip</th>
                </tr>
            </thead>
            <tbody id="sortable-servers">
                <% if (servers.length === 0) { %>
                    <tr>
                        <td colspan="6" class="p-6 text-center text-gray-500">
                            No servers imported yet. Click "Import Servers" to populate from Pterodactyl.
                        </td>
                    </tr>
                <% } else { %>
                    <% servers.forEach((server, i) => { %>
                        <tr class="border-t border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 transition" data-id="<%= server.server_id %>">
                            <td class="p-3 cursor-grab text-gray-400 hover:text-gray-900 dark:hover:text-white">
                                <span class="drag-handle text-lg">☰</span>
                            </td>
                            <td class="p-3 font-medium"><%= server.server_name %></td>
                            <td class="p-3">
                                <span class="px-2 py-1 rounded text-xs font-bold <%= server.node === 'TX1' ? 'bg-fire/20 text-fire' : 'bg-frost/20 text-frost' %>">
                                    <%= server.node %>
                                </span>
                            </td>
                            <td class="p-3 font-mono text-sm"><%= server.effective_time || 'Not set' %></td>
                            <td class="p-3 text-sm">
                                <% if (server.sync_status === 'SUCCESS') { %>
                                    <span class="text-green-500" title="Last synced: <%= server.last_synced_at %>">● Synced</span>
                                <% } else if (server.sync_status === 'FAILED') { %>
                                    <span class="text-red-500" title="<%= server.last_error %>">✕ Error</span>
                                <% } else { %>
                                    <span class="text-yellow-500">○ Pending</span>
                                <% } %>
                            </td>
                            <td class="p-3">
                                <button hx-post="/admin/scheduler/toggle-skip/<%= server.server_id %>"
                                        hx-swap="none"
                                        hx-on::after-request="htmx.ajax('GET', '/admin/scheduler/table-only', '#scheduler-table')"
                                        class="px-2 py-1 rounded text-xs <%= server.skip_restart ? 'bg-red-600 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300' %>">
                                    <%= server.skip_restart ? 'Skipped' : 'Active' %>
                                </button>
                            </td>
                        </tr>
                    <% }) %>
                <% } %>
            </tbody>
        </table>
    </div>

    <!-- Modal Container -->
    <div id="modal-container"></div>
</div>

<!-- SortableJS -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    const tbody = document.getElementById('sortable-servers');
    
    if(tbody) {
        new Sortable(tbody, {
            handle: '.drag-handle',
            animation: 150,
            ghostClass: 'bg-gray-600',
            
            onEnd: function (evt) {
                const newOrder = Array.from(tbody.querySelectorAll('tr')).map(row => row.dataset.id);
                
                fetch('/admin/scheduler/reorder-servers', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ orderedIds: newOrder })
                })
                .then(() => htmx.ajax('GET', '/admin/scheduler/table-only', '#scheduler-table'));
            }
        });
    }
});
</script>
