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

{% block subject %}
    {% if isInGrace %}
        {{ 'email.payment_failed.subject.grace'|trans }}
    {% elseif attemptNumber == 1 %}
        {{ 'email.payment_failed.subject.first_attempt'|trans }}
    {% elseif attemptNumber <= 3 %}
        {{ 'email.payment_failed.subject.multiple_attempts'|trans }}
    {% else %}
        {{ 'email.payment_failed.subject.final_warning'|trans }}
    {% endif %}
{% endblock %}

{% block header %}
    <h1 style="color: {% if urgency == 'critical' %}#e74c3c{% elseif urgency == 'high' %}#f39c12{% else %}#3498db{% endif %}; margin-bottom: 20px;">
        {% if isInGrace %}
            <i class="fas fa-exclamation-triangle" style="color: #e74c3c;"></i> {{ 'email.payment_failed.header.grace'|trans }}
        {% elseif attemptNumber == 1 %}
            <i class="fas fa-credit-card" style="color: #f39c12;"></i> {{ 'email.payment_failed.header.first_attempt'|trans }}
        {% else %}
            <i class="fas fa-exclamation-circle" style="color: #e74c3c;"></i> {{ 'email.payment_failed.header.multiple_attempts'|trans }}
        {% endif %}
    </h1>
{% endblock %}

