{% extends "base.html" %}
{% block title %}Campaigns - HM QC Platform{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row">
        <!-- Upload Section -->
        <div class="col-md-5">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-cloud-upload me-2"></i>Upload Campaign Presentation</h5>
                </div>
                <div class="card-body">
                    <form id="campaignUploadForm">
                        <div class="mb-3">
                            <label for="campaignId" class="form-label">Campaign ID <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="campaignId" name="campaign_id"
                                   placeholder="e.g., 1013A" required>
                            <div class="form-text">The campaign number from the filename</div>
                        </div>
                        <div class="mb-3">
                            <label for="campaignName" class="form-label">Campaign Name</label>
                            <input type="text" class="form-control" id="campaignName" name="campaign_name"
                                   placeholder="e.g., SS26 DROP1 Paid SoMe">
                        </div>
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="hasPricing" name="has_pricing">
                            <label class="form-check-label" for="hasPricing">
                                Contains campaign-specific pricing
                            </label>
                            <div class="form-text">Check if this PDF includes actual price values for validation</div>
                        </div>
                        <div class="mb-3">
                            <label for="campaignFile" class="form-label">File (PDF or Excel) <span class="text-danger">*</span></label>
                            <input type="file" class="form-control" id="campaignFile" name="file"
                                   accept=".pdf,.xlsx,.xls" required>
                            <div class="form-text">Campaign presentation (PDF) or media plan / price sheet (Excel)</div>
                        </div>
                        <button type="submit" class="btn btn-primary w-100" id="uploadBtn">
                            <i class="bi bi-upload me-2"></i>Upload & Parse
                        </button>
                    </form>
                    <div id="uploadStatus" class="mt-3" style="display:none;"></div>
                </div>
            </div>

            <!-- Pricing References (library) -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-currency-exchange me-2"></i>Upload Pricing Reference</h5>
                </div>
                <div class="card-body">
                    <p class="text-muted small mb-3">
                        Upload a PDF (format reference) or Excel Mastersheet (actual prices per locale).
                        Each reference is independent — pick one at configure time when running QC.
                    </p>
                    <form id="pricingUploadForm">
                        <div class="mb-2">
                            <input type="text" class="form-control form-control-sm" id="pricingName" name="name"
                                   placeholder="Name (e.g. 1013A Mastersheet) — optional, defaults to filename">
                        </div>
                        <div class="input-group">
                            <input type="file" class="form-control" id="pricingFile" name="file" accept=".pdf,.xlsx,.xls" required>
                            <button type="submit" class="btn btn-outline-primary" id="pricingUploadBtn">
                                <i class="bi bi-upload me-1"></i>Upload
                            </button>
                        </div>
                    </form>
                    <div id="pricingStatus" class="mt-2" style="display:none;"></div>
                </div>
            </div>
        </div>

        <!-- Presentations + Pricing References Lists -->
        <div class="col-md-7">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="bi bi-collection me-2"></i>Campaign Presentations</h5>
                    <span class="badge bg-secondary">{{ presentations|length }}</span>
                </div>
                <div class="card-body p-0">
                    {% if presentations %}
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>Campaign</th>
                                    <th>Name</th>
                                    <th>File</th>
                                    <th>Status</th>
                                    <th>Pricing</th>
                                    <th>Uploaded</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for p in presentations %}
                                <tr id="row-{{ p.id }}" data-id="{{ p.id }}" data-status="{{ p.status }}">
                                    <td><strong>{{ p.campaign_id }}</strong></td>
                                    <td>{{ p.campaign_name or '-' }}</td>
                                    <td>
                                        <small class="text-muted" title="{{ p.pdf_filename }}">
                                            {{ p.pdf_filename[:40] }}{% if p.pdf_filename|length > 40 %}...{% endif %}
                                        </small>
                                    </td>
                                    <td class="status-cell">
                                        {% if p.status == 'ready' %}
                                        <span class="badge bg-success">Ready</span>
                                        {% elif p.status == 'parsing' %}
                                        <span class="badge bg-info">
                                            <span class="spinner-border spinner-border-sm me-1" role="status"></span>
                                            Parsing
                                        </span>
                                        {% elif p.status == 'error' %}
                                        <span class="badge bg-danger" title="{{ p.error_message }}">Error</span>
                                        {% else %}
                                        <span class="badge bg-warning text-dark">
                                            <span class="spinner-border spinner-border-sm me-1" role="status"></span>
                                            Pending
                                        </span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if p.has_pricing %}
                                        <i class="bi bi-check-circle text-success"></i>
                                        {% else %}
                                        <i class="bi bi-dash text-muted"></i>
                                        {% endif %}
                                    </td>
                                    <td><small class="text-muted">{{ p.created_at.strftime('%Y-%m-%d %H:%M') if p.created_at else '-' }}</small></td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            {% if p.status == 'ready' %}
                                            <a href="{{ url_for('campaigns.view', presentation_id=p.id) }}"
                                               class="btn btn-outline-primary" title="View">
                                                <i class="bi bi-eye"></i>
                                            </a>
                                            {% endif %}
                                            <button class="btn btn-outline-danger delete-btn"
                                                    data-id="{{ p.id }}" title="Delete">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center py-5 text-muted">
                        <i class="bi bi-inbox" style="font-size: 3rem;"></i>
                        <p class="mt-2">No campaign presentations uploaded yet.</p>
                        <p class="small">Upload a PDF to get started.</p>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Pricing References -->
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="bi bi-currency-exchange me-2"></i>Pricing References</h5>
                    <span class="badge bg-secondary">{{ pricing_references|length }}</span>
                </div>
                <div class="card-body p-0">
                    {% if pricing_references %}
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>File</th>
                                    <th>Status</th>
                                    <th>Entries</th>
                                    <th>Uploaded</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for r in pricing_references %}
                                <tr id="pricing-row-{{ r.id }}" data-id="{{ r.id }}" data-status="{{ r.status }}">
                                    <td><strong>{{ r.name }}</strong></td>
                                    <td>
                                        <small class="text-muted" title="{{ r.pdf_filename }}">
                                            {{ r.pdf_filename[:30] }}{% if r.pdf_filename|length > 30 %}...{% endif %}
                                        </small>
                                    </td>
                                    <td class="pricing-status-cell">
                                        {% if r.status == 'ready' %}
                                        <span class="badge bg-success">Ready</span>
                                        {% elif r.status == 'parsing' %}
                                        <span class="badge bg-info">
                                            <span class="spinner-border spinner-border-sm me-1" role="status"></span>Parsing
                                        </span>
                                        {% elif r.status == 'error' %}
                                        <span class="badge bg-danger" title="{{ r.error_message }}">Error</span>
                                        {% else %}
                                        <span class="badge bg-warning text-dark">
                                            <span class="spinner-border spinner-border-sm me-1" role="status"></span>Pending
                                        </span>
                                        {% endif %}
                                    </td>
                                    <td><small class="text-muted">{{ r.to_dict().entry_count if r.status == 'ready' else '-' }}</small></td>
                                    <td><small class="text-muted">{{ r.created_at.strftime('%Y-%m-%d %H:%M') if r.created_at else '-' }}</small></td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-danger pricing-delete-btn"
                                                data-id="{{ r.id }}" title="Delete">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center py-5 text-muted">
                        <i class="bi bi-inbox" style="font-size: 3rem;"></i>
                        <p class="mt-2">No pricing references uploaded yet.</p>
                        <p class="small">Upload a pricing PDF to enable currency validation.</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
