{% extends 'core/lcars_app.html' %}
{% load static %}

{% block header_title %}
AutoWISP Reductions Progress
{% endblock header_title %}

{% block extra_head %}
<link rel="stylesheet" 
      href="{% static 'processing/css/jquery.orgchart.css' %}">
<link rel="stylesheet" 
      href="{% static 'processing/css/progress_bar.css' %}">
<link rel="stylesheet" href="{% static 'css/navbar.css' %}">
<link rel="stylesheet" href="{% static 'processing/css/checkboxes.css' %}">
<script defer src="{% static 'processing/js/progress.js' %}"></script>
{% endblock extra_head %}

{% block app_title %}
Processing Progress
{% endblock app_title %}

{% block left_menu %}
{% if running %}
{% if await_start >= 0 %}
<div class="lcars-element
            lcars-golden-tanoi-bg
            lcars-u-1-2">
    Waiting to start {{ await_start }}
</div>
{% else %}
<div class="lcars-element
            lcars-golden-tanoi-bg
            lcars-u-1-2">
    Processing
</div>
{% endif %}
{% else %}
<!-- Submit Start Processing with selected steps. When open processing
     errors exist the button turns red and requires a second click to
     start anyway (handled in progress.js). -->
<button type="submit" form="steps-form"
        class="lcars-element
               button
               {% if gate_error_count %}lcars-red-alert-bg{% else %}lcars-melrose-bg{% endif %}
               lcars-u-1-2"
        id="tutorial-start-processing"
        {% if gate_error_count %}
        data-confirm-start="1"
        data-confirm-text="Click again to start anyway"
        {% endif %}>
    {% if gate_error_count %}
    {{ gate_error_count }} error{{ gate_error_count|pluralize }} pending — start?
    {% else %}
    Start Processing
    {% endif %}
</button>
{% endif %}

<a href="{% url 'processing:select_raw_images' %}" id="tutorial-add-images-link">
    <div class="lcars-element 
                              button 
                              lcars-husk-bg
                              lcars-u-1"
         id="tutorial-add-images">
        Add New Images
    </div>
</a>
{% endblock left_menu %}

{% block main %}

<form id="steps-form" method="post" action="{% url 'processing:start_processing' %}">
    {% csrf_token %}

