{% extends "base.html" %}

{% block content %}
<div class="space-y-8" x-data="{ 
    rerunModal: false, 
    rerunJobId: null,
    rerunJobName: '',
    rerunPassword: '',
    selectedJobs: [],
    toggleJob(jobId) {
        if (this.selectedJobs.includes(jobId)) {
            this.selectedJobs = this.selectedJobs.filter(id => id !== jobId);
        } else if (this.selectedJobs.length < 4) {
            this.selectedJobs.push(jobId);
        }
    },
    goCompare() {
        if (this.selectedJobs.length >= 2) {
            window.location.href = '/compare?jobs=' + this.selectedJobs.join(',');
        }
    }
}">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-white">Monitoring Jobs</h1>
            <p class="text-slate-400 text-sm mt-1">All Redis monitoring sessions</p>
        </div>
        <div class="flex items-center gap-3">
            <!-- Compare Button -->
            <button @click="goCompare()" 
                    x-show="selectedJobs.length >= 2"
                    x-transition
                    class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-purple-500/20 text-purple-400 font-medium hover:bg-purple-500/30 transition-colors border border-purple-500/30">
                <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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                </svg>
                Compare (<span x-text="selectedJobs.length"></span>)
            </button>
            <a href="/" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-redis-500/20 text-redis-400 font-medium hover:bg-redis-500/30 transition-colors border border-redis-500/30">
                <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="M12 4v16m8-8H4" />
                </svg>
                New Job
            </a>
        </div>
    </div>
    
    <!-- Selection hint -->
    <div x-show="selectedJobs.length > 0 && selectedJobs.length < 2" 
         x-transition
         class="text-sm text-amber-400 bg-amber-500/10 border border-amber-500/20 rounded-lg px-4 py-2">
        <span class="font-medium">Select at least 2 jobs to compare</span> (max 4)
    </div>

    {% if jobs %}
    <div class="space-y-4">
        {% for item in jobs %}
        <div class="glass-card rounded-xl p-5 hover:border-slate-600/50 transition-all"
             :class="selectedJobs.includes('{{ item.job.id }}') ? 'ring-2 ring-purple-500/50 border-purple-500/30' : ''">
            <div class="flex items-start justify-between">
                <!-- Checkbox for comparison -->
                {% if item.job.status.value == 'completed' %}
                <div class="mr-4 pt-1">
                    <button @click="toggleJob('{{ item.job.id }}')"
                            class="w-5 h-5 rounded border-2 flex items-center justify-center transition-all"
                            :class="selectedJobs.includes('{{ item.job.id }}') ? 'bg-purple-500 border-purple-500' : 'border-slate-600 hover:border-purple-400'">
                        <svg x-show="selectedJobs.includes('{{ item.job.id }}')" class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
                        </svg>
                    </button>
                </div>
                {% else %}
                <div class="mr-4 pt-1 w-5"></div>
                {% endif %}
                <div class="flex-1">
                    <div class="flex items-center gap-3 mb-2">
                        <!-- Status Indicator -->
                        {% if item.job.status.value == 'pending' %}
                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-slate-700 text-slate-300">
                            <span class="w-1.5 h-1.5 rounded-full bg-slate-400"></span>
                            Pending
                        </span>
                        {% elif item.job.status.value == 'running' %}
                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-amber-500/20 text-amber-300">
                            <span class="w-1.5 h-1.5 rounded-full bg-amber-400 status-pulse"></span>
                            Running
                        </span>
                        {% elif item.job.status.value == 'completed' %}
                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-500/20 text-emerald-400">
                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
                            Completed
                        </span>
                        {% elif item.job.status.value == 'failed' %}
                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-redis-500/20 text-redis-400">
                            <span class="w-1.5 h-1.5 rounded-full bg-redis-400"></span>
                            Failed
                        </span>
                        {% endif %}
                        
                        <a href="/jobs/{{ item.job.id }}" class="text-lg font-semibold text-white hover:text-redis-400 transition-colors">
                            {{ item.job.name or item.job.replication_group_id }}
                        </a>
                    </div>
                    
                    <div class="flex flex-wrap items-center gap-4 text-sm text-slate-400">
                        <div class="flex items-center gap-1.5">
                            <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="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2" />
                            </svg>
                            <span class="font-mono text-xs">{{ item.job.replication_group_id }}</span>
                        </div>
                        <div class="flex items-center gap-1.5">
                            <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            <span>{{ item.job.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</span>
                        </div>
                        <div class="flex items-center gap-1.5">
                            <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="M13 10V3L4 14h7v7l9-11h-7z" />
                            </svg>
                            <span>{{ item.job.duration_seconds }}s duration</span>
                        </div>
                    </div>
                    
                    <!-- Error Message -->
                    {% if item.job.error_message %}
                    <div class="mt-3 p-3 rounded-lg bg-redis-500/10 border border-redis-500/20">
                        <p class="text-redis-300 text-sm">{{ item.job.error_message[:150] }}{% if item.job.error_message|length > 150 %}...{% endif %}</p>
                    </div>
                    {% endif %}

                    <!-- Stats Row -->
                    <div class="flex items-center gap-6 mt-4 pt-4 border-t border-slate-700/50">
                        <div>
                            <div class="text-2xl font-bold text-white">{{ item.job.total_commands|format_number }}</div>
                            <div class="text-xs text-slate-500">Commands</div>
                        </div>
                        <div>
                            <div class="text-2xl font-bold text-white">{{ item.shard_count }}</div>
                            <div class="text-xs text-slate-500">Shards</div>
                        </div>
                        {% if item.completed_count > 0 %}
                        <div>
                            <div class="text-2xl font-bold text-emerald-400">{{ item.completed_count }}</div>
                            <div class="text-xs text-slate-500">Completed</div>
                        </div>
                        {% endif %}
                        {% if item.failed_count > 0 %}
                        <div>
                            <div class="text-2xl font-bold text-redis-400">{{ item.failed_count }}</div>
                            <div class="text-xs text-slate-500">Failed</div>
                        </div>
                        {% endif %}
                    </div>
                </div>
                
                <!-- Actions -->
                <div class="flex flex-col gap-2 ml-4">
                    <a href="/jobs/{{ item.job.id }}" class="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-slate-700/50 text-slate-300 hover:text-white hover:bg-slate-700 transition-all text-sm">
                        <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                        </svg>
                        View
                    </a>
                    {% if item.job.status.value == 'completed' %}
                    <a href="/jobs/{{ item.job.id }}/analysis" class="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-redis-500/20 text-redis-400 hover:bg-redis-500/30 transition-all text-sm">
                        <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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                        </svg>
                        Analyze
                    </a>
                    {% endif %}
                    <!-- Re-run button -->
                    <button @click="rerunModal = true; rerunJobId = '{{ item.job.id }}'; rerunJobName = '{{ item.job.name or item.job.replication_group_id }}'; rerunPassword = ''"
                            class="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-emerald-500/20 text-emerald-400 hover:bg-emerald-500/30 transition-all text-sm">
                        <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                        </svg>
                        Re-run
                    </button>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="glass-card rounded-2xl p-12 text-center">
        <svg class="w-16 h-16 mx-auto text-slate-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
        </svg>
        <h3 class="text-lg font-medium text-slate-400 mb-2">No Jobs Yet</h3>
        <p class="text-slate-500 text-sm mb-6">
            Start your first monitoring session to analyze Redis command traffic
        </p>
        <a href="/" class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-redis-500 text-white font-medium hover:bg-redis-600 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 Job
        </a>
    </div>
    {% endif %}

    <!-- Re-run Modal -->
    <div x-show="rerunModal" 
         x-cloak
         class="fixed inset-0 z-50 flex items-center justify-center p-4"
         @keydown.escape.window="rerunModal = false">
        <!-- Backdrop -->
        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" @click="rerunModal = false"></div>
        
        <!-- Modal -->
        <div class="relative glass-card rounded-2xl p-6 w-full max-w-md space-y-6 border border-slate-700/50"
             @click.stop>
            <div class="flex items-center justify-between">
                <h3 class="text-xl font-semibold text-white flex items-center gap-2">
                    <svg class="w-5 h-5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                    </svg>
                    Re-run Job
                </h3>
                <button @click="rerunModal = false" class="text-slate-400 hover:text-white">
                    <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="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
            
            <p class="text-slate-400 text-sm">
                Re-run <span class="text-white font-medium" x-text="rerunJobName"></span> with the same configuration.
            </p>
            
            <form :action="'/jobs/' + rerunJobId + '/rerun'" method="POST" autocomplete="off" class="space-y-4">
                <div class="space-y-2">
                    <label class="block text-sm font-medium text-slate-300">
                        Redis Password <span class="text-redis-500">*</span>
                    </label>
                    <input type="password" 
                           name="password" 
                           x-model="rerunPassword"
                           autocomplete="off"
                           readonly
                           onfocus="this.removeAttribute('readonly')"
                           data-1p-ignore="true"
                           data-lpignore="true"
                           data-form-type="other"
                           data-bwignore
                           required
                           placeholder="Enter Redis AUTH token"
                           class="w-full px-4 py-3 bg-slate-800/50 border border-slate-700/50 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-redis-500/50 focus:ring-1 focus:ring-redis-500/50">
                    <p class="text-xs text-slate-500">Password is not stored and only used for this monitoring session</p>
                </div>
                
                <div class="flex gap-3 pt-2">
                    <button type="button" 
                            @click="rerunModal = false"
                            class="flex-1 px-4 py-2.5 rounded-lg bg-slate-700/50 text-slate-300 font-medium hover:bg-slate-700 hover:text-white transition-colors">
                        Cancel
                    </button>
                    <button type="submit"
                            :disabled="!rerunPassword"
                            class="flex-1 px-4 py-2.5 rounded-lg bg-emerald-500 text-white font-medium hover:bg-emerald-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                        Start Re-run
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}