{% extends "base.html" %}

{% block title %}Usage & Quotas{% endblock %}

{% block content %}

<!-- Plan Header -->
<div class="plan-header">
    <div class="plan-header-left">
        <div class="plan-badge"><i class="fas fa-layer-group"></i> Current Plan</div>
        <div class="plan-name">{{ current_tier.name if current_tier else 'Free Tier' }}</div>
        <div class="plan-subtitle">
            {% if current_tier and not current_tier.is_default %}
            <a href="{{ url_for(request, '/dashboard/subscription') }}" class="plan-link">Manage subscription</a>
            {% else %}
            <a href="{{ url_for(request, '/dashboard/pricing') }}" class="plan-link upgrade">Upgrade plan</a>
            {% endif %}
        </div>
    </div>
    <div class="plan-header-right">
        <div class="plan-stat">
            <div class="plan-stat-value">{{ "{:,}".format(requests_today) }}</div>
            <div class="plan-stat-label">requests today</div>
        </div>
        <div class="plan-stat-divider"></div>
        <div class="plan-stat">
            <div class="plan-stat-value">{{ "{:,}".format(requests_month) }}</div>
            <div class="plan-stat-label">requests this month</div>
        </div>
        <div class="plan-stat-divider"></div>
        <div class="plan-stat">
            <div class="plan-stat-value">
                {% if tokens_24h >= 1000000 %}{{ "%.1f"|format(tokens_24h / 1000000) }}M
                {% elif tokens_24h >= 1000 %}{{ "%.1f"|format(tokens_24h / 1000) }}K
                {% else %}{{ tokens_24h }}{% endif %}
            </div>
            <div class="plan-stat-label">tokens (24h)</div>
        </div>
    </div>
</div>

<!-- Activity Quotas -->
<div class="section-header">
    <div class="section-title"><i class="fas fa-chart-line" style="color:#60a5fa;"></i> Activity Quotas</div>
    <div class="section-subtitle">Time-based limits that reset automatically</div>
</div>

