{# Status components — dots, stage strips and icons for job/run states.
   Colours come from `.dot` (tusk-app.css): green, amber, red, violet, neutral.

   Macros: status_dot, stage_dots, progress_stages, status_icon
#}

{% macro status_dot(status, size="sm", animate=true) %}
{# success/ok/healthy → green · failed/error → red · running/active → amber (pulses)
   pending/queued → violet · cancelled/paused/skipped → neutral #}
{% set s = status | lower %}
{% if s in ["success", "ok", "healthy", "online", "passed", "connected"] %}{% set tone = "green" %}
{% elif s in ["failed", "error", "unhealthy", "offline"] %}{% set tone = "red" %}
{% elif s in ["running", "active", "warning"] %}{% set tone = "amber" %}
{% elif s in ["pending", "waiting", "queued"] %}{% set tone = "violet" %}
{% else %}{% set tone = "neutral" %}{% endif %}
<span class="dot {{ tone }} {% if size == 'xs' %}dot-xs{% elif size == 'md' %}dot-md{% endif %} {% if animate and s == 'running' %}pulse{% endif %}" title="{{ status }}"></span>
{% endmacro %}


{% macro stage_dots(stages, size="xs") %}
{# Row of tiny dots, one per stage (objects or dicts with a `status`). #}
<span class="inline-flex items-center gap-1">
{% for s in stages %}{{ status_dot(s.status, size=size, animate=false) }}{% endfor %}
</span>
{% endmacro %}


{% macro progress_stages(stages) %}
{# Segmented progress strip: one segment per stage (`stage_name`, `status`). #}
{% if stages | length > 0 %}
<div class="card px-4 py-3">
    <div class="flex items-center gap-1">
        {% for stage in stages %}
        {% set st = stage.status | lower %}
        <div class="flex-1 h-2 rounded-full"
             style="background: {% if st == 'success' %}var(--green){% elif st in ['failed', 'error'] %}var(--red){% elif st == 'running' %}var(--accent-amber){% else %}var(--surface-3){% endif %}"
             title="{{ stage.stage_name }}: {{ stage.status }}"></div>
        {% endfor %}
    </div>
    <div class="flex justify-between mt-1 text-[10px] text-fg-4">
        <span>{{ stages[0].stage_name }}</span>
        {% if stages | length > 1 %}<span>{{ stages[-1].stage_name }}</span>{% endif %}
    </div>
</div>
{% endif %}
{% endmacro %}


{% macro status_icon(status, size="sm") %}
{# Round icon badge for a stage state. size: sm (24px) | md (32px) #}
{% set box = "w-8 h-8" if size == "md" else "w-6 h-6" %}
{% set ico = "w-4 h-4" if size == "md" else "w-3.5 h-3.5" %}
{% set s = status | lower %}
{% if s == "success" %}
<span class="{{ box }} rounded-full chip-green inline-flex items-center justify-center flex-shrink-0"><i data-lucide="check" class="{{ ico }}"></i></span>
{% elif s in ["failed", "error"] %}
<span class="{{ box }} rounded-full chip-rose inline-flex items-center justify-center flex-shrink-0"><i data-lucide="x" class="{{ ico }}"></i></span>
{% elif s == "running" %}
<span class="{{ box }} rounded-full chip-amber inline-flex items-center justify-center flex-shrink-0"><i data-lucide="loader-2" class="{{ ico }} animate-spin"></i></span>
{% elif s == "skipped" %}
<span class="{{ box }} rounded-full chip-neutral inline-flex items-center justify-center flex-shrink-0"><i data-lucide="skip-forward" class="{{ ico }}"></i></span>
{% else %}
<span class="{{ box }} rounded-full chip-neutral inline-flex items-center justify-center flex-shrink-0"><span class="dot neutral"></span></span>
{% endif %}
{% endmacro %}