{% extends 'pipeline/base.html' %}
{% load i18n %}

{% block page_title %}{{ flow.name }}{% endblock %}
{% block header_nav_brand %}{% trans "Pipeline" %}{% endblock header_nav_brand %}

{% block pipeline_content %}
<div class="pipeline-progress-strip">
    <div class="progress" role="progressbar" aria-label="{% trans 'Flow progress' %}"
         aria-valuenow="{{ total_pct }}" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar {% if total_pct == 100 %}bg-success{% endif %}" style="width: {{ total_pct }}%"></div>
    </div>
</div>

<div class="container-fluid py-3">

    <nav aria-label="{% trans 'Breadcrumb' %}">
        <ol class="breadcrumb mb-3">
            <li class="breadcrumb-item"><a href="{% url 'pipeline:index' %}">{% trans "Pipeline" %}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ flow.name }}</li>
        </ol>
    </nav>

    {# ── Flow header ─────────────────────────────────────────────────────── #}
    <div class="card mb-3">
        <div class="card-body d-flex flex-wrap align-items-center justify-content-between gap-3">
            <div class="min-w-0">
                <div class="d-flex flex-wrap align-items-center gap-2 mb-1">
                    <span class="badge pipeline-badge-type pipeline-type-{{ flow.flow_type }}">{{ flow.get_flow_type_display }}</span>
                    {% if flow.status == 'draft' %}
                        <span class="badge text-bg-warning"><i class="fas fa-pencil fa-fw me-1" aria-hidden="true"></i>{% trans "Draft preview" %}</span>
                    {% endif %}
                </div>
                <h1 class="h3 mb-1">{{ flow.name }}</h1>
                {% if flow.description %}
                    <p class="text-body-secondary mb-0">{{ flow.description }}</p>
                {% endif %}
            </div>
            <div class="d-flex align-items-center gap-3">
                <div class="text-end" style="min-width: 9rem;">
                    <div class="small text-body-secondary mb-1">
                        {% blocktrans with done=completed_count count total=total_count %}{{ done }} of {{ total }} step complete{% plural %}{{ done }} of {{ total }} steps complete{% endblocktrans %}
                    </div>
                    <div class="progress pipeline-thin" role="progressbar" aria-label="{% trans 'Flow progress' %}"
                         aria-valuenow="{{ total_pct }}" aria-valuemin="0" aria-valuemax="100">
                        <div class="progress-bar {% if total_pct == 100 %}bg-success{% endif %}" style="width: {{ total_pct }}%"></div>
                    </div>
                </div>
                {% if can_manage %}
                    <a href="{% url 'pipeline:manage_flow_edit' flow.slug %}" class="btn btn-sm btn-quiet" title="{% trans 'Edit this flow' %}">
                        <i class="fas fa-pen fa-fw" aria-hidden="true"></i><span class="visually-hidden">{% trans "Edit this flow" %}</span>
                    </a>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="row g-3">

        {# ===== Step list ===================================================== #}
        <div class="col-12 col-lg-4 col-xxl-3">
            <div class="card pipeline-stepper-card sticky-top" style="top: 1rem;">

                {# Phones: the step list collapses behind this header #}
                <button type="button" class="card-header d-lg-none border-0 text-start w-100 bg-transparent"
                        data-bs-toggle="collapse" data-bs-target="#pipelineSidebarBody"
                        aria-expanded="false" aria-controls="pipelineSidebarBody">
                    <span class="d-flex align-items-center justify-content-between">
                        <span class="fw-semibold"><i class="fas fa-list-ol fa-fw me-2" aria-hidden="true"></i>{% trans "All steps" %}</span>
                        <span class="d-flex align-items-center gap-2">
                            <span class="badge text-bg-secondary">{{ completed_count }}/{{ total_count }}</span>
                            <i class="fas fa-chevron-down fa-sm pipeline-collapse-icon" aria-hidden="true"></i>
                        </span>
                    </span>
                </button>

                <div id="pipelineSidebarBody" class="collapse d-lg-block">
                    <ol class="pipeline-stepper">
                        {% for s in steps %}
                            <li class="pipeline-stepper-item{% if s.complete %} is-complete{% endif %}{% if current and s.step.pk == current.step.pk %} is-current{% endif %}">
                                <a href="{{ s.url }}" class="pipeline-stepper-link"{% if current and s.step.pk == current.step.pk %} aria-current="step"{% endif %}>
                                    <span class="pipeline-stepper-marker">
                                        {% if s.complete %}
                                            <i class="fas fa-check" aria-hidden="true"></i><span class="visually-hidden">{% trans "Complete:" %}</span>
                                        {% else %}
                                            {{ forloop.counter }}
                                        {% endif %}
                                    </span>
                                    <span class="min-w-0 flex-grow-1">
                                        <span class="d-flex align-items-center gap-2">
                                            <span class="pipeline-stepper-name text-truncate">{{ s.step.name }}</span>
                                            {% if s.step.optional %}
                                                <span class="badge rounded-pill border text-body-secondary fw-normal">{% trans "Optional" %}</span>
                                            {% endif %}
                                        </span>
                                        {% if s.step.description %}
                                            <span class="pipeline-stepper-desc d-block text-truncate">{{ s.step.description }}</span>
                                        {% endif %}
                                        {% if not s.complete and s.effective_type == 'filter_check' and s.pct > 0 %}
                                            <span class="progress d-flex mt-1" style="height: 3px;" aria-hidden="true">
                                                <span class="progress-bar bg-warning" style="width: {% widthratio s.pct 1 100 %}%"></span>
                                            </span>
                                        {% endif %}
                                    </span>
                                </a>
                            </li>
                        {% endfor %}
                    </ol>
                </div>
            </div>
        </div>

        {# ===== Step content ================================================== #}
        <div class="col-12 col-lg-8 col-xxl-9">

            {% if all_complete and not current and steps %}
                {# ── Completion card ─────────────────────────────────────── #}
                <div class="card border-success pipeline-complete-card">
                    <div class="card-body text-center py-5">
                        <span class="pipeline-complete-icon mb-3"><i class="fas fa-check" aria-hidden="true"></i></span>
                        <h2 class="h4 text-success">{% trans "Flow complete" %}</h2>
                        {% if complete_body_html %}
                            <div class="pipeline-step-body mx-auto text-start mt-3">{{ complete_body_html|safe }}</div>
                        {% else %}
                            <p class="text-body-secondary mb-0">
                                {% blocktrans with name=flow.name %}You have completed every required step in <strong>{{ name }}</strong>. Well done!{% endblocktrans %}
                            </p>
                        {% endif %}
                    </div>
                    <div class="card-footer text-center bg-transparent">
                        <a href="{% url 'pipeline:index' %}" class="btn btn-success">
                            <i class="fas fa-arrow-left fa-fw me-1" aria-hidden="true"></i>{% trans "Back to Pipeline" %}
                        </a>
                    </div>
                </div>

            {% elif current %}
                {# ── Current step ─────────────────────────────────────────── #}
                <div class="card">
                    <div class="card-header bg-transparent py-3">
                        <div class="d-flex align-items-center gap-3">
                            {% if current.complete %}
                                <span class="pipeline-step-type-icon pipeline-tint-success"><i class="fas fa-circle-check" aria-hidden="true"></i></span>
                            {% elif current.effective_type == 'acknowledgement' %}
                                <span class="pipeline-step-type-icon pipeline-tint-info"><i class="fas fa-file-signature" aria-hidden="true"></i></span>
                            {% elif current.effective_type == 'service_check' %}
                                <span class="pipeline-step-type-icon pipeline-tint-warning"><i class="fas fa-plug" aria-hidden="true"></i></span>
                            {% else %}
                                <span class="pipeline-step-type-icon pipeline-tint-primary"><i class="fas fa-list-check" aria-hidden="true"></i></span>
                            {% endif %}
                            <div class="min-w-0 flex-grow-1">
                                <div class="pipeline-step-eyebrow">
                                    {% blocktrans with number=current_number total=total_count %}Step {{ number }} of {{ total }}{% endblocktrans %}
                                    · {{ current.step.get_step_type_display }}
                                    {% if current.step.optional %}· {% trans "Optional" %}{% endif %}
                                </div>
                                <h2 class="h5 mb-0">{{ current.step.name }}</h2>
                            </div>
                            {% if current.complete %}
                                <span class="badge rounded-pill text-bg-success"><i class="fas fa-check me-1" aria-hidden="true"></i>{% trans "Done" %}</span>
                            {% endif %}
                        </div>
                    </div>

                    <div class="card-body">
                        {% if current.body_html %}
                            <div class="pipeline-step-body{% if current.check_details or current.effective_type == 'service_check' %} mb-4{% endif %}">
                                {{ current.body_html|safe }}
                            </div>
                        {% elif not current.check_details and current.effective_type != 'service_check' %}
                            <p class="text-body-secondary mb-0">{% trans "There are no extra instructions for this step." %}</p>
                        {% endif %}

                        {# ── filter_check: requirements ───────────────────── #}
                        {% if current.effective_type == 'filter_check' and current.check_details %}
                            <h3 class="h6 text-body-secondary mb-2">{% trans "Requirements" %}</h3>
                            <ul class="list-group mb-0">
                                {% for check in current.check_details %}
                                    <li class="list-group-item d-flex align-items-center gap-3{% if check.passed %} pipeline-check-passed{% endif %}">
                                        {% if check.passed %}
                                            <i class="fas fa-circle-check fa-lg text-success flex-shrink-0" aria-hidden="true"></i>
                                            <span class="visually-hidden">{% trans "Met:" %}</span>
                                        {% else %}
                                            <i class="far fa-circle fa-lg text-danger flex-shrink-0" aria-hidden="true"></i>
                                            <span class="visually-hidden">{% trans "Not met yet:" %}</span>
                                        {% endif %}
                                        <span>{{ check.label }}</span>
                                    </li>
                                {% endfor %}
                            </ul>
                        {% endif %}

                        {# ── service_check: account status ────────────────── #}
                        {% if current.effective_type == 'service_check' %}
                            <div class="alert {% if current.complete %}alert-success{% else %}alert-warning{% endif %} d-flex align-items-center gap-3 mb-0" role="status">
                                <i class="fas {% if current.complete %}fa-circle-check{% else %}fa-plug{% endif %} fa-lg flex-shrink-0" aria-hidden="true"></i>
                                <div>
                                    {% blocktrans with slug=current.step.service_slug %}This step checks your <strong>{{ slug }}</strong> account.{% endblocktrans %}
                                    {% if current.complete %}
                                        <strong>{% trans "Your account is active." %}</strong>
                                    {% else %}
                                        <strong>{% trans "No active account found yet." %}</strong>
                                    {% endif %}
                                </div>
                            </div>
                        {% endif %}
                    </div>

                    {# ── Actions ──────────────────────────────────────────── #}
                    {% if not current.complete %}
                        <div class="card-footer">
                            {% if current.effective_type == 'acknowledgement' %}
                                <form method="post" action="{% url 'pipeline:step_action' flow.slug current.step.pk %}"
                                      class="d-flex flex-column flex-md-row align-items-md-center gap-3">
                                    {% csrf_token %}
                                    <input type="hidden" name="action" value="acknowledge">
                                    <div class="form-check mb-0 flex-grow-1">
                                        <input class="form-check-input" type="checkbox" id="ack-checkbox-{{ current.step.pk }}" required>
                                        <label class="form-check-label" for="ack-checkbox-{{ current.step.pk }}">
                                            {% trans "I have read and understood the above." %}
                                        </label>
                                    </div>
                                    <button type="submit" class="btn btn-primary text-nowrap">
                                        <i class="fas fa-check fa-fw me-1" aria-hidden="true"></i>{% trans "Acknowledge and continue" %}
                                    </button>
                                </form>
                            {% else %}
                                <form method="post" action="{% url 'pipeline:step_action' flow.slug current.step.pk %}"
                                      class="d-flex flex-column flex-md-row align-items-md-center gap-3">
                                    {% csrf_token %}
                                    <input type="hidden" name="action" value="refresh">
                                    <span class="text-body-secondary small flex-grow-1">
                                        {% if current.effective_type == 'service_check' %}
                                            {% trans "Set up your service account, then check again." %}
                                        {% else %}
                                            {% trans "Complete the requirements above, then check again. They may take a few minutes to update." %}
                                        {% endif %}
                                    </span>
                                    <button type="submit" class="btn btn-primary text-nowrap">
                                        <i class="fas fa-rotate-right fa-fw me-1" aria-hidden="true"></i>{% trans "Check again" %}
                                    </button>
                                </form>
                            {% endif %}
                        </div>
                    {% elif next_step and next_step.step.pk != current.step.pk %}
                        <div class="card-footer d-flex flex-wrap align-items-center justify-content-between gap-2">
                            <span class="text-success"><i class="fas fa-circle-check fa-fw me-1" aria-hidden="true"></i>{% trans "You've completed this step." %}</span>
                            <a href="{{ next_step.url }}" class="btn btn-primary">
                                {% blocktrans with name=next_step.step.name %}Continue to {{ name }}{% endblocktrans %}
                                <i class="fas fa-arrow-right fa-fw ms-1" aria-hidden="true"></i>
                            </a>
                        </div>
                    {% elif all_complete %}
                        <div class="card-footer d-flex flex-wrap align-items-center justify-content-between gap-2">
                            <span class="text-success"><i class="fas fa-circle-check fa-fw me-1" aria-hidden="true"></i>{% trans "Every required step is done." %}</span>
                            <a href="{% url 'pipeline:flow_detail' flow.slug %}" class="btn btn-success">
                                {% trans "See your completion summary" %}<i class="fas fa-arrow-right fa-fw ms-1" aria-hidden="true"></i>
                            </a>
                        </div>
                    {% endif %}
                </div>

                {# ── Previous / next ─────────────────────────────────────── #}
                {% if prev_item or next_item %}
                    <nav class="d-flex justify-content-between gap-2 mt-3" aria-label="{% trans 'Step navigation' %}">
                        {% if prev_item %}
                            <a href="{{ prev_item.url }}" class="btn btn-quiet text-truncate" style="max-width: 48%;">
                                <i class="fas fa-arrow-left fa-fw me-1" aria-hidden="true"></i>{{ prev_item.step.name }}
                            </a>
                        {% else %}
                            <span></span>
                        {% endif %}
                        {% if next_item %}
                            <a href="{{ next_item.url }}" class="btn btn-quiet text-truncate" style="max-width: 48%;">
                                {{ next_item.step.name }}<i class="fas fa-arrow-right fa-fw ms-1" aria-hidden="true"></i>
                            </a>
                        {% endif %}
                    </nav>
                {% endif %}

            {% else %}
                <div class="card">
                    <div class="card-body text-center py-5 text-body-secondary">
                        <i class="fas fa-list-ol fa-2x mb-3 d-block" aria-hidden="true"></i>
                        {% trans "This flow has no steps yet." %}
                    </div>
                </div>
            {% endif %}

        </div>
    </div>
</div>
{% endblock pipeline_content %}