<div class="activity-grid">

    <!-- Requests Today -->
    {% set daily_pct = (requests_today / max_requests_per_day * 100) if max_requests_per_day and max_requests_per_day > 0 else -1 %}
    {% set daily_clr = '#ef4444' if daily_pct >= 90 else ('#fbbf24' if daily_pct >= 75 else '#60a5fa') %}
    <div class="gauge-card">
        <div class="gauge-header">
            <div class="gauge-icon" style="background:rgba(96,165,250,.12); color:#60a5fa;"><i class="fas fa-bolt"></i></div>
            <div>
                <div class="gauge-label">Requests Today</div>
                <div class="gauge-sublabel" id="daily-reset">Resets at midnight UTC</div>
            </div>
        </div>
        <div class="gauge-wrap">
            {% if max_requests_per_day == -1 or max_requests_per_day is none or max_requests_per_day <= 0 %}
            <div class="gauge-unlimited" style="color:#60a5fa;"><i class="fas fa-infinity"></i></div>
            {% else %}
            <svg class="gauge-svg" viewBox="0 0 120 120">
                <circle class="gauge-track" cx="60" cy="60" r="48"/>
                <circle class="gauge-prog" cx="60" cy="60" r="48"
                    style="stroke:{{ daily_clr }}; stroke-dashoffset:{{ (301.59 * (1 - [daily_pct, 100]|min / 100))|round(2) }}"/>
            </svg>
            {% endif %}
            <div class="gauge-center">
                <div class="gauge-big">{{ "{:,}".format(requests_today) }}</div>
                {% if max_requests_per_day and max_requests_per_day > 0 %}
                <div class="gauge-of">of {{ "{:,}".format(max_requests_per_day) }}</div>
                {% elif max_requests_per_day == -1 %}
                <div class="gauge-of">unlimited</div>
                {% endif %}
            </div>
        </div>
        <div class="gauge-footer">
            {% if daily_pct >= 0 %}
                {% set rem = max_requests_per_day - requests_today %}
                {% if rem > 0 %}<span class="gauge-remaining">{{ "{:,}".format(rem) }} remaining</span>
                {% else %}<span class="gauge-remaining" style="color:#ef4444;">Quota reached</span>{% endif %}
                {% if daily_pct >= 90 %}<span class="usage-badge danger">Near limit</span>
                {% elif daily_pct >= 75 %}<span class="usage-badge warn">Getting close</span>{% endif %}
            {% else %}
                <span class="gauge-remaining unlim">No daily cap</span>
            {% endif %}
        </div>
    </div>

    <!-- Requests This Month -->
    {% set monthly_pct = (requests_month / max_requests_per_month * 100) if max_requests_per_month and max_requests_per_month > 0 else -1 %}
    {% set monthly_clr = '#ef4444' if monthly_pct >= 90 else ('#fbbf24' if monthly_pct >= 75 else '#667eea') %}
    <div class="gauge-card">
        <div class="gauge-header">
            <div class="gauge-icon" style="background:rgba(102,126,234,.12); color:#667eea;"><i class="fas fa-calendar-days"></i></div>
            <div>
                <div class="gauge-label">Requests This Month</div>
                <div class="gauge-sublabel" id="monthly-reset">Resets on the 1st</div>
            </div>
        </div>
        <div class="gauge-wrap">
            {% if max_requests_per_month == -1 or max_requests_per_month is none or max_requests_per_month <= 0 %}
            <div class="gauge-unlimited" style="color:#667eea;"><i class="fas fa-infinity"></i></div>
            {% else %}
            <svg class="gauge-svg" viewBox="0 0 120 120">
                <circle class="gauge-track" cx="60" cy="60" r="48"/>
                <circle class="gauge-prog" cx="60" cy="60" r="48"
                    style="stroke:{{ monthly_clr }}; stroke-dashoffset:{{ (301.59 * (1 - [monthly_pct, 100]|min / 100))|round(2) }}"/>
            </svg>
            {% endif %}
            <div class="gauge-center">
                <div class="gauge-big">{{ "{:,}".format(requests_month) }}</div>
                {% if max_requests_per_month and max_requests_per_month > 0 %}
                <div class="gauge-of">of {{ "{:,}".format(max_requests_per_month) }}</div>
                {% elif max_requests_per_month == -1 %}
                <div class="gauge-of">unlimited</div>
                {% endif %}
            </div>
        </div>
        <div class="gauge-footer">
            {% if monthly_pct >= 0 %}
                {% set rem = max_requests_per_month - requests_month %}
                {% if rem > 0 %}<span class="gauge-remaining">{{ "{:,}".format(rem) }} remaining</span>
                {% else %}<span class="gauge-remaining" style="color:#ef4444;">Quota reached</span>{% endif %}
                {% if monthly_pct >= 90 %}<span class="usage-badge danger">Near limit</span>
                {% elif monthly_pct >= 75 %}<span class="usage-badge warn">Getting close</span>{% endif %}
            {% else %}
                <span class="gauge-remaining unlim">No monthly cap</span>
            {% endif %}
        </div>
    </div>

    <!-- Tokens 24h -->
    <div class="gauge-card">
        <div class="gauge-header">
            <div class="gauge-icon" style="background:rgba(34,211,238,.12); color:#22d3ee;"><i class="fas fa-coins"></i></div>
            <div>
                <div class="gauge-label">Tokens (last 24h)</div>
                <div class="gauge-sublabel">Input + output combined</div>
            </div>
        </div>
        <div class="gauge-wrap">
            <div class="gauge-unlimited" style="color:#22d3ee;"><i class="fas fa-infinity"></i></div>
            <div class="gauge-center">
                <div class="gauge-big" style="color:#22d3ee;">
                    {% if tokens_24h >= 1000000 %}{{ "%.1f"|format(tokens_24h / 1000000) }}M
                    {% elif tokens_24h >= 1000 %}{{ "%.1f"|format(tokens_24h / 1000) }}K
                    {% else %}{{ tokens_24h }}{% endif %}
                </div>
                <div class="gauge-of">tokens used</div>
            </div>
        </div>
        <div class="gauge-footer">
            <span class="gauge-remaining unlim">No token cap on this plan</span>
        </div>
    </div>

</div>

