{% extends "base.html" %}

{% block title %}Campaign Matching - Video Master{% endblock %}

{% block extra_head %}
<style>
    .preview-section { display: none; }
    .country-badge { display: inline-block; margin: 2px; }
</style>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h2 class="mb-0"><i class="bi bi-diagram-3 me-2"></i>Campaign Matching</h2>
            <p class="text-muted mb-0">Match adaptations to their source masters from a Box campaign folder</p>
        </div>
        <a href="{{ url_for('video_master.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>Back
        </a>
    </div>

    <!-- Campaign Search -->
    <div class="row mt-4">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header"><i class="bi bi-search me-2"></i>Search Campaign on Box</div>
                <div class="card-body">
                    <form id="searchForm">
                        <div class="mb-3">
                            <label for="campaignName" class="form-label">Campaign Title</label>
                            <input type="text" class="form-control form-control-lg" id="campaignName"
                                   placeholder="e.g. Kids drop 1, Spring 2026, CFUL263C01" required autofocus>
                            <div class="form-text">
                                Enter the campaign folder title (or any unique part of it).
                                Matching is case-insensitive and ignores spaces, underscores,
                                and hyphens — "kids drop 1" finds "1_CFUL263C01C_Kids drop1".
                                {% if campaigns_folder_id %}
                                Searches inside Box folder
                                <a href="https://app.box.com/folder/{{ campaigns_folder_id }}" target="_blank">
                                    #{{ campaigns_folder_id }}
                                </a>.
                                {% endif %}
                            </div>
                        </div>
                        <button type="submit" class="btn btn-hm-primary btn-lg w-100" id="searchBtn">
                            <i class="bi bi-search me-2"></i>
                            <span id="searchBtnText">Search Campaign</span>
                            <span id="searchSpinner" class="spinner-border spinner-border-sm ms-2" style="display:none;"></span>
                        </button>
                    </form>
                </div>
            </div>

            <!-- Preview -->
            <div id="previewSection" class="preview-section mt-4">
                <div class="card">
                    <div class="card-header bg-success text-white">
                        <i class="bi bi-check-circle me-2"></i>Campaign Found: <strong id="campaignFoundName"></strong>
                    </div>
                    <div class="card-body">
                        <div class="row text-center mb-3">
                            <div class="col-md-4">
                                <h3 id="mastersCount" class="mb-0">0</h3>
                                <small class="text-muted">Global Masters</small>
                            </div>
                            <div class="col-md-4">
                                <h3 id="countriesCount" class="mb-0">0</h3>
                                <small class="text-muted">Countries</small>
                            </div>
                            <div class="col-md-4">
                                <h3 id="adaptationsCount" class="mb-0">0</h3>
                                <small class="text-muted">Adaptations</small>
                            </div>
                        </div>

                        <div id="countriesList" class="mb-3"></div>

                        <div class="alert alert-info">
                            <i class="bi bi-info-circle me-2"></i>
                            Masters will be temporarily downloaded for fingerprinting, then deleted.
                            Only lightweight fingerprints (~50KB each) are stored.
                        </div>

                        <button class="btn btn-hm-primary btn-lg w-100" id="startBtn" onclick="startMatching()">
                            <i class="bi bi-play-circle me-2"></i>Start Matching
                        </button>
                    </div>
                </div>
            </div>

            <!-- Progress -->
            <div id="progressSection" class="mt-4" style="display:none;">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between mb-2">
                            <span id="progressMessage">Starting...</span>
                            <span id="progressPercent">0%</span>
                        </div>
                        <div class="progress" style="height:24px;">
                            <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning"
                                 id="progressBar" style="width:0%"></div>
                        </div>
                        <div id="progressDetail" class="text-muted small mt-2"></div>
                    </div>
                </div>
            </div>

            <!-- Error -->
            <div id="errorSection" class="mt-4" style="display:none;">
                <div class="alert alert-danger">
                    <i class="bi bi-exclamation-triangle me-2"></i>
                    <span id="errorMessage"></span>
                    <div id="errorDetail" class="small mt-2 text-muted"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    let campaignInfo = null;
    let sessionId = null;

    function showSearchError(message, folderId, searchedFor) {
        document.getElementById('errorMessage').textContent = message;
        const detailEl = document.getElementById('errorDetail');
        if (folderId && searchedFor) {
            detailEl.innerHTML =
                'Searched for <code>' + searchedFor + '</code> inside Box folder ' +
                '<a href="https://app.box.com/folder/' + folderId + '" target="_blank">' +
                '#' + folderId + '</a>. ' +
                'Open the folder in Box to confirm the campaign exists and the name matches.';
        } else {
            detailEl.textContent = '';
        }
        document.getElementById('errorSection').style.display = 'block';
    }

    function resetSearchButton() {
        const btn = document.getElementById('searchBtn');
        btn.disabled = false;
        document.getElementById('searchSpinner').style.display = 'none';
        document.getElementById('searchBtnText').textContent = 'Search Campaign';
    }

    function setSearchButtonText(text) {
        document.getElementById('searchBtnText').textContent = text;
    }

    async function pollSearchProgress(sid, folderId, searchedFor) {
        const startedAt = Date.now();
        const TIMEOUT_MS = 5 * 60 * 1000;  // give up after 5 min
        while (Date.now() - startedAt < TIMEOUT_MS) {
            await new Promise(r => setTimeout(r, 1500));
            let progress;
            try {
                const resp = await fetch(`${BASE_URL}/video-master/api/progress/${sid}`);
                progress = await resp.json();
            } catch (e) {
                continue;  // transient — retry
            }

            if (progress.message) setSearchButtonText(progress.message);

            if (progress.status === 'failed') {
                resetSearchButton();
                showSearchError(progress.message || 'Search failed', folderId, searchedFor);
                return null;
            }
            if (progress.status === 'completed') {
                const resultResp = await fetch(`${BASE_URL}/video-master/api/search-campaign-result/${sid}`);
                const result = await resultResp.json();
                resetSearchButton();
                if (result.error) {
                    showSearchError(result.error, folderId, searchedFor);
                    return null;
                }
                return result;
            }
        }
        resetSearchButton();
        showSearchError('Search timed out after 5 minutes', folderId, searchedFor);
        return null;
    }

    document.getElementById('searchForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        const name = document.getElementById('campaignName').value.trim();
        if (!name) return;

        const btn = document.getElementById('searchBtn');
        btn.disabled = true;
        document.getElementById('searchSpinner').style.display = 'inline-block';
        setSearchButtonText('Starting search...');
        document.getElementById('errorSection').style.display = 'none';
        document.getElementById('previewSection').style.display = 'none';

        let kickoff;
        try {
            const resp = await fetch(`${BASE_URL}/video-master/api/search-campaign`, {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({campaign_name: name})
            });
            kickoff = await resp.json();
            if (kickoff.error || !kickoff.session_id) {
                resetSearchButton();
                showSearchError(kickoff.error || 'Failed to start search', null, null);
                return;
            }
        } catch (err) {
            resetSearchButton();
            showSearchError(err.message, null, null);
            return;
        }

        const data = await pollSearchProgress(
            kickoff.session_id,
            kickoff.campaigns_folder_id,
            kickoff.searched_for
        );
        if (!data) return;

        campaignInfo = data;
        sessionId = data.session_id;

        // Show preview
        document.getElementById('campaignFoundName').textContent = data.campaign_name;
        document.getElementById('mastersCount').textContent = data.masters_count;
        document.getElementById('adaptationsCount').textContent = data.total_adaptations;

        const countries = Object.keys(data.countries || {});
        document.getElementById('countriesCount').textContent = countries.length;

        const countriesHtml = countries.map(c => {
            const count = data.countries[c].count;
            return `<span class="badge bg-secondary country-badge">${c} (${count})</span>`;
        }).join(' ');
        document.getElementById('countriesList').innerHTML =
            '<strong>Countries:</strong> ' + (countriesHtml || '<span class="text-muted">None found</span>');

        document.getElementById('previewSection').style.display = 'block';
    });

    async function startMatching() {
        if (!campaignInfo || !sessionId) return;

        document.getElementById('startBtn').disabled = true;
        document.getElementById('startBtn').innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Starting...';
        document.getElementById('progressSection').style.display = 'block';

        try {
            const resp = await fetch(`${BASE_URL}/video-master/api/start-match`, {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    campaign_name: campaignInfo.campaign_name,
                    campaign_info: campaignInfo,
                    session_id: sessionId
                })
            });

            const data = await resp.json();
            if (!data.success) throw new Error(data.error);

            // Start polling
            const interval = setInterval(async () => {
                try {
                    const pr = await fetch(`${BASE_URL}/video-master/api/progress/${sessionId}`);
                    const p = await pr.json();

                    const pct = Math.round(p.percent || 0);
                    document.getElementById('progressBar').style.width = pct + '%';
                    document.getElementById('progressPercent').textContent = pct + '%';
                    document.getElementById('progressMessage').textContent = p.message || 'Processing...';

                    if (p.details) {
                        const d = p.details;
                        if (d.phase === 'fingerprinting') {
                            document.getElementById('progressDetail').textContent =
                                `Phase 1: Fingerprinting master ${d.current} of ${d.total}`;
                        } else if (d.phase === 'matching') {
                            document.getElementById('progressDetail').textContent =
                                `Phase 2: Matching ${d.country} — ${d.current} of ${d.total} adaptations`;
                        }
                    }

                    if (p.status === 'completed') {
                        clearInterval(interval);
                        document.getElementById('progressBar').classList.remove('progress-bar-animated');
                        document.getElementById('progressBar').classList.replace('bg-warning', 'bg-success');
                        document.getElementById('progressMessage').textContent = 'Complete! Loading results...';
                        setTimeout(() => {
                            window.location.href = `${BASE_URL}/video-master/results/${sessionId}`;
                        }, 1000);
                    }

                    if (p.status === 'failed') {
                        clearInterval(interval);
                        document.getElementById('progressBar').classList.replace('bg-warning', 'bg-danger');
                        document.getElementById('progressMessage').textContent = p.message;
                    }
                } catch (e) { console.error('Poll error:', e); }
            }, 1500);

        } catch (err) {
            document.getElementById('errorMessage').textContent = err.message;
            document.getElementById('errorSection').style.display = 'block';
            document.getElementById('startBtn').disabled = false;
            document.getElementById('startBtn').innerHTML = '<i class="bi bi-play-circle me-2"></i>Start Matching';
        }
    }
</script>
{% endblock %}