{% extends "base.html" %}

{% block content %}
<div class="mb-8">
    <h1 class="text-3xl font-bold text-white">Quant-Sports Pollers</h1>
    <p class="mt-2 text-gray-400">Real-time status of all data collection</p>
</div>

<div class="flex gap-4 mb-6">
    <a href="/"
       class="inline-flex items-center px-4 py-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-200 text-sm font-medium transition">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
        </svg>
        Refresh
    </a>
    <a href="/metrics"
       class="inline-flex items-center px-4 py-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-200 text-sm font-medium transition">
        Metrics
    </a>
    <a href="/labs"
       class="inline-flex items-center px-4 py-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-200 text-sm font-medium transition">
        Labs
    </a>
    <a href="/docs"
       class="inline-flex items-center px-4 py-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-200 text-sm font-medium transition">
        Docs
    </a>
</div>

{% if pollers %}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    {% for poller in pollers %}
    <a href="/poller/{{ poller.poller_name }}"
       class="block rounded-lg border bg-gray-800 hover:bg-gray-750 transition p-5"
       {% if poller.status == 'healthy' %}
       style="border-color: rgba(34,197,94,0.3)"
       {% elif poller.status == 'degraded' %}
       style="border-color: rgba(234,179,8,0.3)"
       {% elif poller.status == 'down' %}
       style="border-color: rgba(239,68,68,0.3)"
       {% else %}
       style="border-color: rgba(107,114,128,0.3)"
       {% endif %}
    >
        <div class="flex items-center justify-between mb-3">
            <h2 class="text-lg font-semibold text-white">{{ poller.poller_name }}</h2>
            {% if poller.status == 'healthy' %}
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                         bg-green-500/20 text-green-300 border border-green-500/30">
                healthy
            </span>
            {% elif poller.status == 'degraded' %}
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                         bg-yellow-500/20 text-yellow-300 border border-yellow-500/30">
                degraded
            </span>
            {% elif poller.status == 'down' %}
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                         bg-red-500/20 text-red-300 border border-red-500/30">
                down
            </span>
            {% else %}
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                         bg-gray-500/20 text-gray-300 border border-gray-500/30">
                unknown
            </span>
            {% endif %}
        </div>

        <dl class="space-y-2 text-sm">
            <div class="flex justify-between">
                <dt class="text-gray-400">Last heartbeat</dt>
                <dd class="text-gray-200 font-mono text-xs">
                    {{ poller.last_heartbeat or '—' }}
                </dd>
            </div>

            <div class="flex justify-between">
                <dt class="text-gray-400">Last run</dt>
                <dd class="text-gray-200 font-mono text-xs">
                    {{ poller.last_run_started_at or '—' }}
                </dd>
            </div>

            <div class="flex justify-between">
                <dt class="text-gray-400">Run status</dt>
                <dd class="text-gray-200 text-xs">
                    {% if poller.last_run_status == 'success' %}
                    <span class="text-green-400">{{ poller.last_run_status }}</span>
                    {% elif poller.last_run_status == 'failed' %}
                    <span class="text-red-400">{{ poller.last_run_status }}</span>
                    {% elif poller.last_run_status == 'running' %}
                    <span class="text-blue-400">{{ poller.last_run_status }}</span>
                    {% else %}
                    {{ poller.last_run_status or '—' }}
                    {% endif %}
                </dd>
            </div>

            <div class="flex justify-between">
                <dt class="text-gray-400">Rows written</dt>
                <dd class="text-gray-200">
                    {{ poller.last_run_rows if poller.last_run_rows is not none else '—' }}
                </dd>
            </div>

            {% if poller.consecutive_failures %}
            <div class="flex justify-between">
                <dt class="text-gray-400">Failures</dt>
                <dd class="text-red-400 font-semibold">{{ poller.consecutive_failures }}</dd>
            </div>
            {% endif %}

            {% if poller.last_run_error %}
            <div class="mt-2 pt-2 border-t border-gray-700">
                <dt class="text-gray-400 text-xs mb-1">Last error</dt>
                <dd class="text-red-300 text-xs font-mono truncate">
                    {{ poller.last_run_error }}
                </dd>
            </div>
            {% endif %}
        </dl>
    </a>
    {% endfor %}
</div>
{% else %}
<div class="text-center py-16">
    <p class="text-gray-400 text-lg">No pollers found.</p>
    <p class="text-gray-500 text-sm mt-2">Poller health data will appear here once collectors are registered.</p>
</div>
{% endif %}
{% endblock %}