{% 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 %}
<div x-data="queryBuilder()"
     x-init="init()"
     x-cloak
     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>
            <button @click="runQuery()" class="fa-btn fa-btn-primary" :disabled="!canRun() || running">
                <span x-text="running ? 'Running…' : 'Run Query'"></span>
            </button>
            <button @click="openSave()" class="fa-btn fa-btn-secondary" :disabled="!canRun()">Save</button>
            <button @click="openLoad()" class="fa-btn fa-btn-secondary">Load</button>
        </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">
                            <span class="flex items-center gap-2">
                                Fields
                                <span class="fa-pill" x-text="selectedFields.length"></span>
                            </span>
                            <button @click="selectedFields = []" class="fa-btn fa-btn-ghost fa-btn-sm" x-show="selectedFields.length">Clear</button>
                        </div>
                        <div class="px-3">
                            <input type="text" 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>
                    </section>

                    <!-- Filters -->
                    <section class="border-b border-slate-200">
                        <div class="fa-section-header">
                            <div class="flex items-center gap-2">
                                <span class="flex items-center gap-2">
                                    Filters
                                    <span class="fa-pill" x-text="filters.length"></span>
                                </span>
                                <div class="flex rounded-md ring-1 ring-slate-300 bg-white" x-show="filters.length > 1">
                                    <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 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" 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'">
                                                <input type="date" x-model="filter.value" class="fa-input">
                                            </template>
                                            <template x-if="filterValueWidget(filter) === 'datetime'">
                                                <input type="datetime-local" x-model="filter.value" class="fa-input">
                                            </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>
                                        </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">
                            <span class="flex items-center gap-2">
                                Group By
                                <span class="fa-pill" x-text="groupBy.length"></span>
                            </span>
                            <button @click="addGroupBy()" class="fa-btn fa-btn-ghost fa-btn-sm">+ Add</button>
                        </div>
                        <div class="px-3 pb-3 space-y-1.5">
                            <template x-for="(g, idx) in groupBy" :key="g._uid">
                                <div class="flex items-center gap-1.5">
                                    <select x-model="g.field" 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>
                                    <button @click="groupBy.splice(idx, 1)" class="fa-btn fa-btn-danger fa-btn-icon">×</button>
                                </div>
                            </template>
                        </div>
                    </section>

                    <!-- Aggregations -->
                    <section class="border-b border-slate-200">
                        <div class="fa-section-header">
                            <span class="flex items-center gap-2">
                                Aggregations
                                <span class="fa-pill" x-text="aggregations.length"></span>
                            </span>
                            <button @click="addAggregation()" class="fa-btn fa-btn-ghost fa-btn-sm">+ Add</button>
                        </div>
                        <div 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" 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 class="px-3 py-3 space-y-2">
                        <div>
                            <label class="block text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-1">Sort By</label>
                            <select x-model="orderBy" class="fa-select">
                                <option value="">None</option>
                                <template x-for="col in resultColumns()" :key="'asc-'+col">
                                    <option :value="col" x-text="col + ' ↑'"></option>
                                </template>
                                <template x-for="col in resultColumns()" :key="'desc-'+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>
                    </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="!hasResults() && !running" class="fa-card p-12 text-center">
                        <p class="text-sm text-slate-400">Configure your query and click Run.</p>
                    </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="hasResults()" 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>

    <!-- Save dialog -->
    <div x-show="saveDialog" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4" @click.self="saveDialog = false">
        <div class="fa-card w-full max-w-md p-6">
            <h2 class="text-lg font-semibold text-slate-900 mb-4">Save Query</h2>
            <div class="space-y-3">
                <div>
                    <label class="block text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-1">Name</label>
                    <input type="text" x-model="saveName" 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="saveDialog = false" class="fa-btn fa-btn-secondary">Cancel</button>
                <button @click="doSave()" class="fa-btn fa-btn-primary" :disabled="!saveName">Save</button>
            </div>
        </div>
    </div>

    <!-- Load dialog -->
    <div x-show="loadDialog" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4" @click.self="loadDialog = false">
        <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 class="text-base font-semibold text-slate-900">Saved Queries</h2>
                <button @click="loadDialog = false" class="fa-btn fa-btn-ghost fa-btn-icon">×</button>
            </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>
                <template x-for="q in savedQueries" :key="q.id">
                    <button @click="loadQuery(q.id)" class="w-full text-left p-3 rounded-md hover:bg-slate-50 border border-transparent hover:border-slate-200">
                        <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="q.updated_at"></div>
                    </button>
                </template>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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