{% extends "base.html" %}

{% block title %}Client Rules - {{ hub_name }} Dashboard{% endblock %}

{% block content %}
<div class="level">
    <div class="level-left">
        <div class="level-item">
            <h1 class="title"><i class="fas fa-desktop mr-2"></i> Client Detection Rules</h1>
        </div>
    </div>
    <div class="level-right">
        <div class="level-item">
            <button class="button is-primary" onclick="openAddModal()">
                <i class="fas fa-plus mr-2"></i> Add Rule
            </button>
        </div>
    </div>
</div>

<div class="box">
    <table class="table is-fullwidth is-striped is-hoverable">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Tag ID</th>
                <th>Version Range</th>
                <th>Ban</th>
                <th>Enabled</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody id="client-table-body">
            <tr><td colspan="7" class="has-text-centered">Loading...</td></tr>
        </tbody>
    </table>
</div>

<!-- Add Modal -->
<div class="modal" id="client-modal">
    <div class="modal-background" onclick="closeModal()"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">Add Client Rule</p>
            <button class="delete" onclick="closeModal()"></button>
        </header>
        <section class="modal-card-body">
            <div class="field">
                <label class="label">Client Name</label>
                <input class="input" type="text" id="name-input" placeholder="StrgDC++">
            </div>
            <div class="field">
                <label class="label">Tag ID (substring match)</label>
                <input class="input" type="text" id="tagid-input" placeholder="++">
            </div>
            <div class="columns">
                <div class="column">
                    <div class="field">
                        <label class="label">Min Version (0 = any)</label>
                        <input class="input" type="number" step="0.01" id="minver-input" value="0">
                    </div>
                </div>
                <div class="column">
                    <div class="field">
                        <label class="label">Max Version (0 = any)</label>
                        <input class="input" type="number" step="0.01" id="maxver-input" value="0">
                    </div>
                </div>
            </div>
            <div class="field">
                <label class="checkbox">
                    <input type="checkbox" id="ban-input"> Ban matching clients
                </label>
            </div>
            <div class="field">
                <label class="checkbox">
                    <input type="checkbox" id="enable-input" checked> Enabled
                </label>
            </div>
        </section>
        <footer class="modal-card-foot">
            <button class="button is-success" onclick="saveClient()">Save</button>
            <button class="button" onclick="closeModal()">Cancel</button>
        </footer>
    </div>
</div>

<script>
const API = '/api/v1/clients';
const token = document.cookie.split(';').find(c => c.trim().startsWith('access_token='))?.split('=')[1] || '';
const headers = {'Content-Type': 'application/json', 'Authorization': token};

async function loadClients() {
    const resp = await fetch(API, {headers});
    if (!resp.ok) { document.getElementById('client-table-body').innerHTML = '<tr><td colspan="7">Error</td></tr>'; return; }
    const data = await resp.json();
    const tbody = document.getElementById('client-table-body');
    if (!data.length) { tbody.innerHTML = '<tr><td colspan="7" class="has-text-centered">No client rules configured</td></tr>'; return; }
    tbody.innerHTML = data.map(c => `<tr>
        <td>${c.id}</td>
        <td>${esc(c.name)}</td>
        <td><code>${esc(c.tag_id || '-')}</code></td>
        <td>${c.min_version || '*'} – ${c.max_version || '*'}</td>
        <td><span class="tag ${c.ban ? 'is-danger' : 'is-success'}">${c.ban ? 'Ban' : 'Allow'}</span></td>
        <td><span class="tag ${c.enable ? 'is-success' : 'is-warning'}">${c.enable ? 'Yes' : 'No'}</span></td>
        <td><button class="button is-small is-danger" onclick="deleteClient(${c.id})"><i class="fas fa-trash"></i></button></td>
    </tr>`).join('');
}

function esc(s) { const d = document.createElement('div'); d.textContent = s || ''; return d.innerHTML; }
function openAddModal() { document.getElementById('client-modal').classList.add('is-active'); }
function closeModal() { document.getElementById('client-modal').classList.remove('is-active'); }

async function saveClient() {
    const body = {
        name: document.getElementById('name-input').value,
        tag_id: document.getElementById('tagid-input').value,
        min_version: parseFloat(document.getElementById('minver-input').value) || 0,
        max_version: parseFloat(document.getElementById('maxver-input').value) || 0,
        ban: document.getElementById('ban-input').checked,
        enable: document.getElementById('enable-input').checked,
    };
    const resp = await fetch(API, {method: 'POST', headers, body: JSON.stringify(body)});
    if (resp.ok) { closeModal(); loadClients(); } else { alert('Error: ' + (await resp.text())); }
}

async function deleteClient(id) {
    if (!confirm('Delete client rule #' + id + '?')) return;
    await fetch(API + '/' + id, {method: 'DELETE', headers});
    loadClients();
}

loadClients();
</script>
{% endblock %}