{% extends "fusion_analytics/base.html" %}
{% load static %}

{% block title %}Query Builder — Fusion Analytics{% endblock %}

{% block extra_head %}
<style>[x-cloak] { display: none !important; }</style>
{% endblock %}

{% block content %}
{{ samples|json_script:"fa-sample-queries" }}
<div x-data="queryBuilder()"
     x-init="init()"
     x-cloak
     @keydown.meta.enter.window.prevent="if (canRun() && !running) runQuery()"
     @keydown.ctrl.enter.window.prevent="if (canRun() && !running) runQuery()"
     @keydown.meta.s.window.prevent="if (canRun()) openSave()"
     @keydown.ctrl.s.window.prevent="if (canRun()) openSave()"
     @keydown.window="onGlobalKeydown($event)"
     class="flex h-screen flex-col"
     data-analytics-base="{% url 'fusion_analytics:query_builder' %}">

    <header class="flex items-center justify-between border-b border-slate-200 bg-white px-4 py-2 shrink-0">
        <div class="flex items-center gap-3">
            <span class="text-base font-semibold tracking-tight text-slate-900">Fusion Analytics</span>
            <span x-show="schema" class="fa-pill-accent" x-text="schema && schema.verbose_name_plural ? schema.verbose_name_plural : ''"></span>
        </div>
        <div class="flex items-center gap-2">
            <span x-show="errorMsg" class="text-xs text-rose-600 max-w-md truncate" x-text="errorMsg"></span>
            <!-- Non-blocking warning (e.g. a now-invalid sort cleared on load). Amber via
                 inline style because the vendored Tailwind build ships no amber utilities. -->
            <span x-show="warningMsg" class="text-xs max-w-md truncate" style="color:#b45309" x-text="warningMsg"></span>
            <button @click="runQuery()" class="fa-btn fa-btn-primary" :disabled="!canRun() || running" title="Run query (⌘/Ctrl + ↵)">
                <span x-text="running ? 'Running…' : 'Run Query'"></span>
            </button>
            <button @click="downloadCsv()" class="fa-btn fa-btn-secondary" :disabled="!hasResults()" title="Download CSV">CSV</button>
            <button @click="copyLink()" class="fa-btn fa-btn-secondary" :disabled="!selectedModel" title="Copy shareable link">
                <span x-text="_linkCopied ? 'Copied!' : 'Copy link'"></span>
            </button>
            <button @click="openSave()" class="fa-btn fa-btn-secondary" :disabled="!canRun()" title="Save query (⌘/Ctrl + S)">Save</button>
            <button @click="openLoad()" class="fa-btn fa-btn-secondary">Load</button>

            <!-- Keyboard-shortcut help popover (discoverability for the four bindings). -->
            <div class="relative" x-data="{ helpOpen: false }"
                 @keydown.escape.window="helpOpen = false"
                 @click.away="helpOpen = false">
                <button type="button" @click="helpOpen = !helpOpen"
                        class="fa-btn fa-btn-secondary"
                        title="Keyboard shortcuts"
                        aria-label="Keyboard shortcuts"
                        :aria-expanded="helpOpen">?</button>
                <div x-show="helpOpen" x-cloak
                     data-shortcut-help
                     class="absolute z-50 mt-1 w-80 rounded-md border border-slate-200 bg-white p-3 text-xs shadow"
                     style="right: 0; top: 100%;">
                    <div class="mb-2 font-semibold text-slate-900">Keyboard shortcuts</div>
                    <ul class="space-y-1.5 text-slate-600">
                        <li class="flex items-center justify-between gap-2">
                            <span>Run query</span>
                            <span class="font-mono text-slate-900">⌘/Ctrl + ↵</span>
                        </li>
                        <li class="flex items-center justify-between gap-2">
                            <span>Save query</span>
                            <span class="font-mono text-slate-900">⌘/Ctrl + S</span>
                        </li>
                        <li class="flex items-center justify-between gap-2">
                            <span>Close dialog</span>
                            <span class="font-mono text-slate-900">Esc</span>
                        </li>
                        <li class="flex items-center justify-between gap-2">
                            <span>Search fields</span>
                            <span class="font-mono text-slate-900">/</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </header>

    <div class="flex flex-1 min-h-0">
        <!-- Left rail -->
        <aside class="flex w-80 shrink-0 flex-col border-r border-slate-200 bg-white overflow-y-auto">

            <section class="border-b border-slate-200">
                <div class="fa-section-header">Data Source</div>
                <div class="px-3 pb-3">
                    <select x-model="selectedModel" @change="loadSchema()" class="fa-select">
                        <option value="">Select a model…</option>
                        {% for group in model_groups %}
                        <optgroup label="{{ group.app_verbose_name }}">
                            {% for m in group.models %}
                            <option value="{{ m.label }}">{{ m.verbose_name_plural|title }}</option>
                            {% endfor %}
                        </optgroup>
                        {% endfor %}
                    </select>
                </div>
            </section>

            <template x-if="schema">
                <div>

                    <!-- Field Tree -->
                    <section class="border-b border-slate-200">
                        <div class="fa-section-header">
                            <button @click="toggleSection('fields')" class="flex items-center gap-2 -ml-1 px-1 py-0.5 rounded hover:bg-slate-100">
                                <span class="text-slate-400 w-3 inline-block" x-text="sectionCollapsed.fields ? '▸' : '▾'"></span>
                                Fields
                                <span class="fa-pill" x-text="selectedFields.length"></span>
                            </button>
                            <button @click="selectedFields = []" class="fa-btn fa-btn-ghost fa-btn-sm" x-show="selectedFields.length">Clear</button>
                        </div>
                        <div x-show="!sectionCollapsed.fields">
                            <div x-show="selectedFields.length > 0" class="px-3 pb-2">
                                <div class="text-[10px] font-semibold uppercase tracking-wider text-slate-400 mb-1">Selected (drag to reorder)</div>
                                <div x-ref="selectedFieldsList" class="flex flex-wrap gap-1">
                                    <template x-for="path in selectedFields" :key="path">
                                        <div class="inline-flex items-center gap-1 rounded bg-accent-50 text-accent-700 text-xs px-1.5 py-0.5 ring-1 ring-accent-200">
                                            <span class="drag-handle cursor-grab text-accent-400 select-none" aria-hidden="true">⋮⋮</span>
                                            <span x-text="fieldLabel(path)"></span>
                                            <button @click="selectedFields = selectedFields.filter(p => p !== path)" class="text-accent-400 hover:text-accent-700" :aria-label="'Remove ' + path">×</button>
                                        </div>
                                    </template>
                                </div>
                            </div>
                            <div class="px-3">
                                <input type="text" x-ref="fieldSearchInput" x-model="fieldSearch" placeholder="Search fields…" class="fa-input mb-2">
                            </div>
                            <div class="px-2 pb-3 space-y-0.5">
                                <template x-for="node in visibleNodes()" :key="node.uid">
                                    <div :style="`padding-left:${node.depth * 14}px`">
                                        <template x-if="node.kind === 'relation'">
                                            <button @click="toggleExpanded(node.path)" class="fa-tree-row w-full text-left">
                                                <span class="text-slate-400 w-3 inline-block" x-text="isExpanded(node.path) ? '▾' : '▸'"></span>
                                                <span class="text-accent-600 font-medium" x-text="node.label"></span>
                                                <span class="fa-pill ml-auto" x-text="node.fieldCount + ' fields'"></span>
                                            </button>
                                        </template>
                                        <template x-if="node.kind === 'field'">
                                            <label class="fa-tree-row cursor-pointer">
                                                <span class="w-3"></span>
                                                <input type="checkbox" :value="node.path" x-model="selectedFields" class="fa-checkbox">
                                                <span class="font-mono text-[10px] uppercase text-slate-400 w-7 shrink-0" x-text="node.typeIcon"></span>
                                                <span class="text-slate-700 truncate" x-text="node.label"></span>
                                            </label>
                                        </template>
                                    </div>
                                </template>
                                <div x-show="visibleNodes().length === 0" class="px-3 py-4 text-xs text-slate-400 text-center">No fields match.</div>
                            </div>
                        </div>
                    </section>

                    <!-- Filters -->
                    <section class="border-b border-slate-200">
                        <div class="fa-section-header">
                            <div class="flex items-center gap-2">
                                <button @click="toggleSection('filters')" class="flex items-center gap-2 -ml-1 px-1 py-0.5 rounded hover:bg-slate-100">
                                    <span class="text-slate-400 w-3 inline-block" x-text="sectionCollapsed.filters ? '▸' : '▾'"></span>
                                    Filters
                                    <span class="fa-pill" x-text="filters.length"></span>
                                </button>
                                <div class="flex rounded-md ring-1 ring-slate-300 bg-white" x-show="filters.length > 1 && !sectionCollapsed.filters">
                                    <button @click="filterConnector = 'and'" :class="filterConnector === 'and' ? 'bg-accent-50 text-accent-700' : 'text-slate-500 hover:text-slate-700'" class="px-2 py-0.5 text-[10px] font-semibold rounded-l-md">AND</button>
                                    <button @click="filterConnector = 'or'" :class="filterConnector === 'or' ? 'bg-accent-50 text-accent-700' : 'text-slate-500 hover:text-slate-700'" class="px-2 py-0.5 text-[10px] font-semibold rounded-r-md">OR</button>
                                </div>
                            </div>
                            <button @click="addFilter()" class="fa-btn fa-btn-ghost fa-btn-sm">+ Add</button>
                        </div>
                        <div x-show="!sectionCollapsed.filters" class="px-3 pb-3 space-y-2">
                            <template x-for="(filter, idx) in filters" :key="filter._uid">
                                <div class="space-y-1.5 rounded-md border border-slate-200 p-2">
                                    <div class="flex items-center gap-1.5">
                                        <select x-model="filter.field" @change="onFilterFieldChange(filter)" class="fa-select flex-1 min-w-0">
                                            <option value="">Field…</option>
                                            <template x-for="f in pickableFields()" :key="f.path">
                                                <option :value="f.path" x-text="f.label"></option>
                                            </template>
                                        </select>
                                        <button @click="filters.splice(idx, 1)" class="fa-btn fa-btn-danger fa-btn-icon" title="Remove filter">×</button>
                                    </div>
                                    <div class="flex items-center gap-1.5" x-show="filter.field">
                                        <select x-model="filter.operator" @change="onFilterOperatorChange(filter)" class="fa-select w-28 shrink-0">
                                            <template x-for="op in getOperators(filter.field)" :key="op">
                                                <option :value="op" x-text="opLabel(op)"></option>
                                            </template>
                                        </select>
                                        <div class="flex-1 min-w-0">
                                            <template x-if="filterValueWidget(filter) === 'text'">
                                                <input type="text" x-model="filter.value" class="fa-input">
                                            </template>
                                            <template x-if="filterValueWidget(filter) === 'number'">
                                                <input type="number" step="any" x-model="filter.value" class="fa-input">
                                            </template>
                                            <template x-if="filterValueWidget(filter) === 'date' || filterValueWidget(filter) === 'datetime'">
                                                <div class="flex items-center gap-1.5 w-full">
                                                    <template x-if="canUsePresets(filter)">
                                                        <select :value="filterPresetKey(filter)"
                                                                @change="setFilterPreset(filter, $event.target.value)"
                                                                class="fa-select w-32 shrink-0">
                                                            <option value="">Specific date</option>
                                                            <template x-for="p in datePresets()" :key="p.key">
                                                                <option :value="p.key" x-text="p.label"></option>
                                                            </template>
                                                        </select>
                                                    </template>
                                                    <template x-if="!filterPresetKey(filter)">
                                                        <input :type="filterValueWidget(filter) === 'date' ? 'date' : 'datetime-local'"
                                                               x-model="filter.value"
                                                               class="fa-input flex-1">
                                                    </template>
                                                </div>
                                            </template>
                                            <template x-if="filterValueWidget(filter) === 'boolean'">
                                                <select x-model="filter.value" class="fa-select">
                                                    <option value="true">True</option>
                                                    <option value="false">False</option>
                                                </select>
                                            </template>
                                            <template x-if="filterValueWidget(filter) === 'select'">
                                                <select x-model="filter.value" class="fa-select">
                                                    <option value="">Choose…</option>
                                                    <template x-for="c in filterChoices(filter)" :key="c.value">
                                                        <option :value="c.value" x-text="c.label"></option>
                                                    </template>
                                                </select>
                                            </template>
                                            <template x-if="filterValueWidget(filter) === 'in'">
                                                <input type="text" x-model="filter.value" placeholder="Comma-separated values" class="fa-input">
                                            </template>
                                            <template x-if="filterValueWidget(filter) === 'range'">
                                                <div class="flex items-center gap-1.5 w-full">
                                                    <input :type="rangeInputType(filter)" step="any" :value="getRange(filter)._lo" @input="getRange(filter)._lo = $event.target.value" class="fa-input flex-1">
                                                    <span class="text-xs text-slate-500 shrink-0">to</span>
                                                    <input :type="rangeInputType(filter)" step="any" :value="getRange(filter)._hi" @input="getRange(filter)._hi = $event.target.value" class="fa-input flex-1">
                                                </div>
                                            </template>
                                            <template x-if="filterValueWidget(filter) === 'isnull'">
                                                <select x-model="filter.value" class="fa-select">
                                                    <option value="true">Yes (is empty)</option>
                                                    <option value="false">No (is not empty)</option>
                                                </select>
                                            </template>
                                        </div>
                                    </div>
                                </div>
                            </template>
                            <div x-show="filters.length === 0" class="text-xs text-slate-400">No filters. The query returns all rows.</div>
                        </div>
                    </section>

                    <!-- Group By -->
                    <section class="border-b border-slate-200">
                        <div class="fa-section-header">
                            <button @click="toggleSection('groupBy')" class="flex items-center gap-2 -ml-1 px-1 py-0.5 rounded hover:bg-slate-100">
                                <span class="text-slate-400 w-3 inline-block" x-text="sectionCollapsed.groupBy ? '▸' : '▾'"></span>
                                Group By
                                <span class="fa-pill" x-text="groupBy.length"></span>
                            </button>
                            <button @click="addGroupBy()" class="fa-btn fa-btn-ghost fa-btn-sm">+ Add</button>
                        </div>
                        <div x-show="!sectionCollapsed.groupBy" class="px-3 pb-3 space-y-1.5">
                            <div x-ref="groupByList" class="space-y-1.5">
                                <template x-for="(g, idx) in groupBy" :key="g._uid">
                                    <div class="flex items-center gap-1.5">
                                        <span class="drag-handle cursor-grab text-slate-300 select-none px-1" aria-hidden="true">⋮⋮</span>
                                        <select x-model="g.field" @change="onGroupByFieldChange(g)" class="fa-select flex-1">
                                            <option value="">Field…</option>
                                            <template x-for="f in pickableFields()" :key="f.path">
                                                <option :value="f.path" x-text="f.label"></option>
                                            </template>
                                        </select>
                                        <select x-model="g.bucket"
                                                x-show="flat[g.field] && (flat[g.field].type === 'date' || flat[g.field].type === 'datetime')"
                                                class="fa-select w-24 shrink-0">
                                            <option value="day">Day</option>
                                            <option value="week">Week</option>
                                            <option value="month">Month</option>
                                            <option value="quarter">Quarter</option>
                                            <option value="year">Year</option>
                                        </select>
                                        <button @click="groupBy.splice(idx, 1)" class="fa-btn fa-btn-danger fa-btn-icon">×</button>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </section>

                    <!-- Aggregations -->
                    <section class="border-b border-slate-200">
                        <div class="fa-section-header">
                            <button @click="toggleSection('aggregations')" class="flex items-center gap-2 -ml-1 px-1 py-0.5 rounded hover:bg-slate-100">
                                <span class="text-slate-400 w-3 inline-block" x-text="sectionCollapsed.aggregations ? '▸' : '▾'"></span>
                                Aggregations
                                <span class="fa-pill" x-text="aggregations.length"></span>
                            </button>
                            <button @click="addAggregation()" class="fa-btn fa-btn-ghost fa-btn-sm">+ Add</button>
                        </div>
                        <div x-show="!sectionCollapsed.aggregations" class="px-3 pb-3 space-y-2">
                            <template x-for="(agg, idx) in aggregations" :key="agg._uid">
                                <div class="space-y-1.5 rounded-md border border-slate-200 p-2">
                                    <div class="flex items-center gap-1.5">
                                        <select x-model="agg.function" class="fa-select w-24 shrink-0">
                                            <template x-for="fn in getAggregations(agg.field)" :key="fn">
                                                <option :value="fn" x-text="fn.toUpperCase()"></option>
                                            </template>
                                        </select>
                                        <select x-model="agg.field" @change="onAggregationFieldChange(agg)" class="fa-select flex-1 min-w-0">
                                            <option value="">Field…</option>
                                            <template x-for="f in pickableFields()" :key="f.path">
                                                <option :value="f.path" x-text="f.label"></option>
                                            </template>
                                        </select>
                                        <button @click="aggregations.splice(idx, 1)" class="fa-btn fa-btn-danger fa-btn-icon">×</button>
                                    </div>
                                    <div class="flex items-center gap-2 text-xs">
                                        <label class="flex items-center gap-1 text-slate-600" x-show="agg.function === 'count'">
                                            <input type="checkbox" x-model="agg.distinct" class="fa-checkbox">
                                            Distinct
                                        </label>
                                        <button @click="agg._having = !agg._having" class="fa-btn fa-btn-ghost fa-btn-sm ml-auto">
                                            <span x-text="agg._having ? '− Remove having' : '+ Add having'"></span>
                                        </button>
                                    </div>
                                    <div x-show="agg._having" class="flex items-center gap-1.5 pl-3 border-l-2 border-accent-300">
                                        <span class="text-[11px] text-slate-500 shrink-0">where result</span>
                                        <select x-model="agg._havingOp" class="fa-select w-16 shrink-0">
                                            <option value="exact">=</option>
                                            <option value="gt">&gt;</option>
                                            <option value="gte">≥</option>
                                            <option value="lt">&lt;</option>
                                            <option value="lte">≤</option>
                                        </select>
                                        <input type="number" step="any" x-model="agg._havingValue" class="fa-input flex-1">
                                    </div>
                                </div>
                            </template>
                        </div>
                    </section>

                    <!-- Sort & Limit -->
                    <section>
                        <div class="fa-section-header">
                            <button @click="toggleSection('sortLimit')" class="flex items-center gap-2 -ml-1 px-1 py-0.5 rounded hover:bg-slate-100">
                                <span class="text-slate-400 w-3 inline-block" x-text="sectionCollapsed.sortLimit ? '▸' : '▾'"></span>
                                Sort &amp; Limit
                            </button>
                        </div>
                        <div x-show="!sectionCollapsed.sortLimit" class="px-3 pb-3 space-y-2">
                            <div>
                                <label class="block text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-1">Sort By</label>
                                <div x-ref="orderByListEl" class="space-y-1 mb-1">
                                    <template x-for="(s, idx) in orderByList" :key="s._uid">
                                        <div class="flex items-center gap-1.5 rounded-md border border-slate-200 bg-white px-1.5 py-1">
                                            <span class="drag-handle cursor-grab text-slate-300 select-none" aria-hidden="true">⋮⋮</span>
                                            <span class="flex-1 text-xs text-slate-700 truncate" x-text="s.field"></span>
                                            <button @click="toggleSortDir(idx)" class="text-xs font-mono text-slate-500 hover:text-slate-900 px-1" :title="s.dir === 'asc' ? 'Ascending' : 'Descending'">
                                                <span x-text="s.dir === 'asc' ? '↑' : '↓'"></span>
                                            </button>
                                            <button @click="removeSort(idx)" class="text-slate-300 hover:text-rose-600" :aria-label="'Remove sort on ' + s.field">×</button>
                                        </div>
                                    </template>
                                </div>
                                <select @change="addSort($event.target.value); $event.target.value=''" class="fa-select">
                                    <option value="">+ Add sort column…</option>
                                    <template x-for="col in availableSortColumns()" :key="'sort-add-'+col">
                                        <option :value="col" x-text="col"></option>
                                    </template>
                                </select>
                            </div>
                            <div>
                                <label class="block text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-1">Limit</label>
                                <input type="number" min="1" x-model.number="limit" placeholder="Unlimited" class="fa-input">
                            </div>
                            <label class="flex items-center gap-2 text-xs text-slate-700 mt-2">
                                <input type="checkbox" x-model="distinct" class="fa-checkbox">
                                Distinct rows
                            </label>
                        </div>
                    </section>

                </div>
            </template>

            <div x-show="!schema" class="px-3 py-6 text-center text-xs text-slate-400">
                Pick a data source above to start building a query.
            </div>
        </aside>

        <!-- Main pane -->
        <main class="flex flex-1 flex-col bg-slate-50 min-w-0">
            <div class="flex items-center gap-2 border-b border-slate-200 bg-white px-4 shrink-0">
                <button @click="activeTab = 'results'" :class="activeTab === 'results' ? 'fa-tab fa-tab-active' : 'fa-tab fa-tab-inactive'">
                    Results <span x-show="resultCount" class="fa-pill ml-1" x-text="resultCount"></span>
                </button>
                <button @click="activeTab = 'chart'" :class="activeTab === 'chart' ? 'fa-tab fa-tab-active' : 'fa-tab fa-tab-inactive'">Chart</button>
            </div>

            <div class="flex-1 overflow-auto p-4">
                <div x-show="activeTab === 'results'">
                    <div x-show="!hasRun && !running" class="fa-card p-12 text-center">
                        <p class="text-sm text-slate-400">Configure your query and click Run.</p>
                        <div x-show="visibleSamples().length > 0" class="mt-6">
                            <p class="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-2">Try an example</p>
                            <div class="flex flex-wrap justify-center gap-2">
                                <template x-for="s in visibleSamples()" :key="s.model + '::' + s.name">
                                    <button @click="runSample(s)" class="fa-btn fa-btn-secondary"
                                            x-text="selectedModel ? s.name : (s.model_verbose + ': ' + s.name)"></button>
                                </template>
                            </div>
                        </div>
                    </div>
                    <div x-show="running" class="fa-card p-12 text-center">
                        <p class="text-sm text-slate-500">Running query…</p>
                    </div>
                    <div id="results-container" x-show="hasRun && !running" class="fa-card overflow-hidden"></div>
                </div>

                <div x-show="activeTab === 'chart'">
                    <div class="fa-card p-4 mb-3">
                        <div class="flex items-center gap-2 flex-wrap">
                            <select x-model="chartType" class="fa-select w-32">
                                <option value="bar">Bar</option>
                                <option value="line">Line</option>
                                <option value="pie">Pie</option>
                                <option value="scatter">Scatter</option>
                            </select>
                            <select x-model="chartXField" class="fa-select flex-1 min-w-0">
                                <option value="">X axis (auto)</option>
                                <template x-for="col in resultColumns()" :key="'cx-'+col">
                                    <option :value="col" x-text="col"></option>
                                </template>
                            </select>
                            <select x-model="chartYField" class="fa-select flex-1 min-w-0">
                                <option value="">Y axis (auto)</option>
                                <template x-for="col in resultColumns()" :key="'cy-'+col">
                                    <option :value="col" x-text="col"></option>
                                </template>
                            </select>
                            <button @click="showChart()" class="fa-btn fa-btn-primary" :disabled="!hasResults()">Render</button>
                        </div>
                    </div>
                    <div class="fa-card p-4">
                        <div id="chart-container" class="min-h-[400px]"></div>
                        <div class="text-center text-slate-400 py-12 text-sm" x-show="!chartRendered && hasResults()">
                            Click Render to draw the chart.
                        </div>
                        <div class="text-center text-slate-400 py-12 text-sm" x-show="!hasResults()">
                            Run a query first.
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Esc closes any open dialog -->
    <div @keydown.escape.window="if (saveDialog) closeSave(); if (loadDialog) closeLoad();"></div>

    <!-- Save dialog -->
    <div x-show="saveDialog" x-cloak
         role="dialog" aria-modal="true" aria-labelledby="save-dialog-title"
         class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4"
         @click.self="closeSave()"
         @keydown.tab="trapTabKey($event, $el)">
        <div class="fa-card w-full max-w-md p-6">
            <h2 id="save-dialog-title" class="text-lg font-semibold text-slate-900 mb-4">Save Query</h2>
            <div x-show="saveOverwrite" class="mb-3 rounded-md bg-amber-50 border border-amber-200 px-3 py-2 text-xs text-amber-800">
                A query named <span class="font-semibold" x-text="saveName"></span> already exists. Click Overwrite to replace it.
            </div>
            <div class="space-y-3">
                <div>
                    <label class="block text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-1">Name</label>
                    <input x-ref="saveNameInput" type="text" x-model="saveName" @input="saveOverwrite = false" class="fa-input" placeholder="My weekly orders report">
                </div>
                <div>
                    <label class="block text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-1">Description</label>
                    <textarea x-model="saveDescription" class="fa-input min-h-20" placeholder="Optional notes…"></textarea>
                </div>
            </div>
            <div class="flex items-center justify-end gap-2 mt-6">
                <button @click="closeSave()" class="fa-btn fa-btn-secondary">Cancel</button>
                <button @click="doSave()" class="fa-btn fa-btn-primary" :disabled="!saveName">
                    <span x-text="saveOverwrite ? 'Overwrite' : 'Save'"></span>
                </button>
            </div>
        </div>
    </div>

    <!-- Load dialog -->
    <div x-show="loadDialog" x-cloak
         role="dialog" aria-modal="true" aria-labelledby="load-dialog-title"
         class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4"
         @click.self="closeLoad()"
         @keydown.tab="trapTabKey($event, $el)">
        <div class="fa-card w-full max-w-lg max-h-[80vh] flex flex-col">
            <div class="flex items-center justify-between p-4 border-b border-slate-200">
                <h2 id="load-dialog-title" class="text-base font-semibold text-slate-900">Saved Queries</h2>
                <button @click="closeLoad()" class="fa-btn fa-btn-ghost fa-btn-icon" aria-label="Close">×</button>
            </div>
            <div class="px-4 pt-3">
                <input x-ref="loadSearchInput" type="text" x-model="loadSearch" placeholder="Search by name or description…" class="fa-input">
            </div>
            <div class="flex-1 overflow-auto p-2">
                <div x-show="savedQueries.length === 0" class="p-6 text-center text-slate-400 text-sm">No saved queries yet.</div>
                <div x-show="savedQueries.length > 0 && filteredSavedQueries().length === 0" class="p-6 text-center text-slate-400 text-sm">No queries match.</div>
                <template x-for="q in filteredSavedQueries()" :key="q.id">
                    <div class="group flex items-start gap-2 p-3 rounded-md hover:bg-slate-50 border border-transparent hover:border-slate-200">
                        <button @click="loadQuery(q.id)" class="flex-1 text-left">
                            <div class="font-medium text-slate-900" x-text="q.name"></div>
                            <div class="text-sm text-slate-500" x-text="q.description"></div>
                            <div class="text-xs text-slate-400 mt-1" x-text="formatRelative(q.updated_at)"></div>
                        </button>
                        <button @click.stop="deleteQuery(q.id)" class="fa-btn fa-btn-danger fa-btn-icon opacity-0 group-hover:opacity-100" :aria-label="'Delete ' + q.name" title="Delete">×</button>
                    </div>
                </template>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'fusion_analytics/js/query_builder.js' %}"></script>
{% endblock %}