{% extends 'dashboard.html' %}

{% block page %}
<div class="p-6 max-w-7xl mx-auto">
    <!--  Settings Navigation -->
    <div class="mb-6 border-b border-gray-200 dark:border-gray-700">
        <nav class="-mb-px flex space-x-8">
            <a hx-get="{{ url_for('settings.api_keys') }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true"
                class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
                API Keys
            </a>
            <a hx-get="{{ url_for('settings.export') }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true"
                class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
                Export Data
            </a>
            <a hx-get="{{ url_for('settings.database_schema') }}" hx-target="#container" hx-swap="innerHTML"
                hx-push-url="true"
                class="border-b-2 border-blue-500 text-blue-600 dark:text-blue-400 py-4 px-1 text-sm font-medium cursor-pointer">
                Database Schema
            </a>
            <a hx-get="{{ url_for('settings.login_history') }}" hx-target="#container" hx-swap="innerHTML"
                hx-push-url="true"
                class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
                Login History
            </a>
            <a hx-get="{{ url_for('settings.account') }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true"
                class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
                Account
            </a>
        </nav>

    </div>

    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">Database Schema</h1>
        <p class="text-gray-600 dark:text-gray-400">Explore your database structure and run queries on your data.</p>
    </div>

    <!-- ERD Diagram -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Entity Relationship Diagram</h2>
        <div id="mermaid-diagram"
            class="bg-white dark:bg-gray-900 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">
            <pre class="mermaid invisible">
