{% extends "base.html" %}
{% block title %}q-ai — Admin{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto px-6 py-8">
    <div class="divider mt-4 mb-8">
        <span class="text-sm font-mono tracking-widest text-base-content/40">CONFIGURATION</span>
    </div>

    <!-- Assistant Section -->
    <section id="assistant" class="mb-8">
        {% include "partials/assist_section.html" %}
    </section>

    <!-- Target Providers Section -->
    <section id="providers" class="mb-8">
        {% set providers = providers_status %}
        {% include "partials/providers_section.html" %}
    </section>

    <!-- Database Section Divider -->
    <div class="divider mt-12 mb-8">
        <span class="text-sm font-mono tracking-widest text-base-content/40">DATABASE</span>
    </div>

    <!-- Scan Targets Section -->
    <section id="targets" class="mb-8">
        <h2 class="text-lg font-semibold mb-4">Scan Targets</h2>
        <div class="panel p-4 overflow-x-auto">
            {% if targets %}
            <table class="table table-sm">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Type</th>
                        <th>URI</th>
                        <th class="w-16"></th>
                    </tr>
                </thead>
                <tbody id="targets-tbody">
                    {% for t in targets %}
                    <tr id="target-row-{{ t.id }}">
                        <td class="font-medium">{{ t.name }}</td>
                        <td>{{ t.type }}</td>
                        <td class="text-xs text-base-content/50 max-w-xs truncate" title="{{ t.uri or '' }}">
                            {{ t.uri or "—" }}
                        </td>
                        <td>
                            <button class="btn btn-ghost btn-xs opacity-40 hover:opacity-100 hover:text-error"
                                    onclick='confirmDeleteTarget({{ t.id | tojson }}, {{ t.name | tojson }})'
                                    title="Delete target">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                     stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                          d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                                </svg>
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p class="text-sm text-base-content/40 py-4 text-center">No targets configured.</p>
            {% endif %}
        </div>
    </section>

    <!-- Backup Section -->
    <section id="backup" class="mb-8">
        <h2 class="text-lg font-semibold mb-4">Backup</h2>
        <div class="panel p-4">
            <p class="text-sm text-base-content/50 mb-3">Download a backup of your database.</p>
            <button id="backup-btn" class="btn btn-sm btn-outline" onclick="createBackup()">
                Create Backup
            </button>
        </div>
    </section>

    <!-- Danger Zone -->
    <section id="danger-zone" class="mb-8">
        <h2 class="text-lg font-semibold mb-4" style="color: #f87171;">Danger Zone</h2>
        <div class="p-4 rounded-lg" style="background: rgba(248,113,113,0.06); border: 1px solid rgba(248,113,113,0.25);">
            <h3 class="font-medium mb-1">Reset Database</h3>
            <p class="text-sm text-base-content/50 mb-3">
                Delete all targets, runs, findings, and evidence. Settings and credentials are preserved.
            </p>
            <button class="btn btn-sm btn-error btn-outline" onclick="document.getElementById('reset-modal').showModal()">
                Reset Database
            </button>
        </div>
    </section>
</div>

<!-- Delete target confirmation modal -->
<dialog id="delete-target-modal" class="modal">
    <div class="modal-box">
        <h3 class="text-lg font-bold">Delete Target</h3>
        <p class="py-4" id="delete-target-message"></p>
        <div class="modal-action">
            <form method="dialog">
                <button class="btn btn-ghost">Cancel</button>
            </form>
            <button id="delete-target-confirm" class="btn btn-error">Delete</button>
        </div>
    </div>
    <form method="dialog" class="modal-backdrop"><button>close</button></form>
</dialog>

<!-- Reset confirmation modal -->
<dialog id="reset-modal" class="modal">
    <div class="modal-box">
        <h3 class="text-lg font-bold" style="color: #f87171;">Reset Database</h3>
        <p class="py-2 text-sm text-base-content/70">
            This will permanently delete all targets, runs, findings, and evidence. A backup will be created first.
        </p>
        <p class="py-2 text-sm font-medium">Type <code class="bg-base-300 px-1.5 py-0.5 rounded">RESET</code> to confirm:</p>
        <input id="reset-confirm-input" type="text" class="input input-bordered input-sm w-full"
               placeholder="Type RESET" autocomplete="off"
               oninput="document.getElementById('reset-confirm-btn').disabled = (this.value !== 'RESET')">
        <div class="modal-action">
            <form method="dialog">
                <button class="btn btn-ghost">Cancel</button>
            </form>
            <button id="reset-confirm-btn" class="btn btn-error" disabled onclick="executeReset()">Confirm Reset</button>
        </div>
    </div>
    <form method="dialog" class="modal-backdrop"><button>close</button></form>
</dialog>

<!-- Toast container -->
<div id="toast-container" class="toast toast-end toast-bottom z-50"></div>

<script>
function showToast(message, type) {
    var container = document.getElementById('toast-container');
    var alert = document.createElement('div');
    alert.className = 'alert alert-sm shadow-lg';
    if (type === 'success') alert.className += ' alert-success';
    else if (type === 'error') alert.className += ' alert-error';
    else alert.className += ' alert-info';
    var span = document.createElement('span');
    span.textContent = message;
    alert.appendChild(span);
    container.appendChild(alert);
    setTimeout(function() { alert.remove(); }, 4000);
}

function confirmDeleteTarget(targetId, targetName) {
    var modal = document.getElementById('delete-target-modal');
    document.getElementById('delete-target-message').textContent =
        "Delete target '" + targetName + "'? Associated runs will be unlinked but not deleted.";
    var btn = document.getElementById('delete-target-confirm');
    btn.onclick = function() {
        fetch('/api/targets/' + encodeURIComponent(targetId), { method: 'DELETE' })
            .then(function(resp) {
                if (resp.ok) {
                    modal.close();
                    var row = document.getElementById('target-row-' + targetId);
                    if (row) row.remove();
                    // Show empty state if no rows left
                    var tbody = document.getElementById('targets-tbody');
                    if (tbody && tbody.children.length === 0) {
                        location.reload();
                    }
                    showToast('Target deleted', 'success');
                    return;
                }
                return resp.json()
                    .catch(function() { return { detail: 'Unexpected error' }; })
                    .then(function(data) { showToast(data.detail || 'Delete failed', 'error'); });
            })
            .catch(function() { showToast('Network error', 'error'); });
    };
    modal.showModal();
}

function createBackup() {
    var btn = document.getElementById('backup-btn');
    btn.disabled = true;
    btn.textContent = 'Creating...';
    fetch('/api/db/backup', { method: 'POST' })
        .then(function(resp) {
            if (!resp.ok) {
                return resp.json()
                    .catch(function() { return { detail: 'Backup failed' }; })
                    .then(function(data) { showToast(data.detail || 'Backup failed', 'error'); });
            }
            return resp.json().then(function(data) {
                showToast('Backup created: ' + data.path, 'success');
            });
        })
        .catch(function() { showToast('Network error', 'error'); })
        .finally(function() {
            btn.disabled = false;
            btn.textContent = 'Create Backup';
        });
}

function executeReset() {
    var btn = document.getElementById('reset-confirm-btn');
    btn.disabled = true;
    btn.textContent = 'Resetting...';
    fetch('/api/db/reset', { method: 'POST' })
        .then(function(resp) {
            if (!resp.ok) {
                return resp.json()
                    .catch(function() { return { detail: 'Reset failed' }; })
                    .then(function(data) { showToast(data.detail || 'Reset failed', 'error'); });
            }
            return resp.json().then(function(data) {
                document.getElementById('reset-modal').close();
                if (data.backup_path) {
                    showToast('Backup created: ' + data.backup_path, 'success');
                }
                showToast('Database reset complete', 'success');
                setTimeout(function() { location.reload(); }, 1500);
            });
        })
        .catch(function() { showToast('Network error', 'error'); })
        .finally(function() {
            document.getElementById('reset-confirm-input').value = '';
            btn.textContent = 'Confirm Reset';
            btn.disabled = true;
        });
}
</script>
{% endblock %}