{% extends "utilities/_base.html" %}
{% from "components/job_section.html" import job_section with context %}
{% from "components/run_history.html" import run_history_list with context %}
{% from "components/page_header.html" import page_header %}

{% block title %}{{ _("Index Photos - Utilities - Yaffo") }}{% endblock %}

{% block utility_content %}
<div class="utility-page">
    {% set header_actions %}
        {# Shown by JS once the scan finds work to do. #}
        <button class="btn btn-primary" id="sync-button" data-icon="sync" hidden>{{ _("Sync Database") }}</button>
        {# Always available: unlike Sync, this re-runs indexing on files already
           indexed — a rebuild, not a reconcile. It re-detects faces, so it confirms
           the loss of person assignments first. #}
        <button class="btn btn-secondary" id="reindex-button" data-icon="sync"
                {% if not can_sync %}disabled{% endif %}>{{ _("Reindex Library") }}</button>
    {% endset %}
    {{ page_header(
        _('Index Photos'),
        _('Compare photos on the file system with the database'),
        actions=header_actions,
    ) }}

    {% if warnings|length > 0 %}
    <div class="warnings-section">
        {% for warning in warnings %}
        <div class="alert alert-{{ warning.type }}">
            {{ warning.message }}
            {% if warning.type == 'error' %}
            <a href="{{ url_for('settings_index') }}" class="alert-link">{{ _("Go to Settings") }}</a>
            {% endif %}
        </div>
        {% endfor %}
    </div>
    {% endif %}

    {# The latest import and index runs while in progress. One that finishes while
       the page is open keeps its card until reload, then it's in the run history,
       so no Dismiss (it deletes the job). #}
    {{ job_section(in_progress_jobs, show_cancel=true, show_dismiss=false) }}

    {% if media_dirs|length > 0 %}
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-label">{{ _("Total on Filesystem") }}</div>
            <div class="stat-value" id="stat-total-filesystem">—</div>
        </div>
        <div class="stat-card">
            <div class="stat-label">{{ _("Imported in Database") }}</div>
            <div class="stat-value" id="stat-total-imported">—</div>
        </div>
        <div class="stat-card">
            <div class="stat-label">{{ _("Indexed in Database") }}</div>
            <div class="stat-value" id="stat-total-indexed">—</div>
        </div>
        <div class="stat-card">
            <div class="stat-label">{{ _("Not Indexed") }}</div>
            <div class="stat-value" id="stat-unindexed">—</div>
        </div>
        <div class="stat-card">
            <div class="stat-label">{{ _("Orphaned in DB") }}</div>
            <div class="stat-value" id="stat-orphaned">—</div>
        </div>
    </div>

    <p class="scan-status" id="scan-status" hidden></p>

    {# A warning the scan finds: media folders that hold no media files. #}
    <div class="warnings-section" id="scan-warnings" hidden></div>

    {# JS fills this with the unindexed / orphaned tables (or an "in sync" state)
       once the scan stream completes. #}
    <div id="scan-results"></div>
    {% endif %}

    {% if media_dirs|length == 0 %}
    <div class="empty-state">
        <h2>{{ _("No Media Directories Configured") }}</h2>
        <p>
            {% trans settings_url=url_for('settings_index') %}
                Please configure media directories in <a href="{{ settings_url }}">Settings</a> to start indexing photos.
            {% endtrans %}
        </p>
    </div>
    {% endif %}

    {% if failed_count %}
    <div class="section index-failures" id="index-failures">
        <h2>{{ ngettext("%(num)d file couldn't be indexed", "%(num)d files couldn't be indexed", failed_count) }}</h2>
        <p class="hint-text">{{ _("They still show in your library, but without the date, location, faces or labels that indexing reads. Sync leaves them alone until a file changes; retry after fixing a file or updating Yaffo.") }}</p>
        <ul class="index-failure-list">
            {% for item in failed_media %}
            <li>
                <a href="{{ url_for('media_view', media_item_id=item.id) }}">{{ item.file_name }}</a>
                <span class="index-failure-folder">{{ item.folder }}</span>
                <span class="index-failure-reason">{{ item.reason }}</span>
            </li>
            {% endfor %}
        </ul>
        {% if failed_count > failed_media|length %}
        <p class="hint-text">{{ ngettext("and %(num)d more", "and %(num)d more", failed_count - failed_media|length) }}</p>
        {% endif %}
        <button class="btn btn-secondary" id="retry-failed-button" data-icon="sync">{{ _("Retry all") }}</button>
    </div>
    {% endif %}

    {% if run_history %}
    <div class="section index-run-history">
        <h2>{{ _("Run history") }}</h2>
        {{ run_history_list(run_history, url_for('utilities_index_photos'), show_label=true) }}
    </div>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='utilities/index_photos.js') }}"></script>
<script>
document.addEventListener('yaffo:app-init-complete', (event) => {
    const app = event.detail.app;
    app.indexPhotos.init({
        canScan: {{ can_scan | tojson }},
        canSync: {{ can_sync | tojson }},
        hasActiveJobs: {{ has_active_jobs | tojson }},
        mediaDirs: {{ media_dirs | tojson }},
    }, app.i18n, window.APP_CONFIG);
});
</script>
{% endblock %}