{% extends "base.html" %}

{% block content %}
<!-- Ace Editor -->
<script src="https://cdn.jsdelivr.net/npm/ace-builds@1.32.2/src-min-noconflict/ace.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ace-builds@1.32.2/src-min-noconflict/mode-sql.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ace-builds@1.32.2/src-min-noconflict/theme-one_dark.min.js"></script>
<!-- SQL Formatter -->
<script src="https://cdn.jsdelivr.net/npm/sql-formatter@15.3.1/dist/sql-formatter.min.js"></script>

<style>
    #sql-editor-container {
        resize: vertical;
        overflow: hidden;
        min-height: 150px;
        max-height: 600px;
        height: 200px;
    }
    #sql-editor {
        width: 100%;
        height: 100%;
        font-size: 14px;
        border-radius: 0.75rem;
    }
    .ace_editor {
        border-radius: 0.75rem;
    }
    /* Resize handle styling */
    #sql-editor-container::-webkit-resizer {
        background: linear-gradient(135deg, transparent 50%, #64748b 50%, #64748b 60%, transparent 60%),
                    linear-gradient(135deg, transparent 50%, #64748b 50%, #64748b 60%, transparent 60%);
        background-size: 8px 8px;
        background-position: bottom right, bottom 4px right 4px;
        background-repeat: no-repeat;
        cursor: ns-resize;
    }
    /* Custom colors for One Dark theme adjustments */
    .ace-one-dark .ace_gutter {
        background: rgba(30, 41, 59, 0.8);
        color: #64748b;
    }
    .ace-one-dark .ace_gutter-active-line {
        background: rgba(30, 41, 59, 1);
    }
    .ace-one-dark {
        background: rgba(15, 23, 42, 0.95);
    }
    .ace-one-dark .ace_cursor {
        color: #10b981;
    }
    .ace-one-dark .ace_marker-layer .ace_selection {
        background: rgba(16, 185, 129, 0.2);
    }
</style>

<script>
function queryPage() {
    return {
        selectedJobId: '{{ selected_job_id or '' }}',
        sql: `{{ sql | default('SELECT * FROM redis_commands LIMIT 10', true) | e }}`,
        runningQuery: null,
        editor: null,
        
        init() {
            // Initialize Ace editor when component mounts
            this.$nextTick(() => {
                if (typeof ace !== 'undefined') {
                    this.initAceEditor();
                }
            });
        },
        
        initAceEditor() {
            const editorEl = document.getElementById('sql-editor');
            if (!editorEl || this.editor) return;
            
            this.editor = ace.edit('sql-editor');
            this.editor.setTheme('ace/theme/one_dark');
            this.editor.session.setMode('ace/mode/sql');
            this.editor.setValue(this.sql, -1);
            this.editor.setOptions({
                fontSize: '14px',
                showPrintMargin: false,
                tabSize: 2,
                useSoftTabs: true,
                wrap: true,
                highlightActiveLine: true,
                showGutter: true
            });
            
            // Sync editor content to hidden input
            const hiddenInput = document.getElementById('sql-hidden');
            this.editor.session.on('change', () => {
                this.sql = this.editor.getValue();
                if (hiddenInput) hiddenInput.value = this.sql;
            });
            
            // Ctrl+Enter to submit
            this.editor.commands.addCommand({
                name: 'submitQuery',
                bindKey: { win: 'Ctrl-Enter', mac: 'Cmd-Enter' },
                exec: () => {
                    const form = document.getElementById('sql-form');
                    if (form && this.selectedJobId) form.submit();
                }
            });
            
            // Shift+Alt+F to format
            this.editor.commands.addCommand({
                name: 'formatSQL',
                bindKey: { win: 'Shift-Alt-F', mac: 'Shift-Option-F' },
                exec: () => this.formatSQL()
            });
            
            // Resize observer to update editor when container is resized
            const container = document.getElementById('sql-editor-container');
            if (container && typeof ResizeObserver !== 'undefined') {
                const resizeObserver = new ResizeObserver(() => {
                    this.editor.resize();
                });
                resizeObserver.observe(container);
            }
        },
        
        formatSQL() {
            if (!this.editor || typeof sqlFormatter === 'undefined') return;
            
            try {
                const currentSQL = this.editor.getValue();
                const formatted = sqlFormatter.format(currentSQL, {
                    language: 'sqlite',
                    tabWidth: 2,
                    useTabs: false,
                    keywordCase: 'upper',
                    linesBetweenQueries: 2
                });
                this.editor.setValue(formatted, -1);
                this.editor.clearSelection();
            } catch (e) {
                console.warn('SQL formatting failed:', e);
            }
        },
        
        runQuery(name, form) {
            if (!this.selectedJobId) {
                alert('Please select a job first');
                return;
            }
            this.runningQuery = name;
            setTimeout(() => form.submit(), 100);
        }
    }
}
</script>

<div class="space-y-6" x-data="queryPage()" x-init="init()">
    <!-- Breadcrumb -->
    <nav class="flex items-center gap-2 text-sm">
        <a href="/jobs" class="text-slate-400 hover:text-white transition-colors">Jobs</a>
        <template x-if="selectedJobId">
            <span class="flex items-center gap-2">
                <svg class="w-4 h-4 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
                <a :href="'/jobs/' + selectedJobId" class="text-slate-400 hover:text-white transition-colors" x-text="document.querySelector('select option:checked')?.textContent?.split('(')[0]?.trim() || 'Job'"></a>
            </span>
        </template>
        <svg class="w-4 h-4 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
        <span class="text-white">SQL Query</span>
    </nav>

    <!-- Header -->
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-white flex items-center gap-3">
                <svg class="w-6 h-6 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
                SQL Query
            </h1>
            <p class="text-slate-400 text-sm mt-1">
                Run custom SQL queries on captured Redis/Valkey commands
            </p>
        </div>
        
        <!-- Navigation (when job selected) -->
        <div x-show="selectedJobId" x-transition class="flex flex-wrap items-center gap-2">
            <a :href="'/jobs/' + selectedJobId" class="px-3 py-1.5 text-sm bg-slate-800 hover:bg-slate-700 rounded-lg transition-colors text-slate-300 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="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" /></svg>
                Overview
            </a>
            <a :href="'/jobs/' + selectedJobId + '/timeline'" class="px-3 py-1.5 text-sm bg-slate-800 hover:bg-slate-700 rounded-lg transition-colors text-slate-300 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 7h8m0 0v8m0-8l-8 8-4-4-6 6" /></svg>
                Timeline
            </a>
            <a :href="'/jobs/' + selectedJobId + '/shard-distribution'" class="px-3 py-1.5 text-sm bg-slate-800 hover:bg-slate-700 rounded-lg transition-colors text-slate-300 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="M4 7v10c0 2 1 3 3 3h10c2 0 3-1 3-3V7c0-2-1-3-3-3H7C5 4 4 5 4 7zm0 5h16" /></svg>
                Shards
            </a>
            <a :href="'/jobs/' + selectedJobId + '/analysis'" class="px-3 py-1.5 text-sm bg-slate-800 hover:bg-slate-700 rounded-lg transition-colors text-slate-300 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="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>
            <span class="px-3 py-1.5 text-sm bg-emerald-600 rounded-lg text-white 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="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
                SQL
            </span>
            
            <!-- Share Button -->
            <div class="relative ml-2" x-data="{ showTooltip: false, copied: false }">
                <button @click="UrlState.copyUrl(true).then(() => { copied = true; setTimeout(() => copied = false, 2000); })"
                        @mouseenter="showTooltip = true" 
                        @mouseleave="showTooltip = false"
                        class="px-3 py-1.5 text-sm bg-indigo-600 hover:bg-indigo-500 rounded-lg text-white flex items-center gap-1.5 transition-colors">
                    <svg x-show="!copied" 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="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
                    </svg>
                    <svg x-show="copied" class="w-4 h-4 text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                    <span x-text="copied ? 'Copied!' : 'Share'"></span>
                </button>
                <div x-show="showTooltip && !copied" 
                     x-transition
                     class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-slate-800 text-xs text-slate-300 rounded-lg whitespace-nowrap z-50 shadow-lg border border-slate-700">
                    Share this page with current job selection
                    <div class="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-slate-800"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Job Selector -->
    <div class="flex items-center gap-3">
        <label class="text-sm text-slate-400">Select Job:</label>
        <select x-model="selectedJobId" 
                class="px-3 py-2 bg-slate-800/50 border border-slate-700/50 rounded-lg text-white text-sm focus:outline-none focus:border-emerald-500/50 min-w-[320px]"
                :class="!selectedJobId && 'border-amber-500/50'">
            <option value="">-- Select a Job --</option>
            {% for job in jobs %}
            <option value="{{ job.id }}" {% if selected_job_id == job.id %}selected{% endif %}>
                {{ job.name or job.replication_group_id }} (<span data-utc="{{ job.created_at.isoformat() }}" data-format="short">{{ job.created_at.strftime('%m/%d %H:%M') }}</span>) - {{ job.total_commands|format_number }} cmds
            </option>
            {% endfor %}
        </select>
    </div>
    
    <!-- No Job Selected Warning -->
    <div x-show="!selectedJobId" class="glass-card rounded-xl p-4 border-l-4 border-amber-500 bg-amber-500/10">
        <div class="flex items-center gap-3">
            <svg class="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
            <p class="text-amber-200 text-sm">Select a job from the dropdown above to run queries. Each job has its own database.</p>
        </div>
    </div>

    <!-- Quick Query Buttons -->
    <div class="glass-card rounded-xl p-4" x-show="selectedJobId" x-transition>
        <div class="flex items-center justify-between mb-3">
            <h3 class="text-sm font-medium text-slate-400">Quick Queries</h3>
            <span class="text-xs text-slate-500">Click to run instantly</span>
        </div>
        <div class="flex flex-wrap gap-2">
            <form method="GET" class="inline" x-ref="form1" @submit.prevent="runQuery('patterns', $refs.form1)">
                <input type="hidden" name="job_id" :value="selectedJobId">
                <input type="hidden" name="sql" value="SELECT key_pattern, COUNT(*) as cnt FROM redis_commands WHERE key_pattern IS NOT NULL GROUP BY key_pattern ORDER BY cnt DESC LIMIT 20">
                <button type="submit" class="px-3 py-1.5 rounded-lg bg-slate-700/50 text-slate-300 hover:bg-slate-700 hover:text-white transition-all text-sm flex items-center gap-1.5 min-w-[100px] justify-center" :class="runningQuery === 'patterns' && 'bg-emerald-500/20 text-emerald-400'">
                    <svg x-show="runningQuery !== 'patterns'" class="w-3.5 h-3.5 text-emerald-400" 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" />
                    </svg>
                    <svg x-show="runningQuery === 'patterns'" x-cloak class="w-3.5 h-3.5 text-emerald-400 animate-spin" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    Key Patterns
                </button>
            </form>
            
            <form method="GET" class="inline" x-ref="form2" @submit.prevent="runQuery('shard', $refs.form2)">
                <input type="hidden" name="job_id" :value="selectedJobId">
                <input type="hidden" name="sql" value="SELECT shard_name, COUNT(*) as cnt FROM redis_commands GROUP BY shard_name ORDER BY cnt DESC">
                <button type="submit" class="px-3 py-1.5 rounded-lg bg-slate-700/50 text-slate-300 hover:bg-slate-700 hover:text-white transition-all text-sm flex items-center gap-1.5 min-w-[100px] justify-center" :class="runningQuery === 'shard' && 'bg-emerald-500/20 text-emerald-400'">
                    <svg x-show="runningQuery !== 'shard'" class="w-3.5 h-3.5 text-emerald-400" 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" />
                    </svg>
                    <svg x-show="runningQuery === 'shard'" x-cloak class="w-3.5 h-3.5 text-emerald-400 animate-spin" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    Per Shard
                </button>
            </form>
            
            <form method="GET" class="inline" x-ref="form3" @submit.prevent="runQuery('topkeys', $refs.form3)">
                <input type="hidden" name="job_id" :value="selectedJobId">
                <input type="hidden" name="sql" value="SELECT key, COUNT(*) as cnt, MAX(key_size_bytes) as size FROM redis_commands WHERE key IS NOT NULL GROUP BY key ORDER BY cnt DESC LIMIT 30">
                <button type="submit" class="px-3 py-1.5 rounded-lg bg-slate-700/50 text-slate-300 hover:bg-slate-700 hover:text-white transition-all text-sm flex items-center gap-1.5 min-w-[100px] justify-center" :class="runningQuery === 'topkeys' && 'bg-emerald-500/20 text-emerald-400'">
                    <svg x-show="runningQuery !== 'topkeys'" class="w-3.5 h-3.5 text-emerald-400" 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" />
                    </svg>
                    <svg x-show="runningQuery === 'topkeys'" x-cloak class="w-3.5 h-3.5 text-emerald-400 animate-spin" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    Top Keys
                </button>
            </form>
            
            <form method="GET" class="inline" x-ref="form4" @submit.prevent="runQuery('large', $refs.form4)">
                <input type="hidden" name="job_id" :value="selectedJobId">
                <input type="hidden" name="sql" value="SELECT key, key_size_bytes, shard_name FROM redis_commands WHERE key_size_bytes IS NOT NULL ORDER BY key_size_bytes DESC LIMIT 20">
                <button type="submit" class="px-3 py-1.5 rounded-lg bg-slate-700/50 text-slate-300 hover:bg-slate-700 hover:text-white transition-all text-sm flex items-center gap-1.5 min-w-[100px] justify-center" :class="runningQuery === 'large' && 'bg-emerald-500/20 text-emerald-400'">
                    <svg x-show="runningQuery !== 'large'" class="w-3.5 h-3.5 text-emerald-400" 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" />
                    </svg>
                    <svg x-show="runningQuery === 'large'" x-cloak class="w-3.5 h-3.5 text-emerald-400 animate-spin" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    Large Keys
                </button>
            </form>
            
            <form method="GET" class="inline" x-ref="form5" @submit.prevent="runQuery('commands', $refs.form5)">
                <input type="hidden" name="job_id" :value="selectedJobId">
                <input type="hidden" name="sql" value="SELECT command, COUNT(*) as cnt FROM redis_commands GROUP BY command ORDER BY cnt DESC">
                <button type="submit" class="px-3 py-1.5 rounded-lg bg-slate-700/50 text-slate-300 hover:bg-slate-700 hover:text-white transition-all text-sm flex items-center gap-1.5 min-w-[100px] justify-center" :class="runningQuery === 'commands' && 'bg-emerald-500/20 text-emerald-400'">
                    <svg x-show="runningQuery !== 'commands'" class="w-3.5 h-3.5 text-emerald-400" 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" />
                    </svg>
                    <svg x-show="runningQuery === 'commands'" x-cloak class="w-3.5 h-3.5 text-emerald-400 animate-spin" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    Commands
                </button>
            </form>
            
            <form method="GET" class="inline" x-ref="form6" @submit.prevent="runQuery('clients', $refs.form6)">
                <input type="hidden" name="job_id" :value="selectedJobId">
                <input type="hidden" name="sql" value="SELECT client_ip, COUNT(*) as cnt FROM redis_commands WHERE client_ip IS NOT NULL GROUP BY client_ip ORDER BY cnt DESC LIMIT 15">
                <button type="submit" class="px-3 py-1.5 rounded-lg bg-slate-700/50 text-slate-300 hover:bg-slate-700 hover:text-white transition-all text-sm flex items-center gap-1.5 min-w-[100px] justify-center" :class="runningQuery === 'clients' && 'bg-emerald-500/20 text-emerald-400'">
                    <svg x-show="runningQuery !== 'clients'" class="w-3.5 h-3.5 text-emerald-400" 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" />
                    </svg>
                    <svg x-show="runningQuery === 'clients'" x-cloak class="w-3.5 h-3.5 text-emerald-400 animate-spin" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    Client IPs
                </button>
            </form>
            
            <form method="GET" class="inline" x-ref="form7" @submit.prevent="runQuery('recent', $refs.form7)">
                <input type="hidden" name="job_id" :value="selectedJobId">
                <input type="hidden" name="sql" value="SELECT datetime_utc, command, key, shard_name, client_ip FROM redis_commands ORDER BY timestamp DESC LIMIT 50">
                <button type="submit" class="px-3 py-1.5 rounded-lg bg-slate-700/50 text-slate-300 hover:bg-slate-700 hover:text-white transition-all text-sm flex items-center gap-1.5 min-w-[100px] justify-center" :class="runningQuery === 'recent' && 'bg-emerald-500/20 text-emerald-400'">
                    <svg x-show="runningQuery !== 'recent'" class="w-3.5 h-3.5 text-emerald-400" 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" />
                    </svg>
                    <svg x-show="runningQuery === 'recent'" x-cloak class="w-3.5 h-3.5 text-emerald-400 animate-spin" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    Recent
                </button>
            </form>
        </div>
    </div>

    <!-- SQL Editor -->
    <form method="GET" id="sql-form" class="space-y-4" x-show="selectedJobId" x-transition x-init="$nextTick(() => initAceEditor())">
        <input type="hidden" name="job_id" :value="selectedJobId">
        <input type="hidden" name="sql" id="sql-hidden" :value="sql">
        <div class="glass-card rounded-xl p-6">
            <div class="flex items-center justify-between mb-3">
                <label class="block text-sm font-medium text-slate-300 flex items-center gap-2">
                    <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                    </svg>
                    SQL Editor
                </label>
                <div class="text-xs text-slate-500 flex items-center gap-3">
                    <span>Tables:</span>
                    <code class="px-2 py-0.5 bg-slate-700/50 rounded text-cyan-400">redis_commands</code>
                    <code class="px-2 py-0.5 bg-slate-700/50 rounded text-cyan-400">key_size_cache</code>
                </div>
            </div>
            
            <!-- Ace Editor Container (resizable) -->
            <div id="sql-editor-container" class="rounded-xl border border-slate-700/50 focus-within:border-emerald-500/50">
                <div id="sql-editor"></div>
            </div>
            <p class="text-xs text-slate-600 mt-1">Drag bottom-right corner to resize</p>
            
            <div class="flex items-center justify-between mt-3">
                <div class="flex items-center gap-4">
                    <p class="text-xs text-slate-500">
                        Only SELECT queries • 
                        <kbd class="px-1.5 py-0.5 bg-slate-700 rounded text-slate-400">Ctrl</kbd>+<kbd class="px-1.5 py-0.5 bg-slate-700 rounded text-slate-400">Enter</kbd> run • 
                        <kbd class="px-1.5 py-0.5 bg-slate-700 rounded text-slate-400">Shift</kbd>+<kbd class="px-1.5 py-0.5 bg-slate-700 rounded text-slate-400">Alt</kbd>+<kbd class="px-1.5 py-0.5 bg-slate-700 rounded text-slate-400">F</kbd> format
                    </p>
                </div>
                <div class="flex items-center gap-2">
                    <button type="button" @click="formatSQL()" class="px-4 py-2 rounded-lg bg-slate-700 text-slate-300 font-medium hover:bg-slate-600 hover:text-white transition-colors flex items-center gap-2">
                        <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 6h16M4 12h16m-7 6h7" />
                        </svg>
                        Format
                    </button>
                    <button type="submit" class="px-5 py-2 rounded-lg bg-emerald-500 text-white font-medium hover:bg-emerald-600 transition-colors flex items-center gap-2 shadow-lg shadow-emerald-500/20">
                        <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>
                        Run Query
                    </button>
                </div>
            </div>
        </div>
    </form>

    {% if error %}
    <div class="glass-card rounded-xl p-4 border-l-4 border-redis-500 bg-redis-500/10">
        <div class="flex items-start gap-3">
            <svg class="w-5 h-5 text-redis-400 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <div>
                <h4 class="text-redis-300 font-medium">Query Error</h4>
                <p class="text-redis-200 text-sm font-mono mt-1">{{ error }}</p>
            </div>
        </div>
    </div>
    {% endif %}

    {% if results is not none %}
    <div class="glass-card rounded-xl overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-700/50 flex items-center justify-between">
            <h3 class="text-lg font-semibold text-white">Results</h3>
            <span class="text-sm text-slate-500">{{ results|length }} rows</span>
        </div>
        
        {% if results %}
        <div class="overflow-x-auto max-h-[500px] overflow-y-auto">
            <table class="w-full">
                <thead class="sticky top-0 bg-slate-900">
                    <tr class="border-b border-slate-700/50 text-left text-sm text-slate-400">
                        {% for col in columns %}
                        <th class="px-6 py-3 font-medium whitespace-nowrap">{{ col }}</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for row in results %}
                    <tr class="border-b border-slate-800/50 hover:bg-slate-800/30 text-sm">
                        {% for col in columns %}
                        <td class="px-6 py-3 font-mono text-slate-300 max-w-xs truncate" title="{{ row[col] }}">
                            {% if row[col] is none %}
                            <span class="text-slate-600">NULL</span>
                            {% else %}
                            {{ row[col] }}
                            {% endif %}
                        </td>
                        {% endfor %}
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="p-8 text-center text-slate-400">Query returned no results</div>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}