erDiagram
{% for table in schema_info %}
    {{ table.table_name|upper }} {
{% for col in table.columns %}        {{ col.data_type|replace(' ', '_') }} {{ col.column_name }}{% if col.column_name in table.primary_keys %} PK{% endif %}
{% endfor %}    }
{% endfor %}
{% for table in schema_info %}
{% for fk in table.foreign_keys %}
    {{ table.table_name|upper }} }|--|| {{ fk.foreign_table_name|upper }} : "{{ fk.column_name }}"
{% endfor %}
{% endfor %}
            </pre>
        </div>
    </div>

    <!-- SQL Query Explorer -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">SQL Query Explorer</h2>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
            Run SELECT queries on your data. Queries are automatically scoped to your user account for security.
        </p>
        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">SQL Query</label>
            <div id="sql-editor" class="border border-gray-300 dark:border-gray-600 rounded" style="height: 150px;">
            </div>
        </div>
        <div class="flex items-center justify-between mb-4">
            <button id="run-query-btn"
                class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4 .263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                Run Query
            </button>
            <button id="clear-query-btn"
                class="px-4 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">Clear</button>
        </div>
        <div id="query-message" class="hidden mb-4 p-3 rounded-lg"></div>
        <div id="query-results" class="hidden">
            <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Results</h3>
            <div class="overflow-x-auto border border-gray-200 dark:border-gray-700 rounded-lg max-h-96">
                <table id="results-table" class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead class="bg-gray-50 dark:bg-gray-700 sticky top-0">
                        <tr id="results-header"></tr>
                    </thead>
                    <tbody id="results-body"
                        class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700"></tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Tables Overview -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Tables Overview</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {% for table in schema_info %}
            <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-shadow">
                <h3 class="font-medium text-gray-900 dark:text-white mb-2 flex items-center">
                    <svg class="w-4 h-4 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
                        <path
                            d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
                    </svg>
                    {{ table.table_name }}
                </h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
                    {{ table.columns|length }} column{{ 's' if table.columns|length != 1 else '' }}
                    {% if table.primary_keys %}· {{ table.primary_keys|length }} PK{% endif %}
                </p>
                <div class="space-y-1 max-h-40 overflow-y-auto">
                    {% for col in table.columns %}
                    <div class="text-xs flex items-start py-1">
                        {% if col.column_name in table.primary_keys %}
                        <svg class="w-3 h-3 mr-1.5 mt-0.5 text-yellow-500 flex-shrink-0" fill="currentColor"
                            viewBox="0 0 20 20">
                            <path
                                d="M10 2a3 3 0 00-3 3v1H5a2 2 0 00-2 2v7a2 2 0 002 2h10a2 2 0 002-2V8a2 2 0 00-2-2h-2V5a3 3 0 00-3-3zm3 5V5a1 1 0 10-2 0v2H9V5a1 1 0 00-2 0v2H5v7h10V7h-2z" />
                        </svg>
                        {% else %}
                        <span class="w-3 h-3 mr-1.5 flex-shrink-0"></span>
                        {% endif %}
                        <div class="flex-1 min-w-0">
                            <span class="font-medium text-gray-700 dark:text-gray-300">{{ col.column_name }}</span>
                            <span class="text-gray-500 dark:text-gray-500 ml-1">{{ col.data_type }}</span>
                            {% if col.is_nullable == 'NO' %}<span class="text-red-500 text-[10px] ml-1">*</span>{% endif
                            %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% if table.foreign_keys %}
                <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
                    <p class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1.5">References:</p>
                    <div class="space-y-1">
                        {% for fk in table.foreign_keys %}
                        <div class="text-xs text-blue-600 dark:text-blue-400 flex items-center">
                            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M13 7l5 5m0 0l-5 5m5-5H6" />
                            </svg>
                            {{ fk.foreign_table_name }} ({{ fk.column_name }})
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.0/ace.js"></script>
<script>
    // Clean up existing editor if it exists (for HTMX reloads)
    if (window.sqlEditor) {
        window.sqlEditor.destroy();
        window.sqlEditor.container.remove();
    }

    window.sqlEditor = ace.edit("sql-editor");
    window.sqlEditor.setTheme("ace/theme/monokai");
    window.sqlEditor.session.setMode("ace/mode/sql");
    window.sqlEditor.setOptions({ fontSize: "14px", showPrintMargin: false, showGutter: true, highlightActiveLine: true, enableLiveAutocompletion: true });
    window.sqlEditor.setValue(`SELECT * FROM http_functions`, -1);

    document.getElementById('run-query-btn').addEventListener('click', async () => {
        const query = window.sqlEditor.getValue().trim();
        const runBtn = document.getElementById('run-query-btn');
        if (!query) { showMessage('Please enter a SQL query', 'error'); return; }
        runBtn.disabled = true;
        runBtn.innerHTML = '<svg class="w-4 h-4 mr-2 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>Running...';
        try {
            const response = await fetch('{{ url_for("settings.execute_query") }}', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query }) });
            const data = await response.json();
            if (!response.ok) { showMessage(data.error || 'Query failed', 'error'); document.getElementById('query-results').classList.add('hidden'); }
            else { showMessage(data.message, 'success'); displayResults(data); }
        } catch (error) { showMessage('Error: ' + error.message, 'error'); document.getElementById('query-results').classList.add('hidden'); }
        finally { runBtn.disabled = false; runBtn.innerHTML = '<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>Run Query'; }
    });

    document.getElementById('clear-query-btn').addEventListener('click', () => {
        window.sqlEditor.setValue('', -1);
        document.getElementById('query-message').classList.add('hidden');
        document.getElementById('query-results').classList.add('hidden');
    });

    function showMessage(message, type) {
        const messageDiv = document.getElementById('query-message');
        messageDiv.classList.remove('hidden', 'bg-green-50', 'bg-red-50', 'text-green-700', 'text-red-700', 'dark:bg-green-900/20', 'dark:bg-red-900/20', 'dark:text-green-300', 'dark:text-red-300');
        if (type === 'success') messageDiv.classList.add('bg-green-50', 'text-green-700', 'dark:bg-green-900/20', 'dark:text-green-300');
        else messageDiv.classList.add('bg-red-50', 'text-red-700', 'dark:bg-red-900/20', 'dark:text-red-300');
        messageDiv.textContent = message;
    }

    function displayResults(data) {
        const resultsDiv = document.getElementById('query-results');
        const headerRow = document.getElementById('results-header');
        const tbody = document.getElementById('results-body');
        headerRow.innerHTML = '';
        tbody.innerHTML = '';
        if (data.row_count === 0) { resultsDiv.classList.add('hidden'); return; }
        data.columns.forEach(col => {
            const th = document.createElement('th');
            th.className = 'px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider';
            th.textContent = col;
            headerRow.appendChild(th);
        });
        data.rows.forEach(row => {
            const tr = document.createElement('tr');
            row.forEach(cell => {
                const td = document.createElement('td');
                td.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300';
                td.textContent = cell === null ? 'NULL' : cell;
                tr.appendChild(td);
            });
            tbody.appendChild(tr);
        });
        resultsDiv.classList.remove('hidden');
    }
</script>

<script type="module">
    const mermaid = await import('https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs');
    const isDark = document.documentElement.classList.contains('dark');
    mermaid.default.initialize({
        startOnLoad: false,
        theme: isDark ? 'dark' : 'default',
        er: { layoutDirection: 'TB', fontSize: 12, useMaxWidth: true, minEntityWidth: 150, minEntityHeight: 60, entityPadding: 15, stroke: '#333', fill: '#f9f9f9', diagramPadding: 20 }
    });
    try {
        await mermaid.default.run({ querySelector: '.mermaid' });
        // Show diagram after successful rendering
        document.querySelector('.mermaid').classList.remove('invisible');
        console.log('Mermaid diagram rendered successfully');
    } catch (error) {
        console.error('Mermaid error:', error);
        document.getElementById('mermaid-diagram').innerHTML = '<div class="text-amber-600 dark:text-amber-400 p-6 text-center"><svg class="w-12 h-12 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg><p class="font-medium mb-2">Unable to render ERD</p><p class="text-sm">View the tables overview below for schema information.</p></div>';
    }
</script>
{% endblock %}