{% extends "base.html" %}
{% block title %}Dashboard — Willhaben Tracker{% endblock %}
{% block title_in_topbar %}Dashboard{% endblock %}

{% block content %}
{% if data %}
<h3 style="margin-top: 0;">Overview</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-bottom: 32px;">
    
    <div class="card stat-card">
        <div class="stat-label">Total Keywords</div>
        <div class="stat-value">{{ data.total_keywords }}</div>
        <div class="stat-subtext success">
            <i class="ph-fill ph-check-circle"></i> {{ data.active_keywords }} active
        </div>
    </div>

    <div class="card stat-card">
        <div class="stat-label">Total Ads Tracked</div>
        <div class="stat-value">{{ data.total_ads }}</div>
        <div class="stat-subtext muted">Across all time</div>
    </div>

    <div class="card stat-card">
        <div class="stat-label">Active Users</div>
        <div class="stat-value">{{ data.total_users }}</div>
        <div class="stat-subtext muted">Subscribed to updates</div>
    </div>

    <div class="card stat-card">
        <div class="stat-label">Notifications Sent</div>
        <div class="stat-value">{{ data.notifications_sent }}</div>
        <div class="stat-subtext muted">Via Telegram</div>
    </div>

</div>

<h3>System Health</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px;">

    <div class="card stat-card" style="border-left: 4px solid var(--border-hover);">
        <div class="stat-label">Last Scheduler Run</div>
        <div class="stat-value" style="font-size: 24px;">
            {{ data.last_scheduler.strftime('%Y-%m-%d %H:%M:%S') if data.last_scheduler else 'Never' }}
        </div>
        <div class="stat-subtext muted">Worker polling rhythm</div>
    </div>

    <div class="card stat-card" style="border-left: 4px solid {% if data.proxy_enabled %}var(--success-text){% elif data.proxy_available %}var(--warning-text){% else %}var(--border-hover){% endif %};">
        <div class="stat-label">HTTP Proxy</div>
        <div class="stat-value" style="font-size: 24px; color: {% if data.proxy_enabled %}var(--success-text){% elif data.proxy_available %}var(--warning-text){% else %}var(--text-primary){% endif %};">
            {% if data.proxy_enabled %}Active{% elif data.proxy_available %}Bypassed{% else %}Unavailable{% endif %}
        </div>
        <div class="stat-subtext muted">
            {% if data.proxy_enabled %}
            Scraper uses proxy
            {% elif data.proxy_available %}
            Proxy present, scraper direct
            {% else %}
            No proxy in .env
            {% endif %}
        </div>
        <form method="post" action="/admin/proxy" style="margin-top: 12px;">
            <button type="submit" {% if not data.proxy_available %}disabled{% endif %} style="border: 1px solid var(--border-hover); background: {% if data.proxy_enabled %}var(--warning-bg){% else %}var(--bg-surface-active){% endif %}; color: var(--text-primary); border-radius: 8px; padding: 8px 12px; cursor: {% if data.proxy_available %}pointer{% else %}not-allowed{% endif %}; font-weight: 600; opacity: {% if data.proxy_available %}1{% else %}0.55{% endif %};">
                {{ 'Disable Proxy' if data.proxy_enabled else 'Enable Proxy' }}
            </button>
        </form>
    </div>

    <div class="card stat-card" style="border-left: 4px solid var(--brand-primary);">
        <div class="stat-label">Network Egress</div>
        <div style="display: grid; gap: 10px; margin-top: 10px;">
            <div>
                <div class="stat-subtext muted">System IP</div>
                <div style="font-size: 18px; font-weight: 600; line-height: 1.4;">
                    {{ data.system_country_flag }}
                    {{ data.system_public_ip or 'Unknown' }}
                    {% if data.system_country_code %}
                    <span style="font-size: 12px; color: var(--text-muted);">({{ data.system_country_code }})</span>
                    {% endif %}
                </div>
            </div>
            <div>
                <div class="stat-subtext muted">Last Used IP</div>
                <div style="font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--brand-primary);">
                    {{ data.last_used_country_flag }}
                    {{ data.last_used_public_ip or 'Unknown' }}
                    {% if data.last_used_country_code %}
                    <span style="font-size: 12px; color: var(--text-muted);">({{ data.last_used_country_code }})</span>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <div class="card stat-card" style="border-left: 4px solid {% if data.turbo_active %}var(--warning-text){% else %}var(--border-hover){% endif %};">
        <div class="stat-label">Turbo Mode (Admin)</div>
        <div class="stat-value" style="font-size: 24px; color: {% if data.turbo_active %}var(--warning-text){% else %}var(--text-primary){% endif %};">
            {{ 'Active' if data.turbo_active else ('Armed' if data.turbo_mode else 'Off') }}
        </div>
        <div class="stat-subtext muted">
            {% if data.proxy_enabled %}
            Scheduler runs every ~{{ '%.1f'|format(data.turbo_effective_sleep_s) }}s
            {% else %}
            Activate proxy first to enable turbo
            {% endif %}
        </div>
        {% if data.seconds_until_next is not none %}
        <div class="stat-subtext muted">Next cycle in ~{{ data.seconds_until_next }}s</div>
        {% endif %}
        <form method="post" action="/admin/turbo" style="margin-top: 12px;">
            <button type="submit" {% if not data.proxy_enabled %}disabled{% endif %} style="border: 1px solid var(--border-hover); background: {% if data.turbo_mode %}var(--warning-bg){% else %}var(--bg-surface-active){% endif %}; color: var(--text-primary); border-radius: 10px; padding: 8px 12px; cursor: {% if data.proxy_enabled %}pointer{% else %}not-allowed{% endif %}; font-weight: 600; opacity: {% if data.proxy_enabled %}1{% else %}0.55{% endif %};">
                {{ 'Disable Turbo' if data.turbo_mode else 'Enable Turbo' }}
            </button>
        </form>
    </div>

    <div class="card stat-card" style="border-left: 4px solid {% if data.queue_dead > 0 %}var(--danger-text){% else %}var(--success-text){% endif %};">
        <div class="stat-label">Delivery Queue</div>
        <div class="stat-value" style="font-size: 24px;">
            {{ data.queue_pending }} pending  
        </div>
        <div class="stat-subtext {% if data.queue_dead > 0 %}danger{% else %}muted{% endif %}">
            {{ data.queue_dead }} dead letters
        </div>
    </div>

</div>
{% endif %}
{% endblock %}