{% extends "base.html" %}

{% block title %}Traffic & Visits - AISBF Dashboard{% endblock %}

{% block content %}
<h2 style="margin-bottom: 30px;">Traffic &amp; Visits</h2>

<div style="background: var(--bg-page); padding: 15px; border-radius: 8px; margin-bottom: 30px;">
    <div style="display: flex; gap: 15px; flex-wrap: wrap;">
        <a href="{{ url_for(request, '/dashboard/analytics') }}" class="btn btn-secondary" style="text-decoration: none;">📊 Analytics</a>
        <a href="{{ url_for(request, '/dashboard/prompt-analytics') }}" class="btn btn-secondary" style="text-decoration: none;">🧠 Prompt Analytics</a>
        <a href="{{ url_for(request, '/dashboard/traffic-visits') }}" class="btn" style="text-decoration: none;">👣 Traffic &amp; Visits</a>
        <a href="{{ url_for(request, '/dashboard/response-cache') }}" class="btn btn-secondary" style="text-decoration: none;">💾 Response Cache</a>
        <a href="{{ url_for(request, '/dashboard/rate-limits') }}" class="btn btn-secondary" style="text-decoration: none;">⏱️ Rate Limits</a>
    </div>
</div>

<div style="background: var(--bg-page); padding: 20px; border-radius: 8px; margin-bottom: 30px; border: 1px solid var(--color-border);">
    <h3 style="margin-bottom: 15px;">Dashboard Visitor &amp; Activity Tracking</h3>
    <form method="get" action="{{ url_for(request, '/dashboard/traffic-visits') }}" style="display:flex; flex-wrap:wrap; gap:15px; align-items:flex-end;">
        <input type="hidden" name="time_range" value="{{ selected_time_range }}">
        {% if from_date %}<input type="hidden" name="from_date" value="{{ from_date }}">{% endif %}
        {% if to_date %}<input type="hidden" name="to_date" value="{{ to_date }}">{% endif %}
        {% if selected_provider %}<input type="hidden" name="provider_filter" value="{{ selected_provider }}">{% endif %}
        {% if selected_model %}<input type="hidden" name="model_filter" value="{{ selected_model }}">{% endif %}
        {% if selected_rotation %}<input type="hidden" name="rotation_filter" value="{{ selected_rotation }}">{% endif %}
        {% if selected_autoselect %}<input type="hidden" name="autoselect_filter" value="{{ selected_autoselect }}">{% endif %}
        {% if selected_user %}<input type="hidden" name="user_filter" value="{{ selected_user }}">{% endif %}
        {% if global_only %}<input type="hidden" name="global_only" value="{{ global_only }}">{% endif %}

        <div style="flex:1; min-width:180px;"><label style="display:block; margin-bottom:5px; color:var(--color-muted); font-size:14px;">Activity Type</label><input type="text" name="activity_event_filter" value="{{ activity_event_filter or '' }}" placeholder="dashboard_visit, provider_saved..." style="width:100%; padding:10px; border-radius:4px; background:var(--bg-accent); color:white; border:1px solid #2a4a7a;"></div>
        <div style="flex:1; min-width:180px;"><label style="display:block; margin-bottom:5px; color:var(--color-muted); font-size:14px;">Visited Page</label><input type="text" name="activity_path_filter" value="{{ activity_path_filter or '' }}" placeholder="/dashboard/providers" style="width:100%; padding:10px; border-radius:4px; background:var(--bg-accent); color:white; border:1px solid #2a4a7a;"></div>
        <div style="flex:1; min-width:140px;"><label style="display:block; margin-bottom:5px; color:var(--color-muted); font-size:14px;">Country</label><input type="text" name="activity_country_filter" value="{{ activity_country_filter or '' }}" placeholder="ZA" style="width:100%; padding:10px; border-radius:4px; background:var(--bg-accent); color:white; border:1px solid #2a4a7a; text-transform:uppercase;"></div>
        <div><button type="submit" style="padding: 10px 20px; background: var(--color-link); color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold;">Apply Activity Filters</button></div>
    </form>
</div>

<script>
const analyticsData = {
    dashboardVisitSeries: {{ dashboard_visit_series|default('[]')|safe }}
};
</script>

{% if dashboard_visit_overview %}
<h3 style="margin-top: 30px; margin-bottom: 15px;">Visitor &amp; Dashboard Activity Overview</h3>
<div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:16px; margin-bottom:24px;">
    <div style="background:#1f6feb; color:white; padding:18px; border-radius:8px;"><div style="font-size:13px; opacity:0.9;">Total Events</div><div style="font-size:28px; font-weight:700;">{{ dashboard_visit_overview.total_events }}</div></div>
    <div style="background:#0f766e; color:white; padding:18px; border-radius:8px;"><div style="font-size:13px; opacity:0.9;">Unique IPs</div><div style="font-size:28px; font-weight:700;">{{ dashboard_visit_overview.unique_ips }}</div></div>
    <div style="background:#7c3aed; color:white; padding:18px; border-radius:8px;"><div style="font-size:13px; opacity:0.9;">Unique Visitors</div><div style="font-size:28px; font-weight:700;">{{ dashboard_visit_overview.unique_visitors }}</div></div>
    <div style="background:#c2410c; color:white; padding:18px; border-radius:8px;"><div style="font-size:13px; opacity:0.9;">Unique Sessions</div><div style="font-size:28px; font-weight:700;">{{ dashboard_visit_overview.unique_sessions }}</div></div>
