{% extends "admin/change_list.html" %}
{% load i18n admin_urls static admin_list %}

{% block extrahead %}
{{ block.super }}
{% if has_execute_query %}
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/query_executor_dark_mode.css' %}">
<style>
/* Query Executor Styles - Additional overrides */
.query-executor-container {
    margin: 10px 0;
    border-radius: 4px;
    overflow: hidden;
}

.query-executor-header {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.query-executor-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.query-executor-toggle {
    transition: transform 0.3s ease;
}

.query-executor-toggle.open {
    transform: rotate(90deg);
}

.query-executor-content {
    display: none;
    padding: 20px;
}

.query-executor-content.show {
    display: block;
}

.query-form-row {
    margin-bottom: 15px;
}

.query-form-row label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.query-textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 4px;
    resize: vertical;
    box-sizing: border-box;
}

.query-options {
    display: flex;
    gap: 20px;
    margin: 15px 0;
}

.query-checkbox-label {
    display: flex;
    align-items: center;
    gap: 5px;
}

.query-checkbox-label input[type="checkbox"] {
    cursor: pointer;
}

.query-name-input {
    width: 300px;
    padding: 5px 10px;
    border-radius: 4px;
}

.query-buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.query-button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.query-error,
.query-success {
    padding: 10px;
    border-radius: 4px;
    margin-top: 10px;
}

.query-history, .query-favorites {
    margin-top: 20px;
    padding: 15px;
    border-radius: 4px;
}

.query-history h4, .query-favorites h4 {
    margin-top: 0;
    margin-bottom: 10px;
}

.query-item {
    padding: 8px 12px;
    margin: 5px 0;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    transition: all 0.2s;
    position: relative;
}

.query-item-meta {
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.query-favorite-delete {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    line-height: 1;
}

.query-examples {
    margin-top: 20px;
    padding: 15px;
    border-radius: 4px;
}

.query-examples h4 {
    margin-top: 0;
}

.query-example {
    padding: 6px 10px;
    margin: 5px 0;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    transition: all 0.2s;
}

/* Active query filter indicator */
.active-query-filter {
    padding: 8px 15px;
    border-radius: 4px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.active-query-filter code {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 13px;
}

.clear-query-filter {
    text-decoration: none;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 3px;
    transition: background 0.2s;
}

/* Loading spinner */
.query-loading {
    display: none;
    align-items: center;
    gap: 10px;
}

.query-loading.show {
    display: flex;
}

.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}
</style>
{% endif %}
{% endblock %}

{% block content %}
{{ block.super }}
{% endblock %}

{% block search %}
{{ block.super }}

{% if has_execute_query %}
<!-- Active Query Filter Display -->
{% if active_query %}
<div class="active-query-filter">
    <div>
        <strong>Query Filter Active:</strong> Showing {{ query_result_count }} results
        <br>
        <code>{{ active_query|truncatechars:100 }}</code>
    </div>
    <a href="?clear_query=1" class="clear-query-filter">✕ Clear Filter</a>
</div>
{% endif %}

<!-- Query Executor Container -->
<div class="query-executor-container">
    <div class="query-executor-header" onclick="toggleQueryExecutor()">
        <div class="query-executor-title">
            <span class="query-executor-toggle" id="queryToggle">▶</span>
            <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="M5.5 5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5.5 7.5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3z"/>
                <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z"/>
            </svg>
            Execute Django Query
        </div>
        <span id="expandCollapseText" class="query-toggle-text">Click to expand</span>
    </div>

    <div class="query-executor-content" id="queryContent">
        <form id="queryForm" onsubmit="executeQuery(event)">
            {% csrf_token %}
            <div class="query-form-row">
                <label for="queryInput">Django Query:</label>
                <textarea
                    id="queryInput"
                    name="query"
                    class="query-textarea"
                    placeholder="e.g., {{ model_name }}.objects.filter(id=1)"
                    required
                ></textarea>
            </div>

            <div class="query-options">
                <label class="query-checkbox-label">
                    <input type="checkbox" id="saveToFavorites" name="save_to_favorites" onchange="toggleFavoriteName()">
                    Save to favorites
                </label>

                <div id="favoriteNameDiv" style="display: none;">
                    <input
                        type="text"
                        id="queryName"
                        name="query_name"
                        class="query-name-input"
                        placeholder="Give this query a name"
                    >
                </div>
            </div>

            <div class="query-buttons">
                <button type="submit" class="query-button query-button-primary">
                    Execute Query
                </button>
                <button type="button" class="query-button query-button-secondary" onclick="clearQuery()">
                    Clear
                </button>
                <div class="query-loading" id="queryLoading">
                    <div class="spinner"></div>
                    <span>Executing query...</span>
                </div>
            </div>
        </form>

        <div id="queryMessage" style="margin-top: 15px;"></div>

        {% if query_favorites %}
        <div class="query-favorites">
            <h4>Favorite Queries</h4>
            {% for favorite in query_favorites %}
            <div class="query-item" onclick="loadQuery('{{ favorite.query|escapejs }}')" data-query="{{ favorite.query }}">
                <div class="query-item-meta">{{ favorite.name }}</div>
                <div>{{ favorite.query|truncatechars:80 }}</div>
                <span class="query-favorite-delete" onclick="deleteFavorite(event, '{{ favorite.id }}', '{{ favorite.name|escapejs }}')" title="Delete favorite">✕</span>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        {% if query_history %}
        <div class="query-history">
            <h4>Recent Queries</h4>
            {% for history in query_history %}
            <div class="query-item" onclick="loadQuery('{{ history.query|escapejs }}')">
                <div class="query-item-meta">{{ history.timestamp }}</div>
                <div>{{ history.query|truncatechars:80 }}</div>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        {% if query_examples %}
        <div class="query-examples">
            <h4>Example Queries</h4>
            <p class="query-examples-help">
                Click any example to load it. Queries without <code>.count()</code> or <code>.aggregate()</code> will update the list view.
            </p>
            {% for description, query in query_examples %}
            <div class="query-example" onclick="loadQuery('{{ query|escapejs }}')" title="{{ description }}">
                {{ query }}
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </div>
</div>

<script>
function toggleQueryExecutor() {
    const content = document.getElementById('queryContent');
    const toggle = document.getElementById('queryToggle');
    const expandCollapseText = document.getElementById('expandCollapseText');

    if (content.classList.contains('show')) {
        content.classList.remove('show');
        toggle.classList.remove('open');
        expandCollapseText.textContent = 'Click to expand';
    } else {
        content.classList.add('show');
        toggle.classList.add('open');
        expandCollapseText.textContent = 'Click to collapse';
    }
}

function toggleFavoriteName() {
    const checkbox = document.getElementById('saveToFavorites');
    const nameDiv = document.getElementById('favoriteNameDiv');
    nameDiv.style.display = checkbox.checked ? 'block' : 'none';
}

function loadQuery(query) {
    document.getElementById('queryInput').value = query;
    document.getElementById('queryInput').focus();
}

function clearQuery() {
    document.getElementById('queryInput').value = '';
    document.getElementById('queryMessage').innerHTML = '';
}

function executeQuery(event) {
    event.preventDefault();

    const form = document.getElementById('queryForm');
    const formData = new FormData(form);
    const loading = document.getElementById('queryLoading');
    const messageDiv = document.getElementById('queryMessage');

    loading.classList.add('show');
    messageDiv.innerHTML = '';

    fetch('{% url opts|admin_urlname:'execute_query' %}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
        }
    })
    .then(response => response.json())
    .then(data => {
        loading.classList.remove('show');

        if (data.success) {
            if (data.redirect) {
                // Show success message and reload
                messageDiv.innerHTML = '<div class="query-success">' + data.message + ' Reloading...</div>';
                setTimeout(function() {
                    window.location.reload();
                }, 500);
            } else if (data.is_scalar) {
                // Show scalar result (count, aggregate, etc.)
                messageDiv.innerHTML = '<div class="query-success">' + data.message + '</div>';
            }
        } else {
            messageDiv.innerHTML = '<div class="query-error">Error: ' + data.error + '</div>';
        }
    })
    .catch(error => {
        loading.classList.remove('show');
        messageDiv.innerHTML = '<div class="query-error">Error: ' + error.message + '</div>';
    });
}

