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

{% block title %}Changer de plan - {{ site.name }}{% endblock %}

{% block breadcrumb %}Tableau de bord <i class="fas fa-chevron-right"></i> Changer de plan{% endblock %}

{% block body %}
<div class="container-fluid px-4">
    {# En-tête #}
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="h3 mb-2">Changer de plan tarifaire</h1>
            <p class="text-muted">Site : <strong>{{ site.name }}</strong></p>

            {% if currentPlan %}
            <div class="alert alert-info">
                <i class="fas fa-info-circle me-2"></i>
                Votre plan actuel : <strong>{{ currentPlan.name }}</strong>
                ({{ currentPlan.priceMonthly }}€/mois{% if currentSubscription.billingInterval == 'yearly' %} facturé {{ currentPlan.priceYearly }}€/an{% endif %})
            </div>
            {% else %}
            <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle me-2"></i>
                Ce site n'a pas encore d'abonnement actif. Choisissez un plan ci-dessous.
            </div>
            {% endif %}
        </div>
    </div>

    {# Comparatif des plans #}
    <div class="row g-4">
        {% for plan in plans %}
        {% set isCurrent = currentPlan and plan.id == currentPlan.id %}
        {% set isUpgrade = currentPlan and plan.priceMonthly > currentPlan.priceMonthly %}
        {% set isDowngrade = currentPlan and plan.priceMonthly < currentPlan.priceMonthly and plan.priceMonthly >= 0 %}
        {% set isFree = plan.priceMonthly == '0.00' %}
        {% set isPopular = plan.code == 'essential' %}

        <div class="col-lg-4 col-md-6">
            <div class="card h-100 {% if isCurrent %}border-primary{% elseif isPopular %}border-warning{% endif %}" style="{% if isCurrent %}box-shadow: 0 0 20px rgba(13, 110, 253, 0.3);{% endif %}">
                {# Badge en-tête #}
                {% if isCurrent %}
                <div class="position-absolute top-0 start-50 translate-middle">
                    <span class="badge bg-primary px-3 py-2 rounded-pill">
                        <i class="fas fa-check-circle me-1"></i>Plan actuel
                    </span>
                </div>
                {% elseif isPopular and not isCurrent %}
                <div class="position-absolute top-0 end-0 m-3">
                    <span class="badge bg-warning text-dark px-3 py-2 rounded-pill">
                        <i class="fas fa-star me-1"></i>Populaire
                    </span>
                </div>
                {% endif %}

                <div class="card-header text-center {% if isCurrent %}bg-primary text-white{% else %}bg-light{% endif %} py-4">
                    <h4 class="mb-3 {% if not isCurrent %}text-muted{% endif %}">{{ plan.name }}</h4>
                    <div class="mb-2">
                        {% if isFree %}
                            <h2 class="display-5 fw-bold mb-0 {% if not isCurrent %}text-dark{% endif %}">Gratuit</h2>
                        {% else %}
                            <h2 class="display-5 fw-bold mb-0 {% if not isCurrent %}text-dark{% endif %}">{{ plan.priceMonthly }}€</h2>
                            <small class="text-muted">/mois</small>
                        {% endif %}
                    </div>
                    {% if not isFree %}
                    <small class="{% if isCurrent %}text-white-50{% else %}text-muted{% endif %}">
                        ou {{ plan.priceYearly }}€/an (économisez {{ (plan.priceMonthly * 12 - plan.priceYearly)|round }}€)
                    </small>
                    {% endif %}
                </div>

                <div class="card-body">
                    {# Description #}
                    <p class="text-muted small mb-4">{{ plan.description|slice(0, 120) }}...</p>

                    {# Features #}
                    <ul class="list-unstyled mb-4">
                        {% for feature in plan.features %}
                        <li class="mb-2">
                            {% if feature matches '/^(Avec|Publicité)/i' and not feature matches '/^Sans/i' %}
                                <i class="fas fa-info-circle text-warning me-2"></i>
                                <span class="text-muted">{{ feature }}</span>
                            {% else %}
                                <i class="fas fa-check-circle text-success me-2"></i>
                                <span>{{ feature }}</span>
                            {% endif %}
                        </li>
                        {% endfor %}
                    </ul>

                    {# Limites techniques #}
                    <div class="border-top pt-3">
                        <small class="text-muted d-block">
                            <strong>Limites techniques :</strong>
                        </small>
                        <ul class="list-unstyled small text-muted mb-0">
                            <li><i class="fas fa-globe me-2"></i>{{ plan.maxSites == 9999 ? 'Sites illimités' : plan.maxSites ~ ' site(s)' }}</li>
                            <li><i class="fas fa-file me-2"></i>{{ plan.maxPages == 9999 ? 'Pages illimitées' : plan.maxPages ~ ' pages' }}</li>
                            <li><i class="fas fa-hdd me-2"></i>{{ (plan.maxStorage / 1024)|round(2) }} GB de stockage</li>
                        </ul>
                    </div>
                </div>

                <div class="card-footer bg-transparent border-0 p-4">
                    {% if isCurrent %}
                        <button class="btn btn-outline-secondary w-100" disabled>
                            <i class="fas fa-check me-2"></i>Plan actif
                        </button>
                    {% else %}
                        <form method="post" action="{{ path('admin_site_subscription_process_change', {siteId: site.id}) }}" id="planForm{{ plan.id }}">
                            <input type="hidden" name="plan_id" value="{{ plan.id }}">

                            {# Choix mensuel/annuel pour les plans payants #}
                            {% if not isFree %}
                            <div class="mb-3">
                                <label class="form-label small">Facturation :</label>
                                <select name="billing_interval" class="form-select form-select-sm" id="billingInterval{{ plan.id }}">
                                    <option value="monthly">Mensuelle ({{ plan.priceMonthly }}€/mois)</option>
                                    <option value="yearly" selected>Annuelle ({{ plan.priceYearly }}€/an)</option>
                                </select>
                            </div>
                            {% endif %}

                            {% if isUpgrade %}
                                <button type="button" class="btn btn-success w-100" data-bs-toggle="modal" data-bs-target="#confirmPlanModal{{ plan.id }}">
                                    <i class="fas fa-arrow-up me-2"></i>Passer à {{ plan.name }}
                                </button>
                            {% elseif isDowngrade %}
                                <button type="button" class="btn btn-warning w-100" data-bs-toggle="modal" data-bs-target="#confirmPlanModal{{ plan.id }}">
                                    <i class="fas fa-arrow-down me-2"></i>Rétrograder vers {{ plan.name }}
                                </button>
                            {% else %}
                                <button type="button" class="btn btn-primary w-100" data-bs-toggle="modal" data-bs-target="#confirmPlanModal{{ plan.id }}">
                                    <i class="fas fa-check me-2"></i>Choisir {{ plan.name }}
                                </button>
                            {% endif %}
                        </form>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    {# Section informations complémentaires #}
    <div class="row mt-5">
        <div class="col-lg-8 mx-auto">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title"><i class="fas fa-question-circle me-2"></i>Questions fréquentes</h5>
                    <div class="accordion" id="faqAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                                    Puis-je changer de plan à tout moment ?
                                </button>
                            </h2>
                            <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Oui ! Vous pouvez changer de plan à tout moment. Si vous passez à un plan supérieur, le changement est immédiat. Un prorata sera calculé pour la période en cours.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                                    Que se passe-t-il si je rétrograde ?
                                </button>
                            </h2>
                            <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Si vous rétrogradez vers un plan inférieur, le changement sera effectif à la fin de votre période de facturation actuelle. Vous conservez les avantages de votre plan actuel jusqu'à cette date.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
                                    Puis-je annuler mon abonnement ?
                                </button>
                            </h2>
                            <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Oui, vous pouvez annuler à tout moment. Votre site restera actif jusqu'à la fin de la période payée. Vous pouvez ensuite passer au plan gratuit Starter.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# Bouton retour #}
    <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>

{# Modals de confirmation pour chaque plan #}
{% for plan in plans %}
    {% set isCurrent = currentPlan and plan.id == currentPlan.id %}
    {% if not isCurrent %}
        {% set isUpgrade = currentPlan and plan.priceMonthly > currentPlan.priceMonthly %}
        {% set isDowngrade = currentPlan and plan.priceMonthly < currentPlan.priceMonthly and plan.priceMonthly >= 0 %}
        {% set isFree = plan.priceMonthly == '0.00' %}

        <div class="modal fade" id="confirmPlanModal{{ plan.id }}" tabindex="-1" aria-labelledby="confirmPlanModalLabel{{ plan.id }}" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header {% if isUpgrade %}bg-success{% elseif isDowngrade %}bg-warning{% else %}bg-primary{% endif %} text-white">
                        <h5 class="modal-title" id="confirmPlanModalLabel{{ plan.id }}">
                            <i class="fas {% if isUpgrade %}fa-arrow-up{% elseif isDowngrade %}fa-arrow-down{% else %}fa-check{% endif %} me-2"></i>
                            Confirmer le changement de plan
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p class="mb-3">
                            Êtes-vous sûr de vouloir
                            {% if isUpgrade %}
                                <strong>passer au plan {{ plan.name }}</strong> ?
                            {% elseif isDowngrade %}
                                <strong>rétrograder vers le plan {{ plan.name }}</strong> ?
                            {% else %}
                                <strong>choisir le plan {{ plan.name }}</strong> ?
                            {% endif %}
                        </p>

                        {% if currentPlan %}
                        <div class="alert alert-info mb-3">
                            <strong>Plan actuel :</strong> {{ currentPlan.name }} ({{ currentPlan.priceMonthly }}€/mois)
                            <br>
                            <strong>Nouveau plan :</strong> {{ plan.name }} ({{ plan.priceMonthly }}€/mois)
                        </div>
                        {% endif %}

                        {% if isUpgrade %}
                            <p class="text-success mb-0">
                                <i class="fas fa-info-circle me-1"></i>
                                <small>Le changement sera effectif immédiatement. Un prorata sera calculé pour la période en cours.</small>
                            </p>
                        {% elseif isDowngrade %}
                            <p class="text-warning mb-0">
                                <i class="fas fa-exclamation-triangle me-1"></i>
                                <small>Le changement sera effectif à la fin de votre période de facturation actuelle.</small>
                            </p>
                        {% endif %}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="fas fa-times me-1"></i> Annuler
                        </button>
                        <button type="button" class="btn {% if isUpgrade %}btn-success{% elseif isDowngrade %}btn-warning{% else %}btn-primary{% endif %}" onclick="document.getElementById('planForm{{ plan.id }}').submit();">
                            <i class="fas {% if isUpgrade %}fa-arrow-up{% elseif isDowngrade %}fa-arrow-down{% else %}fa-check{% endif %} me-1"></i>
                            Confirmer
                        </button>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endfor %}
{% endblock %}