</div>

<div style="display:grid; grid-template-columns:2fr 1fr; gap:20px; margin-bottom:24px;">
    <div style="background: var(--bg-page); padding: 20px; border-radius: 8px;"><h4 style="margin-top:0; margin-bottom:12px;">Visit &amp; Activity Timeline</h4><canvas id="dashboardVisitChart" style="width: 100%; height: 280px;"></canvas></div>
    <div style="background: var(--bg-page); padding: 20px; border-radius: 8px;"><h4 style="margin-top:0; margin-bottom:12px;">Activity Types</h4><table><tr><th>Type</th><th>Count</th></tr>{% for row in dashboard_visit_overview.by_type %}<tr><td>{{ row.event_type }}</td><td>{{ row.count }}</td></tr>{% endfor %}</table></div>
</div>

<div style="display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px;">
    <div style="background: var(--bg-page); padding: 20px; border-radius: 8px;"><h4 style="margin-top:0; margin-bottom:12px;">Visited Pages</h4><table><tr><th>Page</th><th>Visits</th></tr>{% for row in dashboard_visit_pages %}<tr><td>{{ row.path }}</td><td>{{ row.count }}</td></tr>{% endfor %}</table></div>
    <div style="background: var(--bg-page); padding: 20px; border-radius: 8px;"><h4 style="margin-top:0; margin-bottom:12px;">Countries</h4><table><tr><th>Country</th><th>Visits</th></tr>{% for row in dashboard_visit_countries %}<tr><td>{{ row.country_code }}</td><td>{{ row.count }}</td></tr>{% endfor %}</table></div>
</div>

<div style="display:grid; grid-template-columns:1fr 2fr; gap:20px; margin-bottom:24px;">
    <div style="background: var(--bg-page); padding: 20px; border-radius: 8px;"><h4 style="margin-top:0; margin-bottom:12px;">Tracked Users</h4><table><tr><th>User</th><th>Events</th></tr>{% for row in dashboard_visit_users %}<tr><td>{{ row.username }}{% if row.user_id %} (#{{ row.user_id }}){% endif %}</td><td>{{ row.count }}</td></tr>{% endfor %}</table></div>
    <div style="background: var(--bg-page); padding: 20px; border-radius: 8px; overflow:auto;"><h4 style="margin-top:0; margin-bottom:12px;">Recent Dashboard Events</h4><table><tr><th>Time</th><th>Type</th><th>User</th><th>IP</th><th>Country</th><th>Page</th><th>Status</th><th>Details</th></tr>{% for row in dashboard_visit_events %}<tr><td>{{ row.created_at }}</td><td>{{ row.event_type }}</td><td>{{ row.username or 'guest' }}</td><td>{{ row.ip_address or '-' }}</td><td>{{ row.country_code or '-' }}</td><td>{{ row.path or '-' }}</td><td>{{ row.status_code or '-' }}</td><td>{% if row.provider_id %}provider={{ row.provider_id }} {% endif %}{% if row.rotation_id %}rotation={{ row.rotation_id }} {% endif %}{% if row.autoselect_id %}autoselect={{ row.autoselect_id }} {% endif %}{% if row.listing_id %}listing={{ row.listing_id }} {% endif %}{% if row.metadata %}<code>{{ row.metadata|tojson }}</code>{% endif %}</td></tr>{% endfor %}</table></div>
</div>
{% else %}
<p style="color: var(--color-muted);">No visitor or activity data available yet.</p>
{% endif %}

<div style="margin-top: 30px; display: flex; gap: 10px; flex-wrap: wrap;">
    <a href="{{ url_for(request, '/dashboard') }}" class="btn btn-secondary">Back to Dashboard</a>
    <a href="{{ url_for(request, '/dashboard/analytics') }}" class="btn btn-secondary">Analytics</a>
    <a href="{{ url_for(request, '/dashboard/rate-limits') }}" class="btn">Rate Limits</a>
    <a href="{{ url_for(request, '/dashboard/response-cache') }}" class="btn">Response Cache</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
<script>
if (document.getElementById('dashboardVisitChart') && analyticsData.dashboardVisitSeries.length) {
    new Chart(document.getElementById('dashboardVisitChart'), {
        type: 'line',
        data: {
            datasets: [
                { label: 'Events', data: analyticsData.dashboardVisitSeries.map(d => ({x: d.bucket, y: d.events})), borderColor: '#1f6feb', backgroundColor: 'rgba(31,111,235,0.12)', fill: true, tension: 0.2 },
                { label: 'Unique IPs', data: analyticsData.dashboardVisitSeries.map(d => ({x: d.bucket, y: d.unique_ips})), borderColor: '#0f766e', backgroundColor: 'rgba(15,118,110,0.08)', fill: false, tension: 0.2 },
                { label: 'Unique Visitors', data: analyticsData.dashboardVisitSeries.map(d => ({x: d.bucket, y: d.unique_visitors})), borderColor: '#7c3aed', backgroundColor: 'rgba(124,58,237,0.08)', fill: false, tension: 0.2 }
            ]
        },
        options: { responsive: true, scales: { x: { type: 'time', time: { unit: 'hour' }, title: { display: true, text: 'Time' } }, y: { beginAtZero: true, title: { display: true, text: 'Count' } } } }
    });
}
</script>
{% endblock %}