{% extends "base.html" %}
{% from "components/file_browser.html" import file_browser %}
{% from "components/page_header.html" import page_header %}

{% block title %}{{ _("Settings - Yaffo") }}{% endblock %}

{% block extra_styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='settings/index.css') }}">
{% endblock %}

{% block content %}
<div class="main-content">
    {{ page_header(_('Settings'), _('Configure application settings')) }}

    <div class="settings-section">
        <h2>{{ _("Language") }}</h2>
        <form method="POST" action="{{ url_for('settings_locale') }}">
            <div class="form-group">
                <label for="application-locale">{{ _("Application language") }}</label>
                <select id="application-locale" name="locale" class="searchable-select" data-search-disabled>
                    {% for locale in supported_locales %}
                    <option value="{{ locale.code }}" {% if locale.code == selected_locale %}selected{% endif %}>
                        {{ locale.label }}
                    </option>
                    {% endfor %}
                </select>
                <p class="hint-text">{{ _("Controls the language used by Yaffo. The page reloads after saving.") }}</p>
            </div>
            <button type="submit" class="btn-primary">{{ _("Save") }}</button>
        </form>
    </div>

    <div class="settings-section">
        <h2>{{ _("Units") }}</h2>
        <form method="POST" action="{{ url_for('settings_distance_unit') }}">
            <div class="form-group">
                <label for="distance-unit">{{ _("Preferred distance unit") }}</label>
                <select id="distance-unit" name="distance_unit" class="searchable-select" data-search-disabled>
                    {% for unit in distance_unit_options %}
                    <option value="{{ unit.code }}" {% if unit.code == selected_distance_unit %}selected{% endif %}>
                        {{ unit.label }}
                    </option>
                    {% endfor %}
                </select>
                <p class="hint-text">{{ _("Used for distance filters and automation settings.") }}</p>
            </div>
            <button type="submit" class="btn-primary">{{ _("Save") }}</button>
        </form>
    </div>

    <div class="settings-section">
        <h2>{{ _("Media Directories") }}</h2>
        <p class="section-description">{{ _("Add directories where your photos are stored. Yaffo scans these directories for photos and videos to index.") }}</p>
        {% if library_update_in_progress %}
        <p class="hint-text">{{ _("Media and thumbnail directories cannot be changed while importing or indexing is in progress.") }}</p>
        {% endif %}

        <div class="media-dirs-list" id="media-dirs-list">
            {% if media_dirs|length > 0 %}
                {% for dir in media_dirs %}
                <div class="media-dir-item" data-index="{{ loop.index0 }}">
                    <span class="media-dir-path">{{ dir.path }}</span>
                    <button type="button" class="btn-danger btn-sm" data-icon="delete"
                            data-action="remove-media-dir" data-index="{{ loop.index0 }}"
                            {% if library_update_in_progress %}disabled{% endif %}>{{ _("Remove") }}</button>
                </div>
                {% endfor %}
            {% else %}
                <p class="no-data">{{ _("No media directories configured") }}</p>
            {% endif %}
        </div>

        <div class="add-media-dir-form">
            {{ file_browser(
                'new-media-dir',
                placeholder=_('Enter directory path (for example, /Volumes/Photos or C:\\Photos)'),
                show_label=False
            ) }}
            <button type="button" class="btn-primary" data-icon="add"
                    data-action="add-media-dir"
                    {% if library_update_in_progress %}disabled{% endif %}>{{ _("Add Directory") }}</button>
        </div>
    </div>

    <div class="settings-section">
        <h2>{{ _("Thumbnail Directory") }}</h2>
        <p class="section-description">{{ _("Configure where cropped thumbnails of detected faces are stored for quick loading.") }}</p>
        {% if library_update_in_progress %}
        <p class="hint-text">{{ _("Media and thumbnail directories cannot be changed while importing or indexing is in progress.") }}</p>
        {% endif %}

        {% if current_thumbnail_dir and current_thumbnail_dir != "None" %}
        <div class="thumbnail-dir-info">
            <div class="current-path-item">
                <label>{{ _("Current Thumbnail Directory:") }}</label>
                <code id="current-thumbnail-dir">{{ current_thumbnail_dir }}</code>
            </div>

            <div class="thumbnail-stats" id="thumbnail-stats">
                <span class="stat-item">{{ _("Files:") }} <strong id="thumbnail-count">…</strong></span>
                <span class="stat-item">{{ _("Total Size:") }} <strong id="thumbnail-size">{{ _("Counting…") }}</strong></span>
            </div>
        </div>

        <div class="change-thumbnail-dir-form">
            {{ file_browser(
                'new-thumbnail-dir',
                placeholder=_('Enter new thumbnail directory path'),
                show_label=False
            ) }}
            <button type="button" class="btn-primary"
                    data-action="change-thumbnail-dir"
                    {% if library_update_in_progress %}disabled{% endif %}>{{ _("Change Directory") }}</button>
        </div>
        {% else %}
        <div class="no-thumbnail-dir">
            <p class="no-data">{{ _("No thumbnail directory configured. Set a directory to enable face thumbnail generation.") }}</p>
        </div>

        <div class="change-thumbnail-dir-form">
            {{ file_browser(
                'new-thumbnail-dir',
                placeholder=_('Enter thumbnail directory path'),
                show_label=False
            ) }}
            <button type="button" class="btn-primary"
                    data-action="change-thumbnail-dir"
                    {% if library_update_in_progress %}disabled{% endif %}>{{ _("Set Directory") }}</button>
        </div>
        {% endif %}
    </div>

    {% include "settings/_llm.html" %}

    {% include "settings/_labels.html" %}

    <div class="settings-section">
        <h2>{{ _("System Information") }}</h2>
        <p class="section-description">{{ _("Build details and configured paths (read-only).") }}</p>

        <div class="system-paths">
            <div class="system-path-item">
                <label>{{ _("Build Version:") }}</label>
                <code>{{ build_info.version }}</code>
                <p class="path-description">{{ _("The version of Yaffo currently running.") }}</p>
            </div>

            <div class="system-path-item">
                <label>{{ _("Build Timestamp:") }}</label>
                <code>{{ build_info.build_time or _("development build") }}</code>
                <p class="path-description">{{ _("When this build was produced.") }}</p>
            </div>

            <div class="system-path-item">
                <label>{{ _("Database Path:") }}</label>
                <code>{{ db_path }}</code>
                <p class="path-description">{{ _("Location of the SQLite database containing photo metadata, faces, and people information.") }}</p>
            </div>

            <div class="system-path-item">
                <label>{{ _("Task Queue Database Path:") }}</label>
                <code>{{ queue_db_path }}</code>
                <p class="path-description">{{ _("Database used by the background task queue to process jobs.") }}</p>
            </div>

            <div class="system-path-item">
                <label>{{ _("ExifTool Path:") }}</label>
                <code>{{ exiftool_path or _("not found") }}</code>
                <p class="path-description">{{ _("ExifTool executable used for reading and writing media metadata.") }}</p>
            </div>

            <div class="system-path-item">
                <label>{{ _("Image Classification Model:") }}</label>
                <code>{{ classification_model.path }}</code>
                {% if classification_model.source == "bundled" %}
                    <p class="path-description">{{ _("Bundled with this app.") }}</p>
                {% elif classification_model.source == "downloaded" %}
                    <p class="path-description">{{ _("Downloaded model cache used for image classification.") }}</p>
                {% else %}
                    <p class="path-description">{{ _("Will be downloaded on first image-classification run.") }}</p>
                {% endif %}
            </div>

            <div class="system-path-item">
                <label>{{ _("Face Recognition Model:") }}</label>
                <code>{{ face_model.path }}</code>
                {% if face_model.source == "bundled" %}
                    <p class="path-description">{{ _("Bundled with this app.") }}</p>
                {% elif face_model.source == "downloaded" %}
                    <p class="path-description">{{ _("Downloaded model cache used for face recognition.") }}</p>
                {% else %}
                    <p class="path-description">{{ _("Will be downloaded on first face-recognition run.") }}</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='settings/index.js') }}"></script>
<script src="{{ url_for('static', filename='settings/labels.js') }}"></script>
<script>
window.PHOTO_ORGANIZER.i18nReady.then((i18n) => {
    window.PHOTO_ORGANIZER.settings = window.PHOTO_ORGANIZER.initSettings(
        {{ media_dirs | tojson }},
        i18n,
        window.APP_CONFIG
    );
    window.PHOTO_ORGANIZER.initLabelFilter();
});
</script>
{% endblock %}