{% extends "base.html" %}
{% load static %}

{% block title %}Curadoria e Referências - {{ workspace.name }} - Redea Social{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8" x-data="{
  activeTab: '{% if active_tab == 'profiles' %}profiles{% elif active_tab == 'context' %}context{% else %}references{% endif %}',
  showAddRefModal: false,
  showAddProfileModal: false
}">
  <!-- Page Header -->
  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between pb-6 border-b border-stone-200 gap-4">
    <div>
      <h1 class="text-2xl font-bold tracking-tight text-stone-900">Curadoria & Referências</h1>
      <p class="text-sm text-stone-500 mt-1">Biblioteca de referências criativas, perfis estratégicos e contexto de IA do cliente.</p>
    </div>
    <div class="flex items-center gap-3">
      <!-- Native Sync Control: explicitly disabled with explanation -->
      <div class="relative group" title="Sincronização nativa desabilitada nesta versão (leitura manual apenas)">
        <button type="button" disabled class="inline-flex items-center gap-2 px-3.5 py-2 text-xs font-semibold text-stone-400 bg-stone-100 border border-stone-200 rounded-lg cursor-not-allowed opacity-75">
          <svg class="w-4 h-4 text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
          Sincronizar Salvos
        </button>
        <span class="sr-only">Sincronização nativa desabilitada nesta versão (conector nativo isolado)</span>
      </div>

      <button type="button" @click="showAddRefModal = true" class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-white bg-orange-600 hover:bg-orange-700 rounded-lg shadow-sm transition">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
        Salvar Referência
      </button>

      <button type="button" @click="showAddProfileModal = true" class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-stone-700 bg-white border border-stone-300 hover:bg-stone-50 rounded-lg shadow-sm transition">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
        Salvar Perfil
      </button>
    </div>
  </div>

  <!-- Tabbed Container (Consolidation Pattern) -->
  <div class="mt-6">
    <div class="border-b border-stone-200">
      <nav class="-mb-px flex space-x-8" aria-label="Tabs">
        <button type="button" @click="activeTab = 'references'" :class="activeTab === 'references' ? 'border-orange-600 text-orange-600' : 'border-transparent text-stone-500 hover:text-stone-700 hover:border-stone-300'" class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm flex items-center gap-2">
          <span>Referências Salvas</span>
          <span class="bg-stone-100 text-stone-600 text-xs py-0.5 px-2 rounded-full">{{ total_references }}</span>
        </button>
        <button type="button" @click="activeTab = 'profiles'" :class="activeTab === 'profiles' ? 'border-orange-600 text-orange-600' : 'border-transparent text-stone-500 hover:text-stone-700 hover:border-stone-300'" class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm flex items-center gap-2">
          <span>Perfis de Referência</span>
          <span class="bg-stone-100 text-stone-600 text-xs py-0.5 px-2 rounded-full">{{ total_profiles }}</span>
        </button>
        <button type="button" @click="activeTab = 'context'" :class="activeTab === 'context' ? 'border-orange-600 text-orange-600' : 'border-transparent text-stone-500 hover:text-stone-700 hover:border-stone-300'" class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm flex items-center gap-2">
          <span>Aprovação de Contexto</span>
          <span class="bg-stone-100 text-stone-600 text-xs py-0.5 px-2 rounded-full">Rev. {{ current_revision }}</span>
        </button>
      </nav>
    </div>

    <!-- Filter & Search Toolbar -->
    <div class="py-4 flex flex-col sm:flex-row gap-3 items-center justify-between">
      <form method="get" class="w-full sm:w-80 flex items-center relative">
        <input type="hidden" name="tab" :value="activeTab">
        <input type="text" name="q" value="{{ query }}" placeholder="Buscar referências ou perfis..." class="w-full pl-9 pr-4 py-2 text-sm bg-white border border-stone-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent">
        <svg class="w-4 h-4 text-stone-400 absolute left-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
      </form>

      <div class="flex items-center gap-2 w-full sm:w-auto overflow-x-auto">
        <template x-if="activeTab === 'references'">
          <div class="flex items-center gap-1">
            <a href="?tab=references" class="px-3 py-1 rounded-full text-xs font-medium border {% if not current_folder %}bg-orange-50 text-orange-700 border-orange-200{% else %}bg-white text-stone-600 border-stone-200{% endif %}">
              Todas as Pastas
            </a>
            {% for f in folders %}
            <a href="?tab=references&folder={{ f.id }}" class="px-3 py-1 rounded-full text-xs font-medium border {% if current_folder == f.id|stringformat:'s' %}bg-orange-50 text-orange-700 border-orange-200{% else %}bg-white text-stone-600 border-stone-200{% endif %}">
              {{ f.name }}
            </a>
            {% endfor %}
          </div>
        </template>

        <template x-if="activeTab === 'profiles'">
          <div class="flex items-center gap-1">
            <a href="?tab=profiles" class="px-3 py-1 rounded-full text-xs font-medium border {% if not current_category %}bg-orange-50 text-orange-700 border-orange-200{% else %}bg-white text-stone-600 border-stone-200{% endif %}">
              Todas as Listas
            </a>
            {% for c in categories %}
            <a href="?tab=profiles&category={{ c.name|urlencode }}" class="px-3 py-1 rounded-full text-xs font-medium border {% if current_category == c.name %}bg-orange-50 text-orange-700 border-orange-200{% else %}bg-white text-stone-600 border-stone-200{% endif %}">
              {{ c.name }}
            </a>
            {% endfor %}
          </div>
        </template>
      </div>
    </div>

    <!-- Tab 1: Referências Salvas -->
    <div x-show="activeTab === 'references'" class="mt-4">
      {% include "curation/_references_list.html" %}
    </div>

    <!-- Tab 2: Perfis de Referência -->
    <div x-show="activeTab === 'profiles'" class="mt-4" style="display: none;">
      {% include "curation/_profiles_list.html" %}
    </div>

    <!-- Tab 3: Aprovação de Contexto -->
    <div x-show="activeTab === 'context'" class="mt-4" style="display: none;">
      <div class="bg-white border border-stone-200 rounded-xl p-6 shadow-sm">
        <h3 class="text-base font-semibold text-stone-900 mb-2">Base Aprovada de Referências para IA</h3>
        <p class="text-sm text-stone-500 mb-6">A geração de texto (legendas e roteiros) consome exclusivamente os itens aprovados da base na revisão congelada.</p>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
          <div class="bg-stone-50 border border-stone-100 rounded-lg p-4">
            <span class="text-xs text-stone-500 font-medium uppercase">Revisão Atual</span>
            <div class="text-2xl font-bold text-stone-900 mt-1">v{{ current_revision }}</div>
          </div>
          <div class="bg-stone-50 border border-stone-100 rounded-lg p-4">
            <span class="text-xs text-stone-500 font-medium uppercase">Total de Referências</span>
            <div class="text-2xl font-bold text-stone-900 mt-1">{{ total_references }}</div>
          </div>
          <div class="bg-stone-50 border border-stone-100 rounded-lg p-4">
            <span class="text-xs text-stone-500 font-medium uppercase">Perfis Mapeados</span>
            <div class="text-2xl font-bold text-stone-900 mt-1">{{ total_profiles }}</div>
          </div>
        </div>

        <div class="border-t border-stone-100 pt-4 flex items-center justify-between">
          <div class="text-xs text-stone-400">
            Aprovações exigem confirmação explícita de um gestor autorizado com token criptográfico assinado.
          </div>
          <form method="post" action="{% url 'curation:context_preview' workspace_id=workspace.id %}">
            {% csrf_token %}
            <button type="submit" class="px-4 py-2 text-sm font-semibold text-white bg-stone-900 hover:bg-stone-800 rounded-lg transition">
              Gerar Preview de Contexto
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal: Salvar Referência -->
  <div x-show="showAddRefModal" class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
      <div class="fixed inset-0 transition-opacity bg-stone-900 bg-opacity-50" @click="showAddRefModal = false"></div>
      <div class="inline-block align-bottom bg-white rounded-xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full p-6">
        <h3 class="text-lg font-bold text-stone-900 mb-4">Salvar Nova Referência</h3>
        <form method="post" action="{% url 'curation:reference_save' workspace_id=workspace.id %}">
          {% csrf_token %}
          <div class="space-y-4">
            <div>
              <label class="block text-xs font-semibold text-stone-700 uppercase mb-1">URL / Permalink *</label>
              <input type="url" name="permalink" required placeholder="https://instagram.com/p/..." class="w-full px-3 py-2 text-sm border border-stone-300 rounded-lg focus:ring-2 focus:ring-orange-500">
            </div>
            <div>
              <label class="block text-xs font-semibold text-stone-700 uppercase mb-1">Autor (@handle)</label>
              <input type="text" name="author_handle" placeholder="ex: criador_exemplo" class="w-full px-3 py-2 text-sm border border-stone-300 rounded-lg focus:ring-2 focus:ring-orange-500">
            </div>
            <div>
              <label class="block text-xs font-semibold text-stone-700 uppercase mb-1">Legenda / Texto da Referência</label>
              <textarea name="caption" rows="3" placeholder="Cole aqui a legenda ou notas..." class="w-full px-3 py-2 text-sm 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">Pastas (separadas por vírgula)</label>
              <input type="text" name="folders" placeholder="ex: Formatos, Inspiração" class="w-full px-3 py-2 text-sm border border-stone-300 rounded-lg focus:ring-2 focus:ring-orange-500">
            </div>
          </div>
          <div class="mt-6 flex justify-end gap-3">
            <button type="button" @click="showAddRefModal = false" class="px-4 py-2 text-sm font-medium text-stone-700 bg-stone-100 hover:bg-stone-200 rounded-lg transition">Cancelar</button>
            <button type="submit" class="px-4 py-2 text-sm font-semibold text-white bg-orange-600 hover:bg-orange-700 rounded-lg transition">Salvar</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Modal: Salvar Perfil -->
  <div x-show="showAddProfileModal" class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
      <div class="fixed inset-0 transition-opacity bg-stone-900 bg-opacity-50" @click="showAddProfileModal = false"></div>
      <div class="inline-block align-bottom bg-white rounded-xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full p-6">
        <h3 class="text-lg font-bold text-stone-900 mb-4">Salvar Perfil de Referência</h3>
        <form method="post" action="{% url 'curation:profile_save' workspace_id=workspace.id %}">
          {% csrf_token %}
          <div class="space-y-4">
            <div class="grid grid-cols-2 gap-3">
              <div>
                <label class="block text-xs font-semibold text-stone-700 uppercase mb-1">Plataforma</label>
                <select name="platform" class="w-full px-3 py-2 text-sm border border-stone-300 rounded-lg focus:ring-2 focus:ring-orange-500">
                  <option value="instagram">Instagram</option>
                  <option value="tiktok">TikTok</option>
                  <option value="youtube">YouTube</option>
                  <option value="linkedin">LinkedIn</option>
                </select>
              </div>
              <div>
                <label class="block text-xs font-semibold text-stone-700 uppercase mb-1">@Handle *</label>
                <input type="text" name="handle" required placeholder="ex: criador_estrategico" class="w-full px-3 py-2 text-sm border border-stone-300 rounded-lg focus:ring-2 focus:ring-orange-500">
              </div>
            </div>
            <div>
              <label class="block text-xs font-semibold text-stone-700 uppercase mb-1">Nome do Criador</label>
              <input type="text" name="name" placeholder="ex: Criador Exemplo" class="w-full px-3 py-2 text-sm border border-stone-300 rounded-lg focus:ring-2 focus:ring-orange-500">
            </div>
            <div>
              <label class="block text-xs font-semibold text-stone-700 uppercase mb-1">Biografia / Resumo</label>
              <textarea name="bio" rows="2" placeholder="Bio do perfil..." class="w-full px-3 py-2 text-sm 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 Estratégicas</label>
              <textarea name="notes" rows="2" placeholder="O que observar ou aprender com este perfil..." class="w-full px-3 py-2 text-sm 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">Listas / Categorias (vírgula)</label>
              <input type="text" name="categories" placeholder="ex: Educação, Autoridade" class="w-full px-3 py-2 text-sm border border-stone-300 rounded-lg focus:ring-2 focus:ring-orange-500">
            </div>
          </div>
          <div class="mt-6 flex justify-end gap-3">
            <!-- Cancel Button explicitly sends confirm=false and persists zero records -->
            <button type="submit" name="confirm" value="false" class="px-4 py-2 text-sm font-medium text-stone-700 bg-stone-100 hover:bg-stone-200 rounded-lg transition">Cancelar</button>
            <button type="submit" name="confirm" value="true" class="px-4 py-2 text-sm font-semibold text-white bg-orange-600 hover:bg-orange-700 rounded-lg transition">Salvar Perfil</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}