{% extends "base.html" %}

{% block content %}
<section class="page-header">
    <div>
        <p class="page-kicker">Organize</p>
        <h1 class="page-title">Organization dashboard</h1>
        <p class="page-subtitle">Scan folders, review plans, execute jobs, and export run reports.</p>
    </div>
    <div class="chip-stack">
        <span class="chip">Dry-run first</span>
        <span class="chip">SSE updates</span>
    </div>
</section>

<section class="panel organize-control-panel">
    <h2>1) Scan and generate plan</h2>
    <div id="organize-scan-spinner" class="spinner htmx-indicator" style="display: none; margin-bottom: 1rem;"></div>
    <form
        class="organize-form"
        hx-post="/ui/organize/scan"
        hx-target="#organize-plan"
        hx-swap="innerHTML"
        hx-indicator="#organize-scan-spinner"
    >
        <label for="organize-input-dir">Input directory</label>
        <input id="organize-input-dir" name="input_dir" type="text" value="{{ default_input_dir }}" required>

        <label for="organize-output-dir">Output directory</label>
        <input id="organize-output-dir" name="output_dir" type="text" value="{{ default_output_dir }}" required>

        <label for="organize-methodology">Methodology</label>
        <select id="organize-methodology" name="methodology">
            {% for key, label in methodology_options.items() %}
            <option value="{{ key }}">{{ label }}</option>
            {% endfor %}
        </select>

        <div class="organize-toggle-grid">
            <label class="toggle-option">
                <input name="recursive" type="checkbox" value="1" checked>
                <span>Recursive scan</span>
            </label>
            <label class="toggle-option">
                <input name="skip_existing" type="checkbox" value="1" checked>
                <span>Skip existing files</span>
            </label>
            <label class="toggle-option">
                <input name="use_hardlinks" type="checkbox" value="1" checked>
                <span>Use hardlinks when possible</span>
            </label>
        </div>

        <div class="organize-actions">
            <button class="btn-primary" type="submit">Generate plan</button>
        </div>
    </form>
    {% if allowed_roots %}
    <p class="organize-hint">Allowed roots: {{ allowed_roots | join(', ') }}</p>
    {% else %}
    <p class="organize-hint">No allowed roots configured. Set <code>FO_API_ALLOWED_PATHS</code>.</p>
    {% endif %}
</section>

<section class="panel-grid two organize-panels">
    <article class="panel">
        <h2>2) Review plan</h2>
        <div id="organize-plan">
            {% include "organize/_plan.html" %}
        </div>
    </article>

    <article class="panel">
        <h2>3) Progress and control</h2>
        <div id="organize-progress">
            {% include "organize/_job_status.html" %}
        </div>
    </article>
</section>

<section class="panel-grid two organize-panels">
    <article class="panel">
        <div class="section-headline">
            <h2>History and logs</h2>
            <div id="organize-history-spinner" class="spinner htmx-indicator" style="display: none; margin-right: 1rem;"></div>
            <form
                class="history-filters"
                hx-get="/ui/organize/history"
                hx-target="#organize-history"
                hx-swap="innerHTML"
                hx-indicator="#organize-history-spinner"
            >
                <select name="status_filter" aria-label="Filter history by status">
                    <option value="all">All statuses</option>
                    <option value="queued">Queued</option>
                    <option value="running">Running</option>
                    <option value="completed">Completed</option>
                    <option value="failed">Failed</option>
                </select>
                <input name="limit" type="number" min="1" max="200" value="50">
                <button class="btn-ghost" type="submit">Apply</button>
            </form>
        </div>
        <div id="organize-history-error" style="display: none; color: #dc2626; padding: 0.75rem; background-color: #fee2e2; border-radius: 0.375rem; margin-bottom: 1rem;">
            Error loading history
        </div>
        <div
            id="organize-history"
            hx-get="/ui/organize/history"
            hx-include=".history-filters"
            hx-trigger="load, refreshHistory from:body, every 10s"
            hx-target="#organize-history"
            hx-swap="innerHTML"
            hx-on:htmx:responseError="document.querySelector('#organize-history-error').style.display = 'block'; setTimeout(() => document.querySelector('#organize-history-error').style.display = 'none', 5000);"
        >
            <div class="loading-state">
                <div class="spinner"></div>
                <p>Loading history...</p>
            </div>
        </div>
    </article>

    <article class="panel">
        <h2>Statistics</h2>
        <div id="organize-stats-error" style="display: none; color: #dc2626; padding: 0.75rem; background-color: #fee2e2; border-radius: 0.375rem; margin-bottom: 1rem;">
            Error loading statistics
        </div>
        <div
            id="organize-stats"
            hx-get="/ui/organize/stats"
            hx-trigger="load, refreshStats from:body, every 10s"
            hx-target="#organize-stats"
            hx-swap="innerHTML"
            hx-on:htmx:responseError="document.querySelector('#organize-stats-error').style.display = 'block'; setTimeout(() => document.querySelector('#organize-stats-error').style.display = 'none', 5000);"
        >
            <div class="loading-state">
                <div class="spinner"></div>
                <p>Loading statistics...</p>
            </div>
        </div>
    </article>
</section>
{% endblock %}