// --- Upload progress & status helpers ---

function updateStatusBadge(row, status, errorMsg) {
    const td = row.querySelector('.status-cell');
    if (!td) return;
    if (status === 'ready') {
        td.innerHTML = '<span class="badge bg-success">Ready</span>';
        // Show the view button
        const viewBtn = row.querySelector('.view-btn-placeholder');
        if (viewBtn) viewBtn.style.display = 'inline-block';
    } else if (status === 'parsing') {
        td.innerHTML = '<span class="badge bg-info"><span class="spinner-border spinner-border-sm me-1" role="status"></span>Parsing</span>';
    } else if (status === 'error') {
        td.innerHTML = '<span class="badge bg-danger" title="' + (errorMsg || '') + '">Error</span>';
    } else {
        td.innerHTML = '<span class="badge bg-secondary">Pending</span>';
    }
}

// Add a new row to the presentations table immediately after upload
function addRowToTable(id, campaignId, formData) {
    const tbody = document.querySelector('table tbody');
    const emptyMsg = document.querySelector('.text-center.py-5');

    // If the "No campaigns" placeholder is showing, replace the whole card body with a table
    if (emptyMsg) {
        const cardBody = emptyMsg.closest('.card-body');
        cardBody.innerHTML = `
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead><tr>
                        <th>Campaign</th><th>Name</th><th>File</th>
                        <th>Status</th><th>Pricing</th><th>Uploaded</th><th></th>
                    </tr></thead>
                    <tbody></tbody>
                </table>
            </div>`;
    }

    const tableBody = document.querySelector('table tbody');
    if (!tableBody) return;

    const campaignName = formData.get('campaign_name') || '-';
    const filename = formData.get('file') ? formData.get('file').name : '-';
    const hasPricing = formData.get('has_pricing') === 'true';
    const now = new Date();
    const dateStr = now.toISOString().slice(0, 16).replace('T', ' ');

    const tr = document.createElement('tr');
    tr.id = 'row-' + id;
    tr.dataset.id = id;
    tr.dataset.status = 'pending';
    tr.innerHTML = `
        <td><strong>${campaignId}</strong></td>
        <td>${campaignName}</td>
        <td><small class="text-muted">${filename.substring(0, 40)}</small></td>
        <td class="status-cell">
            <span class="badge bg-warning text-dark">
                <span class="spinner-border spinner-border-sm me-1" role="status"></span>
                Parsing
            </span>
        </td>
        <td>${hasPricing ? '<i class="bi bi-check-circle text-success"></i>' : '<i class="bi bi-dash text-muted"></i>'}</td>
        <td><small class="text-muted">${dateStr}</small></td>
        <td>
            <div class="btn-group btn-group-sm">
                <button class="btn btn-outline-danger delete-btn" data-id="${id}" title="Delete">
                    <i class="bi bi-trash"></i>
                </button>
            </div>
        </td>`;
    tableBody.prepend(tr);

    // Update the count badge
    const badge = document.querySelector('.card-header .badge');
    if (badge) badge.textContent = tableBody.children.length;

    // Start polling this new row too
    pollRowStatus(id);
}

