{% extends "admin_base.html" %}
{% import "macros/map.html" as map_macros %}
{% import "macros/admin_management_header.html" as mh %}
{% import "macros/empty_state.html" as empty %}

{% block page_title %}Interaction Map{% endblock %}

{% block admin_content %}
<div class="interaction-map-root mx-auto w-full max-w-[90rem] space-y-5 px-4 py-5" data-plugin="interaction-map"
     data-from-date="{{ stats.from_date | default(value='') }}"
     data-to-date="{{ stats.to_date | default(value='') }}"
     data-api-points="/plugins/interaction-map/api/points"
     data-api-clear="/plugins/interaction-map/api/clear">
    {{ mh::management_header_open(title="Interaction Map", subtitle="Visitor connections geolocated from IP. When active on the config tenant, traffic from all tenants and unprovisioned hosts is recorded here.") }}
        <span class="blocks-status-pill is-neutral" id="im-total-hits" role="status">{{ stats.total_hits | default(value=0) }} hits</span>
        <span class="blocks-status-pill is-info" id="im-unique-locations">{{ stats.unique_locations | default(value=0) }} locations</span>
        <button type="button" id="im-clear-logs" class="blocks-button blocks-button-danger blocks-button-sm" title="Delete all interaction logs and compact the database">
            <i class="fas fa-trash-alt"></i> Clear
        </button>
    {{ mh::management_header_close() }}

    <div class="rounded-xl border border-divider bg-surface shadow-sm">
            <form id="interaction-map-filters" class="grid grid-cols-1 items-end gap-4 p-4 sm:grid-cols-2 xl:grid-cols-6">
                <div class="min-w-0">
                    <label class="mb-1 block text-sm font-medium text-foreground" for="im-from">From</label>
                    <input type="date" class="blocks-input" id="im-from" name="from"
                           value="{{ stats.from_date | default(value='') }}">
                </div>
                <div class="min-w-0">
                    <label class="mb-1 block text-sm font-medium text-foreground" for="im-to">To</label>
                    <input type="date" class="blocks-input" id="im-to" name="to"
                           value="{{ stats.to_date | default(value='') }}">
                </div>
                <div class="min-w-0">
                    <label class="mb-1 block text-sm font-medium text-foreground" for="im-tenant">Tenant</label>
                    <select class="blocks-input" id="im-tenant" name="tenant">
                        <option value="">All tenants</option>
                        {% for t in tenants %}
                        <option value="{{ t }}">{{ t }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="min-w-0">
                    <span class="mb-1 block text-sm font-medium text-foreground">Invalid only</span>
                    <label class="flex min-h-11 items-center gap-2 text-sm text-foreground" for="im-invalid-only">
                        <input class="size-5 accent-brand" type="checkbox" id="im-invalid-only" name="invalid_only" value="1">
                        Unprovisioned hosts
                    </label>
                </div>
                <div class="min-w-0">
                    <label class="mb-1 block text-sm font-medium text-foreground" for="im-response-code">Response Code</label>
                    <select class="blocks-input" id="im-response-code" name="response_code">
                        <option value="">All codes</option>
                        <option value="2xx">2xx Success</option>
                        <option value="3xx">3xx Redirect</option>
                        <option value="4xx">4xx Client Error</option>
                        <option value="404">404 Not Found</option>
                        <option value="5xx">5xx Server Error</option>
                        <option value="custom">Custom...</option>
                    </select>
                </div>
                <div class="min-w-0" id="im-custom-code-container" hidden>
                    <label class="mb-1 block text-sm font-medium text-foreground" for="im-custom-code">Code</label>
                    <input type="text" class="blocks-input" id="im-custom-code" name="custom_code" placeholder="e.g. 403">
                </div>
                <div class="min-w-0">
                    <label class="mb-1 block text-sm font-medium text-foreground" for="im-url-prefix">URL prefix</label>
                    <input type="text" class="blocks-input" id="im-url-prefix" name="url_prefix"
                           placeholder="/products">
                </div>
                <div class="min-w-0">
                    <button type="submit" class="blocks-button blocks-button-primary w-full">Apply filters</button>
                </div>
            </form>
    </div>

    <div class="overflow-hidden rounded-xl border border-divider bg-surface p-2 shadow-sm">
        <div>
            {{ map_macros::render(map_id="interaction-map", height="480px", markers_data=markers | json_encode) }}
        </div>
    </div>

    <div class="overflow-hidden rounded-xl border border-divider bg-surface shadow-sm">
        <div class="border-b border-divider px-4 py-3">
            <h2 class="m-0 text-base font-semibold text-foreground">Interaction points</h2>
        </div>
        <div class="overflow-x-auto blocks-admin-table">
            <table>
                <thead>
                    <tr>
                        <th>Location</th>
                        <th>IP Address</th>
                        <th>Tenant</th>
                        <th>Status</th>
                        <th>URL</th>
                        <th>Date</th>
                        <th>Hits</th>
                        <th>Source</th>
                        <th>Last seen</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="interaction-map-table-body">
                    {% for point in points %}
                    <tr>
                        <td data-label="Location">
                            {% if point.city and point.country %}
                            {{ point.city }}, {{ point.country }}
                            {% elif point.country %}
                            {{ point.country }}
                            {% else %}
                            —
                            {% endif %}
                        </td>
                        <td data-label="IP Address">
                            {% if point.ip_address %}
                            <code>{{ point.ip_address }}</code>
                            {% if point.is_banned %}
                            <span class="blocks-status-pill is-danger">banned</span>
                            {% endif %}
                            {% else %}
                            —
                            {% endif %}
                        </td>
                        <td data-label="Tenant">
                            {% if point.requested_tenant %}
                            <code>{{ point.requested_tenant }}</code>
                            {% if point.tenant_valid == 0 %}
                            <span class="blocks-status-pill is-warning">invalid</span>
                            {% endif %}
                            {% else %}
                            —
                            {% endif %}
                        </td>
                        <td data-label="Status">
                            {% if point.response_code %}
                            {% if point.response_code >= 200 and point.response_code < 300 %}
                            <span class="blocks-status-pill is-success">{{ point.response_code }}</span>
                            {% elif point.response_code >= 300 and point.response_code < 400 %}
                            <span class="blocks-status-pill is-info">{{ point.response_code }}</span>
                            {% elif point.response_code >= 400 and point.response_code < 500 %}
                            <span class="blocks-status-pill is-warning">{{ point.response_code }}</span>
                            {% elif point.response_code >= 500 %}
                            <span class="blocks-status-pill is-danger">{{ point.response_code }}</span>
                            {% else %}
                            <span class="blocks-status-pill is-neutral">{{ point.response_code }}</span>
                            {% endif %}
                            {% else %}
                            —
                            {% endif %}
                        </td>
                        <td data-label="URL"><code>{{ point.url_path }}</code></td>
                        <td data-label="Date">{{ point.interaction_date | date_in_tz(timezone=settings.timezone) }}</td>
                        <td data-label="Hits">{{ point.hits }}</td>
                        <td data-label="Source">{{ point.source }}</td>
                        <td data-label="Last seen">
                            <small>{{ point.last_seen_at | date_in_tz(timezone=settings.timezone) }}</small>
                        </td>
                    </tr>
                    {% else %}
                    {{ empty::empty_state(table=true, colspan=10, icon="fas fa-map-marked-alt", title="No interactions yet", description="No interactions recorded yet. Browse the site to populate the map.") }}
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/interaction-map/assets/js/admin.js"></script>
{% endblock %}