{% extends "base.html" %}
{% block title %}Setup — Vela Platform{% endblock %}
{% block content %}
<div class="row justify-content-center mt-4">
    <div class="col-md-6 col-lg-5">
        <div class="card shadow">
            <div class="card-body p-4">
                <div class="text-center mb-4">
                    <span style="font-size: 3rem;">🏔️</span>
                    <h3 class="mt-2">Welcome to Vela Platform</h3>
                    <p class="text-muted">Let's set up your admin account to get started.</p>
                </div>

                <form id="setupForm">
                    <div class="mb-3">
                        <label for="adminUsername" class="form-label">Admin Username</label>
                        <input type="text" class="form-control" id="adminUsername" name="admin_username"
                               placeholder="e.g., admin" required autofocus>
                    </div>
                    <div class="mb-3">
                        <label for="adminPassword" class="form-label">Admin Password</label>
                        <input type="password" class="form-control" id="adminPassword" name="admin_password"
                               placeholder="Min 4 characters" minlength="4" required>
                    </div>
                    <div class="mb-3">
                        <label for="adminDisplay" class="form-label">Display Name (optional)</label>
                        <input type="text" class="form-control" id="adminDisplay" name="admin_display"
                               placeholder="e.g., Administrator">
                    </div>
                    <div id="setupError" class="alert alert-danger d-none py-2"></div>
                    <button type="submit" class="btn btn-primary w-100 btn-lg">
                        <i class="bi bi-rocket-takeoff"></i> Create Account &amp; Get Started
                    </button>
                </form>

                <div id="setupResult" class="d-none mt-3">
                    <div class="alert alert-success py-2">
                        <strong>✅ Setup complete!</strong> Redirecting...
                    </div>
                    <div class="card bg-body-tertiary mt-3">
                        <div class="card-body">
                            <h6>👤 <span id="resultUsername"></span></h6>
                            <p class="mb-1 text-muted" style="font-size:0.9rem;">
                                🔑 Password set — save it somewhere safe.
                            </p>
                            <hr>
                            <h6>👁️ Guest account created</h6>
                            <p class="mb-0" style="font-size:0.9rem;">
                                Username: <code>viewer</code><br>
                                Password: <code id="resultGuestPass"></code>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script>
document.getElementById('setupForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const form = e.target;
    const errorEl = document.getElementById('setupError');
    const resultEl = document.getElementById('setupResult');
    errorEl.classList.add('d-none');
    resultEl.classList.add('d-none');

    const data = {
        admin_username: document.getElementById('adminUsername').value.trim(),
        admin_password: document.getElementById('adminPassword').value,
        admin_display: document.getElementById('adminDisplay').value.trim() || document.getElementById('adminUsername').value.trim(),
    };

    if (!data.admin_username) {
        errorEl.textContent = 'Username is required';
        errorEl.classList.remove('d-none');
        return;
    }
    if (data.admin_password.length < 4) {
        errorEl.textContent = 'Password must be at least 4 characters';
        errorEl.classList.remove('d-none');
        return;
    }

    try {
        const resp = await fetch('/api/setup', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data),
        });

        if (!resp.ok) {
            const err = await resp.json();
            errorEl.textContent = err.detail || 'Setup failed';
            errorEl.classList.remove('d-none');
            return;
        }

        const result = await resp.json();
        setToken(result.token);

        document.getElementById('resultUsername').textContent = result.user.display_name;
        document.getElementById('resultGuestPass').textContent = result.guest_password;
        resultEl.classList.remove('d-none');
        form.style.display = 'none';

        setTimeout(() => {
            window.location.href = '/';
        }, 3000);
    } catch (err) {
        errorEl.textContent = 'Network error. Please try again.';
        errorEl.classList.remove('d-none');
    }
});
</script>
{% endblock %}