{# Expose refresh config to JS via data attributes #}
{% if refresh_seconds %}
<div id="aw-progress-config"
     data-refresh-seconds="{{ refresh_seconds }}"
     data-refresh-url="{% if await_start >= 0 %}{% url 'processing:progress' await_start=await_start %}{% else %}{% url 'processing:progress' %}{% endif %}">
</div>
{% endif %}

<table class="lcars-table standard-header">
    <thead>
        <tr>
            <th>
                <div class="aw-step-header">
                    <span>Step</span>
                    {% if not running %}
                    <div class="aw-select-all">
                        <span id="aw-select-all" class="aw-select-all-label" role="button" tabindex="0">
                            Select all
                        </span>
                    </div>
                    {% endif %}
                </div>
            </th>
            <th>Image Type</th>
            {% for channel in channels %}
            <th style="justify-content: center;">{{ channel }}</th>
            {% endfor %}
        </tr>
    </thead>
    {% for step, imtype, by_channel, runs, step_errors in progress %}
    <tr style="border-bottom: 3px dotted white;">
        <td class="tooltip">
            <span class="tooltiptext">
                {% if step.0 == 'calibrate' %}
                Calibrates raw frames using bias, dark, and flat corrections.
                This normalizes pixel values so later steps work on clean data.
                {% elif step.0 == 'find' and step.1 == 'stars' %}
                Detects point sources using your threshold and extraction settings.
                This produces initial star coordinates used by later steps.
                {% elif step.0 == 'solve' and step.1 == 'astrometry' %}
                Solves the WCS so sky coordinates map to pixel coordinates.
                This enables catalog matching and accurate positions.
                {% elif step.0 == 'fit' and step.1 == 'star' and step.2 == 'shape' %}
                Fits PSF/PRF shapes to measure flux more precisely.
                These fits provide the basis for high-quality photometry.
                {% elif step.0 == 'measure' and step.1 == 'aperture' and step.2 == 'photometry' %}
                Measures flux in fixed apertures for each source.
                This provides robust brightness estimates for later modeling.
                {% elif step.0 == 'fit' and step.1 == 'source' and step.2 == 'extracted' and step.4 == 'map' %}
                Fits a smooth PSF map across the image using many stars.
                This reduces noise in PSF parameters and improves consistency.
                {% elif step.0 == 'fit' and step.1 == 'magnitudes' %}
                Fits relative magnitudes by comparing each frame to a reference.
                This removes frame-to-frame systematics and normalizes fluxes.
                {% elif step.0 == 'create' and step.1 == 'lightcurves' %}
                Reorganizes measurements into per-star lightcurves.
                This collects each star’s time series into a single file.
                {% elif step.0 == 'epd' or step.1 == 'epd' %}
                Removes trends correlated with external parameters.
                This reduces instrumental systematics in each lightcurve.
                {% elif step.0 == 'tfa' or step.1 == 'tfa' %}
                Filters trends shared across many stars in the field.
                This improves precision while preserving real variability.
                {% else %}
                Runs this pipeline step and updates its outputs.
                Use hover for quick context while monitoring progress.
                {% endif %}
            </span>

            <div class="aw-step-puzzle">
                <a href="{% url 'configuration:config_tree' step=step|join:"_" version=0 %}">
                    <div class="lcars-element 
                                button 
                                rounded 
                                lcars-chestnut-rose-bg
                                lcars-u-2
                                aw-step-name">
                        {{ step|join:" " }}
                    </div>
                </a>

                <label class="aw-step-checkbox aw-step-checkbox--right">
                    {% with token=step|join:'_'|add:'_'|add:imtype %}
                    <input type="checkbox" 
                           name="steps" 
                           value="{{ token }}" 
                           {% if running %}disabled{% endif %}
                           {% if not running or token in selected_tokens %}checked{% endif %}>
                    {% endwith %}
                    <span class="checkbox-ui" aria-hidden="true"></span>
                </label>
            </div>
        </td>
        <td class="tooltip">
            {% if step_errors %}
                <a href="{% url 'processing:error_list' %}?step={{ step|join:'_' }}">
                    <span class="tooltiptext">
                        {{ step_errors }} recorded error{{ step_errors|pluralize }} — review
                    </span>
                    <div class="lcars-element
                                button
                                rounded
                                lcars-red-alert-bg"
                         style="align-items: center; justify-content: left;">
                        {{ imtype }} ⚠
                    </div>
                </a>
            {% elif step.0 == 'fit' and step.1 == 'magnitudes' or step.0 == 'find' and step.1 == 'stars' %}
                {% if step.0 == 'fit' and step.1 == 'magnitudes' %}
                <a href="{% url 'processing:select_photref_target' %}">
                    <span class="tooltiptext">select reference image</span>
                {% else %}
                <a href="{% url 'processing:select_starfind_batch' %}">
                    <span class="tooltiptext">tune source extraction</span>
                {% endif %}
                    <div class="lcars-element
                                button
                                rounded
                                lcars-chestnut-rose-bg"
                         {% if step.0 == 'fit' and step.1 == 'magnitudes' %}
                         id="tutorial-object-button"
                         {% endif %}
                         style="align-items: center; justify-content: left;">
                        {{ imtype }}
                    </div>
                </a>
            {% else %}
            {{ imtype }}
            {% endif %}
        </td>
        {% for success, failure, pending, by_status in by_channel %}
        {% with final=success|add:failure %}
        {% with total=final|add:pending %}
        <td>
            <table>
                <tr>
                    <td colspan=2 class="tooltip">
                        <span class="tooltiptext">
                            {% if step.0 == 'calibrate' %}
                            Review cilabration diagnostics
                            {% url 'diagnostics:display_image_diagnostics' diagnostic_name='quantiles' as diagnostic_url %}
                            {% elif step.0 == 'find' and step.1 == 'stars' %}
                            Review star finding diagnostics
                            {% url 'diagnostics:display_image_diagnostics' diagnostic_name='num_extracted_src' as diagnostic_url %}

                            {% elif step.0 == 'solve' and step.1 == 'astrometry' %}
                            Review astrometry diagnostics
                            {% url 'diagnostics:display_image_diagnostics' diagnostic_name='pointing_offset' as diagnostic_url %}
                            {% elif step.0 == 'fit' and step.1 == 'star' and step.2 == 'shape' %}
                            Review star shepe fit diagnostics
                            {% url 'diagnostics:display_image_diagnostics' diagnostic_name='bg_center' as diagnostic_url %}
                            {% elif step.0 == 'measure' and step.1 == 'aperture' and step.2 == 'photometry' %}
                            Review aperture photometry diagnostics
                            {% url 'diagnostics:display_image_diagnostics' diagnostic_name='bg_center' as diagnostic_url %}
                            {% elif step.0 == 'fit' and step.1 == 'source' and step.2 == 'extracted' and step.4 == 'map' %}
                            Review source extraction PSF diagnostics
                            {% url 'diagnostics:display_image_diagnostics' diagnostic_name='s_center' as diagnostic_url %}
                            {% elif step.0 == 'fit' and step.1 == 'magnitudes' or step.0 == 'epd' or step.0 == 'tfa' or step.1 == 'epd' or step.1 == 'tfa' %}
                            Review magnitude fitting performance 
                            {% url 'diagnostics:display_detrending_diagnostics' as diagnostic_url %}
                            {% endif %}
                        </span>
                        {% if diagnostic_url %}
                        <a href="{{ diagnostic_url }}">
                        {% endif %}

                        <div id="progress-with-label">
                            <span style="width: {% widthratio final total 100 %}%;">
                                {{success}}/{{total}}
                                {% if failure > 0 %}
                                | {{failure}}/{{total}}
                                {% endif %}
                            </span>
                            <div class="progress-success" 
                                 style="width: {% widthratio success total 100 %}%">
                            </div>
                            <div class="progress-failure" 
                                 style="width: {% widthratio failure total 100 %}%">
                            </div>
                        </div>
                        {% if diagnostic_url %}
                        </a">
                        {% endif %}
                    </td>
                </tr>
                {% for status, count in by_status %}
                <tr>
                    <td class="lcars-u-1">Status {{ status }}</td>
                    <td>
                        <div id="progress-with-label" 
                             style="width: 100%">
                            <span style="width:{% widthratio count pending 100 %}%">
                                {{count}}/{{pending}}
                            </span>
                            <div class="progress-success" 
                                 style="width: {% widthratio count pending 100 %}%">
                            </div>
                        </div>
                    </td>

                </tr>
                {% endfor %}
            </table>
        </td>
        {% endwith %}
        {% endwith %}
        {% endfor %}
        <td class="dropdown">
            {% if runs %}
            <div class="dropbtn
                               lcars-element 
                               button 
                               rounded 
                               lcars-husk-bg
                               {% if forloop.first %}
                               tutorial-first-log
                               {% endif %}"
                 style="align-items: center;">
                Logs
            </div>
            <div class="dropdown-content">
                {% for run_id, started, finished in runs %}
                <a href="{% url 'processing:review' run_id 'INFO' %}"
                   class="dropdown-content">
                    Started {{started}}
                </a>
                {% endfor %}
            </div>
            {% endif %}
        </td>
    </tr>
    {% endfor %}
</table>

</form>

{% endblock main %}

{% block scripts %}
{# Moved all JS to static/processing/js/progress.js #}
{% endblock %}