{% extends 'base.html' %}
{% block title %}Known Areas — Admin{% endblock %}
{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 1000px;">
        <div class="admin-header-row">
            <div>
                <span class="section-kicker">Admin Portal</span>
                <h1>Known Areas</h1>
            </div>
            <a href="{% url 'accounts:admin_portal' %}" class="btn-small">&larr; Back to portal</a>
        </div>

        <p style="color: var(--muted); margin-bottom: 10px;">
            The neighborhood/ward names and coordinates customers' delivery-location search matches against.
            Correct a coordinate here if a pin lands in the wrong place, or add a new area directly.
            Areas the AI resolves from a customer's search (because no coordinate was on file yet) are added
            here automatically, tagged <strong>ai</strong>, so the same place never has to be re-guessed.
            {% if unresolved_count %}<strong>{{ unresolved_count }} area{{ unresolved_count|pluralize }}</strong>
            still {{ unresolved_count|pluralize:"has,have" }} no coordinates — a customer searching one of those
            will trigger an AI lookup.{% endif %}
        </p>

        <div class="contact-form-wrap" style="max-width: 600px; margin-bottom: 30px;">
            <form method="post" class="contact-form">
                {% csrf_token %}
                <label for="name">Name</label>
                <input type="text" id="name" name="name" placeholder="e.g. Mikocheni" required>

                <label for="lat">Latitude</label>
                <input type="number" step="0.0001" id="lat" name="lat" placeholder="-6.7650">

                <label for="lng">Longitude</label>
                <input type="number" step="0.0001" id="lng" name="lng" placeholder="39.2600">

                <label for="aliases">Aliases (comma-separated)</label>
                <input type="text" id="aliases" name="aliases" placeholder="e.g. mikocheni a, mikocheni b">

                <button type="submit" class="btn-cta">Add Area</button>
            </form>
        </div>

        <input type="text" id="area-filter" placeholder="Type to filter by name or alias…" style="width: 100%; margin-bottom: 16px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--dark);">

        <div class="admin-table-wrap">
        <table class="admin-table" id="areas-table">
            <thead>
                <tr><th>Name</th><th>Coordinates</th><th>Aliases</th><th>Source</th><th></th></tr>
            </thead>
            <tbody>
                {% for area in areas %}
                <tr class="area-row" data-search="{{ area.name }} {{ area.aliases|join:' ' }}">
                    <td>{{ area.name|title }}</td>
                    <td>
                        {% if area.lat is None %}
                        <span class="surface-badge warn">No coordinates</span>
                        {% else %}
                        {{ area.lat }}, {{ area.lng }}
                        {% endif %}
                    </td>
                    <td style="font-size: 0.85rem; color: var(--muted);">{{ area.aliases|join:", " }}</td>
                    <td><span class="surface-badge">{{ area.source }}</span></td>
                    <td style="display: flex; gap: 6px;">
                        <button type="button" class="btn-small area-edit-toggle" data-target="edit-area-{{ area.id }}">Edit</button>
                    </td>
                </tr>
                <tr class="area-edit-row" id="edit-area-{{ area.id }}" style="display: none;">
                    <td colspan="5" style="white-space: normal;">
                        <form method="post" action="{% url 'accounts:admin_edit_known_area' area.id %}" class="contact-form" style="max-width: 600px;">
                            {% csrf_token %}
                            <label for="name-{{ area.id }}">Name</label>
                            <input type="text" id="name-{{ area.id }}" name="name" value="{{ area.name }}" required>

                            <label for="lat-{{ area.id }}">Latitude</label>
                            <input type="number" step="0.0001" id="lat-{{ area.id }}" name="lat" value="{{ area.lat|default:'' }}">

                            <label for="lng-{{ area.id }}">Longitude</label>
                            <input type="number" step="0.0001" id="lng-{{ area.id }}" name="lng" value="{{ area.lng|default:'' }}">

                            <label for="aliases-{{ area.id }}">Aliases (comma-separated)</label>
                            <input type="text" id="aliases-{{ area.id }}" name="aliases" value="{{ area.aliases|join:", " }}">

                            <div style="display: flex; gap: 10px;">
                                <button type="submit" class="btn-cta">Save Changes</button>
                            </div>
                        </form>
                        <form method="post" action="{% url 'accounts:admin_delete_known_area' area.id %}" style="margin-top: 10px;" onsubmit="return confirm('Remove {{ area.name|title }}? This cannot be undone.');">
                            {% csrf_token %}
                            <button type="submit" class="btn-small" style="background: var(--muted);">Remove this area</button>
                        </form>
                    </td>
                </tr>
                {% empty %}
                <tr><td colspan="5">No areas yet.</td></tr>
                {% endfor %}
            </tbody>
        </table>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.area-edit-toggle').forEach(function (btn) {
            btn.addEventListener('click', function () {
                var row = document.getElementById(btn.getAttribute('data-target'));
                if (!row) return;
                var isOpen = row.style.display !== 'none';
                row.style.display = isOpen ? 'none' : 'table-row';
                btn.textContent = isOpen ? 'Edit' : 'Cancel';
            });
        });

        var filterInput = document.getElementById('area-filter');
        var rows = document.querySelectorAll('.area-row');
        filterInput.addEventListener('input', function () {
            var q = filterInput.value.trim().toLowerCase();
            rows.forEach(function (row) {
                var haystack = (row.dataset.search || '').toLowerCase();
                var editRow = row.nextElementSibling;
                var matches = !q || haystack.indexOf(q) !== -1;
                row.style.display = matches ? '' : 'none';
                if (editRow && editRow.classList.contains('area-edit-row') && !matches) {
                    editRow.style.display = 'none';
                }
            });
        });
    });
</script>
{% endblock %}