{% extends 'base.html.twig' %}
{% block title %}Campaigns - Rise Mailer{% endblock %}

{% block body %}
<div class="page-header animate-fade-in">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1><i class="bi bi-send-fill text-primary"></i> Campaigns</h1>
            <p>Manage and track your outreach performance</p>
        </div>
        <a href="{{ path('app_campaign_new') }}" class="btn btn-primary d-flex align-items-center gap-2">
            <i class="bi bi-plus-lg"></i>
            <span>New Campaign</span>
        </a>
    </div>
</div>

<div class="card border-0 shadow-sm animate-fade-in" style="animation-delay: 0.1s;">
    <div class="card-body p-0">
        {% if campaigns|length > 0 %}
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light text-muted small text-uppercase fw-bold">
                    <tr>
                        <th class="ps-4 py-3">Campaign Name</th>
                        <th class="py-3">Template</th>
                        <th class="py-3">Status</th>
                        <th class="py-3 text-center">Progress</th>
                        <th class="py-3">Created</th>
                        <th class="pe-4 py-3 text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for campaign in campaigns %}
                    <tr class="campaign-row">
                        <td class="ps-4">
                            <div class="d-flex align-items-center">
                                <div class="avatar-sm me-3 bg-soft-primary text-primary rounded-circle d-flex align-items-center justify-content-center fw-bold" style="width: 40px; height: 40px; min-width: 40px;">
                                    {{ campaign.name|first|upper }}
                                </div>
                                <div class="fw-bold text-dark">{{ campaign.name }}</div>
                            </div>
                        </td>
                        <td>
                            <span class="text-muted"><i class="bi bi-file-earmark-text me-1"></i> {{ campaign.template.name }}</span>
                        </td>
                        <td>
                            {% if campaign.status == 'completed' %}
                                <span class="badge rounded-pill bg-soft-success text-success px-3">
                                    <i class="bi bi-check-circle-fill me-1"></i> Completed
                                </span>
                            {% elseif campaign.status == 'sending' %}
                                <span class="badge rounded-pill bg-soft-warning text-warning px-3" id="status-badge-{{ campaign.id }}">
                                    <i class="bi bi-arrow-repeat spin me-1"></i> Sending
                                </span>
                            {% elseif campaign.status == 'failed' %}
                                <span class="badge rounded-pill bg-soft-danger text-danger px-3">
                                    <i class="bi bi-x-circle-fill me-1"></i> Failed
                                </span>
                            {% elseif campaign.status == 'scheduled' %}
                                <span class="badge rounded-pill bg-soft-info text-info px-3">
                                    <i class="bi bi-clock-fill me-1"></i> Scheduled
                                </span>
                            {% else %}
                                <span class="badge rounded-pill bg-soft-secondary text-secondary px-3">
                                    <i class="bi bi-pencil-fill me-1"></i> Draft
                                </span>
                            {% endif %}
                        </td>
                        <td class="text-center">
                            {% set progress = campaign.totalRecipients > 0 ? (campaign.sentCount / campaign.totalRecipients * 100)|round : 0 %}
                            <div class="d-flex align-items-center flex-column" style="min-width: 120px;">
                                <div class="w-100 bg-light rounded-pill mb-1" style="height: 6px;">
                                    <div class="bg-primary rounded-pill h-100" style="width: {{ progress }}%"></div>
                                </div>
                                <span class="small text-muted">{{ campaign.sentCount }}/{{ campaign.totalRecipients }} ({{ progress }}%)</span>
                            </div>
                        </td>
                        <td>
                            <div class="small text-dark">{{ campaign.createdAt|date('M d, Y') }}</div>
                            <div class="extra-small text-muted">{{ campaign.createdAt|date('H:i') }}</div>
                            {% if campaign.status == 'scheduled' and campaign.scheduledAt %}
                            <div class="extra-small text-info mt-1"><i class="bi bi-alarm"></i> {{ campaign.scheduledAt|date('M d, Y H:i') }}</div>
                            {% endif %}
                        </td>
                        <td class="pe-4 text-end">
                            <div class="d-flex justify-content-end gap-2">
                                <a href="{{ path('app_campaign_show', {id: campaign.id}) }}" class="btn btn-sm btn-soft-primary" title="View Details">
                                    <i class="bi bi-eye-fill"></i>
                                </a>
                                {% if campaign.status == 'failed' %}
                                <button class="btn btn-sm btn-soft-warning" onclick="retryCampaign({{ campaign.id }})" title="Retry failed recipients">
                                    <i class="bi bi-arrow-repeat"></i>
                                </button>
                                {% endif %}
                                {% if campaign.status == 'sending' %}
                                <button class="btn btn-sm btn-soft-info" onclick="pollStatus({{ campaign.id }}, this)" title="Refresh status" id="poll-btn-{{ campaign.id }}">
                                    <i class="bi bi-arrow-clockwise spin"></i>
                                </button>
                                {% endif %}
                                <button class="btn btn-sm btn-soft-danger" onclick="deleteCampaign({{ campaign.id }})" title="Delete">
                                    <i class="bi bi-trash3-fill"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="text-center py-5">
            <div class="py-4">
                <i class="bi bi-send-slash text-muted opacity-25" style="font-size: 5rem;"></i>
                <h4 class="text-dark mt-4">No campaigns found</h4>
                <p class="text-muted">Start by creating your first outreach campaign!</p>
                <a href="{{ path('app_campaign_new') }}" class="btn btn-primary mt-3 px-4">
                    <i class="bi bi-plus-lg me-2"></i> Create Campaign
                </a>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<style>
    .bg-soft-primary { background-color: rgba(124, 58, 237, 0.1); }
    .bg-soft-success { background-color: rgba(16, 185, 129, 0.1); }
    .bg-soft-warning { background-color: rgba(245, 158, 11, 0.1); }
    .bg-soft-secondary { background-color: rgba(100, 116, 139, 0.1); }
    .bg-soft-danger { background-color: rgba(239, 68, 68, 0.1); }
    .bg-soft-info { background-color: rgba(59, 130, 246, 0.1); }
    .text-info { color: #3b82f6 !important; }
    .btn-soft-warning { background: rgba(245,158,11,.1); color: #d97706; border: none; }
    .btn-soft-warning:hover { background: #f59e0b; color: #fff; }
    .btn-soft-info { background: rgba(59,130,246,.1); color: #3b82f6; border: none; }
    .btn-soft-info:hover { background: #3b82f6; color: #fff; }
    
    .btn-soft-primary {
        background: rgba(124, 58, 237, 0.1);
        color: var(--primary);
        border: none;
    }
    .btn-soft-primary:hover {
        background: var(--primary);
        color: white;
    }
    
    .btn-soft-danger {
        background: rgba(239, 68, 68, 0.1);
        color: var(--danger);
        border: none;
    }
    .btn-soft-danger:hover {
        background: var(--danger);
        color: white;
    }

    .spin {
        animation: spin 2s linear infinite;
        display: inline-block;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    .campaign-row {
        transition: all 0.2s ease;
    }
    .campaign-row:hover {
        background-color: rgba(0,0,0,0.01) !important;
        transform: scale(1.002);
    }
    
    .extra-small {
        font-size: 0.75rem;
    }
</style>
{% endblock %}

{% block javascripts %}
<script>
async function getCsrfToken(tokenId) {
    try {
        const response = await fetch(`/csrf-token/${tokenId}`);
        const data = await response.json();
        return data.token;
    } catch (e) {
        console.error('CSRF fetch error:', e);
        return null;
    }
}

async function retryCampaign(id) {
    if (!confirm('Retry sending to all failed recipients for this campaign?')) return;
    try {
        const token = await getCsrfToken(`campaign_retry_${id}`);
        const res = await fetch(`/campaigns/${id}/retry`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ _token: token })
        });
        const data = await res.json();
        if (data.success) {
            alert('Retry started. Refresh in a moment to see updated status.');
            location.reload();
        } else {
            alert(data.error || 'Retry failed');
        }
    } catch(e) {
        alert('Error starting retry');
    }
}

function pollStatus(id, btn) {
    btn.disabled = true;
    const interval = setInterval(async () => {
        try {
            const res = await fetch(`/campaigns/${id}/status`);
            const data = await res.json();
            const badge = document.getElementById(`status-badge-${id}`);
            if (data.status !== 'sending') {
                clearInterval(interval);
                location.reload();
            } else if (badge) {
                badge.innerHTML = `<i class="bi bi-arrow-repeat spin me-1"></i> Sending ${data.sentCount}/${data.totalRecipients} (${data.progress}%)`;
            }
        } catch(e) {
            clearInterval(interval);
            btn.disabled = false;
        }
    }, 3000);
}

// Auto-poll any campaign currently sending
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('[id^="status-badge-"]').forEach(badge => {
        const id = badge.id.replace('status-badge-', '');
        const btn = document.getElementById(`poll-btn-${id}`);
        if (btn) pollStatus(id, btn);
    });
});

async function deleteCampaign(id) {
    if (!confirm('Are you sure you want to permanently delete this campaign and all associated logs?')) return;
    
    try {
        const token = await getCsrfToken(`campaign_delete_${id}`);
        if (!token) throw new Error('Could not retrieve security token');
        
        const response = await fetch(`/campaigns/${id}/delete`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                _token: token
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            // Add a simple fade-out animation if you want to be extra fancy
            location.reload();
        } else {
            alert(data.error || 'Error deleting campaign');
        }
    } catch (error) {
        console.error(error);
        alert('An error occurred while trying to delete the campaign.');
    }
}
</script>
{% endblock %}