{% extends 'admin/base.html.twig' %}

{% block title %}Mon offre - {{ site.name }}{% endblock %}

{% block breadcrumb %}Tableau de bord <i class="fas fa-chevron-right"></i> Mon offre &amp; widgets{% endblock %}

{#
    Page « Mon abonnement » : ce que l'offre du site inclut, ce qu'elle
    n'inclut pas, et le catalogue complet des widgets par formule.
    Variables : site, subscription, plan, plans (formules actives), impact (PlanChangeImpact::current).
#}
{% set limits = get_plan_limits(site) %}

{% block body %}
<div class="container-fluid px-4">
    <div class="row mb-4">
        <div class="col-12 d-flex flex-wrap justify-content-between align-items-end gap-3">
            <div>
                <h1 class="h3 mb-1">Mon offre &amp; mes widgets</h1>
                <p class="text-muted mb-0">Site : <strong>{{ site.name }}</strong></p>
            </div>
            <a href="{{ path('admin_site_subscription_change_plan', {siteId: site.id}) }}" class="btn btn-primary">
                <i class="fas fa-exchange-alt me-2"></i>Changer d'offre
            </a>
        </div>
    </div>

    {# Widgets posés mais non rendus : l'alerte vient en premier, c'est ce qui coûte au site #}
    {% if impact.widgetCount > 0 or impact.modules is not empty %}
    <div class="alert alert-warning d-flex align-items-start gap-3" role="alert">
        <i class="fas fa-eye-slash fs-4 mt-1"></i>
        <div>
            <strong>Votre offre {{ plan.name }} n'affiche pas tout ce que contient votre site.</strong>
            <ul class="mb-0 mt-2 small">
                {% for w in impact.widgets %}
                <li>{{ w.label }} × {{ w.count }} — {{ w.pages|join(', ') }}</li>
                {% endfor %}
                {% for module in impact.modules %}
                <li>{{ module }}</li>
                {% endfor %}
            </ul>
            <p class="mb-0 mt-2 small">Vos visiteurs ne voient pas ces éléments ; vous les retrouverez en passant à une offre qui les inclut.</p>
        </div>
    </div>
    {% endif %}

    <div class="row g-4">
        {# Colonne gauche : la formule #}
        <div class="col-lg-4">
            <div class="card h-100">
                <div class="card-header bg-primary text-white py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><i class="fas fa-crown me-2"></i>{{ plan.name }}</h5>
                        {% if plan.isFeatured %}<span class="badge bg-warning text-dark">Populaire</span>{% endif %}
                    </div>
                </div>
                <div class="card-body">
                    <p class="display-6 fw-bold mb-0">
                        {% if plan.isFree %}Gratuit{% else %}{{ plan.priceMonthly }} €<small class="fs-6 text-muted">/mois</small>{% endif %}
                    </p>
                    {% if not plan.isFree %}
                    <p class="text-muted small mb-3">
                        {% if subscription.billingInterval == 'yearly' %}Facturé {{ plan.priceYearly }} €/an{% else %}ou {{ plan.priceYearly }} €/an{% endif %}
                        · statut : {{ subscription.status }}
                        {% if subscription.currentPeriodEnd %}· jusqu'au {{ subscription.currentPeriodEnd|date('d/m/Y') }}{% endif %}
                    </p>
                    {% endif %}

                    <h6 class="text-uppercase text-muted small fw-semibold mt-4 mb-2">Limites</h6>
                    <ul class="list-unstyled small mb-3">
                        <li class="mb-1"><i class="fas fa-file me-2 text-primary"></i>
                            {% if limits.pages.unlimited %}Pages illimitées{% else %}{{ limits.pages.current }} / {{ limits.pages.limit }} pages{% endif %}</li>
                        <li class="mb-1"><i class="fas fa-hdd me-2 text-primary"></i>
                            {{ limits.storage.currentMB }} MB / {{ limits.storage.limitMB >= 1024 ? (limits.storage.limitMB / 1024)|round(0) ~ ' GB' : limits.storage.limitMB ~ ' MB' }}</li>
                        <li class="mb-1"><i class="fas fa-users me-2 text-primary"></i>
                            {{ plan.maxUsers > 1 ? 'Jusqu\'à ' ~ plan.maxUsers ~ ' utilisateurs' : '1 utilisateur' }}</li>
                    </ul>

                    <h6 class="text-uppercase text-muted small fw-semibold mt-4 mb-2">Modules</h6>
                    {% set modules = [
                        {label: 'Blog', on: plan.hasBlog},
                        {label: 'Galeries', on: plan.hasGallery},
                        {label: 'Formulaire de contact', on: plan.hasContactForm},
                        {label: 'Newsletter & livre d\'or', on: plan.hasAllWidgets},
                        {label: 'Boutique en ligne', on: plan.hasEcommerce},
                        {label: 'Chatbot IA', on: plan.hasChatbot},
                        {label: 'Génération IA', on: plan.aiGeneration},
                        {label: 'Google Analytics', on: plan.hasGoogleAnalytics},
                        {label: 'Domaine personnalisé', on: plan.customDomain},
                        {label: 'Sans signature Izibrick', on: plan.removeWatermark},
                        {label: 'Sans publicité', on: not plan.hasAds},
                    ] %}
                    <ul class="list-unstyled small mb-0">
                        {% for m in modules %}
                        <li class="mb-1">
                            <i class="fas fa-{{ m.on ? 'check-circle text-success' : 'times-circle text-muted' }} me-2"></i>
                            <span class="{{ m.on ? '' : 'text-muted' }}">{{ m.label }}</span>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>

        {# Colonne droite : les widgets #}
        <div class="col-lg-8">
            <div class="card h-100">
                <div class="card-header py-3">
                    <h5 class="mb-0"><i class="fas fa-puzzle-piece me-2 text-primary"></i>
                        {{ widget_count_for_plan(plan) }} widgets sur {{ widget_counts().total }} avec {{ plan.name }}
                    </h5>
                </div>
                <div class="card-body">
                    {% set nextTier = plan.hasAllWidgets ? (plan.hasEcommerce ? null : 'pro') : 'essential' %}
                    {% set nextPlan = nextTier ? plan_for_tier(nextTier) : null %}
                    {% if nextPlan and nextPlan.id != plan.id %}
                    <p class="text-muted">
                        Passer à <strong>{{ nextPlan.name }}</strong> débloque
                        <strong>{{ widget_count_for_plan(nextPlan) - widget_count_for_plan(plan) }} widget{{ (widget_count_for_plan(nextPlan) - widget_count_for_plan(plan)) > 1 ? 's' : '' }}</strong> de plus.
                        <a href="{{ path('admin_site_subscription_change_plan', {siteId: site.id}) }}">Voir les formules</a>
                    </p>
                    {% else %}
                    <p class="text-muted">Votre offre inclut tous les widgets de l'éditeur.</p>
                    {% endif %}
                    {% include 'admin/_widgets-catalog.html.twig' with {'plans': plans, 'highlight': plan} %}
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4 mb-5">
        <div class="col-12 text-center">
            <a href="{{ path('dashboard') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Retour au tableau de bord
            </a>
        </div>
    </div>
</div>
{% endblock %}