<!-- Configuration Limits -->
<div class="section-header" style="margin-top:32px;">
    <div class="section-title"><i class="fas fa-sliders" style="color:#a78bfa;"></i> Configuration Limits</div>
    <div class="section-subtitle">Persistent resource allocations for your account</div>
</div>

<div class="resource-grid">

    <!-- AI Providers -->
    {% set prov_pct = (providers_count / max_providers * 100) if max_providers and max_providers > 0 else -1 %}
    <div class="resource-card">
        <div class="resource-top">
            <div class="resource-icon" style="background:rgba(74,222,128,.12); color:#4ade80;"><i class="fas fa-plug"></i></div>
            <div class="resource-info">
                <div class="resource-label">AI Providers</div>
                <div class="resource-sublabel">Configured provider integrations</div>
            </div>
            <div class="resource-count">
                <span class="resource-used">{{ providers_count }}</span>
                {% if max_providers == -1 %}<span class="resource-max">/ ∞</span>
                {% elif max_providers and max_providers > 0 %}<span class="resource-max">/ {{ max_providers }}</span>{% endif %}
            </div>
        </div>
        {% if max_providers and max_providers > 0 %}
        <div class="resource-bar-wrap">
            <div class="resource-bar" style="width:{{ [prov_pct, 100]|min }}%; background:{{ '#ef4444' if prov_pct >= 90 else ('#fbbf24' if prov_pct >= 75 else '#4ade80') }};"></div>
        </div>
        {% set free = max_providers - providers_count %}
        <div class="resource-bar-label">{{ "%.0f"|format([prov_pct, 100]|min) }}% used &middot; {{ free }} slot{{ 's' if free != 1 else '' }} free</div>
        {% else %}
        <div class="resource-bar-wrap unlimited-bar"></div>
        <div class="resource-bar-label unlim">Unlimited slots available</div>
        {% endif %}
    </div>

    <!-- Rotations -->
    {% set rot_pct = (rotations_count / max_rotations * 100) if max_rotations and max_rotations > 0 else -1 %}
    <div class="resource-card">
        <div class="resource-top">
            <div class="resource-icon" style="background:rgba(251,146,60,.12); color:#fb923c;"><i class="fas fa-rotate"></i></div>
            <div class="resource-info">
                <div class="resource-label">Rotations</div>
                <div class="resource-sublabel">Load balancing configurations</div>
            </div>
            <div class="resource-count">
                <span class="resource-used">{{ rotations_count }}</span>
                {% if max_rotations == -1 %}<span class="resource-max">/ ∞</span>
                {% elif max_rotations and max_rotations > 0 %}<span class="resource-max">/ {{ max_rotations }}</span>{% endif %}
            </div>
        </div>
        {% if max_rotations and max_rotations > 0 %}
        <div class="resource-bar-wrap">
            <div class="resource-bar" style="width:{{ [rot_pct, 100]|min }}%; background:{{ '#ef4444' if rot_pct >= 90 else ('#fbbf24' if rot_pct >= 75 else '#fb923c') }};"></div>
        </div>
        {% set free = max_rotations - rotations_count %}
        <div class="resource-bar-label">{{ "%.0f"|format([rot_pct, 100]|min) }}% used &middot; {{ free }} slot{{ 's' if free != 1 else '' }} free</div>
        {% else %}
        <div class="resource-bar-wrap unlimited-bar"></div>
        <div class="resource-bar-label unlim">Unlimited slots available</div>
        {% endif %}
    </div>

    <!-- Autoselections -->
    {% set auto_pct = (autoselects_count / max_autoselections * 100) if max_autoselections and max_autoselections > 0 else -1 %}
    <div class="resource-card">
        <div class="resource-top">
            <div class="resource-icon" style="background:rgba(192,132,252,.12); color:#c084fc;"><i class="fas fa-wand-magic-sparkles"></i></div>
            <div class="resource-info">
                <div class="resource-label">Autoselections</div>
                <div class="resource-sublabel">Smart routing configurations</div>
            </div>
            <div class="resource-count">
                <span class="resource-used">{{ autoselects_count }}</span>
                {% if max_autoselections == -1 %}<span class="resource-max">/ ∞</span>
                {% elif max_autoselections and max_autoselections > 0 %}<span class="resource-max">/ {{ max_autoselections }}</span>{% endif %}
            </div>
        </div>
        {% if max_autoselections and max_autoselections > 0 %}
        <div class="resource-bar-wrap">
            <div class="resource-bar" style="width:{{ [auto_pct, 100]|min }}%; background:{{ '#ef4444' if auto_pct >= 90 else ('#fbbf24' if auto_pct >= 75 else '#c084fc') }};"></div>
        </div>
        {% set free = max_autoselections - autoselects_count %}
        <div class="resource-bar-label">{{ "%.0f"|format([auto_pct, 100]|min) }}% used &middot; {{ free }} slot{{ 's' if free != 1 else '' }} free</div>
        {% else %}
        <div class="resource-bar-wrap unlimited-bar"></div>
        <div class="resource-bar-label unlim">Unlimited slots available</div>
        {% endif %}
    </div>

