{# Widget d'utilisation du plan pour l'admin #}
{% set usage = get_site_usage(site) %}
{% set plan = usage.plan %}

<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-gradient text-white" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h5 class="mb-1">
                    <i class="fas fa-chart-pie me-2"></i>Utilisation du plan
                </h5>
                <small class="opacity-75">Plan actuel : <strong>{{ plan ? plan.name : 'Aucun' }}</strong></small>
            </div>
            {% if plan %}
            <a href="{{ path('admin_site_subscription_change_plan', {siteId: site.id}) }}"
               class="btn btn-sm btn-light">
                <i class="fas fa-arrow-up me-1"></i>Changer
            </a>
            {% endif %}
        </div>
    </div>

    <div class="card-body">
        {% if plan %}
            {# Pages utilisées #}
            <div class="mb-4">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <span class="text-muted">
                        <i class="fas fa-file-alt me-2"></i>Pages
                    </span>
                    <span class="fw-bold">
                        {{ usage.pages.current }} / {{ usage.pages.unlimited ? '∞' : usage.pages.limit }}
                    </span>
                </div>

                {% if not usage.pages.unlimited %}
                <div class="progress" style="height: 8px;">
                    {% set percentage = usage.pages.percentage %}
                    {% set barColor = percentage < 70 ? 'bg-success' : (percentage < 90 ? 'bg-warning' : 'bg-danger') %}
                    <div class="progress-bar {{ barColor }}"
                         role="progressbar"
                         style="width: {{ percentage }}%"
                         aria-valuenow="{{ usage.pages.current }}"
                         aria-valuemin="0"
                         aria-valuemax="{{ usage.pages.limit }}">
                    </div>
                </div>

                {% if percentage >= 80 %}
                <small class="text-warning d-block mt-2">
                    <i class="fas fa-exclamation-triangle me-1"></i>
                    {% if percentage >= 100 %}
                        Limite atteinte ! Passez à un plan supérieur.
                    {% else %}
                        Vous approchez de la limite ({{ 100 - percentage|round }}% restant)
                    {% endif %}
                </small>
                {% endif %}
                {% else %}
                <div class="text-success small">
                    <i class="fas fa-infinity me-1"></i>Pages illimitées
                </div>
                {% endif %}
            </div>

            {# Stockage utilisé #}
            <div class="mb-4">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <span class="text-muted">
                        <i class="fas fa-hdd me-2"></i>Stockage
                    </span>
                    <span class="fw-bold">
                        {{ usage.storage.currentMB }} MB / {{ usage.storage.limitMB }} MB
                    </span>
                </div>

                <div class="progress" style="height: 8px;">
                    {% set percentage = usage.storage.percentage %}
                    {% set barColor = percentage < 70 ? 'bg-info' : (percentage < 90 ? 'bg-warning' : 'bg-danger') %}
                    <div class="progress-bar {{ barColor }}"
                         role="progressbar"
                         style="width: {{ percentage }}%"
                         aria-valuenow="{{ usage.storage.currentMB }}"
                         aria-valuemin="0"
                         aria-valuemax="{{ usage.storage.limitMB }}">
                    </div>
                </div>

                {% if percentage >= 80 %}
                <small class="text-warning d-block mt-2">
                    <i class="fas fa-exclamation-triangle me-1"></i>
                    {% if percentage >= 100 %}
                        Limite de stockage atteinte !
                    {% else %}
                        {{ (usage.storage.limitMB - usage.storage.currentMB)|round(1) }} MB restants
                    {% endif %}
                </small>
                {% endif %}
            </div>

            {# Fonctionnalités du plan #}
            <div class="border-top pt-3">
                <h6 class="text-muted mb-3">Fonctionnalités disponibles :</h6>
                <div class="row g-2">
                    <div class="col-6">
                        <small class="d-flex align-items-center">
                            <i class="fas fa-{{ plan.customDomain ? 'check-circle text-success' : 'times-circle text-muted' }} me-2"></i>
                            Domaine perso
                        </small>
                    </div>
                    <div class="col-6">
                        <small class="d-flex align-items-center">
                            <i class="fas fa-{{ plan.aiGeneration ? 'check-circle text-success' : 'times-circle text-muted' }} me-2"></i>
                            Génération IA
                        </small>
                    </div>
                    <div class="col-6">
                        <small class="d-flex align-items-center">
                            <i class="fas fa-{{ plan.removeWatermark ? 'check-circle text-success' : 'times-circle text-muted' }} me-2"></i>
                            Sans watermark
                        </small>
                    </div>
                    <div class="col-6">
                        <small class="d-flex align-items-center">
                            <i class="fas fa-{{ not usage.hasAds ? 'check-circle text-success' : 'times-circle text-muted' }} me-2"></i>
                            Sans publicité
                        </small>
                    </div>
                    <div class="col-6">
                        <small class="d-flex align-items-center">
                            <i class="fas fa-{{ plan.prioritySupport ? 'check-circle text-success' : 'times-circle text-muted' }} me-2"></i>
                            Support prioritaire
                        </small>
                    </div>
                    <div class="col-6">
                        <small class="d-flex align-items-center">
                            <i class="fas fa-globe me-2 text-primary"></i>
                            {{ plan.maxSites == 9999 ? '∞' : plan.maxSites }} site(s)
                        </small>
                    </div>
                </div>
            </div>

            {# CTA Upgrade si nécessaire #}
            {% if plan.code == 'starter' %}
            <div class="alert alert-info mt-3 mb-0">
                <div class="d-flex align-items-center">
                    <i class="fas fa-lightbulb me-3 fs-4"></i>
                    <div class="flex-grow-1">
                        <strong>Passez à Basic ou Pro</strong>
                        <p class="mb-0 small">Débloquez plus de pages, stockage et fonctionnalités !</p>
                    </div>
                </div>
            </div>
            {% endif %}

        {% else %}
            <div class="alert alert-warning mb-0">
                <i class="fas fa-exclamation-triangle me-2"></i>
                Ce site n'a pas d'abonnement actif.
                <a href="{{ path('admin_site_subscription_change_plan', {siteId: site.id}) }}" class="alert-link">
                    Choisir un plan
                </a>
            </div>
        {% endif %}
    </div>
</div>