{% extends 'layout/base.twig' %}

{% set title = title|default('Import Progress') %}
{% set pageTitle = title %}
{% set pageDescription = 'Progressive data import with real-time progress' %}
{% set pageIcon = 'fas fa-tasks' %}

{% block content %}

<div class="max-w-4xl mx-auto">
    {# Header #}
    <div class="mb-6">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ title }}</h1>
                <p class="text-gray-600 dark:text-slate-400 mt-1">
                    {% set descriptions = {
                        tld_list: 'Importing complete TLD list from IANA',
                        rdap: 'Importing RDAP servers for existing TLDs',
                        whois: 'Importing WHOIS & Registry data via RDAP API (with HTML fallback)',
                        check_updates: 'Checking for IANA updates',
                        complete_workflow: 'Complete TLD import workflow (TLD List → RDAP → WHOIS & Registry Data)'
                    } %}
                    {{ descriptions[import_type]|default('Processing import') }}
                </p>
            </div>
            <a href="/tld-registry" class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 text-sm rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors font-medium">
                <i class="fas fa-arrow-left mr-2"></i>
                Back to TLD Registry
            </a>
        </div>
    </div>

    {# Progress Card #}
    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-6 mb-6">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Import Status</h2>
            <div id="status-badge" class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 dark:bg-yellow-500/10 text-yellow-800 dark:text-yellow-400">
                <i class="fas fa-clock mr-2"></i>
                <span id="status-text">Starting...</span>
            </div>
        </div>

        {# Progress Bar #}
        <div class="mb-4">
            <div class="flex justify-between text-sm text-gray-600 dark:text-slate-400 mb-2">
                <span id="progress-text">0 of 0 items processed</span>
                <span id="percentage-text">0%</span>
            </div>
            <div class="w-full bg-gray-200 dark:bg-slate-700 rounded-full h-3">
                <div id="progress-bar" class="bg-blue-600 h-3 rounded-full transition-all duration-300" style="width: 0%"></div>
            </div>
        </div>

        {# Step Progress (for complete workflow) #}
        <div id="step-progress" class="mb-4" style="display: none;">
            <div class="text-sm text-gray-600 dark:text-slate-400 mb-2">Workflow Steps:</div>
            <div class="grid grid-cols-3 gap-2">
                <div class="step-item bg-gray-100 dark:bg-slate-700 rounded-lg p-2 text-center">
                    <div class="text-xs font-medium text-gray-600 dark:text-slate-400">Step 1</div>
                    <div class="text-xs text-gray-500 dark:text-slate-400">TLD List</div>
                    <div id="step-1-status" class="text-xs text-gray-400 dark:text-slate-500">Pending</div>
                </div>
                <div class="step-item bg-gray-100 dark:bg-slate-700 rounded-lg p-2 text-center">
                    <div class="text-xs font-medium text-gray-600 dark:text-slate-400">Step 2</div>
                    <div class="text-xs text-gray-500 dark:text-slate-400">RDAP</div>
                    <div id="step-2-status" class="text-xs text-gray-400 dark:text-slate-500">Pending</div>
                </div>
                <div class="step-item bg-gray-100 dark:bg-slate-700 rounded-lg p-2 text-center">
                    <div class="text-xs font-medium text-gray-600 dark:text-slate-400">Step 3</div>
                    <div class="text-xs text-gray-500 dark:text-slate-400">WHOIS & Registry</div>
                    <div id="step-3-status" class="text-xs text-gray-400 dark:text-slate-500">Pending</div>
                </div>
            </div>
        </div>

        {# Statistics #}
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div class="bg-gray-50 dark:bg-slate-900 rounded-lg p-4">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-blue-100 dark:bg-blue-500/10 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-list text-blue-600 dark:text-blue-400"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 dark:text-slate-400">Total</p>
                        <p id="total-count" class="text-xl font-semibold text-gray-900 dark:text-white">0</p>
                    </div>
                </div>
            </div>

            <div class="bg-gray-50 dark:bg-slate-900 rounded-lg p-4">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-green-100 dark:bg-green-500/10 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-check text-green-600 dark:text-green-400"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 dark:text-slate-400">Processed</p>
                        <p id="processed-count" class="text-xl font-semibold text-gray-900 dark:text-white">0</p>
                    </div>
                </div>
            </div>

            <div class="bg-gray-50 dark:bg-slate-900 rounded-lg p-4">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-red-100 dark:bg-red-500/10 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-times text-red-600 dark:text-red-400"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 dark:text-slate-400">Failed</p>
                        <p id="failed-count" class="text-xl font-semibold text-gray-900 dark:text-white">0</p>
                    </div>
                </div>
            </div>

            <div class="bg-gray-50 dark:bg-slate-900 rounded-lg p-4">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-orange-100 dark:bg-orange-500/10 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-hourglass-half text-orange-600 dark:text-orange-400"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 dark:text-slate-400">Remaining</p>
                        <p id="remaining-count" class="text-xl font-semibold text-gray-900 dark:text-white">0</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# Log Output #}
    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-6">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Import Log</h3>
        <div id="log-output" class="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm h-64 overflow-y-auto">
            <div class="text-gray-500">Initializing import process...</div>
        </div>
    </div>
</div>

<script>
let logId = {{ log_id|json_encode|raw }};
let importType = {{ import_type|json_encode|raw }};
let isComplete = false;
let totalProcessed = 0;
let totalFailed = 0;

if (importType === 'complete_workflow') {
    document.getElementById('step-progress').style.display = 'block';
}

function addLogMessage(message, type = 'info') {
    const logOutput = document.getElementById('log-output');
    const timestamp = new Date().toLocaleTimeString();
    const colorClass = type === 'error' ? 'text-red-400' : type === 'success' ? 'text-green-400' : 'text-blue-400';

    const logEntry = document.createElement('div');
    logEntry.className = colorClass;
    logEntry.innerHTML = `[${timestamp}] ${message}`;

    logOutput.appendChild(logEntry);
    logOutput.scrollTop = logOutput.scrollHeight;
}

function updateProgress(data) {
    const total = data.total || 0;
    const processed = data.processed || 0;
    const failed = data.failed || 0;
    const remaining = data.remaining || 0;

    document.getElementById('total-count').textContent = total;
    document.getElementById('processed-count').textContent = processed;
    document.getElementById('failed-count').textContent = failed;
    document.getElementById('remaining-count').textContent = remaining;

    const totalToProcess = processed + remaining;
    const percentage = totalToProcess > 0 ? Math.round((processed / totalToProcess) * 100) : 0;

    document.getElementById('progress-bar').style.width = percentage + '%';
    document.getElementById('progress-text').textContent = `${processed} of ${totalToProcess} items processed`;
    document.getElementById('percentage-text').textContent = percentage + '%';

    if (importType === 'complete_workflow' && data.message) {
        updateStepProgress(data.message, processed, total);
    }

    const statusBadge = document.getElementById('status-badge');
    const statusText = document.getElementById('status-text');

    if (data.status === 'complete') {
        statusBadge.className = 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 dark:bg-green-500/10 text-green-800 dark:text-green-400';
        statusText.innerHTML = '<i class="fas fa-check mr-2"></i>Complete';
        isComplete = true;

        const completionMessage = data.message || 'Import completed successfully!';
        addLogMessage(completionMessage, 'success');

        if (importType === 'complete_workflow') {
            for (let i = 1; i <= 3; i++) {
                updateStepStatus(i, 'completed');
            }
        }
    } else if (data.status === 'in_progress') {
        statusBadge.className = 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 dark:bg-blue-500/10 text-blue-800 dark:text-blue-400';
        statusText.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>In Progress';
        addLogMessage(data.message || 'Processing batch...', 'info');
    } else if (data.status === 'error') {
        statusBadge.className = 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 dark:bg-red-500/10 text-red-800 dark:text-red-400';
        statusText.innerHTML = '<i class="fas fa-exclamation-triangle mr-2"></i>Error';
        addLogMessage(data.message || 'An error occurred', 'error');
        isComplete = true;
    }
}

function checkProgress() {
    if (isComplete) {
        return;
    }

    fetch(`/tld-registry/api/import-progress?log_id=${logId}`)
        .then(response => {
            const contentType = response.headers.get('content-type');
            if (!contentType || !contentType.includes('application/json')) {
                return response.text().then(text => {
                    addLogMessage('Server returned non-JSON response. This might be a PHP error or session issue.', 'error');
                    addLogMessage('Response preview: ' + text.substring(0, 200) + '...', 'error');
                    isComplete = true;
                    throw new Error('Non-JSON response received');
                });
            }
            return response.json();
        })
        .then(data => {
            if (data.error) {
                addLogMessage('Error: ' + data.error, 'error');
                isComplete = true;
                return;
            }

            updateProgress(data);

            if (data.status !== 'complete' && data.status !== 'error') {
                setTimeout(checkProgress, 2000);
            }
        })
        .catch(error => {
            if (error.message.includes('Gateway Timeout') || error.message.includes('timeout')) {
                addLogMessage('Gateway timeout detected. Retrying in 5 seconds...', 'warning');
                setTimeout(checkProgress, 5000);
            } else {
                addLogMessage('Network error: ' + error.message, 'error');
                isComplete = true;
            }
        });
}

function updateStepProgress(message, currentStep, totalSteps) {
    const stepMatch = message.match(/Step (\d+)\/(\d+)/);
    if (stepMatch) {
        const stepNumber = parseInt(stepMatch[1]);
        const totalSteps = parseInt(stepMatch[2]);

        const isCompleted = message.toLowerCase().includes('completed');

        if (isCompleted) {
            for (let i = 1; i <= stepNumber; i++) {
                updateStepStatus(i, 'completed');
            }

            if (stepNumber < totalSteps) {
                updateStepStatus(stepNumber + 1, 'in_progress');
            }
        } else {
            for (let i = 1; i < stepNumber; i++) {
                updateStepStatus(i, 'completed');
            }

            updateStepStatus(stepNumber, 'in_progress');
        }
    }
}

function updateStepStatus(stepNumber, status) {
    const stepElement = document.getElementById(`step-${stepNumber}-status`);
    const stepItem = stepElement.closest('.step-item');

    if (status === 'completed') {
        stepElement.textContent = 'Completed';
        stepElement.className = 'text-xs text-green-600 dark:text-green-400';
        stepItem.className = 'step-item bg-green-100 dark:bg-green-500/10 rounded-lg p-2 text-center';
    } else if (status === 'in_progress') {
        stepElement.textContent = 'In Progress';
        stepElement.className = 'text-xs text-blue-600 dark:text-blue-400';
        stepItem.className = 'step-item bg-blue-100 dark:bg-blue-500/10 rounded-lg p-2 text-center';
    } else if (status === 'failed') {
        stepElement.textContent = 'Failed';
        stepElement.className = 'text-xs text-red-600 dark:text-red-400';
        stepItem.className = 'step-item bg-red-100 dark:bg-red-500/10 rounded-lg p-2 text-center';
    }
}

checkProgress();
</script>

{% endblock %}