{# Feedback components — built on the v0.4 classes in tusk-app.css
   (.chip, .alert, .empty, .modal-*). No colours live here: every macro
   maps to a token class, so light and dark themes come for free.

   Macros: badge, severity_badge, status_badge, alert, empty_state, modal
#}

{% macro badge(text, variant="info") %}
{# Small label. variant: critical|error|danger → rose, high|medium|warning → amber,
   low → violet, safe|success|ok → green, primary|brand → brand, anything else → neutral. #}
{% set chips = {
    "critical": "chip-rose", "error": "chip-rose", "danger": "chip-rose",
    "high": "chip-amber", "medium": "chip-amber", "warning": "chip-amber",
    "low": "chip-violet",
    "safe": "chip-green", "success": "chip-green", "ok": "chip-green",
    "primary": "chip-brand", "brand": "chip-brand",
    "info": "chip-neutral", "neutral": "chip-neutral"
} %}
<span class="chip {{ chips[variant] | default('chip-neutral') }}">{{ text }}</span>
{% endmacro %}


{% macro severity_badge(severity) %}
{# CRITICAL / HIGH / MEDIUM / LOW / SAFE, upper-cased. #}
{% set s = severity | lower %}
{% if s in ["critical", "high", "medium", "low"] %}
    {{ badge(severity | upper, s) }}
{% elif s in ["safe", "ok", "good"] %}
    {{ badge(severity | upper, "safe") }}
{% else %}
    {{ badge(severity, "info") }}
{% endif %}
{% endmacro %}


{% macro status_badge(status) %}
{# active/running/online → green, pending/queued → amber, failed/offline → rose, else neutral. #}
{% set s = status | lower %}
{% if s in ["active", "running", "online", "connected", "healthy", "success", "passed"] %}
    {{ badge(status, "success") }}
{% elif s in ["pending", "waiting", "queued", "warning"] %}
    {{ badge(status, "warning") }}
{% elif s in ["error", "failed", "offline", "disconnected", "unhealthy"] %}
    {{ badge(status, "error") }}
{% else %}
    {{ badge(status, "info") }}
{% endif %}
{% endmacro %}


{% macro alert(message, variant="info", dismissible=false, icon="") %}
{# Inline notice. variant: info | success | warning | error #}
{% set default_icons = {"info": "info", "success": "check-circle", "warning": "alert-triangle", "error": "circle-x"} %}
<div class="alert alert-{{ variant }}"
     {% if dismissible %}x-data="{ show: true }" x-show="show" x-transition{% endif %}>
    <i data-lucide="{{ icon or default_icons[variant] | default('info') }}"></i>
    <span class="flex-1">{{ message }}</span>
    {% if dismissible %}
    <button type="button" class="icon-btn" @click="show = false" aria-label="Dismiss">
        <i data-lucide="x"></i>
    </button>
    {% endif %}
</div>
{% endmacro %}


{% macro empty_state(message, icon="inbox", action_text="", action_url="", action_onclick="", title="") %}
{# Centered placeholder for lists with nothing in them. #}
<div class="empty">
    <i data-lucide="{{ icon }}"></i>
    {% if title %}<div class="empty-title">{{ title }}</div>{% endif %}
    <div>{{ message }}</div>
    {% if action_text %}
    <div class="mt-3">
        {% if action_url %}
        <a href="{{ action_url }}">{{ action_text }}</a>
        {% elif action_onclick %}
        <button type="button" onclick="{{ action_onclick }}">{{ action_text }}</button>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endmacro %}


{% macro modal(id, title, event="", max_width="max-w-lg", icon="", danger=false, close_event="") %}
{# Generic modal for arbitrary content. Use with {% call %}.
   Opens on `$dispatch('open-{id}')` (or `event`), closes on Escape, backdrop
   click, the × button or `close_event`.

   Usage:
       {% call modal(id="edit-user", title="Edit user", icon="user") %}
           <form>...</form>
       {% endcall %}
#}
{% set open_event = event or ("open-" ~ id) %}
<div id="{{ id }}"
     x-data="{ open: false }"
     x-show="open"
     x-on:{{ open_event }}.window="open = true"
     x-on:keydown.escape.window="open = false"
     {% if close_event %}x-on:{{ close_event }}.window="open = false"{% endif %}
     x-cloak
     class="modal-mask"
     @click.self="open = false"
     role="dialog" aria-modal="true" aria-labelledby="{{ id }}-title">
    <div class="modal-box {{ max_width }}"
         x-transition:enter="transition ease-out duration-150"
         x-transition:enter-start="opacity-0 scale-95"
         x-transition:enter-end="opacity-100 scale-100">
        <div class="modal-head {% if danger %}danger{% endif %}">
            <h3 id="{{ id }}-title">
                {% if icon %}<i data-lucide="{{ icon }}" class="w-4 h-4"></i>{% endif %}
                {{ title }}
            </h3>
            <button type="button" class="icon-btn" @click="open = false" aria-label="Close">
                <i data-lucide="x"></i>
            </button>
        </div>
        <div class="modal-body">
            {{ caller() }}
        </div>
    </div>
</div>
{% endmacro %}