{% extends "base.html" %}

{% block title %}Reporting - HM QC Platform{% endblock %}

{% block extra_head %}
<style>
    .search-container {
        max-width: 600px;
        margin: 3rem auto;
    }

    .search-card {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border: none;
    }

    .search-icon {
        font-size: 3rem;
        color: var(--hm-yellow);
    }

    .quick-search-btn {
        margin: 0.25rem;
    }

    .progress-container {
        display: none;
        margin-top: 2rem;
    }

    .progress-stage {
        font-size: 0.9rem;
        color: #666;
        margin-top: 0.5rem;
    }

    .progress-detail {
        font-size: 0.8rem;
        color: #999;
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="h2">
                <i class="bi bi-file-bar-graph me-2"></i>
                Consolidated Reporting
            </h1>
            <p class="text-muted">
                Search for QC reports by job number. Reports from Box.com and HM QC are consolidated here.
            </p>
        </div>
    </div>

    <!-- Search Card -->
    <div class="search-container">
        <div class="card search-card">
            <div class="card-body p-4">
                <div class="text-center mb-4">
                    <i class="bi bi-search search-icon"></i>
                </div>

                <form id="searchForm">
                    <div class="mb-3">
                        <label for="jobNumber" class="form-label">Job Number</label>
                        <input type="text"
                               class="form-control form-control-lg"
                               id="jobNumber"
                               placeholder="Enter job numbers (comma-separated for multiple)"
                               required
                               autofocus>
                        <div class="form-text">
                            Enter one or more job/campaign numbers (comma-separated for multiple) to search for QC reports.
                            {% if report_folder_id %}
                            Searches inside Box folder
                            <a href="https://app.box.com/folder/{{ report_folder_id }}" target="_blank">
                                #{{ report_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 Reports</span>
                        <span id="searchSpinner" class="spinner-border spinner-border-sm ms-2" style="display: none;"></span>
                    </button>
                </form>

                <!-- Quick Search Examples -->
                <div class="mt-4 text-center">
                    <small class="text-muted d-block mb-2">Quick Search:</small>
                    <button class="btn btn-sm btn-outline-secondary quick-search-btn" data-job="2069052">2069052</button>
                    <button class="btn btn-sm btn-outline-secondary quick-search-btn" data-job="2069053">2069053</button>
                </div>
            </div>
        </div>

        <!-- Progress Bar (replaces spinner during async search) -->
        <div id="progressContainer" class="progress-container">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-2">
                        <span id="progressMessage" class="progress-stage">Initializing search...</span>
                        <span id="progressPercent" class="progress-stage">0%</span>
                    </div>
                    <div class="progress" style="height: 24px;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning"
                             id="progressBar" role="progressbar" style="width: 0%"
                             aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <div id="progressDetail" class="progress-detail mt-2"></div>
                </div>
            </div>
        </div>

        <!-- Search Results Summary -->
        <div id="searchResults" class="mt-4" style="display: none;">
            <div class="alert alert-info">
                <i class="bi bi-info-circle me-2"></i>
                <span id="searchResultsText"></span>
            </div>
        </div>
    </div>

    <!-- Previous Box Reports -->
    {% if box_jobs %}
    <div class="row mt-5">
        <div class="col-md-8 offset-md-2">
            <h4><i class="bi bi-cloud me-2"></i>Previous Box Reports</h4>
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead class="table-dark">
                        <tr>
                            <th>Job Number</th>
                            <th>Reports</th>
                            <th>Last Searched</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for job_number, info in box_jobs.items() %}
                        <tr>
                            <td><strong>{{ job_number }}</strong></td>
                            <td>{{ info.count }}</td>
                            <td>{{ info.latest.strftime('%Y-%m-%d %H:%M') if info.latest }}</td>
                            <td class="text-nowrap">
                                <a href="{{ url_for('reporting.history_dashboard', job_number=job_number) }}" class="btn btn-sm btn-outline-primary me-1">
                                    <i class="bi bi-eye"></i>
                                </a>
                                <button class="btn btn-sm btn-outline-danger delete-box-btn" data-job="{{ job_number }}">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}

</div>
{% endblock %}