function deleteFavorite(event, favoriteId, favoriteName) {
    event.stopPropagation();

    if (confirm('Delete favorite query "' + favoriteName + '"?')) {
        const csrf = document.querySelector('[name=csrfmiddlewaretoken]').value;

        fetch('{% url opts|admin_urlname:'delete_query_favorite' %}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-CSRFToken': csrf,
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: 'favorite_id=' + encodeURIComponent(favoriteId)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                window.location.reload();
            }
        });
    }
}

// Remember query executor state
const queryExecutorState = localStorage.getItem('queryExecutorOpen');
if (queryExecutorState === 'true') {
    toggleQueryExecutor();
}

// Save state when toggling
document.getElementById('queryContent').addEventListener('transitionend', function() {
    const isOpen = this.classList.contains('show');
    localStorage.setItem('queryExecutorOpen', isOpen);
});

// Theme detection and handling
function detectAndApplyTheme() {
    const htmlElement = document.documentElement;
    const currentTheme = htmlElement.getAttribute('data-theme');

    // If no data-theme attribute, check for auto mode
    if (!currentTheme) {
        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
        if (prefersDark) {
            htmlElement.setAttribute('data-theme', 'dark');
        } else {
            htmlElement.setAttribute('data-theme', 'light');
        }
    }
}

// Apply theme on page load
detectAndApplyTheme();

// Watch for theme changes (in case Django admin changes it dynamically)
const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.type === 'attributes' &&
            (mutation.attributeName === 'data-theme' || mutation.attributeName === 'data-color-scheme')) {
            // Theme changed, force CSS re-evaluation
            const container = document.querySelector('.query-executor-container');
            if (container) {
                container.style.display = 'none';
                container.offsetHeight; // Force reflow
                container.style.display = '';
            }
        }
    });
});

// Start observing
observer.observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['data-theme', 'data-color-scheme', 'class']
});

// Also watch for browser preference changes
if (window.matchMedia) {
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
        const htmlElement = document.documentElement;
        if (!htmlElement.getAttribute('data-theme') || htmlElement.getAttribute('data-theme') === 'auto') {
            detectAndApplyTheme();
        }
    });
}
</script>
{% endif %}
{% endblock %}