// Poll a single presentation's status and update the table row in-place
function pollRowStatus(presentationId) {
    const row = document.getElementById('row-' + presentationId);
    if (!row) return;

    const interval = setInterval(async () => {
        try {
            const resp = await fetch(window.BASE_URL + '/campaigns/api/status/' + presentationId);
            const data = await resp.json();

            updateStatusBadge(row, data.status, data.error_message);

            if (data.status === 'ready' || data.status === 'error') {
                clearInterval(interval);
                // If ready, reload to get the view button link
                if (data.status === 'ready') {
                    setTimeout(() => location.reload(), 1000);
                }
            }
        } catch (err) {
            // Ignore polling errors
        }
    }, 3000);
}

// --- On page load: auto-poll any pending/parsing rows ---
document.querySelectorAll('tr[data-status="pending"], tr[data-status="parsing"]').forEach(row => {
    const id = row.dataset.id;
    if (id) pollRowStatus(id);
});

// --- Campaign Upload ---
document.getElementById('campaignUploadForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    const btn = document.getElementById('uploadBtn');
    const status = document.getElementById('uploadStatus');
    const formData = new FormData(this);

    // Add has_pricing as string
    formData.set('has_pricing', document.getElementById('hasPricing').checked ? 'true' : 'false');

    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Uploading...';
    status.style.display = 'block';
    status.className = 'mt-3 alert alert-info';
    status.innerHTML = `
        <div class="d-flex align-items-center mb-2">
            <span class="spinner-border spinner-border-sm me-2"></span>
            <span id="uploadProgressText">Uploading PDF...</span>
        </div>
        <div class="progress" style="height: 6px;">
            <div class="progress-bar progress-bar-striped progress-bar-animated" id="uploadProgressBar"
                 role="progressbar" style="width: 10%"></div>
        </div>`;

    try {
        const resp = await fetch(window.BASE_URL + '/campaigns/upload', {
            method: 'POST',
            body: formData
        });
        const data = await resp.json();

        if (data.success) {
            // Update progress to show parsing phase
            document.getElementById('uploadProgressText').textContent = 'PDF uploaded. Parsing content...';
            document.getElementById('uploadProgressBar').style.width = '40%';

            // Immediately add a row to the table so user sees it
            addRowToTable(data.id, data.campaign_id, formData);

            // Poll for parsing completion with progress updates
            pollUploadStatus(data.id);
        } else {
            status.className = 'mt-3 alert alert-danger';
            status.innerHTML = '<i class="bi bi-x-circle me-1"></i> ' + (data.error || 'Upload failed');
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-upload me-2"></i>Upload & Parse';
        }
    } catch (err) {
        status.className = 'mt-3 alert alert-danger';
        status.innerHTML = '<i class="bi bi-x-circle me-1"></i> Upload error: ' + err.message;
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-upload me-2"></i>Upload & Parse';
    }
});

// Poll with progress bar updates
function pollUploadStatus(id) {
    const status = document.getElementById('uploadStatus');
    const progressBar = document.getElementById('uploadProgressBar');
    const progressText = document.getElementById('uploadProgressText');
    const btn = document.getElementById('uploadBtn');
    let progress = 40;

    const interval = setInterval(async () => {
        try {
            const resp = await fetch(window.BASE_URL + '/campaigns/api/status/' + id);
            const data = await resp.json();

            if (data.status === 'parsing') {
                // Increment progress gradually while parsing
                progress = Math.min(progress + 5, 85);
                if (progressBar) progressBar.style.width = progress + '%';
                if (progressText) progressText.textContent = 'Extracting text and page images...';
            } else if (data.status === 'ready') {
                clearInterval(interval);
                if (progressBar) progressBar.style.width = '100%';
                status.className = 'mt-3 alert alert-success';
                status.innerHTML = '<i class="bi bi-check-circle me-1"></i> PDF parsed successfully! Reloading...';
                btn.disabled = false;
                btn.innerHTML = '<i class="bi bi-upload me-2"></i>Upload & Parse';
                setTimeout(() => location.reload(), 1500);
            } else if (data.status === 'error') {
                clearInterval(interval);
                status.className = 'mt-3 alert alert-danger';
                status.innerHTML = '<i class="bi bi-x-circle me-1"></i> Parsing failed: ' + (data.error_message || 'Unknown error');
                btn.disabled = false;
                btn.innerHTML = '<i class="bi bi-upload me-2"></i>Upload & Parse';
            }
        } catch (err) {
            // Ignore polling errors
        }
    }, 3000);
}

