{% extends "base.html" %}

{% block title %}HM QC - Quality Control{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-12">
            <h1 class="h2">
                <i class="bi bi-file-earmark-check me-2"></i>
                HM Quality Control
            </h1>
            <p class="text-muted">
                Upload and validate H&M marketing assets (PDF, images) with AI-powered quality checks and scoring.
            </p>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-body text-center p-5">
                    <i class="bi bi-cloud-upload" style="font-size: 4rem; color: var(--hm-yellow);"></i>
                    <h3 class="mt-3">Start QC Check</h3>
                    <p class="text-muted">Upload a file to begin quality control validation</p>
                    <a href="{{ url_for('hm_qc.upload') }}" class="btn btn-hm-primary btn-lg mt-2">
                        <i class="bi bi-upload me-2"></i>
                        Upload File
                    </a>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <i class="bi bi-info-circle me-2"></i>
                    Features
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li class="mb-2">
                            <i class="bi bi-check-circle text-success me-2"></i>
                            Weighted scoring (0-100 scale)
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-check-circle text-success me-2"></i>
                            AI-powered quality assessment
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-check-circle text-success me-2"></i>
                            Image dimension validation
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-check-circle text-success me-2"></i>
                            Real-time progress tracking
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-check-circle text-success me-2"></i>
                            Title legibility assessment
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Batch QC Reports -->
    {% if batches %}
    <div class="row mt-5">
        <div class="col-12">
            <h4><i class="bi bi-collection me-2"></i>Batch Reports</h4>
            {% for batch in batches %}
            <div class="card mb-3" id="batch-card-{{ batch.batch_id[:8] }}">
                <div class="card-header d-flex justify-content-between align-items-center" role="button"
                     data-bs-toggle="collapse" data-bs-target="#batch-{{ batch.batch_id[:8] }}">
                    <div>
                        <i class="bi bi-folder2-open me-2"></i>
                        <strong>{{ batch.job_number or 'Batch' }} {{ batch.created_at.strftime('%Y-%m-%d %H:%M') }}</strong>
                        <span class="text-muted ms-2">({{ batch.total }} files)</span>
                        <span class="badge bg-success ms-2">{{ batch.passed }} passed</span>
                        {% if batch.warnings %}<span class="badge bg-warning text-dark">{{ batch.warnings }} warnings</span>{% endif %}
                        {% if batch.failed %}<span class="badge bg-danger">{{ batch.failed }} failed</span>{% endif %}
                        <span class="ms-2 text-muted">Avg: <strong>{{ batch.avg_score }}</strong></span>
                    </div>
                    <div class="d-flex gap-2">
                        <a href="{{ url_for('hm_qc.download_batch', batch_id=batch.batch_id) }}"
                           class="btn btn-sm btn-outline-primary" title="Download all as ZIP" onclick="event.stopPropagation();">
                            <i class="bi bi-download me-1"></i>Download All
                        </a>
                        <button class="btn btn-sm btn-outline-danger delete-batch-btn"
                                data-batch-id="{{ batch.batch_id }}"
                                data-batch-name="{{ batch.job_number or batch.created_at.strftime('%Y-%m-%d %H:%M') }}"
                                data-batch-count="{{ batch.total }}"
                                title="Delete batch" onclick="event.stopPropagation();">
                            <i class="bi bi-trash"></i>
                        </button>
                    </div>
                </div>
                <div class="collapse" id="batch-{{ batch.batch_id[:8] }}">
                    <div class="card-body p-0">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th style="width:50px"></th>
                                    <th>Filename</th>
                                    <th>Score</th>
                                    <th>Status</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for report in batch.reports %}
                                <tr>
                                    <td>
                                        <img src="{{ url_for('hm_qc.thumbnail', report_id=report.id) }}"
                                             alt="" style="width:40px;height:40px;object-fit:cover;border-radius:4px;"
                                             onerror="this.style.display='none'">
                                    </td>
                                    <td>{{ report.filename }}</td>
                                    <td>
                                        {% if report.score is not none %}
                                            <strong>{{ '%.0f' % report.score }}</strong>
                                        {% else %}-{% endif %}
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ 'success' if report.status == 'passed' else 'warning' if report.status == 'warning' else 'danger' }}">
                                            {{ report.status }}
                                        </span>
                                    </td>
                                    <td class="text-nowrap">
                                        <a href="{{ url_for('hm_qc.view_report', report_id=report.id) }}" class="btn btn-sm btn-outline-primary me-1" title="View">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                        <a href="{{ url_for('hm_qc.download_report', report_id=report.id) }}" class="btn btn-sm btn-outline-secondary me-1" title="Download">
                                            <i class="bi bi-download"></i>
                                        </a>
                                        <button class="btn btn-sm btn-outline-danger delete-report-btn" data-id="{{ report.id }}" data-name="{{ report.filename }}" title="Delete">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Individual QC Reports -->
    {% if individual_reports %}
    <div class="row mt-4">
        <div class="col-12">
            <h4><i class="bi bi-clipboard-check me-2"></i>Individual Reports</h4>
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead class="table-dark">
                        <tr>
                            <th style="width:50px"></th>
                            <th>Filename</th>
                            <th>Job #</th>
                            <th>Score</th>
                            <th>Status</th>
                            <th>Date</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for report in individual_reports %}
                        <tr>
                            <td>
                                <img src="{{ url_for('hm_qc.thumbnail', report_id=report.id) }}"
                                     alt="" style="width:40px;height:40px;object-fit:cover;border-radius:4px;"
                                     onerror="this.style.display='none'">
                            </td>
                            <td>{{ report.filename }}</td>
                            <td>{{ report.job_number or '-' }}</td>
                            <td>
                                {% if report.score is not none %}
                                    <strong>{{ '%.0f' % report.score }}</strong>
                                {% else %}-{% endif %}
                            </td>
                            <td>
                                <span class="badge bg-{{ 'success' if report.status == 'passed' else 'warning' if report.status == 'warning' else 'danger' }}">
                                    {{ report.status }}
                                </span>
                            </td>
                            <td>{{ report.created_at.strftime('%Y-%m-%d %H:%M') if report.created_at }}</td>
                            <td class="text-nowrap">
                                <a href="{{ url_for('hm_qc.view_report', report_id=report.id) }}" class="btn btn-sm btn-outline-primary me-1">
                                    <i class="bi bi-eye"></i>
                                </a>
                                <a href="{{ url_for('hm_qc.download_report', report_id=report.id) }}" class="btn btn-sm btn-outline-secondary me-1" title="Download">
                                    <i class="bi bi-download"></i>
                                </a>
                                <button class="btn btn-sm btn-outline-danger delete-report-btn" data-id="{{ report.id }}" data-name="{{ report.filename }}">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    document.querySelectorAll('.delete-report-btn').forEach(btn => {
        btn.addEventListener('click', async function() {
            const id = this.dataset.id;
            const name = this.dataset.name;
            if (!confirm(`Delete report for "${name}"?`)) return;

            try {
                const resp = await fetch(`${BASE_URL}/hm-qc/report/${id}`, {
                    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 report');
            }
        });
    });

    document.querySelectorAll('.delete-batch-btn').forEach(btn => {
        btn.addEventListener('click', async function() {
            const batchId = this.dataset.batchId;
            const name = this.dataset.batchName;
            const count = this.dataset.batchCount;
            if (!confirm(`Delete batch "${name}" and all ${count} reports?`)) return;

            try {
                const resp = await fetch(`${BASE_URL}/hm-qc/report/batch/${batchId}`, {
                    method: 'DELETE'
                });
                const data = await resp.json();
                if (data.success) {
                    document.getElementById(`batch-card-${batchId.substring(0, 8)}`).remove();
                } else {
                    alert(data.error || 'Delete failed');
                }
            } catch (e) {
                alert('Error deleting batch');
            }
        });
    });
</script>
{% endblock %}