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

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

{% block content %}
<div x-data="queryBuilder()" class="fa-query-builder" data-analytics-base="{% url 'fusion_analytics:query_builder' %}">
    <h1>Query Builder</h1>

    <div class="fa-section">
        <label for="model-select">Data Source</label>
        <select id="model-select" x-model="selectedModel" @change="loadSchema()">
            <option value="">Select a model...</option>
            {% for m in models %}
            <option value="{{ m.label }}">{{ m.verbose_name_plural|title }}</option>
            {% endfor %}
        </select>
    </div>

    <template x-if="schema">
        <div>
            <div class="fa-section">
                <label>Fields</label>
                <div class="fa-field-list">
                    <template x-for="field in schema.fields" :key="field.name">
                        <label class="fa-field-item">
                            <input type="checkbox" :value="field.name"
                                   x-model="selectedFields">
                            <span x-text="field.verbose_name + ' (' + field.name + ')'"></span>
                        </label>
                    </template>
                </div>
            </div>

            <div class="fa-section">
                <label>Filters</label>
                <template x-for="(filter, idx) in filters" :key="idx">
                    <div class="fa-filter-row">
                        <select x-model="filter.field" @change="filter.operator = ''">
                            <option value="">Field...</option>
                            <template x-for="f in schema.fields" :key="f.name">
                                <option :value="f.name" x-text="f.verbose_name"></option>
                            </template>
                        </select>
                        <select x-model="filter.operator">
                            <option value="">Op...</option>
                            <template x-for="op in getOperators(filter.field)" :key="op">
                                <option :value="op" x-text="op"></option>
                            </template>
                        </select>
                        <input type="text" x-model="filter.value" placeholder="Value">
                        <button @click="filters.splice(idx, 1)" class="fa-btn-sm">&times;</button>
                    </div>
                </template>
                <button @click="filters.push({field:'', operator:'', value:''})" class="fa-btn-sm">+ Add Filter</button>
            </div>

            <div class="fa-section">
                <label>Group By</label>
                <select x-model="groupBy" multiple>
                    <template x-for="field in schema.fields" :key="field.name">
                        <option :value="field.name" x-text="field.verbose_name"></option>
                    </template>
                </select>
            </div>

            <div class="fa-section">
                <label>Aggregations</label>
                <template x-for="(agg, idx) in aggregations" :key="idx">
                    <div class="fa-filter-row">
                        <select x-model="agg.field">
                            <option value="">Field...</option>
                            <template x-for="f in schema.fields" :key="f.name">
                                <option :value="f.name" x-text="f.verbose_name"></option>
                            </template>
                        </select>
                        <select x-model="agg.function">
                            <option value="">Function...</option>
                            <template x-for="fn in getAggregations(agg.field)" :key="fn">
                                <option :value="fn" x-text="fn.toUpperCase()"></option>
                            </template>
                        </select>
                        <button @click="aggregations.splice(idx, 1)" class="fa-btn-sm">&times;</button>
                    </div>
                </template>
                <button @click="aggregations.push({field:'', function:''})" class="fa-btn-sm">+ Add Aggregation</button>
            </div>

            <div class="fa-section">
                <label>Sort By</label>
                <select x-model="orderBy">
                    <option value="">None</option>
                    <template x-for="field in allResultFields()" :key="field">
                        <option :value="field" x-text="field"></option>
                    </template>
                    <template x-for="field in allResultFields()" :key="'-'+field">
                        <option :value="'-'+field" x-text="field + ' (desc)'"></option>
                    </template>
                </select>
            </div>

            <div class="fa-section">
                <label>Chart Options</label>
                <div class="fa-filter-row">
                    <select x-model="chartType">
                        <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">
                        <option value="">X Axis...</option>
                        <template x-for="field in allResultFields()" :key="'cx'+field">
                            <option :value="field" x-text="field"></option>
                        </template>
                    </select>
                    <select x-model="chartYField">
                        <option value="">Y Axis...</option>
                        <template x-for="field in allResultFields()" :key="'cy'+field">
                            <option :value="field" x-text="field"></option>
                        </template>
                    </select>
                </div>
            </div>

            <div class="fa-actions">
                <button @click="runQuery()" class="fa-btn">Run Query</button>
                <button @click="showChart()" class="fa-btn fa-btn-secondary">Chart</button>
                <button @click="saveDialog = true" class="fa-btn fa-btn-secondary">Save</button>
            </div>
        </div>
    </template>

    <div id="results-container" class="fa-results"></div>
    <div id="chart-container" class="fa-chart"></div>

    <template x-if="saveDialog">
        <div class="fa-modal">
            <div class="fa-modal-content">
                <h3>Save Query</h3>
                <input type="text" x-model="saveName" placeholder="Query name">
                <div class="fa-actions">
                    <button @click="doSave()" class="fa-btn">Save</button>
                    <button @click="saveDialog = false" class="fa-btn fa-btn-secondary">Cancel</button>
                </div>
            </div>
        </div>
    </template>
</div>
{% endblock %}

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