{% extends "base.html" %}

{% block title %}Redacting Document{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="card bg-dark text-white">
        <div class="card-header">
            <h1 class="h3">Redaction in Progress</h1>
        </div>
        <div class="card-body">
            <p>Your document is being automatically redacted. Please wait, this may take a few minutes depending on the document size.</p>
            <div class="progress mb-3">
                <div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div id="status-messages">
                <div class="alert alert-info">Initializing...</div>
            </div>
            <div id="download-link-container" class="d-grid gap-2 mt-3" style="display: none;">
                <a href="#" id="download-link" class="btn btn-success">Download Redacted PDF</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const sessionId = '{{ session_id }}';
        const progressBar = document.getElementById('progress-bar');
        const statusMessages = document.getElementById('status-messages');
        const downloadContainer = document.getElementById('download-link-container');
        const downloadLink = document.getElementById('download-link');

        function addStatus(message, type = 'info') {
            const alertClass = `alert-${type}`;
            const newStatus = document.createElement('div');
            newStatus.className = `alert ${alertClass}`;
            newStatus.textContent = message;
            statusMessages.appendChild(newStatus);
            statusMessages.scrollTop = statusMessages.scrollHeight;
        }

        addStatus('Connecting to redaction service...');

        const eventSource = new EventSource(`/redaction_stream/${sessionId}`);

        eventSource.onmessage = function(event) {
            const data = JSON.parse(event.data);

            if (data.error) {
                addStatus(`Error: ${data.error}`, 'danger');
                progressBar.classList.add('bg-danger');
                progressBar.classList.remove('progress-bar-animated');
                eventSource.close();
                return;
            }

            if (data.progress) {
                progressBar.style.width = `${data.progress} %`;
                progressBar.setAttribute('aria-valuenow', data.progress);
            }

            if (data.message) {
                addStatus(data.message);
            }

            if (data.complete) {
                addStatus('Redaction complete! Your PDF is ready.', 'success');
                progressBar.style.width = '100%';
                progressBar.classList.remove('progress-bar-animated');
                progressBar.classList.add('bg-success');
                
                downloadLink.href = data.download_url;
                downloadContainer.style.display = 'block';
                eventSource.close();
            }
        };

        eventSource.onerror = function() {
            addStatus('Connection to the server was lost. Please try again.', 'danger');
            progressBar.classList.add('bg-danger');
            progressBar.classList.remove('progress-bar-animated');
            eventSource.close();
        };
    });
</script>
{% endblock %}