<!--
Copyright (C) 2026 Stefy Lanza <stefy@nexlab.net>

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.
-->
{% extends "base.html" %}

{% block title %}Overview - AISBF Dashboard{% endblock %}

{% block content %}
<style>
.overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 32px; }
.stat-card { background: var(--bg-page); border: 1px solid var(--color-border); border-radius: 10px; padding: 20px; display: flex; align-items: center; gap: 16px; transition: border-color .2s; }
.stat-card:hover { border-color: var(--color-primary); }
.stat-icon { font-size: 2em; width: 48px; height: 48px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-icon.blue  { background: rgba(52,152,219,.15); }
.stat-icon.green { background: rgba(46,204,113,.15); }
.stat-icon.red   { background: rgba(233,69,96,.15); }
.stat-icon.purple{ background: rgba(155,89,182,.15); }
.stat-value { font-size: 2em; font-weight: 700; line-height: 1; }
.stat-label { font-size: .85em; color: var(--color-muted); margin-top: 2px; }

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 32px; }
.info-card { background: var(--bg-page); border: 1px solid var(--color-border); border-radius: 10px; padding: 20px; }
.info-card h4 { font-size: .8em; text-transform: uppercase; letter-spacing: .08em; color: var(--color-muted); margin-bottom: 14px; }
.info-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: .9em; }
.info-row:last-child { border-bottom: none; }
.info-row .val { color: var(--color-text); font-weight: 500; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: .8em; font-weight: 600; }
.badge-green { background: rgba(46,204,113,.15); color: #4ade80; }
.badge-red   { background: rgba(231,76,60,.15);  color: #e74c3c; }
.badge-blue  { background: rgba(52,152,219,.15); color: var(--color-link); }

.quick-actions { display: flex; flex-wrap: wrap; gap: 10px; }
</style>

<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:28px;">
    <div>
        <h2 style="margin:0; font-size:1.6em;" data-i18n="overview.title">Dashboard Overview</h2>
        <p style="color:var(--color-muted); margin:4px 0 0; font-size:.9em;">AISBF v{{ __version__ }} — Admin</p>
    </div>
    <a href="{{ url_for(request, '/dashboard/settings') }}" class="btn btn-secondary" style="margin:0;"><i class="fas fa-cog"></i> <span data-i18n="nav.settings">Settings</span></a>
</div>

<!-- Stats row -->
<div class="overview-grid">
    <div class="stat-card">
        <div class="stat-icon blue"><i class="fas fa-plug" style="color:#3498db;"></i></div>
        <div>
            <div class="stat-value" style="color:#3498db;">{{ providers_count }}</div>
            <div class="stat-label" data-i18n="nav.providers">Providers</div>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon green"><i class="fas fa-sync-alt" style="color:#2ecc71;"></i></div>
        <div>
            <div class="stat-value" style="color:#2ecc71;">{{ rotations_count }}</div>
            <div class="stat-label" data-i18n="nav.rotations">Rotations</div>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon red"><i class="fas fa-brain" style="color:#e94560;"></i></div>
        <div>
            <div class="stat-value" style="color:#e94560;">{{ autoselect_count }}</div>
            <div class="stat-label" data-i18n="nav.autoselect">Autoselects</div>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon purple"><i class="fas fa-users" style="color:#9b59b6;"></i></div>
        <div>
            <div class="stat-value" style="color:#9b59b6;">{{ users_count if users_count is defined else '—' }}</div>
            <div class="stat-label" data-i18n="nav.users">Users</div>
        </div>
    </div>
</div>

<!-- Info cards -->
<div class="info-grid">
    <div class="info-card">
        <h4><i class="fas fa-server"></i> &nbsp;<span data-i18n="overview.server">Server</span></h4>
        <div class="info-row"><span data-i18n="overview.host">Host</span><span class="val">{{ server_config.host }}</span></div>
        <div class="info-row"><span data-i18n="overview.port">Port</span><span class="val">{{ server_config.port }}</span></div>
        <div class="info-row"><span data-i18n="overview.protocol">Protocol</span><span class="val"><span class="badge {% if server_config.protocol == 'https' %}badge-green{% else %}badge-blue{% endif %}">{{ server_config.protocol|upper }}</span></span></div>
        <div class="info-row"><span data-i18n="overview.auth">Auth</span><span class="val"><span class="badge {% if server_config.auth_enabled %}badge-green{% else %}badge-red{% endif %}" data-i18n="{{ 'overview.enabled' if server_config.auth_enabled else 'overview.disabled' }}">{{ 'Enabled' if server_config.auth_enabled else 'Disabled' }}</span></span></div>
    </div>

    <div class="info-card">
        <h4><i class="fas fa-bolt"></i> &nbsp;<span data-i18n="overview.quick_actions">Quick Actions</span></h4>
        <div class="quick-actions" style="margin-top:4px;">
            <a href="{{ url_for(request, '/dashboard/providers') }}" class="btn" style="margin:0; font-size:.85em; padding:8px 14px;"><i class="fas fa-plug"></i> <span data-i18n="nav.providers">Providers</span></a>
            <a href="{{ url_for(request, '/dashboard/rotations') }}" class="btn btn-secondary" style="margin:0; font-size:.85em; padding:8px 14px;"><i class="fas fa-sync-alt"></i> <span data-i18n="nav.rotations">Rotations</span></a>
            <a href="{{ url_for(request, '/dashboard/autoselect') }}" class="btn btn-secondary" style="margin:0; font-size:.85em; padding:8px 14px;"><i class="fas fa-brain"></i> <span data-i18n="nav.autoselect">Autoselect</span></a>
            <a href="{{ url_for(request, '/dashboard/users') }}" class="btn btn-secondary" style="margin:0; font-size:.85em; padding:8px 14px;"><i class="fas fa-users"></i> <span data-i18n="nav.users">Users</span></a>
            <a href="{{ url_for(request, '/dashboard/analytics') }}" class="btn btn-secondary" style="margin:0; font-size:.85em; padding:8px 14px;"><i class="fas fa-chart-bar"></i> <span data-i18n="nav.analytics">Analytics</span></a>
            <a href="{{ url_for(request, '/dashboard/rate-limits') }}" class="btn btn-secondary" style="margin:0; font-size:.85em; padding:8px 14px;"><i class="fas fa-tachometer-alt"></i> <span data-i18n="overview.rate_limits">Rate Limits</span></a>
            <a href="{{ url_for(request, '/dashboard/response-cache') }}" class="btn btn-secondary" style="margin:0; font-size:.85em; padding:8px 14px;"><i class="fas fa-database"></i> <span data-i18n="overview.cache">Cache</span></a>
            <a href="{{ url_for(request, '/dashboard/prompts') }}" class="btn btn-secondary" style="margin:0; font-size:.85em; padding:8px 14px;"><i class="fas fa-comment-dots"></i> <span data-i18n="nav.prompts">Prompts</span></a>
        </div>
    </div>
</div>
{% endblock %}
