{# Review queue component - displays entities one-at-a-time with approve/return actions #}
{# Contract: ~/.claude/skills/ux-architect/components/review-queue.md (UX-030) #}
{% if review %}
<div class="max-w-4xl" data-dazzle-entity="{{ review.entity_name }}" data-dazzle-review="true">
  {# Header with queue progress #}
  {% block review_header %}
  <div class="flex items-center justify-between mb-6">
    <div class="flex items-center gap-3">
      <a href="{{ review.back_url }}"
         class="h-8 px-3 rounded-[4px] text-[13px] font-medium text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--muted))] hover:text-[hsl(var(--foreground))] inline-flex items-center transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]">&larr; Back</a>
      <h2 class="text-[18px] font-semibold text-[hsl(var(--foreground))]">{{ review.title }}</h2>
    </div>
    {% if review.queue_total > 0 %}
    <div class="flex items-center gap-2">
      <span class="text-[12px] text-[hsl(var(--muted-foreground))]">
        {{ review.queue_position + 1 }} of {{ review.queue_total }}
      </span>
      <progress data-dz-progress class="w-24 h-1 rounded-[2px]"
                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="flex justify-between mb-4">
    {% if review.prev_url %}
    <a href="{{ review.prev_url }}"
       class="h-8 px-3 rounded-[4px] text-[13px] font-medium text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--muted))] hover:text-[hsl(var(--foreground))] inline-flex items-center transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
       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="h-8 px-3 rounded-[4px] text-[13px] font-medium text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--muted))] hover:text-[hsl(var(--foreground))] inline-flex items-center transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
       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="bg-[hsl(var(--card))] border border-[hsl(var(--border))] rounded-[6px] shadow-[0_1px_3px_rgb(0_0_0/0.04)]">
    <div class="p-4">
      <dl class="divide-y divide-[hsl(var(--border))]">
        {% for field in review.fields %}
        {% if field.visible | default(true) %}
        {% set value = review.item.get(field.name, "") %}
        <div class="py-3 sm:grid sm:grid-cols-3 sm:gap-4">
          <dt class="text-[13px] font-medium text-[hsl(var(--muted-foreground))]">{{ field.label }}</dt>
          <dd class="mt-1 text-[13px] text-[hsl(var(--foreground))] sm:col-span-2 sm:mt-0">
            {% 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", "\u2014") }}{% elif value %}{{ value }}{% else %}&mdash;{% endif %}
            {% else %}
              {{ value | default("\u2014") }}
            {% endif %}
          </dd>
        </div>
        {% endif %}
        {% endfor %}
      </dl>
    </div>
  </div>
  {% endblock review_fields %}

  {# Review actions #}
  {% block review_actions %}
  {% if review.actions %}
  <div class="bg-[hsl(var(--card))] border border-[hsl(var(--border))] rounded-[6px] shadow-[0_1px_3px_rgb(0_0_0/0.04)] mt-4">
    <div class="p-4">
      {# Notes textarea (shown when a return/reject action needs it) #}
      <div id="review-notes-container" class="hidden mb-4">
        <label for="review-notes" class="block text-[13px] font-medium text-[hsl(var(--foreground))] mb-1">
          Notes
          <span class="text-[12px] font-normal text-[hsl(var(--destructive))] ml-1" aria-hidden="true">Required</span>
        </label>
        <textarea id="review-notes" name="{{ review.notes_field }}"
                  class="w-full px-3 py-2 min-h-24 resize-y rounded-[4px] bg-[hsl(var(--background))] border border-[hsl(var(--border))] text-[13px] text-[hsl(var(--foreground))] placeholder:text-[hsl(var(--muted-foreground))] focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))] transition-[box-shadow,border-color] duration-[120ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
                  rows="3"
                  placeholder="Reason for returning/rejecting..."></textarea>
      </div>

      <div class="flex gap-2 justify-end" data-dazzle-review-actions="{{ review.entity_name }}">
        {% for action in review.actions %}
        <button class="h-8 px-3 rounded-[4px] border text-[13px] font-medium inline-flex items-center transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]
          {% if action.style == 'primary' %}
            bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] border-[hsl(var(--primary))] hover:brightness-110
          {% elif action.style == 'error' %}
            border-[hsl(var(--destructive))] text-[hsl(var(--destructive))] hover:bg-[hsl(var(--destructive)/0.1)]
          {% else %}
            border-[hsl(var(--border))] text-[hsl(var(--foreground))] hover:bg-[hsl(var(--muted))]
          {% 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="bg-[hsl(var(--card))] border border-[hsl(var(--border))] rounded-[6px] shadow-[0_1px_3px_rgb(0_0_0/0.04)] mt-4">
    <div class="p-4 text-center py-12">
      <div class="text-[48px] mb-2" aria-hidden="true">&#10003;</div>
      <h3 class="text-[16px] font-semibold text-[hsl(var(--foreground))] mb-1">Queue Complete</h3>
      <p class="text-[13px] text-[hsl(var(--muted-foreground))]">All items have been reviewed.</p>
      <a href="{{ review.back_url }}"
         class="h-8 px-3 rounded-[4px] bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] border border-[hsl(var(--primary))] text-[13px] font-medium hover:brightness-110 inline-flex items-center mt-4 transition-[filter] duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]">Return to list</a>
    </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(inline-flex items-center font-medium rounded-[4px] transition-colors duration-[80ms] => {
    inline-flex items-center font-medium rounded-[4px] transition-colors duration-[80ms].addEventListener('mouseenter', () => container.classList.remove('hidden'));
    inline-flex items-center font-medium rounded-[4px] transition-colors duration-[80ms].addEventListener('focus', () => container.classList.remove('hidden'));
  });
});
</script>
{% endif %}