{% extends "base.html" %}

{% block title %}Printer Check{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="row">
        <!-- Left Panel: Configuration -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-printer me-2"></i>Printer Check</h5>
                </div>
                <div class="card-body">
                    <form id="printerCheckForm">
                        <!-- Region Selection -->
                        <div class="mb-3">
                            <label for="regionSelect" class="form-label">Region</label>
                            <select class="form-select" id="regionSelect">
                                <option value="" disabled selected>Choose a region...</option>
                                {% for code, region in regions.items() %}
                                <option value="{{ code }}" data-countries='{{ region.countries | tojson }}'
                                        data-groups='{{ region.groups | tojson if region.groups else "[]" }}'>
                                    {{ region.name }} ({{ code }})
                                </option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- Country Groups -->
                        <div class="mb-3" id="groupsSection" style="display:none;">
                            <label class="form-label">Country Groups</label>
                            <div id="countryGroups"></div>
                        </div>

                        <!-- Campaign Filter -->
                        <div class="mb-3" id="campaignSection" style="display:none;">
                            <label class="form-label">Campaigns</label>
                            <div class="text-muted small mb-1" id="campaignInfo"></div>
                            <div id="campaignGroups"></div>
                        </div>

                        <!-- CSV Upload -->
                        <div class="mb-3">
                            <label class="form-label">CSV File</label>
                            <input type="file" class="form-control" id="csvFile" accept=".csv,.tsv,.txt">
                        </div>

                        <!-- PDF ZIP Upload -->
                        <div class="mb-3">
                            <label class="form-label">PDF Folder (ZIP)</label>
                            <input type="file" class="form-control" id="pdfZip" accept=".zip">
                            <div class="form-text">Upload a ZIP containing the PDF folder structure.</div>
                        </div>

                        <button type="submit" class="btn btn-hm-primary w-100" id="processBtn" disabled>
                            <i class="bi bi-play-circle me-2"></i>Process
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Right Panel: Results -->
        <div class="col-md-8">
            <!-- Welcome State -->
            <div id="welcomeState" class="card">
                <div class="card-body text-center p-5">
                    <i class="bi bi-printer" style="font-size: 4rem; color: var(--hm-yellow);"></i>
                    <h3 class="mt-3">Ready to Scan</h3>
                    <p class="text-muted">Select a region, upload your CSV and PDF folder, then click Process.</p>
                </div>
            </div>

            <!-- Loading State -->
            <div id="loadingState" class="card" style="display:none;">
                <div class="card-body text-center p-5">
                    <div class="spinner-border text-warning" role="status"></div>
                    <p class="mt-3">Processing files...</p>
                </div>
            </div>

            <!-- Results State -->
            <div id="resultsState" style="display:none;">
                <!-- Stats Cards -->
                <div class="row mb-3">
                    <div class="col-3">
                        <div class="card text-center stat-card" data-filter="all" role="button">
                            <div class="card-body py-2">
                                <h4 id="statTotal" class="mb-0">0</h4>
                                <small class="text-muted">All</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="card text-center stat-card" data-filter="matched" role="button">
                            <div class="card-body py-2">
                                <h4 id="statMatched" class="mb-0 text-success">0</h4>
                                <small class="text-muted">Matched</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="card text-center stat-card" data-filter="missing" role="button">
                            <div class="card-body py-2">
                                <h4 id="statMissing" class="mb-0 text-danger">0</h4>
                                <small class="text-muted">Missing</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="card text-center stat-card" data-filter="extra" role="button">
                            <div class="card-body py-2">
                                <h4 id="statExtra" class="mb-0 text-warning">0</h4>
                                <small class="text-muted">Extra</small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Warnings -->
                <div id="warningsSection" class="alert alert-warning" style="display:none;">
                    <h6><i class="bi bi-exclamation-triangle me-2"></i>Warnings</h6>
                    <ul id="warningsList" class="mb-0"></ul>
                </div>

                <!-- Results Table -->
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span>Results</span>
                        <button class="btn btn-sm btn-outline-primary" id="exportBtn" style="display:none;">
                            <i class="bi bi-download me-1"></i>Export XLSX
                        </button>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive" style="max-height:500px;overflow-y:auto;">
                            <table class="table table-sm table-hover mb-0" id="resultsTable">
                                <thead class="table-dark sticky-top">
                                    <tr id="resultsHead"></tr>
                                </thead>
                                <tbody id="resultsBody"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
const regionSelect = document.getElementById('regionSelect');
const groupsSection = document.getElementById('groupsSection');
const countryGroups = document.getElementById('countryGroups');
const campaignSection = document.getElementById('campaignSection');
const processBtn = document.getElementById('processBtn');
let lastResult = null;
let currentFilter = 'all';

// Region selection
regionSelect.addEventListener('change', function() {
    const opt = this.options[this.selectedIndex];
    const groups = JSON.parse(opt.dataset.groups || '[]');

    countryGroups.innerHTML = '';
    if (groups.length > 0) {
        groups.forEach(g => {
            const div = document.createElement('div');
            div.className = 'form-check';
            div.innerHTML = `<input class="form-check-input country-group-cb" type="checkbox" value='${JSON.stringify(g.countries)}' id="grp-${g.id}" checked>
                <label class="form-check-label" for="grp-${g.id}">${g.label}</label>`;
            countryGroups.appendChild(div);
        });
        groupsSection.style.display = '';
    } else {
        groupsSection.style.display = 'none';
    }

    updateProcessBtn();
});

function getSelectedCountries() {
    const checked = document.querySelectorAll('.country-group-cb:checked');
    if (checked.length === 0) {
        const opt = regionSelect.options[regionSelect.selectedIndex];
        return JSON.parse(opt.dataset.countries || '[]');
    }
    const countries = new Set();
    checked.forEach(cb => JSON.parse(cb.value).forEach(c => countries.add(c)));
    return [...countries];
}

function updateProcessBtn() {
    const hasRegion = regionSelect.value;
    const hasCsv = document.getElementById('csvFile').files.length > 0;
    const hasZip = document.getElementById('pdfZip').files.length > 0;
    processBtn.disabled = !(hasRegion && hasCsv && hasZip);
    processBtn.textContent = hasRegion ? 'Process' : 'Select a region to start';
}

document.getElementById('csvFile').addEventListener('change', updateProcessBtn);
document.getElementById('pdfZip').addEventListener('change', updateProcessBtn);

// Process form
document.getElementById('printerCheckForm').addEventListener('submit', async function(e) {
    e.preventDefault();

    document.getElementById('welcomeState').style.display = 'none';
    document.getElementById('resultsState').style.display = 'none';
    document.getElementById('loadingState').style.display = '';
    processBtn.disabled = true;

    const formData = new FormData();
    formData.append('csv_file', document.getElementById('csvFile').files[0]);
    formData.append('pdf_zip', document.getElementById('pdfZip').files[0]);
    formData.append('region_code', regionSelect.value);
    formData.append('selected_countries', JSON.stringify(getSelectedCountries()));

    const selCampaigns = [];
    document.querySelectorAll('.campaign-cb:checked').forEach(cb => selCampaigns.push(cb.value));
    formData.append('selected_campaigns', JSON.stringify(selCampaigns));

    try {
        const resp = await fetch(`${BASE_URL}/printer-check/process`, {
            method: 'POST',
            body: formData
        });
        const data = await resp.json();

        if (!data.success) throw new Error(data.error || 'Processing failed');

        lastResult = data;
        renderResults(data);
    } catch (err) {
        alert('Error: ' + err.message);
        document.getElementById('welcomeState').style.display = '';
    } finally {
        document.getElementById('loadingState').style.display = 'none';
        processBtn.disabled = false;
    }
});

function renderResults(data) {
    document.getElementById('resultsState').style.display = '';
    document.getElementById('statTotal').textContent = data.total_rows;
    document.getElementById('statMatched').textContent = data.matched;
    document.getElementById('statMissing').textContent = data.missing;
    document.getElementById('statExtra').textContent = data.extra_count;
    document.getElementById('exportBtn').style.display = '';

    // Show campaigns if detected
    if (data.detected_campaigns && data.detected_campaigns.length > 1) {
        campaignSection.style.display = '';
        const info = document.getElementById('campaignInfo');
        info.textContent = `${data.detected_campaigns.length} campaigns detected`;
        const grp = document.getElementById('campaignGroups');
        grp.innerHTML = '';
        data.detected_campaigns.forEach(c => {
            const div = document.createElement('div');
            div.className = 'form-check form-check-inline';
            div.innerHTML = `<input class="form-check-input campaign-cb" type="checkbox" value="${c}" id="camp-${c}" checked>
                <label class="form-check-label" for="camp-${c}">${c}</label>`;
            grp.appendChild(div);
        });
    }

    // Warnings
    const warnings = [];
    (data.misplaced_gen || []).forEach(w => warnings.push(`Misplaced GEN: ${w.filename} in ${w.found_in} (expected ${w.expected_in})`));
    (data.duplicate_gen || []).forEach(w => warnings.push(`Duplicate GEN: ${w.filename} in ${w.locations.join(', ')}`));
    (data.misplaced_country_files || []).forEach(w => warnings.push(`Wrong folder: ${w.filename} in ${w.found_in} (expected ${w.expected_in})`));
    (data.files_at_wrong_level || []).forEach(w => warnings.push(`Wrong level: ${w.filename} in ${w.found_in} (expected ${w.expected_in})`));
    if (data.missing_root_gen) warnings.push('Missing Root/GEN folder — GEN assets referenced in CSV but no GEN folder found');

    const warningsSection = document.getElementById('warningsSection');
    if (warnings.length > 0) {
        warningsSection.style.display = '';
        document.getElementById('warningsList').innerHTML = warnings.map(w => `<li>${w}</li>`).join('');
    } else {
        warningsSection.style.display = 'none';
    }

    // Table
    renderTable(data, 'all');

    // Stat card click filtering
    document.querySelectorAll('.stat-card').forEach(card => {
        card.addEventListener('click', function() {
            currentFilter = this.dataset.filter;
            document.querySelectorAll('.stat-card').forEach(c => c.classList.remove('border-primary'));
            this.classList.add('border-primary');
            renderTable(lastResult, currentFilter);
        });
    });
}

function renderTable(data, filter) {
    const head = document.getElementById('resultsHead');
    const body = document.getElementById('resultsBody');

    if (filter === 'extra') {
        head.innerHTML = '<th>Filename</th><th>Found In</th>';
        body.innerHTML = (data.extra_files || []).map(f =>
            `<tr><td>${f.filename}</td><td>${f.found_in}</td></tr>`
        ).join('');
        return;
    }

    head.innerHTML = '<th>Status</th><th>Filename</th><th>Country</th>';
    const rows = data.filtered_rows || [];
    const statuses = data.match_statuses || [];

    body.innerHTML = '';
    rows.forEach((row, i) => {
        const status = statuses[i] || 'UNKNOWN';
        if (filter === 'matched' && status !== 'MATCHED') return;
        if (filter === 'missing' && status !== 'MISSING') return;

        const statusBadge = status === 'MATCHED'
            ? '<span class="badge bg-success">MATCHED</span>'
            : '<span class="badge bg-danger">MISSING</span>';

        body.innerHTML += `<tr>
            <td>${statusBadge}</td>
            <td>${row[0] || ''}</td>
            <td>${row[7] || ''}</td>
        </tr>`;
    });
}

// Export
document.getElementById('exportBtn').addEventListener('click', async function() {
    if (!lastResult) return;

    try {
        const resp = await fetch(`${BASE_URL}/printer-check/export`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                headers: lastResult.headers,
                rows: lastResult.filtered_rows,
                filename: 'PrinterCheck_Export.xlsx'
            })
        });

        if (!resp.ok) throw new Error('Export failed');

        const blob = await resp.blob();
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'PrinterCheck_Export.xlsx';
        a.click();
        URL.revokeObjectURL(url);
    } catch (err) {
        alert('Export error: ' + err.message);
    }
});
</script>
{% endblock %}