</div>

{% if upgrade_tiers %}
<div class="upgrade-cta">
    <div class="upgrade-cta-content">
        <i class="fas fa-rocket upgrade-cta-icon"></i>
        <div>
            <div class="upgrade-cta-title">Need higher limits?</div>
            <div class="upgrade-cta-sub">Upgrade your plan to unlock more requests, providers, and autoselections.</div>
        </div>
    </div>
    <a href="{{ url_for(request, '/dashboard/pricing') }}" class="upgrade-cta-btn">
        <i class="fas fa-arrow-up"></i> View Plans
    </a>
</div>
{% endif %}

{% endblock %}

{% block extra_css %}
<style>
/* ── Plan header ─────────────────────────────────── */
.plan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient(135deg, #16213e 0%, #0f2040 100%);
    border: 1px solid #0f3460;
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(102,126,234,.15);
    color: #667eea;
    border: 1px solid rgba(102,126,234,.3);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 4px 10px;
    margin-bottom: 8px;
}
.plan-name {
    font-size: 1.6rem;
    font-weight: 700;
    color: #e0e0e0;
    line-height: 1.1;
}
.plan-subtitle { margin-top: 6px; }
.plan-link { font-size: 13px; color: #667eea; text-decoration: none; }
.plan-link:hover { color: #818cf8; }
.plan-link.upgrade { color: #4a9eff; }
.plan-link.upgrade:hover { color: #60b4ff; }

.plan-header-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.plan-stat { padding: 0 24px; text-align: center; }
.plan-stat-value { font-size: 1.5rem; font-weight: 700; color: #e0e0e0; line-height: 1; }
.plan-stat-label { font-size: 11px; color: #666; margin-top: 4px; text-transform: uppercase; letter-spacing: .4px; }
.plan-stat-divider { width: 1px; height: 40px; background: #1e3a5f; flex-shrink: 0; }

/* ── Section headers ─────────────────────────────── */
.section-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
    border-left: 3px solid #1e3a5f;
    padding-left: 12px;
}
.section-title { font-size: 1rem; font-weight: 700; color: #e0e0e0; }
.section-subtitle { font-size: 13px; color: #555; }

/* ── Activity gauge cards ────────────────────────── */
.activity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 0;
}
.gauge-card {
    background: #16213e;
    border: 1px solid #0f3460;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color .2s, transform .2s;
}
.gauge-card:hover { border-color: #2a4a7f; transform: translateY(-2px); }

.gauge-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.gauge-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.gauge-label { font-size: .9rem; font-weight: 600; color: #e0e0e0; }
.gauge-sublabel { font-size: .72rem; color: #555; margin-top: 2px; }

.gauge-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    margin: 8px 0;
}
.gauge-svg { width: 140px; height: 140px; }
.gauge-track { fill: none; stroke: #0f3460; stroke-width: 10; }
.gauge-prog {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 301.59;
    transform: rotate(-90deg);
    transform-origin: 60px 60px;
    transition: stroke-dashoffset .6s ease;
}
.gauge-center { position: absolute; text-align: center; }
.gauge-big { font-size: 1.4rem; font-weight: 700; color: #e0e0e0; line-height: 1; }
.gauge-of { font-size: .72rem; color: #555; margin-top: 3px; }

.gauge-unlimited {
    font-size: 3rem;
    opacity: .2;
    display: flex; align-items: center; justify-content: center;
    width: 140px; height: 140px;
}

.gauge-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid #0f3460;
    min-height: 30px;
}
.gauge-remaining { font-size: .8rem; color: #a0a0a0; flex: 1; }
.gauge-remaining.unlim { color: #4ade80; font-weight: 500; }

/* ── Resource cards (config limits) ─────────────── */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.resource-card {
    background: #16213e;
    border: 1px solid #0f3460;
    border-radius: 12px;
    padding: 18px 20px;
    transition: border-color .2s;
}
.resource-card:hover { border-color: #2a4a7f; }

.resource-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.resource-icon {
    width: 38px; height: 38px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.resource-info { flex: 1; min-width: 0; }
.resource-label { font-size: .9rem; font-weight: 600; color: #e0e0e0; }
.resource-sublabel { font-size: .72rem; color: #555; margin-top: 2px; }

.resource-count { text-align: right; flex-shrink: 0; }
.resource-used { font-size: 1.5rem; font-weight: 700; color: #e0e0e0; line-height: 1; display: block; }
.resource-max { font-size: .78rem; color: #555; display: block; text-align: right; }

.resource-bar-wrap {
    height: 6px;
    background: #0f3460;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}
.resource-bar-wrap.unlimited-bar {
    background: repeating-linear-gradient(
        90deg,
        rgba(74,222,128,.15) 0px, rgba(74,222,128,.15) 4px,
        transparent 4px, transparent 8px
    );
}
.resource-bar { height: 100%; border-radius: 3px; transition: width .6s ease; }
.resource-bar-label { font-size: .75rem; color: #555; }
.resource-bar-label.unlim { color: #4ade80; font-weight: 500; }

/* ── Badges ──────────────────────────────────────── */
.usage-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: .7rem;
    font-weight: 600;
}
.usage-badge.warn  { background: rgba(251,191,36,.12); color: #fbbf24; border: 1px solid rgba(251,191,36,.35); }
.usage-badge.danger { background: rgba(239,68,68,.12); color: #ef4444; border: 1px solid rgba(239,68,68,.35); }

/* ── Upgrade CTA ─────────────────────────────────── */
.upgrade-cta {
    margin-top: 28px;
    background: linear-gradient(135deg, rgba(74,158,255,.10), rgba(103,126,234,.07));
    border: 1px solid rgba(74,158,255,.35);
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.upgrade-cta-content { display: flex; align-items: center; gap: 16px; }
.upgrade-cta-icon { font-size: 1.4rem; color: #4a9eff; flex-shrink: 0; }
.upgrade-cta-title { font-size: 1rem; font-weight: 700; color: #e0e0e0; margin-bottom: 4px; }
.upgrade-cta-sub { font-size: 13px; color: #888; }
.upgrade-cta-btn {
    background: linear-gradient(135deg, #4a9eff, #667eea);
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity .2s;
}
.upgrade-cta-btn:hover { opacity: .85; color: white; }

@media (max-width: 600px) {
    .plan-header { flex-direction: column; }
    .plan-header-right { flex-wrap: wrap; }
    .plan-stat { padding: 8px 16px; }
}
</style>
{% endblock %}

{% block extra_js %}
<script>
(function () {
    function updateTimers() {
        var now = new Date();
        var midnight = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate() + 1));
        var ms = midnight - now;
        var h = Math.floor(ms / 3600000);
        var m = Math.floor((ms % 3600000) / 60000);
        var el = document.getElementById('daily-reset');
        if (el) el.textContent = 'Resets in ' + h + 'h ' + m + 'm';

        var nextMonth = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth() + 1, 1));
        var days = Math.ceil((nextMonth - now) / 86400000);
        var mel = document.getElementById('monthly-reset');
        if (mel) mel.textContent = 'Resets in ' + days + ' day' + (days !== 1 ? 's' : '');
    }
    updateTimers();
    setInterval(updateTimers, 30000);
})();
</script>
{% endblock %}
