{% extends "dashboard/base.html" %}

{% block dashboard_content %}
<div class="stat-card">
    <h3>Overview</h3>
    <div class="stat-grid">
        <div class="stat-item">
            <div class="stat-value">{{ sports_count }}</div>
            <div class="stat-label">Sports</div>
        </div>
        <div class="stat-item">
            <div class="stat-value">{{ teams_count }}</div>
            <div class="stat-label">Teams</div>
        </div>
        <div class="stat-item">
            <div class="stat-value">{{ stadiums_count }}</div>
            <div class="stat-label">Stadiums</div>
        </div>
        <div class="stat-item">
            <div class="stat-value">{{ games_count }}</div>
            <div class="stat-label">Games</div>
        </div>
        <div class="stat-item">
            <div class="stat-value">{{ pending_reviews }}</div>
            <div class="stat-label">Pending Reviews</div>
        </div>
    </div>
</div>

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
    <div class="stat-card">
        <h3>Recent Scraper Jobs</h3>
        {% if recent_jobs %}
        <div class="table-responsive">
            <table class="dashboard-table">
                <thead>
                    <tr>
                        <th>Sport</th>
                        <th>Status</th>
                        <th>Games</th>
                        <th>Time</th>
                    </tr>
                </thead>
                <tbody>
                    {% for job in recent_jobs %}
                    <tr>
                        <td>{{ job.config.sport.short_name }} {{ job.config.season }}</td>
                        <td><span class="status-badge status-{{ job.status }}">{{ job.status|upper }}</span></td>
                        <td>{{ job.games_found }}</td>
                        <td>{{ job.created_at|timesince }} ago</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <p>No recent scraper jobs.</p>
        {% endif %}
        <p style="margin-top: 15px;">
            <a href="{% url 'dashboard:scraper_status' %}" class="btn-action">View All Jobs</a>
        </p>
    </div>

    <div class="stat-card">
        <h3>Recent CloudKit Syncs</h3>
        {% if recent_syncs %}
        <div class="table-responsive">
            <table class="dashboard-table">
                <thead>
                    <tr>
                        <th>Config</th>
                        <th>Status</th>
                        <th>Records</th>
                        <th>Time</th>
                    </tr>
                </thead>
                <tbody>
                    {% for sync in recent_syncs %}
                    <tr>
                        <td>{{ sync.configuration.name }}</td>
                        <td><span class="status-badge status-{{ sync.status }}">{{ sync.status|upper }}</span></td>
                        <td>{{ sync.records_synced }}</td>
                        <td>{{ sync.created_at|timesince }} ago</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <p>No recent sync jobs.</p>
        {% endif %}
        <p style="margin-top: 15px;">
            <a href="{% url 'dashboard:sync_status' %}" class="btn-action">View Sync Status</a>
        </p>
    </div>
</div>

<div class="stat-card">
    <h3>Sport Summary</h3>
    <div class="table-responsive">
        <table class="dashboard-table">
            <thead>
                <tr>
                    <th>Sport</th>
                    <th>Teams</th>
                    <th>Stadiums</th>
                    <th>Games</th>
                    <th>Pending Reviews</th>
                </tr>
            </thead>
            <tbody>
                {% for stat in sport_stats %}
                <tr>
                    <td><strong>{{ stat.sport.short_name }}</strong> - {{ stat.sport.name }}</td>
                    <td>{{ stat.teams }}</td>
                    <td>{{ stat.stadiums }}</td>
                    <td>{{ stat.games }}</td>
                    <td>{% if stat.pending_reviews %}<span style="color: #f0ad4e; font-weight: bold;">{{ stat.pending_reviews }}</span>{% else %}0{% endif %}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}