{% extends "base.html" %}
{% block content %}

<h1>Promo Rates</h1>
<p class="page-subtitle">
    Coin-to-time mappings for the portal. ₱1 is the base rate and can't be removed.
</p>

<div class="page-actions">
    <button type="button" class="btn-primary" onclick="openAddRateModal()">+ Add New Rate</button>
</div>

{% if flash_msg %}
    <div class="flash flash-good">
        {{ flash_msg }}
        <button class="flash-close" aria-label="Close">×</button>
    </div>
{% endif %}
{% if error_msg %}
    <div class="flash flash-error">
        {{ error_msg }}
        <button class="flash-close" aria-label="Close">×</button>
    </div>
{% endif %}

<section>
    <h2>Existing Rates</h2>

    {% if rates %}
        <div class="table-scroll">
            <table>
                <thead>
                    <tr>
                        <th>Coins</th>
                        <th>Minutes</th>
                        <th class="col-hide-mobile">Validity</th>
                        <th class="col-hide-mobile">Name</th>
                        <th>Status</th>
                        <th class="actions-cell">Actions</th>
                    </tr>
                </thead>
                <tbody>
                {% for r in rates %}
                    <!-- View row -->
                    <tr id="row-view-{{ r.id }}">
                        <td><strong style="color: var(--text);">₱{{ r.coins }}</strong></td>
                        <td>{{ r.minutes }} min</td>
                        <td class="col-hide-mobile">{{ r.validity_minutes }} min</td>
                        <td class="col-hide-mobile">{{ r.name }}</td>
                        <td>
                            {% if r.locked %}
                                <span class="badge badge-pending">default</span>
                            {% elif r.active %}
                                <span class="badge badge-active">active</span>
                            {% else %}
                                <span class="badge badge-expired">inactive</span>
                            {% endif %}
                        </td>
                        <td class="actions-cell">
                            <button class="btn-sm" onclick="showEdit({{ r.id }})">Edit</button>
                            {% if not r.locked %}
                                <form method="POST" action="/rates/{{ r.id }}/toggle">
                                    <button type="submit" class="btn-sm">
                                        {% if r.active %}Deactivate{% else %}Activate{% endif %}
                                    </button>
                                </form>
                                <form method="POST" action="/rates/{{ r.id }}/delete"
                                      onsubmit="return confirm('Delete the ₱{{ r.coins }} rate? Historical sales records still work but new transactions cannot use it.');">
                                    <button type="submit" class="btn-sm-danger">Delete</button>
                                </form>
                            {% endif %}
                        </td>
                    </tr>
                    <!-- Edit row -->
                    <tr id="row-edit-{{ r.id }}" style="display: none; background: var(--surface-2);">
                        <td colspan="6">
                            <form method="POST" action="/rates/{{ r.id }}/edit" class="edit-form">
                                <div class="form-grid">
                                    <div>
                                        <label>Coins</label>
                                        <input type="text" value="₱{{ r.coins }} (immutable)" disabled>
                                    </div>
                                    <div>
                                        <label>Minutes</label>
                                        <input type="number" name="minutes" min="1" value="{{ r.minutes }}" required>
                                    </div>
                                    <div>
                                        <label>Validity (min)</label>
                                        <input type="number" name="validity_minutes" min="0" value="{{ r.validity_minutes }}" required>
                                    </div>
                                    <div>
                                        <label>Name</label>
                                        <input type="text" name="name" value="{{ r.name }}" required>
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <button type="submit" class="btn-primary">Save</button>
                                    <button type="button" class="btn-secondary" onclick="hideEdit({{ r.id }})">Cancel</button>
                                </div>
                            </form>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <div class="empty-state">
            <strong>No rates configured.</strong><br>
            Add one below to start accepting coins.
        </div>
    {% endif %}
</section>

<div id="add-rate-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="add-rate-modal-title" hidden>
    <div class="modal-backdrop" onclick="closeAddRateModal()"></div>
    <div class="modal-dialog">
        <header class="modal-header">
            <h2 id="add-rate-modal-title" class="modal-title">Add New Rate</h2>
            <button type="button" class="modal-close" onclick="closeAddRateModal()" aria-label="Close">&times;</button>
        </header>
        <div class="modal-body">
            <p class="card-desc">
                Coin-to-time mappings the portal combines. Coin amount can't be edited later — delete and recreate to change it.
            </p>
            <form id="add-rate-form" method="POST" action="/rates/add" class="edit-form">
                <div class="form-grid">
                    <div>
                        <label>Coins (₱)</label>
                        <input type="number" name="coins" min="1" placeholder="e.g. 20" required>
                    </div>
                    <div>
                        <label>Minutes</label>
                        <input type="number" name="minutes" min="1" placeholder="e.g. 180" required>
                    </div>
                    <div>
                        <label>Validity (min)</label>
                        <input type="number" name="validity_minutes" min="0" placeholder="0 = same as minutes" value="0" required>
                    </div>
                    <div>
                        <label>Name</label>
                        <input type="text" name="name" placeholder="e.g. ₱20 = 3 hours" required>
                    </div>
                </div>
                <p class="form-hint">
                    Validity of <code>0</code> means "same as minutes." The combo solver
                    sums validity per rate use and floors at total minutes, so wall-clock
                    validity scales with customer spend.
                </p>
                <div class="form-actions">
                    <button type="submit" class="btn-primary">Add Rate</button>
                    <button type="button" class="btn-secondary" onclick="closeAddRateModal()">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function showEdit(id) {
    document.getElementById('row-view-' + id).style.display = 'none';
    document.getElementById('row-edit-' + id).style.display = '';
}
function hideEdit(id) {
    document.getElementById('row-view-' + id).style.display = '';
    document.getElementById('row-edit-' + id).style.display = 'none';
}

(function() {
    const modal = document.getElementById('add-rate-modal');
    window.openAddRateModal = function() {
        modal.hidden = false;
        document.body.style.overflow = 'hidden';
        const first = modal.querySelector('input[name=coins]');
        if (first) setTimeout(() => first.focus(), 50);
    };
    window.closeAddRateModal = function() {
        modal.hidden = true;
        document.body.style.overflow = '';
    };
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && !modal.hidden) closeAddRateModal();
    });
    {% if add_form_error %}
        document.addEventListener('DOMContentLoaded', openAddRateModal);
    {% endif %}
})();
</script>

{% endblock %}