{% extends "base.html" %}

{% block content %}
<div class="space-y-6" x-data="{ 
    showCreateModal: false, 
    showEditModal: false, 
    editCron: null,
    selectedHosts: [],
    cronName: '',
    intervalMinutes: 60,
    collectHotTables: false
}">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="text-xl sm:text-2xl font-bold text-white flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-400 to-violet-600 flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                Scheduled Jobs
            </h1>
            <p class="text-midnight-400 mt-1 text-sm sm:text-base">Automatically collect MySQL diagnostics on a schedule</p>
        </div>
        <button @click="showCreateModal = true; selectedHosts = []; cronName = ''; intervalMinutes = 60; collectHotTables = false;"
                class="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-violet-600 hover:bg-violet-500 text-white font-medium transition-colors w-full sm:w-auto">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
            </svg>
            New Schedule
        </button>
    </div>

    <!-- Crons List -->
    {% if crons %}
    <div class="glass-card rounded-2xl overflow-hidden">
        <table class="w-full">
            <thead class="bg-midnight-800/50">
                <tr>
                    <th class="text-left py-4 px-6 text-midnight-400 font-medium text-xs uppercase tracking-wider">Name</th>
                    <th class="text-left py-4 px-6 text-midnight-400 font-medium text-xs uppercase tracking-wider">Hosts</th>
                    <th class="text-center py-4 px-6 text-midnight-400 font-medium text-xs uppercase tracking-wider">Interval</th>
                    <th class="text-center py-4 px-6 text-midnight-400 font-medium text-xs uppercase tracking-wider">Status</th>
                    <th class="text-left py-4 px-6 text-midnight-400 font-medium text-xs uppercase tracking-wider">Last Run</th>
                    <th class="text-left py-4 px-6 text-midnight-400 font-medium text-xs uppercase tracking-wider">Next Run</th>
                    <th class="text-center py-4 px-6 text-midnight-400 font-medium text-xs uppercase tracking-wider">Runs</th>
                    <th class="text-center py-4 px-6 text-midnight-400 font-medium text-xs uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-midnight-700/50">
                {% for item in crons %}
                <tr class="hover:bg-midnight-800/30 transition-colors {% if not item.cron.enabled %}opacity-50{% endif %}">
                    <td class="py-4 px-6">
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-lg {% if item.cron.enabled %}bg-violet-500/20{% else %}bg-midnight-700{% endif %} flex items-center justify-center">
                                <svg class="w-4 h-4 {% if item.cron.enabled %}text-violet-400{% else %}text-midnight-500{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            </div>
                            <div>
                                <div class="font-medium text-white">{{ item.cron.name }}</div>
                                <div class="text-xs text-midnight-500 font-mono">{{ item.cron.id[:8] }}</div>
                            </div>
                        </div>
                    </td>
                    <td class="py-4 px-6">
                        <div class="flex flex-wrap gap-1">
                            {% for label in item.host_labels[:3] %}
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-ocean-500/20 text-ocean-400">
                                {{ label }}
                            </span>
                            {% endfor %}
                            {% if item.host_count > 3 %}
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-midnight-700 text-midnight-400">
                                +{{ item.host_count - 3 }} more
                            </span>
                            {% endif %}
                        </div>
                    </td>
                    <td class="py-4 px-6 text-center">
                        <span class="font-mono text-white">
                            {% if item.cron.interval_minutes < 60 %}
                            {{ item.cron.interval_minutes }}m
                            {% elif item.cron.interval_minutes == 60 %}
                            1h
                            {% elif item.cron.interval_minutes % 60 == 0 %}
                            {{ item.cron.interval_minutes // 60 }}h
                            {% else %}
                            {{ item.cron.interval_minutes // 60 }}h {{ item.cron.interval_minutes % 60 }}m
                            {% endif %}
                        </span>
                    </td>
                    <td class="py-4 px-6 text-center">
                        {% if item.cron.enabled %}
                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-volt-500/20 text-volt-400">
                            <span class="w-1.5 h-1.5 rounded-full bg-volt-400 animate-pulse"></span>
                            Active
                        </span>
                        {% else %}
                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-midnight-700 text-midnight-400">
                            <span class="w-1.5 h-1.5 rounded-full bg-midnight-500"></span>
                            Paused
                        </span>
                        {% endif %}
                    </td>
                    <td class="py-4 px-6">
                        {% if item.cron.last_run_at %}
                        <div class="text-sm text-midnight-300" data-utc="{{ item.cron.last_run_at.strftime('%Y-%m-%dT%H:%M:%S') }}">
                            {{ item.cron.last_run_at.strftime('%m/%d %H:%M') }}
                        </div>
                        {% if item.cron.last_job_id %}
                        <a href="/jobs/{{ item.cron.last_job_id }}" class="text-xs text-ocean-400 hover:text-ocean-300">
                            View job →
                        </a>
                        {% endif %}
                        {% else %}
                        <span class="text-midnight-500 text-sm">Never</span>
                        {% endif %}
                    </td>
                    <td class="py-4 px-6">
                        {% if item.cron.enabled and item.cron.next_run_at %}
                        <div class="text-sm text-midnight-300" data-utc="{{ item.cron.next_run_at.strftime('%Y-%m-%dT%H:%M:%S') }}">
                            {{ item.cron.next_run_at.strftime('%m/%d %H:%M') }}
                        </div>
                        {% else %}
                        <span class="text-midnight-500 text-sm">—</span>
                        {% endif %}
                    </td>
                    <td class="py-4 px-6 text-center">
                        <span class="font-mono text-midnight-300">{{ item.cron.run_count or 0 }}</span>
                    </td>
                    <td class="py-4 px-6">
                        <div class="flex items-center justify-center gap-1">
                            <!-- Run Now -->
                            <form action="/crons/{{ item.cron.id }}/run-now" method="post" class="inline">
                                <button type="submit" 
                                        class="p-2 rounded-lg text-midnight-400 hover:text-volt-400 hover:bg-volt-500/10 transition-colors"
                                        title="Run Now">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                </button>
                            </form>
                            <!-- Toggle -->
                            <form action="/crons/{{ item.cron.id }}/toggle" method="post" class="inline">
                                <button type="submit" 
                                        class="p-2 rounded-lg text-midnight-400 hover:text-amber-400 hover:bg-amber-500/10 transition-colors"
                                        title="{{ 'Pause' if item.cron.enabled else 'Resume' }}">
                                    {% if item.cron.enabled %}
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                    {% else %}
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                    {% endif %}
                                </button>
                            </form>
                            <!-- Delete -->
                            <form action="/crons/{{ item.cron.id }}/delete" method="post" class="inline"
                                  onsubmit="return confirm('Delete this scheduled job?')">
                                <button type="submit" 
                                        class="p-2 rounded-lg text-midnight-400 hover:text-crimson-400 hover:bg-crimson-500/10 transition-colors"
                                        title="Delete">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                    </svg>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <!-- Empty State -->
    <div class="glass-card rounded-2xl p-12 text-center">
        <div class="w-16 h-16 rounded-2xl bg-violet-500/20 flex items-center justify-center mx-auto mb-4">
            <svg class="w-8 h-8 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
        </div>
        <h3 class="text-xl font-semibold text-white mb-2">No Scheduled Jobs</h3>
        <p class="text-midnight-400 mb-6 max-w-md mx-auto">
            Create a scheduled job to automatically collect MySQL diagnostics at regular intervals.
        </p>
        <button @click="showCreateModal = true; selectedHosts = []; cronName = ''; intervalMinutes = 60; collectHotTables = false;"
                class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-violet-600 hover:bg-violet-500 text-white font-medium transition-colors">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
            </svg>
            Create First Schedule
        </button>
    </div>
    {% endif %}

    <!-- How It Works -->
    <div class="glass-card rounded-2xl p-6">
        <h3 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
            <svg class="w-5 h-5 text-ocean-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            How Scheduled Jobs Work
        </h3>
        <div class="grid md:grid-cols-3 gap-6 text-sm">
            <div class="flex items-start gap-3">
                <div class="w-8 h-8 rounded-lg bg-violet-500/20 flex items-center justify-center flex-shrink-0">
                    <span class="text-violet-400 font-bold">1</span>
                </div>
                <div>
                    <div class="font-medium text-white mb-1">Configure</div>
                    <p class="text-midnight-400">Choose hosts, set interval (e.g., every 30 min), and optional settings.</p>
                </div>
            </div>
            <div class="flex items-start gap-3">
                <div class="w-8 h-8 rounded-lg bg-violet-500/20 flex items-center justify-center flex-shrink-0">
                    <span class="text-violet-400 font-bold">2</span>
                </div>
                <div>
                    <div class="font-medium text-white mb-1">Automatic Collection</div>
                    <p class="text-midnight-400">MASC runs in the background and collects data at scheduled times.</p>
                </div>
            </div>
            <div class="flex items-start gap-3">
                <div class="w-8 h-8 rounded-lg bg-violet-500/20 flex items-center justify-center flex-shrink-0">
                    <span class="text-violet-400 font-bold">3</span>
                </div>
                <div>
                    <div class="font-medium text-white mb-1">Review & Compare</div>
                    <p class="text-midnight-400">View jobs in history, compare snapshots, detect regressions over time.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Create Modal -->
    <div x-show="showCreateModal" x-cloak
         class="fixed inset-0 z-50 flex items-center justify-center p-4"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0">
        <!-- Backdrop -->
        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" @click="showCreateModal = false"></div>
        
        <!-- Modal -->
        <div class="relative w-full max-w-lg glass-card rounded-2xl shadow-2xl shadow-black/50"
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 scale-95"
             x-transition:enter-end="opacity-100 scale-100">
            <form action="/crons/create" method="post">
                <div class="p-6 border-b border-midnight-700/50">
                    <h2 class="text-xl font-semibold text-white flex items-center gap-2">
                        <svg class="w-5 h-5 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        New Scheduled Job
                    </h2>
                </div>
                
                <div class="p-6 space-y-5">
                    <!-- Name -->
                    <div>
                        <label class="block text-sm font-medium text-midnight-300 mb-2">Schedule Name</label>
                        <input type="text" name="name" x-model="cronName" required
                               class="w-full px-4 py-2.5 rounded-lg bg-midnight-800 border border-midnight-600 text-white placeholder-midnight-500 focus:border-violet-500 focus:ring-1 focus:ring-violet-500 focus:outline-none"
                               placeholder="e.g., Production Hourly Check">
                    </div>
                    
                    <!-- Hosts -->
                    <div>
                        <label class="block text-sm font-medium text-midnight-300 mb-2">Select Hosts</label>
                        <div class="grid grid-cols-2 gap-2 max-h-48 overflow-y-auto p-1">
                            {% for host in hosts %}
                            <label class="flex items-center gap-2 p-2 rounded-lg border border-midnight-700 hover:border-midnight-600 cursor-pointer transition-colors"
                                   :class="selectedHosts.includes('{{ host.id }}') ? 'bg-violet-500/20 border-violet-500/50' : 'bg-midnight-800/50'">
                                <input type="checkbox" name="host_ids" value="{{ host.id }}"
                                       :checked="selectedHosts.includes('{{ host.id }}')"
                                       @change="selectedHosts.includes('{{ host.id }}') ? selectedHosts = selectedHosts.filter(h => h !== '{{ host.id }}') : selectedHosts.push('{{ host.id }}')"
                                       class="rounded border-midnight-600 bg-midnight-700 text-violet-500 focus:ring-violet-500 focus:ring-offset-midnight-900">
                                <span class="text-sm text-white truncate">{{ host.label }}</span>
                            </label>
                            {% endfor %}
                        </div>
                        <p class="text-xs text-midnight-500 mt-2" x-show="selectedHosts.length > 0" x-text="selectedHosts.length + ' host(s) selected'"></p>
                    </div>
                    
                    <!-- Interval -->
                    <div>
                        <label class="block text-sm font-medium text-midnight-300 mb-2">Run Every</label>
                        <div class="flex gap-3">
                            <button type="button" @click="intervalMinutes = 15"
                                    :class="intervalMinutes === 15 ? 'bg-violet-600 text-white' : 'bg-midnight-800 text-midnight-300 hover:bg-midnight-700'"
                                    class="px-4 py-2 rounded-lg text-sm font-medium transition-colors">15m</button>
                            <button type="button" @click="intervalMinutes = 30"
                                    :class="intervalMinutes === 30 ? 'bg-violet-600 text-white' : 'bg-midnight-800 text-midnight-300 hover:bg-midnight-700'"
                                    class="px-4 py-2 rounded-lg text-sm font-medium transition-colors">30m</button>
                            <button type="button" @click="intervalMinutes = 60"
                                    :class="intervalMinutes === 60 ? 'bg-violet-600 text-white' : 'bg-midnight-800 text-midnight-300 hover:bg-midnight-700'"
                                    class="px-4 py-2 rounded-lg text-sm font-medium transition-colors">1h</button>
                            <button type="button" @click="intervalMinutes = 360"
                                    :class="intervalMinutes === 360 ? 'bg-violet-600 text-white' : 'bg-midnight-800 text-midnight-300 hover:bg-midnight-700'"
                                    class="px-4 py-2 rounded-lg text-sm font-medium transition-colors">6h</button>
                            <button type="button" @click="intervalMinutes = 1440"
                                    :class="intervalMinutes === 1440 ? 'bg-violet-600 text-white' : 'bg-midnight-800 text-midnight-300 hover:bg-midnight-700'"
                                    class="px-4 py-2 rounded-lg text-sm font-medium transition-colors">24h</button>
                        </div>
                        <input type="hidden" name="interval_minutes" :value="intervalMinutes">
                        <div class="mt-3 flex items-center gap-2">
                            <span class="text-xs text-midnight-500">Custom:</span>
                            <input type="number" x-model="intervalMinutes" min="2" max="10080"
                                   class="w-20 px-2 py-1 rounded bg-midnight-800 border border-midnight-600 text-white text-sm focus:border-violet-500 focus:outline-none">
                            <span class="text-xs text-midnight-500">minutes (min: 2)</span>
                        </div>
                    </div>
                    
                    <!-- Options -->
                    <div>
                        <label class="flex items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="collect_hot_tables" value="true" x-model="collectHotTables"
                                   class="rounded border-midnight-600 bg-midnight-700 text-violet-500 focus:ring-violet-500 focus:ring-offset-midnight-900">
                            <span class="text-sm text-midnight-300">Collect Hot Tables (requires performance_schema)</span>
                        </label>
                    </div>
                </div>
                
                <div class="p-6 border-t border-midnight-700/50 flex items-center justify-end gap-3">
                    <button type="button" @click="showCreateModal = false"
                            class="px-4 py-2 rounded-lg text-midnight-300 hover:text-white hover:bg-midnight-700 transition-colors">
                        Cancel
                    </button>
                    <button type="submit" :disabled="selectedHosts.length === 0 || !cronName"
                            :class="selectedHosts.length === 0 || !cronName ? 'opacity-50 cursor-not-allowed' : 'hover:bg-violet-500'"
                            class="px-4 py-2 rounded-lg bg-violet-600 text-white font-medium transition-colors">
                        Create Schedule
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}