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

{% block title %}{{ 'subscription.my_subscription'|trans }} - {{ 'app.name'|trans }}{% endblock %}

{% block body %}
<div class="container py-5">
    <div class="row">
        <div class="col-lg-8">
            <h1 class="mb-4">
                <i class="fas fa-crown me-2"></i>{{ 'subscription.my_subscription'|trans }}
            </h1>
            
            <!-- Statut de la période d'essai -->
            {% if activeTrial %}
                <div class="card border-warning mb-4">
                    <div class="card-header bg-warning text-dark">
                        <h5 class="mb-0">
                            <i class="fas fa-clock me-2"></i>Période d'Essai {{ activeTrial.plan.label }} en Cours
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <p class="mb-2">
                                    <strong>{{ 'subscription.trial.days_remaining'|trans({'%count%': trialRemainingDays}) }}</strong> {{ 'subscription.trial.in_trial'|trans }}
                                </p>
                                <p class="text-muted mb-0">
                                    {{ 'subscription.trial.ends_on'|trans({'%date%': activeTrial.endDate|date('d/m/Y à H:i')}) }}
                                </p>
                                
                                <!-- Barre de progression -->
                                {% set progressPercent = activeTrial.progressPercentage %}
                                <div class="mt-3">
                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                        <small class="text-muted">{{ 'subscription.trial.progress'|trans }}</small>
                                        <small class="text-muted">{{ progressPercent }}%</small>
                                    </div>
                                    <div class="progress subscription-progress">
                                        <div class="progress-bar bg-warning" role="progressbar" 
                                             style="width: {{ progressPercent }}%" 
                                             aria-valuenow="{{ progressPercent }}" 
                                             aria-valuemin="0" 
                                             aria-valuemax="100">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 text-end">
                                <a href="{{ path('subscription_plans') }}" class="btn btn-success mb-2">
                                    <i class="fas fa-upgrade me-2"></i>{{ 'subscription.trial.convert_to_subscription'|trans }}
                                </a>
                                <br>
                                <button class="btn btn-outline-danger btn-sm cancel-trial-btn">
                                    <i class="fas fa-times me-2"></i>{{ 'subscription.trial.cancel_trial'|trans }}
                                </button>
                            </div>
                        </div>
                        
                        {% if trialRemainingDays <= 3 %}
                            <div class="alert alert-warning mt-3 mb-0">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                <strong>{{ 'subscription.trial.ending_soon'|trans }}</strong>
                                {{ 'subscription.trial.ending_soon_description'|trans }}
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
            
            <!-- Abonnement actuel -->
            {% if activeSubscription %}
                <div class="card border-{{ activeSubscription.status == 'active' ? 'success' : 'warning' }} mb-4">
                    <div class="card-header bg-{{ activeSubscription.status == 'active' ? 'success' : 'warning' }} text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-{{ activeSubscription.status == 'active' ? 'check-circle' : 'exclamation-triangle' }} me-2"></i>
                            {{ 'subscription.subscription.subscription'|trans }} {{ activeSubscription.plan.label }}
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>{{ 'subscription.subscription.plan'|trans }} :</strong> {{ activeSubscription.plan.label }}</p>
                                <p><strong>{{ 'subscription.subscription.status'|trans }} :</strong> 
                                    <span class="badge bg-{{ activeSubscription.status == 'active' ? 'success' : 'warning' }}">
                                        {{ activeSubscription.status|upper }}
                                    </span>
                                </p>
                                <p><strong>{{ 'subscription.subscription.price'|trans }} :</strong> {{ activeSubscription.amount }}€ / {{ activeSubscription.interval == 'year' ? 'subscription.per_year'|trans : 'subscription.per_month'|trans }}</p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>{{ 'subscription.subscription.start_date'|trans }} :</strong> {{ activeSubscription.currentPeriodStart|date('d/m/Y') }}</p>
                                <p><strong>{{ 'subscription.subscription.next_billing'|trans }} :</strong> {{ activeSubscription.currentPeriodEnd|date('d/m/Y') }}</p>
                                {% if activeSubscription.willCancelAtPeriodEnd %}
                                    <p class="text-warning">
                                        <i class="fas fa-exclamation-triangle me-1"></i>
                                        <strong>{{ 'subscription.subscription.cancel_scheduled'|trans }}</strong> le {{ activeSubscription.currentPeriodEnd|date('d/m/Y') }}
                                    </p>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="mt-3">
                            {% if activeSubscription.status == 'active' %}
                                {% if activeSubscription.willCancelAtPeriodEnd %}
                                    <button class="btn btn-success me-2 reactivate-subscription-btn">
                                        <i class="fas fa-undo me-2"></i>{{ 'subscription.subscription.reactivate_subscription'|trans }}
                                    </button>
                                {% else %}
                                    <button class="btn btn-danger me-2 cancel-subscription-btn">
                                        <i class="fas fa-times me-2"></i>{{ 'subscription.subscription.cancel_subscription'|trans }}
                                    </button>
                                {% endif %}
                                <a href="{{ path('subscription_plans') }}" class="btn btn-outline-primary">
                                    <i class="fas fa-edit me-2"></i>{{ 'subscription.subscription.modify_plan'|trans }}
                                </a>
                            {% elseif activeSubscription.status == 'past_due' %}
                                <div class="alert alert-warning">
                                    <i class="fas fa-credit-card me-2"></i>
                                    <strong>{{ 'subscription.subscription.payment_overdue'|trans }}</strong> - {{ 'subscription.subscription.payment_overdue_description'|trans }}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            {% else %}
                <!-- Aucun abonnement actif -->
                {% if not activeTrial %}
                    <div class="card border-info mb-4">
                        <div class="card-header bg-info text-white">
                            <h5 class="mb-0">
                                <i class="fas fa-info-circle me-2"></i>{{ 'subscription.free_plan.title'|trans }}
                            </h5>
                        </div>
                        <div class="card-body">
                            <p>{{ 'subscription.free_plan.description'|trans }}</p>
                            
                            {% if member.isEligibleForTrial(constant('App\\Enum\\SubscriptionPlan::PREMIUM')) %}
                                <div class="alert alert-success">
                                    <i class="fas fa-gift me-2"></i>
                                    <strong>{{ 'subscription.free_plan.special_offer'|trans }}</strong> {{ 'subscription.free_plan.trial_offer'|trans }}
                                </div>
                                <button class="btn btn-success me-2 start-trial-btn" 
                                        data-plan="premium" 
                                        data-plan-name="Premium">
                                    <i class="fas fa-gift me-2"></i>{{ 'subscription.free_plan.start_free_trial'|trans }}
                                </button>
                            {% endif %}
                            
                            <a href="{{ path('subscription_plans') }}" class="btn btn-primary">
                                <i class="fas fa-upgrade me-2"></i>{{ 'subscription.free_plan.view_plans'|trans }}
                            </a>
                        </div>
                    </div>
                {% endif %}
            {% endif %}
            
            <!-- Historique des abonnements -->
            {% if subscriptions|length > 0 %}
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-history me-2"></i>{{ 'subscription.history.title'|trans }}
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>{{ 'subscription.history.plan'|trans }}</th>
                                        <th>{{ 'subscription.history.period'|trans }}</th>
                                        <th>{{ 'subscription.history.amount'|trans }}</th>
                                        <th>{{ 'subscription.subscription.status'|trans }}</th>
                                        <th>{{ 'subscription.history.actions'|trans }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for subscription in subscriptions %}
                                        <tr>
                                            <td>{{ subscription.plan.label }}</td>
                                            <td>
                                                {{ subscription.currentPeriodStart|date('d/m/Y') }} - 
                                                {{ subscription.currentPeriodEnd|date('d/m/Y') }}
                                            </td>
                                            <td>{{ subscription.amount }}€</td>
                                            <td>
                                                <span class="badge bg-{{ subscription.status == 'active' ? 'success' : (subscription.status == 'canceled' ? 'secondary' : 'warning') }}">
                                                    {{ subscription.status|upper }}
                                                </span>
                                            </td>
                                            <td>
                                                {% if subscription.stripeSubscriptionId %}
                                                    <small class="text-muted">{{ subscription.stripeSubscriptionId|slice(0, 10) }}...</small>
                                                {% endif %}
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
        
        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Statistiques du plan actuel -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-chart-bar me-2"></i>{{ 'subscription.usage.title'|trans }}
                    </h6>
                </div>
                <div class="card-body">
                    {% set currentPlan = activeTrial ? activeTrial.plan : (activeSubscription ? activeSubscription.plan : member.subscriptionPlan) %}
                    {% set itemsCount = member.items|length %}
                    {% set maxItems = currentPlan.maxItems %}
                    
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <small class="text-muted">{{ 'subscription.usage.objects_published'|trans }}</small>
                            <small class="text-muted">
                                {{ itemsCount }}{% if maxItems > 0 %} / {{ maxItems }}{% endif %}
                            </small>
                        </div>
                        
                        {% if maxItems > 0 %}
                            {% set usagePercent = (itemsCount / maxItems * 100)|round %}
                            <div class="progress usage-progress">
                                <div class="progress-bar {% if usagePercent >= 90 %}bg-danger{% elseif usagePercent >= 70 %}bg-warning{% else %}bg-success{% endif %}" 
                                     role="progressbar" 
                                     style="width: {{ usagePercent }}%" 
                                     aria-valuenow="{{ usagePercent }}" 
                                     aria-valuemin="0" 
                                     aria-valuemax="100">
                                </div>
                            </div>
                            
                            {% if usagePercent >= 90 %}
                                <small class="text-danger mt-1 d-block">
                                    <i class="fas fa-exclamation-triangle me-1"></i>
                                    {{ 'subscription.usage.limit_almost_reached'|trans }}
                                </small>
                            {% endif %}
                        {% else %}
                            {% if maxItems == -1 %}
                                <div class="text-success">
                                    <i class="fas fa-infinity me-1"></i>
                                    {{ 'subscription.usage.unlimited_objects'|trans }}
                                </div>
                            {% else %}
                                <div class="text-info">
                                    <i class="fas fa-eye me-1"></i>
                                    {{ 'subscription.usage.view_only'|trans }}
                                </div>
                            {% endif %}
                        {% endif %}
                    </div>
                    
                    <hr>
                    
                    <div class="text-center">
                        <h6 class="text-muted">{{ 'subscription.usage.current_plan'|trans }}</h6>
                        <h4 class="text-primary">{{ currentPlan.label }}</h4>
                        
                        {% if currentPlan.value != 'FREE' and currentPlan.value != 'PREMIUM' %}
                            <div class="alert alert-warning alert-sm mt-2">
                                <small>
                                    <i class="fas fa-info-circle me-1"></i>
                                    {{ 'subscription.usage.plan_discontinued'|trans }}
                                </small>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            
            <!-- Actions rapides -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-lightning me-2"></i>{{ 'subscription.quick_actions.title'|trans }}
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        {% if not activeTrial and not activeSubscription %}
                            {% if member.isEligibleForTrial(constant('App\\Enum\\SubscriptionPlan::PREMIUM')) %}
                                <button class="btn btn-success start-trial-btn" 
                                        data-plan="premium" 
                                        data-plan-name="Premium">
                                    <i class="fas fa-gift me-2"></i>{{ 'subscription.quick_actions.free_trial_30d'|trans }}
                                </button>
                            {% endif %}
                        {% endif %}
                        
                        <a href="{{ path('subscription_plans') }}" class="btn btn-primary">
                            <i class="fas fa-eye me-2"></i>{{ 'subscription.quick_actions.view_all_plans'|trans }}
                        </a>
                        
                        {% if activeSubscription or activeTrial %}
                            <a href="{{ path('user_dashboard_items') }}" class="btn btn-outline-primary">
                                <i class="fas fa-plus me-2"></i>{{ 'subscription.quick_actions.add_object'|trans }}
                            </a>
                        {% endif %}
                        
                        <a href="{{ path('app_contact') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-question-circle me-2"></i>{{ 'subscription.quick_actions.help_support'|trans }}
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- Avantages du plan Premium -->
            {% if not activeTrial and not activeSubscription %}
                <div class="card border-success">
                    <div class="card-header bg-success text-white">
                        <h6 class="mb-0">
                            <i class="fas fa-crown me-2"></i>{{ 'subscription.premium_benefits.title'|trans }}
                        </h6>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled mb-0">
                            <li class="mb-2">
                                <i class="fas fa-check text-success me-2"></i>
                                {{ 'subscription.premium_benefits.unlimited_objects'|trans }}
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check text-success me-2"></i>
                                {{ 'subscription.premium_benefits.custom_gallery'|trans }}
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check text-success me-2"></i>
                                {{ 'subscription.premium_benefits.priority_support'|trans }}
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check text-success me-2"></i>
                                {{ 'subscription.premium_benefits.advanced_stats'|trans }}
                            </li>
                            <li class="mb-0">
                                <i class="fas fa-check text-success me-2"></i>
                                {{ 'subscription.premium_benefits.featured_objects'|trans }}
                            </li>
                        </ul>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const startTrialButtons = document.querySelectorAll('.start-trial-btn');
    const cancelTrialButtons = document.querySelectorAll('.cancel-trial-btn');
    const cancelSubscriptionButtons = document.querySelectorAll('.cancel-subscription-btn');
    const reactivateSubscriptionButtons = document.querySelectorAll('.reactivate-subscription-btn');
    
    // Gestion des périodes d'essai
    startTrialButtons.forEach(button => {
        button.addEventListener('click', async function() {
            const plan = this.dataset.plan;
            const planName = this.dataset.planName;
            
            if (!confirm(`{{ 'subscription.js.confirm_start_trial'|trans|replace({'%plan%': '${planName}'}) }}`)) {
                return;
            }
            
            try {
                const response = await fetch(`/subscription/start-trial/${plan}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });
                
                const data = await response.json();
                
                if (data.error) {
                    alert('{{ 'subscription.js.error'|trans }}: ' + data.error);
                    return;
                }
                
                alert('{{ 'subscription.js.trial_started_success'|trans }}');
                window.location.reload();
                
            } catch (error) {
                alert('Une erreur est survenue. Veuillez réessayer.');
                console.error('Erreur:', error);
            }
        });
    });
    
    // Annulation des périodes d'essai
    cancelTrialButtons.forEach(button => {
        button.addEventListener('click', async function() {
            if (!confirm('{{ 'subscription.js.confirm_cancel_trial'|trans }}')) {
                return;
            }
            
            try {
                const response = await fetch('/subscription/cancel-trial', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });
                
                const data = await response.json();
                
                if (data.error) {
                    alert('Erreur: ' + data.error);
                    return;
                }
                
                alert('{{ 'subscription.js.trial_canceled_success'|trans }}');
                window.location.reload();
                
            } catch (error) {
                alert('Une erreur est survenue. Veuillez réessayer.');
                console.error('Erreur:', error);
            }
        });
    });
    
    // Annulation des abonnements
    cancelSubscriptionButtons.forEach(button => {
        button.addEventListener('click', async function() {
            if (!confirm('{{ 'subscription.js.confirm_cancel_subscription'|trans }}')) {
                return;
            }
            
            try {
                const response = await fetch('/subscription/cancel-subscription', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });
                
                const data = await response.json();
                
                if (data.error) {
                    alert('Erreur: ' + data.error);
                    return;
                }
                
                alert('Abonnement annulé avec succès. Il restera actif jusqu\'au ' + data.end_date + '.');
                window.location.reload();
                
            } catch (error) {
                alert('Une erreur est survenue. Veuillez réessayer.');
                console.error('Erreur:', error);
            }
        });
    });
    
    // Réactivation des abonnements
    reactivateSubscriptionButtons.forEach(button => {
        button.addEventListener('click', async function() {
            if (!confirm('{{ 'subscription.js.confirm_reactivate_subscription'|trans }}')) {
                return;
            }
            
            try {
                const response = await fetch('/subscription/reactivate-subscription', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });
                
                const data = await response.json();
                
                if (data.error) {
                    alert('Erreur: ' + data.error);
                    return;
                }
                
                alert('{{ 'subscription.js.subscription_reactivated_success'|trans }}');
                window.location.reload();
                
            } catch (error) {
                alert('Une erreur est survenue. Veuillez réessayer.');
                console.error('Erreur:', error);
            }
        });
    });
});
</script>

<style>
.progress {
    background-color: #e9ecef;
    border-radius: 4px;
}

.card .badge {
    font-size: 0.75em;
}

.alert-sm {
    padding: 8px 12px;
    font-size: 0.875rem;
}

.card-header h5,
.card-header h6 {
    color: inherit;
}

.table td {
    vertical-align: middle;
}

@keyframes pulse-success {
    0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(25, 135, 84, 0); }
    100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

.btn-success {
    animation: pulse-success 2s infinite;
}

.border-success {
    border-width: 2px !important;
}
</style>
{% endblock %}