{% 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 calibration diagnostics
                            {% comment %} One section per recorded
                               quantile, there being no single name for
                               the family any more. No link at all until
                               one is recorded, as with the bars whose
                               steps have not run. {% endcomment %}
                            {% if quantile_quantities %}
                            {% url 'diagnostics:display_diagnostics' x_quantity='jd' y_quantities=quantile_quantities as diagnostic_url %}
                            {% endif %}
                            {% elif step.0 == 'find' and step.1 == 'stars' %}
                            Review star finding diagnostics
                            {% url 'diagnostics:display_diagnostics' x_quantity='jd' y_quantities='num_extracted_src' as diagnostic_url %}

                            {% elif step.0 == 'solve' and step.1 == 'astrometry' %}
                            Review astrometry diagnostics
                            {% url 'diagnostics:display_diagnostics' x_quantity='jd' y_quantities='pointing_offset' as diagnostic_url %}
                            {% elif step.0 == 'fit' and step.1 == 'star' and step.2 == 'shape' %}
                            Review star shape fit diagnostics
                            {% url 'diagnostics:display_diagnostics' x_quantity='jd' y_quantities='bg_center' as diagnostic_url %}
                            {% elif step.0 == 'measure' and step.1 == 'aperture' and step.2 == 'photometry' %}
                            Review aperture photometry diagnostics
                            {% url 'diagnostics:display_diagnostics' x_quantity='jd' y_quantities='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_diagnostics' x_quantity='jd' y_quantities='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 %}