{% extends "admin/base_site.html" %}
{% load static brevo_filters %}

{% block title %}Email Detail - {{ email.recipient_email }}{% endblock %}

{% block extrastyle %}
<style>
    .email-detail-container {
        padding: 20px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .email-header {
        background: white;
        padding: 20px;
        border-radius: 4px;
        margin-bottom: 20px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .email-header h1 {
        margin: 0 0 20px 0;
        color: #333;
    }

    .email-meta {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 15px;
    }

    .meta-item {
        display: flex;
        flex-direction: column;
    }

    .meta-label {
        font-weight: bold;
        color: #666;
        font-size: 12px;
        text-transform: uppercase;
        margin-bottom: 5px;
    }

    .meta-value {
        color: #333;
        font-size: 14px;
    }

    .events-section {
        background: white;
        padding: 20px;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .events-section h2 {
        margin: 0 0 20px 0;
        color: #333;
    }

    .timeline {
        position: relative;
        padding-left: 40px;
    }

    .timeline::before {
        content: '';
        position: absolute;
        left: 12px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #e0e0e0;
    }

    .timeline-item {
        position: relative;
        padding-bottom: 30px;
    }

    .timeline-item:last-child {
        padding-bottom: 0;
    }

    .timeline-marker {
        position: absolute;
        left: -33px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: white;
        border: 3px solid #4CAF50;
        z-index: 1;
    }

    .timeline-marker.sent { border-color: #9E9E9E; }
    .timeline-marker.delivered { border-color: #4CAF50; }
    .timeline-marker.opened { border-color: #2196F3; }
    .timeline-marker.clicked { border-color: #FF9800; }
    .timeline-marker.bounced { border-color: #f44336; }
    .timeline-marker.unsubscribed { border-color: #9E9E9E; }

    .timeline-content {
        background: #f9f9f9;
        padding: 15px;
        border-radius: 4px;
        border-left: 3px solid #e0e0e0;
    }

    .timeline-content.sent { border-left-color: #9E9E9E; }
    .timeline-content.delivered { border-left-color: #4CAF50; }
    .timeline-content.opened { border-left-color: #2196F3; }
    .timeline-content.clicked { border-left-color: #FF9800; }
    .timeline-content.bounced { border-left-color: #f44336; }
    .timeline-content.unsubscribed { border-left-color: #9E9E9E; }

    .event-type {
        font-weight: bold;
        color: #333;
        text-transform: capitalize;
        margin-bottom: 5px;
    }

    .event-date {
        color: #666;
        font-size: 12px;
        margin-bottom: 10px;
    }

    .event-details {
        color: #555;
        font-size: 14px;
    }

    .bounce-details {
        background: #ffebee;
        padding: 10px;
        border-radius: 4px;
        margin-top: 10px;
    }

    .bounce-details strong {
        color: #c62828;
    }

    .timeline-legend {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
        padding: 10px;
        background: #f5f5f5;
        border-radius: 4px;
        flex-wrap: wrap;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: #666;
    }

    .legend-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 2px solid;
    }

    .legend-dot.sent { border-color: #9E9E9E; }
    .legend-dot.delivered { border-color: #4CAF50; }
    .legend-dot.opened { border-color: #2196F3; }
    .legend-dot.clicked { border-color: #FF9800; }
    .legend-dot.bounced { border-color: #f44336; }
    .legend-dot.unsubscribed { border-color: #9E9E9E; }

    .back-button {
        display: inline-block;
        padding: 8px 16px;
        background: #417690;
        color: #e0e0e0 !important;
        text-decoration: none;
        border-radius: 4px;
        margin-bottom: 20px;
        transition: color 0.2s ease;
    }

    .back-button:hover {
        background: #305968;
        color: white !important;
    }
</style>
{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">Home</a>
    &rsaquo; <a href="{% url 'admin:brevo_analytics_brevoemail_changelist' %}">Brevo Analytics</a>
    &rsaquo; <a href="{% url 'admin:brevo_analytics_email_list' %}">Email List</a>
    &rsaquo; {{ email.recipient }}
</div>
{% endblock %}

{% block content %}
<div class="email-detail-container">
    <a href="{% url 'admin:brevo_analytics_email_list' %}" class="back-button">
        &larr; Back to Email List
    </a>

    <div class="email-header">
        <h1>Email Details</h1>
        <div class="email-meta">
            <div class="meta-item">
                <span class="meta-label">Recipient</span>
                <span class="meta-value">{{ email.recipient_email }}</span>
            </div>
            <div class="meta-item">
                <span class="meta-label">Subject</span>
                <span class="meta-value">{{ email.subject|default:"—" }}</span>
            </div>
            <div class="meta-item">
                <span class="meta-label">Sent Date</span>
                <span class="meta-value">{{ email.sent_at|date:"H:i d/m/Y" }}</span>
            </div>
            <div class="meta-item">
                <span class="meta-label">Brevo Message ID</span>
                <span class="meta-value">{{ email.brevo_email_id|default:"—" }}</span>
            </div>
        </div>
    </div>

    <div class="events-section">
        <h2>Event Timeline</h2>

        <div class="timeline-legend">
            <div class="legend-item">
                <div class="legend-dot sent"></div>
                <span>Sent</span>
            </div>
            <div class="legend-item">
                <div class="legend-dot delivered"></div>
                <span>Delivered</span>
            </div>
            <div class="legend-item">
                <div class="legend-dot opened"></div>
                <span>Opened</span>
            </div>
            <div class="legend-item">
                <div class="legend-dot clicked"></div>
                <span>Clicked</span>
            </div>
            <div class="legend-item">
                <div class="legend-dot bounced"></div>
                <span>Bounced</span>
            </div>
            <div class="legend-item">
                <div class="legend-dot unsubscribed"></div>
                <span>Unsubscribed</span>
            </div>
        </div>

        {% if events %}
            <div class="timeline">
                {% for event in events %}
                    <div class="timeline-item">
                        <div class="timeline-marker {{ event.event_type }}"></div>
                        <div class="timeline-content {{ event.event_type }}">
                            <div class="event-type">{{ event.event_type|format_event_type }}</div>
                            <div class="event-date">{{ event.event_timestamp|smart_timestamp }}</div>

                            {% if event.event_type == "clicked" and event.click_url %}
                                <div class="event-details">
                                    <strong>Link:</strong> <a href="{{ event.click_url }}" target="_blank">{{ event.click_url }}</a>
                                </div>
                            {% endif %}

                            {% if event.event_type == "bounced" %}
                                <div class="bounce-details">
                                    {% if event.bounce_type %}
                                        <div><strong>Bounce Type:</strong> {{ event.bounce_type }}</div>
                                    {% endif %}
                                    {% if event.bounce_reason %}
                                        <div><strong>Reason:</strong> {{ event.bounce_reason }}</div>
                                    {% endif %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <p>No events recorded for this email yet.</p>
        {% endif %}
    </div>
</div>
{% endblock %}