<!DOCTYPE html>
<!-- Lazy load owl animation CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/owlAnimation.css') }}" media="print"
    onload="this.media='all'">
<noscript>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/owlAnimation.css') }}">
</noscript>

<div class="container py-4">
    {% set is_ready = validation_results.ready_for_publication %}

    <!-- Form Title -->
    <div class="col-12 text-center mb-4">
        <h1 class="fs-3 fw-bold">Validation</h1>
        <p class="text-muted mb-3">Check if your project meets all requirements for publication</p>
        <div class="d-inline-flex align-items-center bg-light rounded-pill px-3 py-2">
            <i class="bi bi-clock-history text-muted me-2"></i>
            <small class="text-muted">Last validation: <strong>{{ validation_results.last_run }}</strong></small>
        </div>
    </div>

    <!-- Refresh Button -->
    <div class="row mb-4">
        <div class="col-12 text-center">
            <form class="d-inline-block js-tab-submit"
                action="{{ url_for('collection.tab_validate_metadata', projectname=projectname, refresh=True) }}"
                method="GET">
                <button type="submit" class="btn btn-lg btn-primary">
                    <i class="bi bi-arrow-clockwise me-2"></i> Run Validation
                </button>
            </form>
        </div>
    </div>

    <!-- Validation Results -->
    <div class="row g-4">
        <!-- General Validation Results -->
        <div class="col-md-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 pb-0 pt-4 px-4">
                    <div class="d-flex align-items-center mb-2">
                        <div class="rounded-circle bg-primary bg-opacity-10 p-2 me-3 align-items-center d-flex justify-content-center"
                            style="width: 2.5rem; height: 2.5rem;">
                            <i class="bi bi-clipboard-check text-primary fs-5"></i>
                        </div>
                        <h2 class="fs-5 fw-semibold mb-0">Project Validation</h2>
                    </div>
                </div>
                <div class="card-body px-4 pb-4">
                    <div class="d-flex flex-column gap-2">
                        <!-- OK Results -->
                        {% for message in validation_results.project.ok %}
                        <div
                            class="d-flex align-items-center p-3 rounded-3 bg-success bg-opacity-10 border border-success border-opacity-25">
                            <i class="bi bi-check-circle-fill text-success me-3 fs-5"></i>
                            <span class="text-dark">{{ message }}</span>
                        </div>
                        {% endfor %}

                        <!-- Warnings -->
                        {% for message in validation_results.project.warning %}
                        <div
                            class="d-flex align-items-center p-3 rounded-3 bg-warning bg-opacity-10 border border-warning border-opacity-25">
                            <i class="bi bi-exclamation-triangle-fill text-warning me-3 fs-5"></i>
                            <span class="text-dark">{{ message }}</span>
                        </div>
                        {% endfor %}

                        <!-- Errors -->
                        {% for message in validation_results.project.error %}
                        <div
                            class="d-flex align-items-center p-3 rounded-3 bg-danger bg-opacity-10 border border-danger border-opacity-25">
                            <i class="bi bi-x-circle-fill text-danger me-3 fs-5"></i>
                            <span class="text-dark">{{ message }}</span>
                        </div>
                        {% endfor %}
                        <button type="button"
                            class="btn btn-next d-flex align-items-center justify-content-between w-100 p-3 rounded-3 bg-light border border-secondary border-opacity-25 text-start"
                            data-next-target="#tab-edit-project" data-additional-button="#tab-group-project">
                            <span class="d-flex align-items-center">
                                <i class="bi bi-gear-fill text-secondary me-3 fs-5"></i>
                                <span class="text-dark">Go to Project Settings</span>
                            </span>
                            <i class="bi bi-chevron-right text-secondary"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Overall Status -->
        <div class="col-md-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 pb-0 pt-4 px-4">
                    <div class="d-flex align-items-center justify-content-center mb-2">
                        <h2 class="fs-5 fw-semibold mb-0">Overall Status</h2>
                    </div>
                </div>
                <div class="card-body d-flex flex-column align-items-center justify-content-between p-4">
                    <div>
                    </div>
                    {% if is_ready %}
                    {% set should_pulse = not validation_results.project.warning %}
                    <img src="{{ url_for('static', filename='img/owl_super.png') }}"
                        alt="Ready for publication - Click to proceed!" height="190"
                        class="drop-shadow{{ ' pulse-animation' if should_pulse else '' }}" id="owl-fly-button"
                        data-next-target="#tab-prepare-upload" data-additional-button="#tab-group-upload"
                        data-should-pulse="{{ 'true' if should_pulse else 'false' }}">
                    <div>
                        {% if validation_results.project.warning %}
                        <div class="text-center">
                            <i class="bi bi-exclamation-triangle-fill text-warning me-2"></i>
                            <span class="text-dark">Some <strong>warnings</strong> exist but won't block
                                publication.</span>
                        </div>
                        {% else %}
                        <div class="text-small text-center">
                            Click Owl to continue
                            <i class="bi bi-hand-index-fill me-1 text-secondary"></i>
                        </div>
                        {% endif %}
                    </div>

                    {% else %}
                    <div class="mb-4">
                        <img src="{{ url_for('static', filename='img/owl_book.png') }}" alt="Not ready for publication"
                            height="200" class="opacity-75">
                    </div>
                    <div class="text-center">
                        <i class="bi bi-exclamation-triangle-fill text-danger me-2"></i>
                        <span class="text-dark"><strong>Action required:</strong> Please fix validation errors to
                            proceed.</span>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Subproject Validation Results -->
        <div class="col-12">
            <div class="bg-light rounded p-1 h-100">
                <h2 class="fs-4 mb-2">Validation of Collection{{ 's' if len(subprojects) > 1 else '' }}</h2>

                <!-- Accordion for Subproject Details -->
                <div class="accordion" id="subprojectAccordion">
                    {% for subproject in validation_results.subprojects %}
                    <div class="card mb-3">
                        <!-- Card Header -->
                        <div class="card-header d-flex justify-content-between align-items-center"
                            id="heading-{{ loop.index }}">
                            <h5 class="mb-0">
                                <button class="btn btn-link text-decoration-none" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#collapse-{{ loop.index }}"
                                    aria-expanded="true" aria-controls="collapse-{{ loop.index }}">
                                    {{ subproject.title }}
                                </button>
                            </h5>
                            <div class="d-flex align-items-center">
                                <!-- CSV Export Button -->
                                <a href="{{ url_for('collection.export_tsv', projectname=projectname, collectionname=subproject.title) }}"
                                    class="btn btn-sm btn-outline-secondary me-3"
                                    title="Export validation results as CSV">
                                    <i class="bi bi-filetype-csv me-1"></i> Export TSV
                                </a>

                                <!-- Statistics -->
                                {% set stats = subproject.stats %}
                                <div>
                                    <span
                                        class="badge bg-{{'success' if stats['success'] else 'secondary'}} me-2">Success:
                                        {{ stats['success'] }}
                                    </span>
                                    <span class="badge bg-{{'danger' if stats['error'] else 'secondary'}}">Failed:
                                        {{ stats['error'] }}
                                    </span>
                                </div>
                            </div>
                        </div>

                        <!-- Card Body -->
                        <div id="collapse-{{ loop.index }}" class="collapse" aria-labelledby="heading-{{ loop.index }}"
                            data-bs-parent="#subprojectAccordion">
                            <div class="card-body">
                                <table class="table table-bordered table-hover">
                                    <thead class="table-light">
                                        <tr>
                                            <th>File</th>
                                            <th>Status</th>
                                            <th>Details</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for file, errors in subproject.files.items() %}
                                        <tr>
                                            <!-- File Name -->
                                            <td>{{ file }}</td>

                                            <!-- Validation Status -->
                                            <td>
                                                {% if len(errors) == 0 %}
                                                <span class="badge bg-success">Success</span>
                                                {% else %}
                                                <span class="badge bg-danger">Failed</span>
                                                {% endif %}
                                            </td>

                                            <!-- Validation Details -->
                                            <td>
                                                {% if len(errors) > 0 %}
                                                {% set file_stripped = file.split('.')[0] %}
                                                <button class="btn btn-sm btn-outline-danger" type="button"
                                                    data-bs-toggle="collapse"
                                                    data-bs-target="#errors-{{ loop.index }}-{{ file_stripped }}"
                                                    aria-expanded="false"
                                                    aria-controls="errors-{{ loop.index }}-{{ file_stripped }}">
                                                    View Errors
                                                </button>
                                                <div class="collapse mt-2"
                                                    id="errors-{{ loop.index }}-{{ file_stripped }}">
                                                    <ul class="list-unstyled mb-0">
                                                        {% for error in errors %}
                                                        <li class="text-danger">
                                                            <i class="bi bi-x-circle-fill me-1"></i>{{ error }}
                                                        </li>
                                                        {% endfor %}
                                                    </ul>
                                                </div>
                                                {% else %}
                                                <span class="text-muted">No errors</span>
                                                {% endif %}
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 d-flex justify-content-between">
            <button type="button" class="btn btn-primary btn-next" data-next-target="#tab-set-collections">
                <i class="bi bi-chevron-left"></i> Back
            </button>
            {% if is_ready %}
            <button type="button" class="btn btn-primary btn-next" data-next-target="#tab-prepare-upload"
                data-additional-button="#tab-group-upload">
                Next <i class="bi bi-chevron-right"></i>
            </button>
            {% endif %}
        </div>
    </div>
</div>