{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card bg-dark text-light border-secondary shadow-lg">
                <div class="card-header border-secondary bg-black d-flex justify-content-between align-items-center">
                    <h3 class="mb-0"><i class="bi bi-cpu text-warning me-2"></i>Audio Engine Settings</h3>
                    <span class="badge bg-danger">64-BIT STANDALONE MODE</span>
                </div>
                <div class="card-body p-4">
                    <form method="post">
                        {% csrf_token %}
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label class="form-label text-secondary small text-uppercase fw-bold">Audio Driver</label>
                                <select name="driver_type" class="form-select bg-black text-white border-secondary">
                                    <option value="asio" {% if settings.driver_type == 'asio' %}selected{% endif %}>ASIO (Low Latency)</option>
                                    <option value="wasapi" {% if settings.driver_type == 'wasapi' %}selected{% endif %}>WASAPI (Windows Audio)</option>
                                    <option value="directsound" {% if settings.driver_type == 'directsound' %}selected{% endif %}>DirectSound</option>
                                </select>
                                <div class="form-text text-muted">ASIO is recommended for professional audio interfaces.</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-secondary small text-uppercase fw-bold">Sample Rate</label>
                                <select name="sample_rate" class="form-select bg-black text-white border-secondary">
                                    <option value="44100" {% if settings.sample_rate == 44100 %}selected{% endif %}>44100 Hz</option>
                                    <option value="48000" {% if settings.sample_rate == 48000 %}selected{% endif %}>48000 Hz</option>
                                    <option value="96000" {% if settings.sample_rate == 96000 %}selected{% endif %}>96000 Hz</option>
                                </select>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label class="form-label text-secondary small text-uppercase fw-bold">Buffer Size (Samples)</label>
                                <select name="buffer_size" class="form-select bg-black text-white border-secondary">
                                    <option value="64" {% if settings.buffer_size == 64 %}selected{% endif %}>64 (Ultra Low)</option>
                                    <option value="128" {% if settings.buffer_size == 128 %}selected{% endif %}>128 (Recommended)</option>
                                    <option value="256" {% if settings.buffer_size == 256 %}selected{% endif %}>256</option>
                                    <option value="512" {% if settings.buffer_size == 512 %}selected{% endif %}>512</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-secondary small text-uppercase fw-bold">Latency Info</label>
                                <div class="bg-black p-2 border border-secondary rounded text-info font-monospace">
                                    Estimated: <span id="latency-val">2.9</span> ms
                                </div>
                            </div>
                        </div>

                        <hr class="border-secondary">

                        <div class="d-flex justify-content-between">
                            <button type="button" class="btn btn-outline-secondary">Reset Defaults</button>
                            <button type="submit" class="btn btn-warning px-5 fw-bold">Apply Changes</button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="mt-4 text-center">
                <p class="text-muted small">
                    <i class="bi bi-info-circle me-1"></i> These settings apply to the local audio engine proxy. Ensure your audio interface is connected.
                </p>
            </div>
        </div>
    </div>
</div>

<script>
    const bufferSelect = document.querySelector('select[name="buffer_size"]');
    const rateSelect = document.querySelector('select[name="sample_rate"]');
    const latencyVal = document.getElementById('latency-val');

    function updateLatency() {
        const buffer = parseInt(bufferSelect.value);
        const rate = parseInt(rateSelect.value);
        const ms = ((buffer / rate) * 1000).toFixed(1);
        latencyVal.textContent = ms;
    }

    bufferSelect.addEventListener('change', updateLatency);
    rateSelect.addEventListener('change', updateLatency);
    updateLatency();
</script>
{% endblock %}
