{# Review queue component - displays entities one-at-a-time with approve/return actions #}
{# Contract: ~/.claude/skills/ux-architect/components/review-queue.md (UX-030) #}
{# v0.62 CSS refactor: inline Tailwind → semantic .dz-review-* shell + reuse
   .dz-detail-* primitives for the field list + .dz-button family for actions
   (components/fragments.css, components/detail.css, components/button.css). #}
{% if review %}
<div class="dz-review-shell" data-dazzle-entity="{{ review.entity_name }}" data-dazzle-review="true">
  {# Header with queue progress #}
  {% block review_header %}
  <div class="dz-detail-header">
    <div class="dz-detail-header-title">
      <a href="{{ review.back_url }}" class="dz-button dz-button-ghost">&larr; Back</a>
      <h2 class="dz-detail-title">{{ review.title }}</h2>
    </div>
    {% if review.queue_total > 0 %}
    <div class="dz-review-progress">
      <span class="dz-review-progress-text">
        {{ review.queue_position + 1 }} of {{ review.queue_total }}
      </span>
      <progress data-dz-progress class="dz-review-progress-bar"
                value="{{ review.queue_position + 1 }}"
                max="{{ review.queue_total }}"
                aria-hidden="true"></progress>
    </div>
    {% endif %}
  </div>
  {% endblock review_header %}

  {# Queue navigation #}
  {% block review_nav %}
  {% if review.prev_url or review.next_url %}
  <div class="dz-review-nav">
    {% if review.prev_url %}
    <a href="{{ review.prev_url }}"
       class="dz-button dz-button-ghost"
       hx-get="{{ review.prev_url }}" hx-push-url="true" hx-target="body" hx-swap="innerHTML">
      &larr; Previous
    </a>
    {% else %}
    <span></span>
    {% endif %}
    {% if review.next_url %}
    <a href="{{ review.next_url }}"
       class="dz-button dz-button-ghost"
       hx-get="{{ review.next_url }}" hx-push-url="true" hx-target="body" hx-swap="innerHTML">
      Next &rarr;
    </a>
    {% else %}
    <span></span>
    {% endif %}
  </div>
  {% endif %}
  {% endblock review_nav %}

  {# Item detail card #}
  {% block review_fields %}
  <div class="dz-detail-card">
    <div class="dz-detail-card-body">
      <dl class="dz-detail-list">
        {% for field in review.fields %}
        {% if field.visible | default(true) %}
        {% set value = review.item.get(field.name, "") %}
        <div class="dz-detail-row">
          <dt class="dz-detail-label">{{ field.label }}</dt>
          <dd class="dz-detail-value">
            {% if field.type == "badge" %}
              {% include 'fragments/status_badge.html' %}
            {% elif field.type == "bool" or field.type == "checkbox" %}
              {{ value | bool_icon }}
            {% elif field.type == "date" %}
              {{ value | dateformat }}
            {% elif field.type == "currency" or field.type == "money" %}
              {{ value | currency(field.extra.get('currency_code', 'GBP') if field.extra else 'GBP') }}
            {% elif field.type == "ref" %}
              {% if value is mapping %}{{ value.get("name") or value.get("title") or value.get("label") or value.get("email") or value.get("id", "—") }}{% elif value %}{{ value }}{% else %}&mdash;{% endif %}
            {% else %}
              {{ value | default("—") }}
            {% endif %}
          </dd>
        </div>
        {% endif %}
        {% endfor %}
      </dl>
    </div>
  </div>
  {% endblock review_fields %}

  {# Review actions #}
  {% block review_actions %}
  {% if review.actions %}
  <div class="dz-detail-card" style="margin-top: var(--space-md);">
    <div class="dz-detail-card-body">
      {# Notes textarea (shown when a return/reject action needs it) #}
      <div id="review-notes-container" class="dz-review-notes-wrap" hidden>
        <label for="review-notes" class="dz-review-notes-label">
          Notes
          <span class="dz-review-notes-required" aria-hidden="true">Required</span>
        </label>
        <textarea id="review-notes" name="{{ review.notes_field }}"
                  class="dz-review-notes-textarea"
                  rows="3"
                  placeholder="Reason for returning/rejecting..."></textarea>
      </div>

      <div class="dz-review-actions" data-dazzle-review-actions="{{ review.entity_name }}">
        {% for action in review.actions %}
        <button class="dz-button {% if action.style == 'primary' %}dz-button-primary{% elif action.style == 'error' %}dz-button-destructive{% else %}dz-button-outline{% endif %}"
                data-dazzle-action="{{ review.entity_name }}.review.{{ action.event }}"
                data-review-to-state="{{ action.to_state }}"
                data-review-require-notes="{{ 'true' if action.require_notes else 'false' }}"
                {% if action.transition_url %}
                hx-put="{{ action.transition_url }}"
                hx-vals='js:{
                  "{{ review.status_field }}": "{{ action.to_state }}",
                  ...( document.getElementById("review-notes")?.value
                       ? {"{{ review.notes_field }}": document.getElementById("review-notes").value}
                       : {} )
                }'
                hx-ext="json-enc"
                hx-target="body"
                hx-swap="innerHTML"
                hx-confirm="{% if action.style == 'error' %}Return this {{ review.entity_name | lower }} with notes?{% else %}{{ action.label }} this {{ review.entity_name | lower }}?{% endif %}"
                {% endif %}>
          {{ action.label }}
        </button>
        {% endfor %}
      </div>
    </div>
  </div>
  {% endif %}
  {% endblock review_actions %}

  {# Queue empty state #}
  {% if not review.item %}
  <div class="dz-detail-card" style="margin-top: var(--space-md);">
    <div class="dz-detail-card-body">
      <div class="dz-review-empty">
        <div class="dz-review-empty-icon" aria-hidden="true">&#10003;</div>
        <h3 class="dz-review-empty-title">Queue Complete</h3>
        <p class="dz-review-empty-body">All items have been reviewed.</p>
        <a href="{{ review.back_url }}" class="dz-button dz-button-primary">Return to list</a>
      </div>
    </div>
  </div>
  {% endif %}
</div>

<script>
// Toggle notes visibility when a "require notes" action button is focused/hovered
document.addEventListener('DOMContentLoaded', function() {
  const container = document.getElementById('review-notes-container');
  if (!container) return;

  document.querySelectorAll('[data-review-require-notes="true"]').forEach(btn => {
    btn.addEventListener('mouseenter', () => container.removeAttribute('hidden'));
    btn.addEventListener('focus', () => container.removeAttribute('hidden'));
  });
});
</script>
{% endif %}