{# templates/emails/security/token_compromised.html.twig #}
{% extends 'emails/admin/alert.html.twig' %}

{% block title %}🔥 Token API Compromis - Alerte Critique{% endblock %}

{% block content %}
    <div style="background: #FEE2E2; border: 2px solid #DC2626; padding: 20px; margin: 0 0 20px 0; border-radius: 4px; text-align: center;">
        <h2 style="color: #991B1B; margin: 0 0 10px 0;">
            <i class="fa fa-exclamation-triangle"></i> ALERTE SÉCURITÉ CRITIQUE
        </h2>
        <p style="margin: 0; color: #7F1D1D; font-size: 16px; font-weight: bold;">
            Un token API a été utilisé depuis une localisation ou un appareil inhabituel
        </p>
    </div>

    <h3 style="color: #374151; margin: 20px 0 15px 0;">Détails de l'Anomalie</h3>

    <table style="width: 100%; margin: 20px 0; border-collapse: collapse;">
        <tr style="background: #FEF2F2;">
            <td style="padding: 12px; font-weight: bold; border-bottom: 1px solid #E5E7EB; width: 30%;">Utilisateur</td>
            <td style="padding: 12px; border-bottom: 1px solid #E5E7EB;">
                <strong>{{ data.user_email }}</strong>
                <br><small style="color: #6B7280;">ID: {{ data.user_id }}</small>
            </td>
        </tr>
        <tr>
            <td style="padding: 12px; font-weight: bold; border-bottom: 1px solid #E5E7EB;">Token ID</td>
            <td style="padding: 12px; border-bottom: 1px solid #E5E7EB;">
                <code style="background: #F3F4F6; padding: 4px 8px; border-radius: 4px;">{{ data.token_id }}</code>
            </td>
        </tr>
        <tr style="background: #FEF2F2;">
            <td style="padding: 12px; font-weight: bold; border-bottom: 1px solid #E5E7EB;">Créé le</td>
            <td style="padding: 12px; border-bottom: 1px solid #E5E7EB;">{{ data.token_created_at }}</td>
        </tr>
        <tr>
            <td style="padding: 12px; font-weight: bold; border-bottom: 1px solid #E5E7EB;">Détecté le</td>
            <td style="padding: 12px; border-bottom: 1px solid #E5E7EB;">
                <strong style="color: #DC2626;">{{ data.detected_at }}</strong>
            </td>
        </tr>
    </table>

    <h3 style="color: #374151; margin: 30px 0 15px 0;">Anomalies Détectées</h3>

    {% for anomaly in data.anomalies %}
        <div style="background: #FEF2F2; border-left: 4px solid #DC2626; padding: 15px; margin: 10px 0; border-radius: 4px;">
            <h4 style="margin: 0 0 10px 0; color: #991B1B;">
                {% if anomaly.type == 'country_change' %}
                    <i class="fa fa-globe"></i> Changement de Pays
                {% elseif anomaly.type == 'user_agent_change' %}
                    <i class="fa fa-desktop"></i> Changement d'Appareil
                {% else %}
                    <i class="fa fa-exclamation-circle"></i> {{ anomaly.type }}
                {% endif %}
                <span style="float: right; background: {{ anomaly.severity == 'critical' ? '#DC2626' : '#F97316' }}; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">
                    {{ anomaly.severity|upper }}
                </span>
            </h4>

            {% if anomaly.type == 'country_change' %}
                <table style="width: 100%; font-size: 14px;">
                    <tr>
                        <td style="padding: 5px 0; width: 50%;">
                            <strong>Pays d'origine:</strong><br>
                            <span style="color: #059669;">{{ anomaly.original_country }}</span>
                            <br><small style="color: #6B7280;">IP: {{ anomaly.original_ip }}</small>
                        </td>
                        <td style="padding: 5px 0;">
                            <strong>Nouveau pays:</strong><br>
                            <span style="color: #DC2626;">{{ anomaly.current_country }}</span>
                            <br><small style="color: #6B7280;">IP: {{ anomaly.current_ip }}</small>
                        </td>
                    </tr>
                </table>
            {% elseif anomaly.type == 'user_agent_change' %}
                <p style="margin: 5px 0 0 0; font-size: 14px;">
                    <strong>User-Agent original:</strong><br>
                    <code style="background: #F9FAFB; padding: 4px; display: block; margin: 5px 0; word-break: break-all;">{{ anomaly.original_user_agent }}</code>
                </p>
                <p style="margin: 10px 0 0 0; font-size: 14px;">
                    <strong>Nouveau User-Agent:</strong><br>
                    <code style="background: #FEE2E2; padding: 4px; display: block; margin: 5px 0; word-break: break-all;">{{ anomaly.current_user_agent }}</code>
                </p>
                {% if anomaly.similarity %}
                    <p style="margin: 10px 0 0 0; font-size: 14px;">
                        <strong>Similarité:</strong> <span style="color: {{ anomaly.similarity < 50 ? '#DC2626' : '#F97316' }};">{{ anomaly.similarity }}%</span>
                    </p>
                {% endif %}
            {% endif %}
        </div>
    {% endfor %}

    {% if data.current_geo_data %}
        <h3 style="color: #374151; margin: 30px 0 15px 0;">Localisation Actuelle</h3>
        <table style="width: 100%; margin: 10px 0; border-collapse: collapse; font-size: 14px;">
            <tr>
                <td style="padding: 8px; background: #F9FAFB; font-weight: bold; border: 1px solid #E5E7EB;">Pays</td>
                <td style="padding: 8px; border: 1px solid #E5E7EB;">{{ data.current_geo_data.country|default('Inconnu') }}</td>
            </tr>
            <tr>
                <td style="padding: 8px; background: #F9FAFB; font-weight: bold; border: 1px solid #E5E7EB;">Ville</td>
                <td style="padding: 8px; border: 1px solid #E5E7EB;">{{ data.current_geo_data.city|default('Inconnu') }}</td>
            </tr>
            <tr>
                <td style="padding: 8px; background: #F9FAFB; font-weight: bold; border: 1px solid #E5E7EB;">ISP</td>
                <td style="padding: 8px; border: 1px solid #E5E7EB;">{{ data.current_geo_data.isp|default('Inconnu') }}</td>
            </tr>
            <tr>
                <td style="padding: 8px; background: #F9FAFB; font-weight: bold; border: 1px solid #E5E7EB;">Proxy/VPN</td>
                <td style="padding: 8px; border: 1px solid #E5E7EB;">
                    {% if data.current_geo_data.is_proxy or data.current_geo_data.is_vpn %}
                        <span style="color: #DC2626; font-weight: bold;">OUI</span>
                    {% else %}
                        <span style="color: #059669;">NON</span>
                    {% endif %}
                </td>
            </tr>
        </table>
    {% endif %}

    <div style="background: #FEF2F2; border: 2px solid #DC2626; padding: 20px; margin: 30px 0; border-radius: 4px;">
        <h3 style="color: #991B1B; margin: 0 0 15px 0;">
            <i class="fa fa-shield-halved"></i> Actions Urgentes Requises
        </h3>
        <ol style="margin: 0; padding-left: 20px; color: #7F1D1D;">
            <li style="margin: 10px 0;">
                <strong>Révoquer immédiatement ce token</strong>
                <br><small>Le token peut être compromis et utilisé par un attaquant</small>
            </li>
            <li style="margin: 10px 0;">
                <strong>Contacter l'utilisateur {{ data.user_email }}</strong>
                <br><small>Vérifier si l'activité est légitime</small>
            </li>
            <li style="margin: 10px 0;">
                <strong>Forcer un changement de mot de passe</strong>
                <br><small>Si le compte est compromis</small>
            </li>
            <li style="margin: 10px 0;">
                <strong>Analyser les logs d'activité récents</strong>
                <br><small>Identifier toute activité suspecte</small>
            </li>
            <li style="margin: 10px 0;">
                <strong>Considérer un blocage temporaire de l'IP {{ data.current_ip }}</strong>
                <br><small>Pour prévenir d'autres accès non autorisés</small>
            </li>
        </ol>
    </div>

    <div style="background: #EFF6FF; border: 1px solid #BFDBFE; padding: 15px; margin: 20px 0; border-radius: 4px;">
        <p style="margin: 0; color: #1E40AF;">
            <i class="fa fa-info-circle"></i> <strong>Note:</strong> Cette alerte a été générée automatiquement par le système de sécurité TokenSecurityService.
            Les tokens API sont surveillés pour détecter toute utilisation anormale.
        </p>
    </div>
{% endblock %}