{#- Shared, reusable Control Plane components.

    brand_mark(size)          RAGCore's local, inline product mark
    badge(label, tone)        tone: ok | warn | error | neutral | info
    identifier(value, id)     human-secondary UUID/hash with a copy action
    pagination(total, limit, offset, base_url, query)
    empty_state(title, body, action_url=None, action_label=None)
    toolbar(...)              search + filter form wrapper (caller renders fields)
    operations_journey(...)   source -> document -> processing navigation
    kv(label, value)          definition row for overview panels
-#}

{% macro brand_mark(size="md") -%}
<span class="brand-mark brand-mark--{{ size }}" aria-hidden="true">
  <svg viewBox="0 0 40 40" role="img" focusable="false">
    <path class="brand-mark__frame" d="M13 7H8v26h5M27 7h5v26h-5" />
    <path class="brand-mark__link" d="M15 14.5h10M15 25.5h10M15 14.5l10 11M25 14.5l-10 11" />
    <circle class="brand-mark__node" cx="15" cy="14.5" r="2.5" />
    <circle class="brand-mark__node" cx="25" cy="14.5" r="2.5" />
    <circle class="brand-mark__node" cx="15" cy="25.5" r="2.5" />
    <circle class="brand-mark__node" cx="25" cy="25.5" r="2.5" />
  </svg>
</span>
{%- endmacro %}

{% macro badge(label, tone="neutral") -%}
{%- set tones = {
  "ok": "bg-tertiary-container/10 border-tertiary-container/20 text-tertiary",
  "warn": "bg-primary-container/10 border-primary-container/30 text-primary",
  "error": "bg-error-container/10 border-error-container/20 text-error",
  "info": "bg-secondary-container/10 border-secondary-container/20 text-secondary",
  "neutral": "bg-surface-variant border-outline text-on-surface-variant",
} -%}
{%- set icons = {"ok": "check_circle", "warn": "warning", "error": "error", "info": "info", "neutral": "pending"} -%}
<span class="inline-flex items-center gap-xs px-2 py-0.5 rounded-full border text-label-caps font-label-caps uppercase whitespace-nowrap {{ tones.get(tone, tones['neutral']) }}" data-status-tone="{{ tone if tone in tones else 'neutral' }}"><span class="material-symbols-outlined status-badge__icon" aria-hidden="true">{{ icons.get(tone, icons['neutral']) }}</span>{{ label }}</span>
{%- endmacro %}

{% macro _journey_step(url, label, icon, key, current) -%}
<li class="operations-journey__step {{ 'is-current' if current == key else '' }}">
  {% if url %}<a href="{{ url }}" title="{{ label }}" {% if current == key %}aria-current="page"{% endif %}>
  {% else %}<span title="{{ label }}" {% if current == key %}aria-current="page"{% endif %}>
  {% endif %}
    <span class="material-symbols-outlined" aria-hidden="true">{{ icon }}</span>
    <span>{{ label }}</span>
  {% if url %}</a>{% else %}</span>{% endif %}
</li>
{%- endmacro %}

{% macro operations_journey(source_url="/admin/sources", source_label="Sources", document_url="/admin/documents", document_label="Documents", job_url="/admin/jobs", job_label="Processing", current=None) -%}
<nav class="operations-journey" aria-label="Source to search journey" data-operations-journey="source-to-search">
  <p>Knowledge flow</p>
  <ol>
    {{ _journey_step(source_url, source_label, "hub", "source", current) }}
    {{ _journey_step(document_url, document_label, "description", "document", current) }}
    {{ _journey_step(job_url, job_label, "manufacturing", "job", current) }}
  </ol>
</nav>
{%- endmacro %}

{% macro identifier(value, id=None, short=8) -%}
{%- set field_id = id or ("id-" ~ (value | string | replace("-", ""))[:12]) -%}
<span class="inline-flex items-center gap-xs min-w-0">
  <span class="text-code-sm font-code-sm text-on-surface-variant truncate" title="{{ value }}">{{ (value | string)[:short] }}…</span>
  <input type="hidden" id="{{ field_id }}" value="{{ value }}">
  <button type="button" data-copy-target="{{ field_id }}" class="btn-ghost rounded-DEFAULT px-1.5 py-0.5 text-code-sm font-code-sm" aria-label="Copy identifier {{ value }}"><span data-copy-label>Copy</span></button>
</span>
{%- endmacro %}

{% macro pagination(total, limit, offset, base_url, query="") -%}
{%- set shown_from = offset + 1 if total else 0 -%}
{%- set shown_to = [offset + limit, total] | min -%}
<nav aria-label="Pagination" class="flex flex-col md:flex-row md:items-center justify-between gap-sm px-md py-sm border-t border-[#1E293B] text-body-sm font-body-sm text-on-surface-variant">
  <p>Showing {{ shown_from }}–{{ shown_to }} of {{ total }}</p>
  <div class="flex items-center gap-sm">
    {% if offset > 0 %}
    <a class="btn-ghost px-md py-xs rounded-DEFAULT" href="{{ base_url }}?{{ query }}{{ '&' if query else '' }}offset={{ [offset - limit, 0] | max }}&amp;limit={{ limit }}">Previous</a>
    {% else %}
    <span class="btn-ghost px-md py-xs rounded-DEFAULT opacity-50" aria-disabled="true">Previous</span>
    {% endif %}
    {% if offset + limit < total %}
    <a class="btn-ghost px-md py-xs rounded-DEFAULT" href="{{ base_url }}?{{ query }}{{ '&' if query else '' }}offset={{ offset + limit }}&amp;limit={{ limit }}">Next</a>
    {% else %}
    <span class="btn-ghost px-md py-xs rounded-DEFAULT opacity-50" aria-disabled="true">Next</span>
    {% endif %}
  </div>
</nav>
{%- endmacro %}

{% macro empty_state(title, body, action_url=None, action_label=None, icon="inbox") -%}
<div class="glass-panel rounded-lg p-lg text-center" role="status">
  <span class="material-symbols-outlined text-on-surface-variant text-[32px]" aria-hidden="true">{{ icon }}</span>
  <h2 class="text-headline-md font-headline-md text-on-surface mt-sm mb-xs">{{ title }}</h2>
  <p class="text-body-md font-body-md text-on-surface-variant max-w-xl mx-auto">{{ body }}</p>
  {% if action_url %}
  <a href="{{ action_url }}" class="btn-primary inline-flex items-center gap-xs px-md py-sm rounded-DEFAULT text-body-sm font-headline-md mt-md">{{ action_label }}</a>
  {% endif %}
</div>
{%- endmacro %}

{% macro toolbar(action, label="Filter") -%}
<form method="get" action="{{ action }}" role="search" aria-label="{{ label }}" class="filter-toolbar flex flex-wrap items-end gap-sm px-md py-sm border-b border-[#1E293B]">
  {{ caller() }}
  <button type="submit" class="btn-ghost px-md py-sm rounded-DEFAULT text-body-sm font-headline-md">Apply</button>
  <a href="{{ action }}" class="text-body-sm font-body-sm text-on-surface-variant hover:text-primary px-sm py-sm">Reset</a>
</form>
{%- endmacro %}

{% macro kv(label, value, mono=False) -%}
<div class="flex flex-col gap-xs py-sm border-b border-[#1E293B] last:border-b-0">
  <dt class="text-label-caps font-label-caps text-on-surface-variant uppercase tracking-wider">{{ label }}</dt>
  <dd class="{{ 'text-code-sm font-code-sm break-all' if mono else 'text-body-md font-body-md' }} text-on-surface">{{ value if value is not none and value != "" else "—" }}</dd>
</div>
{%- endmacro %}

{% macro field(id, label, hint=None) -%}
<div>
  <label for="{{ id }}" class="block text-body-md font-body-md font-semibold text-on-surface mb-xs">{{ label }}</label>
  {{ caller() }}
  {% if hint %}<p class="text-body-sm font-body-sm text-on-surface-variant mt-xs">{{ hint }}</p>{% endif %}
</div>
{%- endmacro %}