{% extends 'superuser/base_super_user.html' %}

{% block title %}Import Institution | SaaS Command{% endblock %}

{% block page_title %}Migration Portal{% endblock %}
{% block page_subtitle %}Importing institution data package from external server.{% endblock %}

{% block content %}
<style>
    .import-wrapper {
        max-width: 800px;
        margin: 40px auto;
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .import-container {
        background: #fff;
        border: 2px solid #1e293b;
        box-shadow: 10px 10px 0px #1e293b;
        padding: 40px;
    }

    .drop-zone {
        border: 3px dashed #cbd5e1;
        padding: 60px 40px;
        text-align: center;
        background: #f8fafc;
        cursor: pointer;
        transition: 0.2s;
        display: block;
    }

    .drop-zone.drag-over {
        border-color: #1e293b;
        background: #f1f5f9;
    }

    .drop-zone i { font-size: 3.5rem; color: #64748b; margin-bottom: 20px; }
    .drop-zone h3 { font-weight: 850; color: #1e293b; text-transform: uppercase; margin-bottom: 15px; }

    /* Progress Bar */
    .processing-overlay {
        display: none;
        margin-top: 20px;
        text-align: center;
    }

    .progress-track {
        width: 100%;
        height: 12px;
        background: #e2e8f0;
        margin-bottom: 15px;
        overflow: hidden;
    }

    .progress-bar {
        width: 0%;
        height: 100%;
        background: #1e293b;
        transition: width 0.3s;
    }

    /* Preview Section */
    .preview-card {
        display: none;
        background: #fff;
        border: 2px solid #1e293b;
        box-shadow: 10px 10px 0px #1e293b;
        padding: 30px;
        animation: slideIn 0.4s ease-out;
    }

    @keyframes slideIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .preview-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: 2px solid #f1f5f9;
    }

    .preview-header h2 { font-weight: 950; text-transform: uppercase; color: #1e293b; font-size: 1.25rem; }

    .preview-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-bottom: 30px;
    }

    .preview-item {
        background: #f8fafc;
        padding: 15px;
        border: 1px solid #e2e8f0;
    }

    .preview-label { font-size: 0.7rem; font-weight: 900; color: #64748b; text-transform: uppercase; margin-bottom: 5px; }
    .preview-value { font-size: 1.1rem; font-weight: 850; color: #0f172a; }

    .btn-finalize {
        width: 100%;
        height: 60px;
        background: #10b981;
        color: #fff;
        border: none;
        font-weight: 950;
        font-size: 1.1rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
    }

    .error-banner {
        background: #fff1f2;
        border: 2px solid #ef4444;
        color: #991b1b;
        padding: 20px;
        margin-bottom: 20px;
        font-weight: 800;
        display: none;
    }
</style>

<div class="import-wrapper">
    <div class="import-container" id="uploadStep">
        <form id="uploadForm">
            {% csrf_token %}
            <label for="export_file" class="drop-zone" id="dropZone">
                <i class="fas fa-file-archive"></i>
                <h3>Select Data Package</h3>
                <p style="color: #64748b; font-weight: 600;">System will analyze the file immediately.</p>
                <input type="file" name="export_file" id="export_file" style="display: none;" accept=".zip" required>
            </label>
        </form>

        <div class="processing-overlay" id="processingUI">
            <div class="progress-track"><div class="progress-bar" id="progressBar"></div></div>
            <p style="font-weight: 900; color: #1e293b; text-transform: uppercase; letter-spacing: 1px;">Analyzing Data Architecture...</p>
        </div>
    </div>

    <div class="error-banner" id="errorUI"></div>

    <div class="preview-card" id="previewUI">
        <div class="preview-header">
            <h2>Institution Summary</h2>
            <div id="duplicateBadge" style="background: #ef4444; color: #fff; padding: 4px 12px; font-weight: 900; font-size: 0.7rem; text-transform: uppercase;">Already Exists</div>
        </div>

        <div class="preview-grid">
            <div class="preview-item">
                <div class="preview-label">Name</div>
                <div class="preview-value" id="prev-name">-</div>
            </div>
            <div class="preview-item">
                <div class="preview-label">Code</div>
                <div class="preview-value" id="prev-code">-</div>
            </div>
            <div class="preview-item">
                <div class="preview-label">Total Students</div>
                <div class="preview-value" id="prev-students">0</div>
            </div>
            <div class="preview-item">
                <div class="preview-label">Attendance Logs</div>
                <div class="preview-value" id="prev-logs">0</div>
            </div>
            <div class="preview-item">
                <div class="preview-label">Fee Records</div>
                <div class="preview-value" id="prev-fees">0</div>
            </div>
            <div class="preview-item">
                <div class="preview-label">Exams</div>
                <div class="preview-value" id="prev-exams">0</div>
            </div>
        </div>

        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <!-- Hidden input to hold the file - we'll re-attach the file from previous input -->
            <input type="file" name="export_file" id="final_file" style="display: none;">
            <button type="submit" class="btn-finalize" id="finalizeBtn">
                <i class="fas fa-check-double"></i> Finalize Import into System
            </button>
        </form>
    </div>
</div>

<script>
    const fileInput = document.getElementById('export_file');
    const finalFileInput = document.getElementById('final_file');
    const processingUI = document.getElementById('processingUI');
    const progressBar = document.getElementById('progressBar');
    const previewUI = document.getElementById('previewUI');
    const errorUI = document.getElementById('errorUI');
    const uploadStep = document.getElementById('uploadStep');

    fileInput.addEventListener('change', async (e) => {
        if (!fileInput.files.length) return;

        // Reset UI
        errorUI.style.display = 'none';
        previewUI.style.display = 'none';
        processingUI.style.display = 'block';
        
        // Progress Simulation
        let progress = 0;
        const interval = setInterval(() => {
            progress += 10;
            progressBar.style.width = Math.min(progress, 90) + '%';
            if (progress >= 90) clearInterval(interval);
        }, 100);

        // Prep Data
        const formData = new FormData();
        formData.append('export_file', fileInput.files[0]);
        formData.append('action', 'preview');
        formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');

        try {
            const response = await fetch('', {
                method: 'POST',
                body: formData
            });

            const data = await response.json();
            clearInterval(interval);
            progressBar.style.width = '100%';

            if (response.ok) {
                // Populate Preview
                document.getElementById('prev-name').innerText = data.name;
                document.getElementById('prev-code').innerText = data.code;
                document.getElementById('prev-students').innerText = data.student_count;
                document.getElementById('prev-logs').innerText = data.attendance_count;
                document.getElementById('prev-fees').innerText = data.fee_count;
                document.getElementById('prev-exams').innerText = data.exam_count;
                
                const exists = data.already_exists;
                document.getElementById('duplicateBadge').style.display = exists ? 'block' : 'none';
                
                const finalizeBtn = document.getElementById('finalizeBtn');
                if (exists) {
                    finalizeBtn.disabled = true;
                    finalizeBtn.style.background = '#94a3b8';
                    finalizeBtn.style.cursor = 'not-allowed';
                    finalizeBtn.innerHTML = '<i class="fas fa-ban"></i> Cannot Import: Institution Already Exists';
                } else {
                    finalizeBtn.disabled = false;
                    finalizeBtn.style.background = '#10b981';
                    finalizeBtn.style.cursor = 'pointer';
                    finalizeBtn.innerHTML = '<i class="fas fa-check-double"></i> Finalize Import into System';
                }
                
                // Show Preview
                setTimeout(() => {
                    processingUI.style.display = 'none';
                    previewUI.style.display = 'block';
                    // Re-attach file to the final form's hidden input
                    finalFileInput.files = fileInput.files;
                }, 500);
            }
 else {
                throw new Error(data.error || 'Failed to analyze file');
            }
        } catch (err) {
            clearInterval(interval);
            processingUI.style.display = 'none';
            errorUI.innerText = "CRITICAL ERROR: " + err.message;
            errorUI.style.display = 'block';
        }
    });
</script>
{% endblock %}