{% extends 'base.html' %}
{% block title %}Admin{% endblock %}

{% block extra_css %}
<style>
.page-header { margin-bottom: 2rem; }
.page-header h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
.page-header p  { color: var(--muted); font-size: 0.9rem; margin-top: 0.2rem; }

.inline-form { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.inline-form .form-group { margin: 0; flex: 1; min-width: 120px; }

.tab-nav { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); padding-bottom: 0; }
.tab-btn {
    padding: 0.6rem 1.2rem;
    background: none;
    border: none;
    color: var(--muted);
    font-family: var(--font);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s;
}
.tab-btn.active, .tab-btn:hover { color: var(--accent); border-bottom-color: var(--accent); }

.tab-content { display: none; }
.tab-content.active { display: block; }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Admin Panel</h1>
    <p>Manage users, tokens, and packages</p>
</div>

<div class="tab-nav">
    <button class="tab-btn active" onclick="switchTab('users')">Users</button>
    <button class="tab-btn" onclick="switchTab('packages')">Token Packages</button>
    <button class="tab-btn" onclick="switchTab('scripts')">Run Scripts</button>
</div>

<!-- USERS TAB -->
<div id="tab-users" class="tab-content active">
    <div class="card">
        <div class="card-title">All Users ({{ users|length }})</div>
        <table>
            <thead>
                <tr>
                    <th>Username</th>
                    <th>Tokens</th>
                    <th>Phones</th>
                    <th>Joined</th>
                    <th>Add Tokens</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for user in users %}
                <tr>
                    <td style="font-family: var(--font); font-weight: 700;">
                        {{ user.username }}
                        {% if user.is_admin %}<span class="badge badge-blue" style="margin-left:0.5rem">admin</span>{% endif %}
                    </td>
                    <td style="color: var(--accent); font-weight: 700;">{{ user.tokens }}</td>
                    <td>{{ user.phone_numbers|length }}</td>
                    <td style="color: var(--muted);">{{ user.created_at.strftime('%Y-%m-%d') }}</td>
                    <td>
                        <form method="POST" action="{{ url_for('admin_add_tokens') }}" style="display:flex; gap:0.5rem;">
                            <input type="hidden" name="user_id" value="{{ user.id }}">
                            <input type="number" name="amount" placeholder="±tokens" style="width:90px; padding: 0.35rem 0.6rem;">
                            <input type="text" name="note" placeholder="note" style="width:120px; padding: 0.35rem 0.6rem;">
                            <button type="submit" class="btn btn-primary btn-sm">Add</button>
                        </form>
                    </td>
                    <td>
                        {% if not user.is_admin %}
                        <a href="{{ url_for('admin_delete_user', user_id=user.id) }}"
                           class="btn btn-danger btn-sm"
                           onclick="return confirm('Delete user {{ user.username }}?')">Delete</a>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- PACKAGES TAB -->
<div id="tab-packages" class="tab-content">
    <div class="card">
        <div class="card-title">Add Token Package</div>
        <form method="POST" action="{{ url_for('admin_add_package') }}">
            <div class="inline-form">
                <div class="form-group">
                    <label>Package Name</label>
                    <input type="text" name="name" placeholder="e.g. Starter" required>
                </div>
                <div class="form-group">
                    <label>Tokens</label>
                    <input type="number" name="tokens" placeholder="30" required>
                </div>
                <div class="form-group">
                    <label>Price (USD)</label>
                    <input type="number" name="price" placeholder="9.99" step="0.01" required>
                </div>
                <div class="form-group" style="flex: 0;">
                    <label>&nbsp;</label>
                    <button type="submit" class="btn btn-primary">Add Package</button>
                </div>
            </div>
        </form>
    </div>

    {% if packages %}
    <div class="card">
        <div class="card-title">Current Packages</div>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Tokens</th>
                    <th>Price</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for pkg in packages %}
                <tr>
                    <td style="font-family: var(--font); font-weight: 700;">{{ pkg.name }}</td>
                    <td style="color: var(--accent); font-weight: 700;">{{ pkg.tokens }}</td>
                    <td>${{ "%.2f"|format(pkg.price_cents / 100) }}</td>
                    <td>
                        <a href="{{ url_for('admin_delete_package', pkg_id=pkg.id) }}"
                           class="btn btn-danger btn-sm"
                           onclick="return confirm('Delete this package?')">Delete</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}
</div>


