{extends file="layout.tpl"}

{block name="content"}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1">Raport API</h4>
            <p class="text-muted mb-0">Statystyki wywołań API per urządzenie/użytkownik</p>
        </div>
        <div class="btn-group">
            <a href="?days=7" class="btn btn-outline-secondary {if $days == 7}active{/if}">7 dni</a>
            <a href="?days=30" class="btn btn-outline-secondary {if $days == 30}active{/if}">30 dni</a>
            <a href="?days=90" class="btn btn-outline-secondary {if $days == 90}active{/if}">90 dni</a>
        </div>
    </div>

    <!-- Podsumowanie -->
    <div class="row g-4 mb-4">
        <div class="col-sm-6 col-xl-3">
            <div class="card bg-primary bg-opacity-10 border-primary">
                <div class="card-body">
                    <h6 class="text-primary">Wywołania API ({$days} dni)</h6>
                    <h2 class="mb-0">{$report.summary.total_calls|default:0}</h2>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card bg-success bg-opacity-10 border-success">
                <div class="card-body">
                    <h6 class="text-success">Aktywne urządzenia</h6>
                    <h2 class="mb-0">{$report.summary.active_devices|default:0}</h2>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card bg-info bg-opacity-10 border-info">
                <div class="card-body">
                    <h6 class="text-info">Unikalne IP</h6>
                    <h2 class="mb-0">{$report.summary.unique_ips|default:0}</h2>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card bg-warning bg-opacity-10 border-warning">
                <div class="card-body">
                    <h6 class="text-warning">Śr. playlist/wywołanie</h6>
                    <h2 class="mb-0">{$report.summary.avg_playlists_per_call|default:0|number_format:1}</h2>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <!-- Top urządzenia -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="bi bi-tv me-2"></i>Top urządzenia</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>Urządzenie</th>
                                    <th>Właściciel</th>
                                    <th>Wywołania</th>
                                    <th>Playlisty</th>
                                    <th>Ostatnie IP</th>
                                </tr>
                            </thead>
                            <tbody>
                                {foreach $report.device_stats as $device}
                                <tr>
                                    <td>
                                        <strong>{$device.name|default:$device.mac}</strong>
                                        <br><small class="text-muted">{$device.mac}</small>
                                    </td>
                                    <td>{$device.owner}</td>
                                    <td><span class="badge bg-primary">{$device.calls_period|default:0}</span></td>
                                    <td>{$device.playlists_count}</td>
                                    <td><code>{$device.last_ip|default:'-'}</code></td>
                                </tr>
                                {foreachelse}
                                <tr><td colspan="5" class="text-center py-4 text-muted">Brak danych</td></tr>
                                {/foreach}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Top endpointy -->
        <div class="col-lg-4">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="bi bi-link-45deg me-2"></i>Top endpointy</h5>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        {foreach $report.top_endpoints as $endpoint}
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <code class="small">{$endpoint.endpoint|truncate:30}</code>
                            <span class="badge bg-secondary rounded-pill">{$endpoint.count}</span>
                        </li>
                        {foreachelse}
                        <li class="list-group-item text-center text-muted">Brak danych</li>
                        {/foreach}
                    </ul>
                </div>
            </div>

            <!-- Top IP -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="bi bi-globe me-2"></i>Top adresów IP</h5>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        {foreach $report.top_ips as $ip}
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <code>{$ip.ip_address}</code>
                                {if $ip.sample_mac}
                                <br><small class="text-muted">{$ip.sample_mac}</small>
                                {/if}
                            </div>
                            <span class="badge bg-info rounded-pill">{$ip.count}</span>
                        </li>
                        {foreachelse}
                        <li class="list-group-item text-center text-muted">Brak danych</li>
                        {/foreach}
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Statystyki per użytkownik -->
    <div class="card mt-4">
        <div class="card-header">
            <h5 class="card-title mb-0"><i class="bi bi-people me-2"></i>Statystyki per użytkownik</h5>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Użytkownik</th>
                            <th>Rola</th>
                            <th>Urządzeń</th>
                            <th>Wywołania ({$days} dni)</th>
                            <th>Łącznie wywołań</th>
                        </tr>
                    </thead>
                    <tbody>
                        {foreach $report.user_stats as $user}
                        <tr>
                            <td><strong>{$user.username}</strong></td>
                            <td>
                                {if $user.role == 'admin'}<span class="badge bg-danger">Admin</span>
                                {elseif $user.role == 'reseller'}<span class="badge bg-primary">Reseller</span>
                                {else}<span class="badge bg-secondary">User</span>{/if}
                            </td>
                            <td>{$user.devices_count}</td>
                            <td><span class="badge bg-success">{$user.calls_period|default:0}</span></td>
                            <td>{$user.api_calls_count|default:0}</td>
                        </tr>
                        {foreachelse}
                        <tr><td colspan="5" class="text-center py-4 text-muted">Brak danych</td></tr>
                        {/foreach}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{/block}
