{% load static %}
<div class="bg-white border border-stone-200 rounded-xl p-6 shadow-sm">
  <div class="flex items-center justify-between pb-4 border-b border-stone-200 mb-6">
    <div>
      <h2 class="text-xl font-bold text-stone-900">Preview de Contexto de IA</h2>
      <p class="text-xs text-stone-500 mt-1">Revisão e confirmação humana do snapshot de referências para contextualização de inteligência artificial.</p>
    </div>
    <a href="{% url 'curation:index' workspace_id=workspace.id %}?tab=context" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-stone-700 bg-stone-100 hover:bg-stone-200 rounded-lg transition">
      &larr; Voltar à Curadoria
    </a>
  </div>

  <!-- Snapshot Metadata -->
  <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
    <div class="bg-stone-50 border border-stone-100 rounded-lg p-3">
      <span class="text-xs text-stone-500 uppercase font-semibold">Revisão Esperada</span>
      <div class="text-lg font-bold text-stone-900 mt-1">v{{ preview.expected_revision }}</div>
    </div>
    <div class="bg-stone-50 border border-stone-100 rounded-lg p-3">
      <span class="text-xs text-stone-500 uppercase font-semibold">Itens no Snapshot</span>
      <div class="text-lg font-bold text-stone-900 mt-1">{{ items|length }}</div>
    </div>
    <div class="bg-stone-50 border border-stone-100 rounded-lg p-3 md:col-span-2">
      <span class="text-xs text-stone-500 uppercase font-semibold">Snapshot Hash (SHA-256)</span>
      <div class="text-xs font-mono text-stone-800 break-all mt-1 bg-white p-1 rounded border border-stone-200">{{ preview.snapshot_hash }}</div>
    </div>
  </div>

  <div class="mb-6">
    <span class="text-xs text-stone-500 uppercase font-semibold">Preview Binding</span>
    <div class="text-xs font-mono text-stone-700 break-all mt-1 bg-stone-50 p-2 rounded border border-stone-200">{{ preview.preview_binding }}</div>
  </div>

  <!-- Reviewable Snapshot Items Payload -->
  <div class="mb-8">
    <h3 class="text-sm font-semibold text-stone-900 uppercase tracking-wider mb-3">Conteúdo do Snapshot para Revisão</h3>
    {% if items %}
    <div class="space-y-4">
      {% for item in items %}
      <div class="bg-stone-50 border border-stone-200 rounded-lg p-4">
        <div class="flex items-center justify-between mb-2">
          <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {% if item.source_type == 'profile' %}bg-purple-100 text-purple-800{% else %}bg-blue-100 text-blue-800{% endif %}">
            {{ item.source_type|upper }}
          </span>
          <span class="text-xs text-stone-400">{{ item.observed_at }}</span>
        </div>
        <div class="text-sm text-stone-800 whitespace-pre-wrap font-sans bg-white p-3 rounded border border-stone-100 mb-2">{{ item.text }}</div>
        <div class="text-xs text-stone-500">
          <span class="font-medium">Origem:</span>
          <a href="{{ item.source_url }}" target="_blank" rel="noopener noreferrer" class="text-orange-600 hover:underline">
            {{ item.source_url }}
          </a>
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-6 bg-stone-50 rounded-lg border border-dashed border-stone-200 text-xs text-stone-500">
      Nenhum item selecionado para este snapshot.
    </div>
    {% endif %}
  </div>

  <!-- Step 1: Confirmation Form -->
  <div class="border-t border-stone-200 pt-6">
    <h3 class="text-sm font-semibold text-stone-900 mb-2">Passo 1: Confirmar Snapshot com Assinatura Criptográfica</h3>
    <p class="text-xs text-stone-500 mb-4">Emite um recibo assinado no servidor vinculando sua sessão humana a este snapshot.</p>
    
    <form method="post" action="{% url 'curation:context_confirm' workspace_id=workspace.id %}" id="context-confirm-form" class="space-y-4">
      {% csrf_token %}
      <input type="hidden" name="expected_revision" value="{{ preview.expected_revision }}">
      <input type="hidden" name="expected_snapshot_hash" value="{{ preview.snapshot_hash }}">
      <input type="hidden" name="preview_binding" value="{{ preview.preview_binding }}">
      <input type="hidden" name="idempotency_key" value="context-r{{ preview.expected_revision }}-{{ preview.snapshot_hash|slice:':16' }}">
      {% for rid in preview.selected_reference_ids %}
      <input type="hidden" name="selected_reference_ids" value="{{ rid }}">
      {% endfor %}
      {% for aid in preview.selected_aspect_ids %}
      <input type="hidden" name="selected_aspect_ids" value="{{ aid }}">
      {% endfor %}

      <div class="flex items-center gap-3">
        <button type="submit" class="px-4 py-2 text-sm font-semibold text-white bg-orange-600 hover:bg-orange-700 rounded-lg shadow-sm transition">
          Confirmar e Emitir Recibo
        </button>
      </div>
    </form>
  </div>

  <!-- Step 2: Approval Form -->
  <div class="border-t border-stone-200 pt-6 mt-6">
    <h3 class="text-sm font-semibold text-stone-900 mb-2">Passo 2: Aprovar Contexto de Referências</h3>
    <p class="text-xs text-stone-500 mb-4">Insere o recibo emitido e grava a aprovação imutável no banco de dados.</p>

    <form method="post" action="{% url 'curation:context_approve' workspace_id=workspace.id %}" id="context-approve-form" class="space-y-4">
      {% csrf_token %}
      <input type="hidden" name="expected_revision" value="{{ preview.expected_revision }}">
      <input type="hidden" name="expected_snapshot_hash" value="{{ preview.snapshot_hash }}">
      <input type="hidden" name="preview_binding" value="{{ preview.preview_binding }}">
      <input type="hidden" name="idempotency_key" value="context-r{{ preview.expected_revision }}-{{ preview.snapshot_hash|slice:':16' }}">
      {% for rid in preview.selected_reference_ids %}
      <input type="hidden" name="selected_reference_ids" value="{{ rid }}">
      {% endfor %}
      {% for aid in preview.selected_aspect_ids %}
      <input type="hidden" name="selected_aspect_ids" value="{{ aid }}">
      {% endfor %}

      <div>
        <label class="block text-xs font-semibold text-stone-700 uppercase mb-1">Recibo de Confirmação (Token Assinado)</label>
        <textarea name="confirmation_receipt" required placeholder="Cole aqui o recibo emitido no Passo 1..." rows="2" class="w-full px-3 py-2 text-xs font-mono border border-stone-300 rounded-lg focus:ring-2 focus:ring-orange-500"></textarea>
      </div>

      <div>
        <label class="block text-xs font-semibold text-stone-700 uppercase mb-1">Notas da Aprovação (Opcional)</label>
        <input type="text" name="notes" placeholder="ex: Aprovado para campanha Outubro" class="w-full px-3 py-2 text-xs border border-stone-300 rounded-lg focus:ring-2 focus:ring-orange-500">
      </div>

      <button type="submit" class="px-4 py-2 text-sm font-semibold text-white bg-stone-900 hover:bg-stone-800 rounded-lg shadow-sm transition">
        Aprovar Contexto Definitivamente
      </button>
    </form>
  </div>
</div>