{% block extra_scripts %}
<script>
    // Handle search form submission (async with progress)
    document.getElementById('searchForm').addEventListener('submit', async function(e) {
        e.preventDefault();

        const jobNumber = document.getElementById('jobNumber').value.trim();
        const searchBtn = document.getElementById('searchBtn');
        const searchBtnText = document.getElementById('searchBtnText');
        const searchSpinner = document.getElementById('searchSpinner');
        const progressContainer = document.getElementById('progressContainer');
        const progressBar = document.getElementById('progressBar');
        const progressMessage = document.getElementById('progressMessage');
        const progressPercent = document.getElementById('progressPercent');
        const progressDetail = document.getElementById('progressDetail');

        if (!jobNumber) {
            showNotification('Please enter a job number', 'warning');
            return;
        }

        // Show loading state
        searchBtn.disabled = true;
        searchBtnText.textContent = 'Starting search...';
        searchSpinner.style.display = 'inline-block';

        try {
            // Start async search
            const response = await fetch(`${BASE_URL}/reporting/search/async`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ job_number: jobNumber })
            });

            const data = await response.json();

            if (!response.ok) {
                throw new Error(data.error || 'Search failed');
            }

            // Hide search button, show progress bar
            searchBtn.style.display = 'none';
            progressContainer.style.display = 'block';

            const sessionId = data.session_id;
            const isMulti = data.is_multi;

            // Connect to SSE for progress updates
            let eventSource;
            try {
                eventSource = new EventSource(`${BASE_URL}/reporting/progress/${sessionId}`);
            } catch (err) {
                // Fallback to polling if SSE not supported
                startPolling(sessionId, isMulti, data.job_numbers);
                return;
            }

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

                // Update progress bar
                const pct = Math.round(progress.percent || 0);
                progressBar.style.width = pct + '%';
                progressBar.setAttribute('aria-valuenow', pct);
                progressPercent.textContent = pct + '%';
                progressMessage.textContent = progress.message || 'Processing...';

                // Update detail
                if (progress.details) {
                    const d = progress.details;
                    if (d.current_file) {
                        progressDetail.textContent = `Current: ${d.current_file}`;
                    } else if (d.current_job) {
                        progressDetail.textContent = `Job: ${d.current_job}`;
                    }
                }

                // Handle completion
                if (progress.status === 'completed') {
                    eventSource.close();
                    progressBar.classList.remove('progress-bar-animated');
                    progressBar.classList.replace('bg-warning', 'bg-success');
                    progressMessage.textContent = 'Search complete! Redirecting...';

                    setTimeout(() => {
                        if (isMulti) {
                            window.location.href = `${BASE_URL}/reporting/dashboard/multi?session_id=${sessionId}`;
                        } else {
                            window.location.href = `${BASE_URL}/reporting/dashboard/${data.job_numbers[0]}?session_id=${sessionId}`;
                        }
                    }, 800);
                }

                if (progress.status === 'failed') {
                    eventSource.close();
                    progressBar.classList.remove('progress-bar-animated');
                    progressBar.classList.replace('bg-warning', 'bg-danger');
                    progressMessage.textContent = progress.message || 'Search failed';
                    resetSearch();
                }
            };

            eventSource.onerror = function() {
                eventSource.close();
                // Fallback to polling
                startPolling(sessionId, isMulti, data.job_numbers);
            };

        } catch (error) {
            console.error('Search error:', error);
            showNotification(`Error: ${error.message}`, 'error');
            resetSearch();
        }
    });

    function startPolling(sessionId, isMulti, jobNumbers) {
        const pollInterval = setInterval(async () => {
            try {
                const resp = await fetch(`${BASE_URL}/reporting/api/progress/${sessionId}`);
                const progress = await resp.json();

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

                if (progress.status === 'completed') {
                    clearInterval(pollInterval);
                    document.getElementById('progressBar').classList.remove('progress-bar-animated');
                    document.getElementById('progressBar').classList.replace('bg-warning', 'bg-success');
                    document.getElementById('progressMessage').textContent = 'Search complete! Redirecting...';

                    setTimeout(() => {
                        if (isMulti) {
                            window.location.href = `${BASE_URL}/reporting/dashboard/multi?session_id=${sessionId}`;
                        } else {
                            window.location.href = `${BASE_URL}/reporting/dashboard/${jobNumbers[0]}?session_id=${sessionId}`;
                        }
                    }, 800);
                }

                if (progress.status === 'failed') {
                    clearInterval(pollInterval);
                    document.getElementById('progressBar').classList.replace('bg-warning', 'bg-danger');
                    document.getElementById('progressMessage').textContent = progress.message || 'Search failed';
                    resetSearch();
                }
            } catch (err) {
                console.error('Polling error:', err);
            }
        }, 1000);
    }

    function resetSearch() {
        setTimeout(() => {
            document.getElementById('searchBtn').style.display = '';
            document.getElementById('searchBtn').disabled = false;
            document.getElementById('searchBtnText').textContent = 'Search Reports';
            document.getElementById('searchSpinner').style.display = 'none';
            document.getElementById('progressContainer').style.display = 'none';

            // Reset progress bar
            const bar = document.getElementById('progressBar');
            bar.style.width = '0%';
            bar.classList.add('progress-bar-animated');
            bar.classList.remove('bg-success', 'bg-danger');
            bar.classList.add('bg-warning');
        }, 3000);
    }

    // Handle quick search buttons
    document.querySelectorAll('.quick-search-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const jobNumber = this.dataset.job;
            document.getElementById('jobNumber').value = jobNumber;
            document.getElementById('searchForm').dispatchEvent(new Event('submit'));
        });
    });

    // Handle delete Box report buttons
    document.querySelectorAll('.delete-box-btn').forEach(btn => {
        btn.addEventListener('click', async function() {
            const job = this.dataset.job;
            if (!confirm(`Delete all saved Box reports for job "${job}"?`)) return;

            try {
                const resp = await fetch(`${BASE_URL}/reporting/history/delete/${job}`, {
                    method: 'DELETE'
                });
                const data = await resp.json();
                if (data.success) {
                    this.closest('tr').remove();
                } else {
                    alert(data.error || 'Delete failed');
                }
            } catch (e) {
                alert('Error deleting reports');
            }
        });
    });
</script>
{% endblock %}