// --- Pricing Reference upload + status poll ---
function updatePricingStatusBadge(row, status, errorMsg) {
    const td = row.querySelector('.pricing-status-cell');
    if (!td) return;
    if (status === 'ready') {
        td.innerHTML = '<span class="badge bg-success">Ready</span>';
    } else if (status === 'parsing') {
        td.innerHTML = '<span class="badge bg-info"><span class="spinner-border spinner-border-sm me-1" role="status"></span>Parsing</span>';
    } else if (status === 'error') {
        td.innerHTML = '<span class="badge bg-danger" title="' + (errorMsg || '') + '">Error</span>';
    } else {
        td.innerHTML = '<span class="badge bg-secondary">Pending</span>';
    }
}

function pollPricingRow(id) {
    const row = document.getElementById('pricing-row-' + id);
    if (!row) return;
    const interval = setInterval(async () => {
        try {
            const resp = await fetch(window.BASE_URL + '/campaigns/api/pricing/status/' + id);
            const data = await resp.json();
            updatePricingStatusBadge(row, data.status, data.error_message);
            if (data.status === 'ready' || data.status === 'error') {
                clearInterval(interval);
                if (data.status === 'ready') setTimeout(() => location.reload(), 1000);
            }
        } catch {}
    }, 3000);
}

document.querySelectorAll('tr[id^="pricing-row-"][data-status="pending"], tr[id^="pricing-row-"][data-status="parsing"]').forEach(row => {
    const id = row.dataset.id;
    if (id) pollPricingRow(id);
});

document.getElementById('pricingUploadForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    const btn = document.getElementById('pricingUploadBtn');
    const status = document.getElementById('pricingStatus');
    const formData = new FormData(this);

    btn.disabled = true;
    status.style.display = 'block';
    status.className = 'mt-2 alert alert-info py-2';
    status.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Uploading and parsing pricing reference...';

    try {
        const resp = await fetch(window.BASE_URL + '/campaigns/pricing/upload', {
            method: 'POST',
            body: formData
        });
        const data = await resp.json();

        if (data.success) {
            status.className = 'mt-2 alert alert-success py-2';
            status.innerHTML = '<i class="bi bi-check-circle me-1"></i> ' + data.message;
            setTimeout(() => location.reload(), 1500);
        } else {
            status.className = 'mt-2 alert alert-danger py-2';
            status.innerHTML = '<i class="bi bi-x-circle me-1"></i> ' + (data.error || 'Upload failed');
            btn.disabled = false;
        }
    } catch (err) {
        status.className = 'mt-2 alert alert-danger py-2';
        status.innerHTML = '<i class="bi bi-x-circle me-1"></i> Error: ' + err.message;
        btn.disabled = false;
    }
});

document.querySelectorAll('.pricing-delete-btn').forEach(btn => {
    btn.addEventListener('click', async function() {
        const id = this.dataset.id;
        if (!confirm('Delete this pricing reference?')) return;
        try {
            const resp = await fetch(window.BASE_URL + '/campaigns/pricing/' + id, { method: 'DELETE' });
            const data = await resp.json();
            if (data.success) {
                document.getElementById('pricing-row-' + id).remove();
            } else {
                alert('Delete failed: ' + (data.error || 'Unknown error'));
            }
        } catch (err) {
            alert('Delete error: ' + err.message);
        }
    });
});

// --- Delete presentation ---
document.querySelectorAll('.delete-btn').forEach(btn => {
    btn.addEventListener('click', async function() {
        const id = this.dataset.id;
        if (!confirm('Delete this campaign presentation?')) return;

        try {
            const resp = await fetch(window.BASE_URL + '/campaigns/' + id, {
                method: 'DELETE'
            });
            const data = await resp.json();
            if (data.success) {
                document.getElementById('row-' + id).remove();
            } else {
                alert('Delete failed: ' + (data.error || 'Unknown error'));
            }
        } catch (err) {
            alert('Delete error: ' + err.message);
        }
    });
});
</script>
{% endblock %}