{% extends "base.html" %}
{% block title %}Query - SQLite DBaaS{% endblock %}
{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">SQL Query</h1>
        <p class="page-subtitle">Execute raw SQL queries</p>
    </div>
    <a href="/admin/dashboard" class="m3-button m3-button--text">
        <span class="material-symbols-outlined">arrow_back</span>
        Dashboard
    </a>
</div>

<!-- Query Editor -->
<div class="m3-card">
    <div class="m3-card-header">
        <div class="m3-card-icon">
            <span class="material-symbols-outlined">code</span>
        </div>
        <div>
            <div class="m3-card-title">Query Editor</div>
        </div>
    </div>
    
    <form method="POST" action="/admin/query">
        <div class="m3-form-field">
            <label class="m3-label" for="sql">SQL Statement</label>
            <textarea id="sql" name="sql" class="m3-input m3-textarea" rows="6" 
                      placeholder="SELECT * FROM users LIMIT 10;">{{ sql }}</textarea>
        </div>
        <div class="m3-button-group">
            <button type="submit" class="m3-button m3-button--filled">
                <span class="material-symbols-outlined">play_arrow</span>
                Run Query
            </button>
        </div>
    </form>
</div>

<!-- Error -->
{% if error %}
<div class="m3-card" style="border-left: 4px solid var(--md-sys-color-error);">
    <div class="m3-card-header">
        <div class="m3-card-icon" style="background: var(--md-sys-color-error-container); color: var(--md-sys-color-error);">
            <span class="material-symbols-outlined">error</span>
        </div>
        <div>
            <div class="m3-card-title" style="color: var(--md-sys-color-error);">Query Error</div>
        </div>
    </div>
    <div class="m3-code-block">{{ error }}</div>
</div>
{% endif %}

<!-- Results -->
{% if results %}
<div class="m3-card">
    <div class="m3-card-header">
        <div class="m3-card-icon">
            <span class="material-symbols-outlined">check_circle</span>
        </div>
        <div>
            <div class="m3-card-title">Results</div>
            <div class="m3-card-subtitle">{{ results|length }} rows returned</div>
        </div>
    </div>
    
    {% if results|length > 0 %}
    <div class="m3-table-container" style="max-height: 400px; overflow: auto;">
        <table class="m3-table">
            <thead>
                <tr>
                    {% for col in columns %}
                    <th>{{ col }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for row in results %}
                <tr>
                    {% for col in columns %}
                    <td class="mono">{{ row[col] if row[col] != None else 'NULL' }}</td>
                    {% endfor %}
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="empty-state">
        <span class="material-symbols-outlined empty-icon">search_off</span>
        <div class="empty-title">No results</div>
    </div>
    {% endif %}
</div>
{% endif %}

<!-- Quick Queries -->
<div class="m3-card">
    <div class="m3-card-header">
        <div class="m3-card-icon">
            <span class="material-symbols-outlined">bolt</span>
        </div>
        <div>
            <div class="m3-card-title">Quick Queries</div>
            <div class="m3-card-subtitle">Common operations</div>
        </div>
    </div>
    
    <div class="quick-actions">
        <form method="POST" action="/admin/query" style="display: inline;">
            <input type="hidden" name="sql" value="SELECT name FROM sqlite_master WHERE type='table';">
            <button type="submit" class="quick-action">
                <span class="material-symbols-outlined">table</span>
                List Tables
            </button>
        </form>
        
        <form method="POST" action="/admin/query" style="display: inline;">
            <input type="hidden" name="sql" value="PRAGMA integrity_check;">
            <button type="submit" class="quick-action">
                <span class="material-symbols-outlined">verified</span>
                Integrity Check
            </button>
        </form>
        
        <form method="POST" action="/admin/query" style="display: inline;">
            <input type="hidden" name="sql" value="PRAGMA journal_mode;">
            <button type="submit" class="quick-action">
                <span class="material-symbols-outlined">bolt</span>
                Journal Mode
            </button>
        </form>
        
        <form method="POST" action="/admin/query" style="display: inline;">
            <input type="hidden" name="sql" value="SELECT * FROM backup_log ORDER BY created_at DESC LIMIT 10;">
            <button type="submit" class="quick-action">
                <span class="material-symbols-outlined">history</span>
                Recent Backups
            </button>
        </form>
        
        <form method="POST" action="/admin/query" style="display: inline;">
            <input type="hidden" name="sql" value="PRAGMA page_count;">
            <button type="submit" class="quick-action">
                <span class="material-symbols-outlined">storage</span>
                Page Count
            </button>
        </form>
        
        <form method="POST" action="/admin/query" style="display: inline;">
            <input type="hidden" name="sql" value="PRAGMA database_list;">
            <button type="submit" class="quick-action">
                <span class="material-symbols-outlined">list</span>
                Database List
            </button>
        </form>
    </div>
</div>
{% endblock %}