<!-- SCRIPTS TAB -->
<div id="tab-scripts" class="tab-content">

    <!-- Login Script -->
    <div class="card">
        <div class="card-title">Login Script — Enter Order Code</div>
        <p style="color: var(--muted); font-size: 0.875rem; margin-bottom: 1.2rem;">
            Logs into all accounts and submits an order code. Enter the code before running.
        </p>
        <div style="display: flex; gap: 0.75rem; align-items: flex-end; margin-bottom: 1rem;">
            <div class="form-group" style="margin: 0; flex: 1; max-width: 300px;">
                <label>Order Code</label>
                <input type="text" id="login-code" placeholder="Enter order code...">
            </div>
            <button class="btn btn-primary" onclick="runScript('login')" id="btn-login">
                ▶ Run Login Script
            </button>
        </div>
    </div>

    <!-- Entry Script -->
    <div class="card">
        <div class="card-title">Entry Script — Additional Order Confirmation</div>
        <p style="color: var(--muted); font-size: 0.875rem; margin-bottom: 1.2rem;">
            Logs into all accounts and confirms additional orders. No code required.
        </p>
        <button class="btn btn-primary" onclick="runScript('entry')" id="btn-entry">
            ▶ Run Entry Script
        </button>
    </div>

    <!-- Console Output -->
    <div class="card" id="console-card" style="display:none;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
            <div class="card-title" style="margin: 0;">Console Output</div>
            <div style="display: flex; gap: 0.5rem; align-items: center;">
                <span id="status-badge" class="badge badge-green" style="display:none;">● Running</span>
                <button class="btn btn-danger btn-sm" onclick="stopScript()" id="btn-stop" style="display:none;">■ Stop</button>
                <button class="btn btn-secondary btn-sm" onclick="clearConsole()">Clear</button>
            </div>
        </div>
        <div id="console-output" style="
            background: #05050a;
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 1rem 1.2rem;
            font-family: var(--mono);
            font-size: 0.8rem;
            line-height: 1.7;
            max-height: 500px;
            overflow-y: auto;
            white-space: pre-wrap;
            color: #c8c8d8;
        "></div>
    </div>
</div>

<script>
let eventSource = null;

function runScript(type) {
    const code = document.getElementById('login-code') ? document.getElementById('login-code').value.trim() : '';

    if (type === 'login' && !code) {
        alert('Please enter an order code before running the login script.');
        return;
    }

    // Check if already running
    fetch('/admin/run/status').then(r => r.json()).then(data => {
        if (data.running) {
            alert('A script is already running. Stop it first.');
            return;
        }
        startScript(type, code);
    });
}

function startScript(type, code) {
    const formData = new FormData();
    formData.append('script', type);
    formData.append('code', code);

    fetch('/admin/run', { method: 'POST', body: formData })
        .then(r => r.json())
        .then(data => {
            if (data.error) {
                alert('Error: ' + data.error);
                return;
            }
            showConsole();
            appendLine('🚀 Script started...');
            startStream();
        });
}

function startStream() {
    if (eventSource) eventSource.close();

    document.getElementById('status-badge').style.display = 'inline-block';
    document.getElementById('btn-stop').style.display = 'inline-block';
    document.getElementById('btn-login').disabled = true;
    document.getElementById('btn-entry').disabled = true;

    eventSource = new EventSource('/admin/run/stream');
    eventSource.onmessage = function(e) {
        if (e.data === '__DONE__') {
            appendLine('\n✅ Script finished.');
            stopStream();
            return;
        }
        if (e.data) appendLine(e.data);
    };
    eventSource.onerror = function() {
        stopStream();
    };
}

function stopScript() {
    fetch('/admin/run/stop', { method: 'POST' })
        .then(() => {
            appendLine('\n⛔ Script stopped by admin.');
            stopStream();
        });
}

function stopStream() {
    if (eventSource) { eventSource.close(); eventSource = null; }
    document.getElementById('status-badge').style.display = 'none';
    document.getElementById('btn-stop').style.display = 'none';
    document.getElementById('btn-login').disabled = false;
    document.getElementById('btn-entry').disabled = false;
}

function showConsole() {
    document.getElementById('console-card').style.display = 'block';
    document.getElementById('console-output').innerHTML = '';
}

function appendLine(text) {
    const el = document.getElementById('console-output');
    el.innerHTML += text + '\n';
    el.scrollTop = el.scrollHeight;
}

function clearConsole() {
    document.getElementById('console-output').innerHTML = '';
}
</script>

<script>
function switchTab(name) {
    document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.getElementById('tab-' + name).classList.add('active');
    event.target.classList.add('active');
}
</script>
{% endblock %}