{% extends "base.html" %}

{% block title %}Configure QC - HM QC{% 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-gear me-2"></i>Configure QC Checks</h2>
            <p class="text-muted mb-0">Review settings and start execution</p>
        </div>
        <a href="{{ url_for('hm_qc.upload') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>Back
        </a>
    </div>

    <div class="row mt-4">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <i class="bi bi-list-check me-2"></i>
                    QC Settings
                </div>
                <div class="card-body">
                    <form id="configForm">
                        <div class="mb-3">
                            <label for="profile" class="form-label">QC Profile</label>
                            <select class="form-select" id="profile" required>
                                {% for profile_id, profile_data in profiles.items() %}
                                <option value="{{ profile_id }}" {% if loop.first %}selected{% endif %}>
                                    {{ profile_data.name }}
                                </option>
                                {% endfor %}
                            </select>
                            {% for profile_id, profile_data in profiles.items() %}
                            {% if loop.first %}
                            <div class="form-text">{{ profile_data.description }}</div>
                            {% endif %}
                            {% endfor %}
                        </div>

                        <div class="mb-3">
                            <label for="llmProvider" class="form-label">AI Provider</label>
                            <select class="form-select" id="llmProvider">
                                <option value="openai" selected>OpenAI GPT-4o</option>
                                <option value="google">Google Gemini</option>
                            </select>
                            <div class="form-text">Select which AI model to use for image quality analysis</div>
                        </div>

                        <div class="mb-3">
                            <label for="jobNumber" class="form-label">Job Number (Optional)</label>
                            <input type="text" class="form-control" id="jobNumber"
                                   placeholder="Enter job/campaign number">
                            <div class="form-text">
                                If provided, results will be grouped with this job number in reporting
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="campaignId" class="form-label">Campaign Presentation (Optional)</label>
                            <select class="form-select" id="campaignId">
                                <option value="">-- No campaign presentation --</option>
                            </select>
                            <div class="form-text">
                                Select a campaign presentation to validate assets against campaign guidelines.
                                <a href="{{ url_for('campaigns.index') }}" target="_blank">Manage campaigns</a>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="pricingReferenceId" class="form-label">Pricing Reference (Optional)</label>
                            <select class="form-select" id="pricingReferenceId">
                                <option value="">-- No pricing reference --</option>
                            </select>
                            <div class="form-text">
                                Select a pricing reference for currency/format validation.
                                <a href="{{ url_for('campaigns.index') }}" target="_blank">Manage pricing references</a>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-hm-primary btn-lg w-100" id="startBtn">
                            <i class="bi bi-play-circle me-2"></i>
                            Start QC Execution
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <i class="bi bi-files me-2"></i>
                    Files to Check
                </div>
                <div class="card-body">
                    <p><strong>{{ file_count }}</strong> file{{ 's' if file_count != 1 }} uploaded</p>
                    {% if filenames %}
                    <ul class="list-unstyled small text-muted" style="max-height: 200px; overflow-y: auto;">
                        {% for f in filenames %}
                        <li><i class="bi bi-file-earmark me-1"></i>{{ f }}</li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    const sessionId = '{{ session_id }}';
    const fileCount = {{ file_count }};

    // Load campaign presentations for dropdown
    (async function loadCampaigns() {
        try {
            const resp = await fetch(window.BASE_URL + '/campaigns/api/list');
            const campaigns = await resp.json();
            const select = document.getElementById('campaignId');
            campaigns.forEach(c => {
                const opt = document.createElement('option');
                opt.value = c.campaign_id;
                opt.textContent = c.campaign_id + (c.campaign_name ? ' - ' + c.campaign_name : '') +
                    (c.has_pricing ? ' (has pricing)' : '');
                select.appendChild(opt);
            });
        } catch (err) {
            console.warn('Could not load campaigns:', err);
        }
    })();

    // Load pricing references for dropdown
    (async function loadPricingRefs() {
        try {
            const resp = await fetch(window.BASE_URL + '/campaigns/api/pricing/list');
            const refs = await resp.json();
            const select = document.getElementById('pricingReferenceId');
            refs.forEach(r => {
                const opt = document.createElement('option');
                opt.value = r.id;
                opt.textContent = r.name + ' (' + r.entry_count + ' entries)';
                select.appendChild(opt);
            });
        } catch (err) {
            console.warn('Could not load pricing references:', err);
        }
    })();

    document.getElementById('configForm').addEventListener('submit', async (e) => {
        e.preventDefault();

        const profile = document.getElementById('profile').value;
        const jobNumber = document.getElementById('jobNumber').value;
        const llmProvider = document.getElementById('llmProvider').value;
        const campaignId = document.getElementById('campaignId').value;
        const pricingReferenceId = document.getElementById('pricingReferenceId').value;
        const startBtn = document.getElementById('startBtn');

        if (!profile) {
            showNotification('Please select a profile', 'warning');
            return;
        }

        startBtn.disabled = true;
        startBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Starting...';

        // Use batch endpoint if multiple files
        const endpoint = fileCount > 1
            ? `${BASE_URL}/hm-qc/execute/batch`
            : `${BASE_URL}/hm-qc/execute`;

        const resultsUrl = fileCount > 1
            ? `${BASE_URL}/hm-qc/results/batch/${sessionId}`
            : `${BASE_URL}/hm-qc/results/${sessionId}`;

        try {
            const response = await fetch(endpoint, {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    session_id: sessionId,
                    profile: profile,
                    job_number: jobNumber || null,
                    llm_provider: llmProvider,
                    campaign_id: campaignId || null,
                    pricing_reference_id: pricingReferenceId ? parseInt(pricingReferenceId) : null
                })
            });

            const data = await response.json();

            if (data.success) {
                showNotification('QC execution started!', 'success');
                window.location.href = resultsUrl;
            } else {
                throw new Error(data.error || 'Failed to start execution');
            }
        } catch (error) {
            showNotification(`Error: ${error.message}`, 'error');
            startBtn.disabled = false;
            startBtn.innerHTML = '<i class="bi bi-play-circle me-2"></i>Start QC Execution';
        }
    });
</script>
{% endblock %}