{% block content %}
    <div style="background-color: {% if urgency == 'critical' %}#fdf2f2{% elseif urgency == 'high' %}#fef9e7{% else %}#e8f4fd{% endif %}; 
                padding: 20px; border-radius: 8px; margin-bottom: 20px; 
                border-left: 4px solid {% if urgency == 'critical' %}#e74c3c{% elseif urgency == 'high' %}#f39c12{% else %}#3498db{% endif %};">
        <h2 style="color: {% if urgency == 'critical' %}#c0392b{% elseif urgency == 'high' %}#d68910{% else %}#2980b9{% endif %}; margin-top: 0;">
            {{ 'email.payment_failed.content.greeting'|trans({'%firstName%': member.firstName}) }}
        </h2>
        <p style="font-size: 16px; margin-bottom: 10px; color: {% if urgency == 'critical' %}#a93226{% elseif urgency == 'high' %}#b7950b{% else %}#2471a3{% endif %};">
            {% if isInGrace %}
                {{ 'email.payment_failed.content.grace_message'|trans }}
            {% elseif attemptNumber == 1 %}
                {{ 'email.payment_failed.content.first_attempt_message'|trans }}
            {% else %}
                {{ 'email.payment_failed.content.multiple_attempts_message'|trans({'%attemptNumber%': attemptNumber}) }}
            {% endif %}
        </p>
        {% if isInGrace %}
        <p style="margin: 0; color: #a93226; font-weight: bold;">
            <i class="fas fa-clock" style="color: #e74c3c;"></i> {{ 'email.payment_failed.content.grace_remaining'|trans({'%graceRemainingDays%': graceRemainingDays, '%plural%': graceRemainingDays > 1 ? 's' : ''}) }}
        </p>
        {% endif %}
    </div>

    <div style="margin-bottom: 30px;">
        <h3 style="color: #2c3e50; margin-bottom: 15px;"><i class="fas fa-info-circle" style="color: #3498db;"></i> {{ 'email.payment_failed.details.title'|trans }}</h3>
        
        <div style="background-color: #f8f9fa; padding: 15px; border-radius: 6px; margin-bottom: 15px;">
            <table style="width: 100%; border-collapse: collapse;">
                <tr>
                    <td style="padding: 8px 0; color: #666; width: 30%;"><strong>{{ 'email.payment_failed.details.date'|trans }}</strong></td>
                    <td style="padding: 8px 0; color: #2c3e50;">{{ paymentFailure.failureDate|date('d/m/Y à H:i') }}</td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; color: #666;"><strong>{{ 'email.payment_failed.details.attempt'|trans }}</strong></td>
                    <td style="padding: 8px 0; color: #2c3e50;">{{ attemptNumber }} / 5</td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; color: #666;"><strong>{{ 'email.payment_failed.details.status'|trans }}</strong></td>
                    <td style="padding: 8px 0; color: {% if isInGrace %}#e74c3c{% else %}#f39c12{% endif %};">
                        {% if isInGrace %}
                            <i class="fas fa-pause-circle"></i> {{ 'email.payment_failed.details.grace_status'|trans }}
                        {% else %}
                            <i class="fas fa-sync-alt"></i> {{ 'email.payment_failed.details.retry_status'|trans }}
                        {% endif %}
                    </td>
                </tr>
                {% if paymentFailure.reason %}
                <tr>
                    <td style="padding: 8px 0; color: #666;"><strong>{{ 'email.payment_failed.details.reason'|trans }}</strong></td>
                    <td style="padding: 8px 0; color: #2c3e50;">
                        {% set reasonMap = {
                            'insufficient_funds': 'email.payment_failed.reasons.insufficient_funds',
                            'card_declined': 'email.payment_failed.reasons.card_declined',
                            'card_expired': 'email.payment_failed.reasons.card_expired',
                            'authentication_required': 'email.payment_failed.reasons.authentication_required',
                            'processing_error': 'email.payment_failed.reasons.processing_error',
                            'unknown': 'email.payment_failed.reasons.unknown'
                        } %}
                        {% set reasonKey = reasonMap[paymentFailure.reason] ?? null %}
                        {% if reasonKey %}
                            {{ reasonKey|trans }}
                        {% else %}
                            {{ paymentFailure.reason }}
                        {% endif %}
                    </td>
                </tr>
                {% endif %}
            </table>
        </div>
    </div>

    {% if not isInGrace %}
    <div style="background-color: #e8f4fd; padding: 20px; border-radius: 8px; margin-bottom: 30px;">
        <h3 style="color: #2980b9; margin-top: 0; margin-bottom: 15px;"><i class="fas fa-calendar-check" style="color: #2980b9;"></i> {{ 'email.payment_failed.next_retry.title'|trans }}</h3>
        <p style="color: #2471a3; margin-bottom: 10px;">
            {{ 'email.payment_failed.next_retry.automatic_retry'|trans({'%nextRetryDate%': paymentFailure.nextRetryDate|date('d/m/Y à H:i')}) }}
        </p>
        <p style="color: #2471a3; margin: 0;">
            {{ 'email.payment_failed.next_retry.no_action'|trans }}
        </p>
    </div>
    {% endif %}

    <div style="background-color: #fff3cd; padding: 20px; border-radius: 8px; margin-bottom: 30px; border-left: 4px solid #ffc107;">
        <h3 style="color: #856404; margin-top: 0; margin-bottom: 15px;"><i class="fas fa-wrench" style="color: #f39c12;"></i> {{ 'email.payment_failed.recommendations.title'|trans }}</h3>
        <ul style="color: #856404; padding-left: 20px; margin: 0;">
            <li style="margin-bottom: 10px;">{{ 'email.payment_failed.recommendations.check_card'|trans }}</li>
            <li style="margin-bottom: 10px;">{{ 'email.payment_failed.recommendations.check_funds'|trans }}</li>
            <li style="margin-bottom: 10px;">{{ 'email.payment_failed.recommendations.contact_bank'|trans }}</li>
            <li style="margin-bottom: 0;">{{ 'email.payment_failed.recommendations.update_payment'|trans }}</li>
        </ul>
    </div>

    {% if isInGrace %}
    <div style="background-color: #fdf2f2; padding: 20px; border-radius: 8px; margin-bottom: 30px; border: 2px solid #e74c3c;">
        <h3 style="color: #c0392b; margin-top: 0; margin-bottom: 15px;"><i class="fas fa-exclamation-triangle" style="color: #e74c3c;"></i> {{ 'email.payment_failed.grace_warning.title'|trans }}</h3>
        <p style="color: #a93226; margin-bottom: 10px;">
            {{ 'email.payment_failed.grace_warning.suspension_warning'|trans({'%graceRemainingDays%': graceRemainingDays, '%plural%': graceRemainingDays > 1 ? 's' : ''}) }}
        </p>
        <p style="color: #a93226; margin: 0;">
            {{ 'email.payment_failed.grace_warning.consequences'|trans }}
        </p>
    </div>
    {% endif %}

    <div style="text-align: center; margin-bottom: 30px;">
        <a href="{{ dashboardUrl }}" 
           style="display: inline-block; background-color: {% if urgency == 'critical' %}#e74c3c{% else %}#27ae60{% endif %}; 
                  color: white; padding: 15px 30px; text-decoration: none; border-radius: 6px; 
                  font-weight: bold; margin-right: 10px; margin-bottom: 10px;">
            <i class="fas fa-credit-card"></i> {{ 'email.payment_failed.buttons.update_payment'|trans }}
        </a>
        <a href="{{ supportUrl }}" 
           style="display: inline-block; background-color: #3498db; color: white; padding: 15px 30px; 
                  text-decoration: none; border-radius: 6px; font-weight: bold; margin-bottom: 10px;">
            <i class="fas fa-life-ring"></i> {{ 'email.payment_failed.buttons.contact_support'|trans }}
        </a>
    </div>

    <div style="background-color: #f8f9fa; padding: 20px; border-radius: 8px; text-align: center;">
        <h3 style="color: #2c3e50; margin-top: 0; margin-bottom: 15px;"><i class="fas fa-shield-alt" style="color: #27ae60;"></i> {{ 'email.payment_failed.security.title'|trans }}</h3>
        <p style="color: #666; margin: 0;">
            {{ 'email.payment_failed.security.description'|trans }}
        </p>
    </div>

    <p style="margin-top: 30px; color: #666; font-size: 14px;">
        {{ 'email.payment_failed.support.question'|trans }}<br>
        <a href="mailto:support@antiquites-en-france.com" style="color: #3498db;">
            support@antiquites-en-france.com
        </a> | {{ 'email.payment_failed.support.phone'|trans }}
    </p>
{% endblock %}

{% block footer %}
    <p style="text-align: center; color: #666; font-size: 12px; margin: 0;">
        {{ 'email.payment_failed.footer.info'|trans }}<br>
        {{ 'email.payment_failed.footer.reason'|trans({'%failureDate%': paymentFailure.failureDate|date('d/m/Y')}) }}
    </p>
{% endblock %}