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

{% block title %}Criação IA — {{ workspace.name }}{% endblock %}

{% block content %}
<div class="space-y-6 max-w-6xl mx-auto py-4 px-4 sm:px-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-4 border-b border-stone-200">
        <div>
            <h1 class="text-2xl font-bold text-stone-900 tracking-tight">Estúdio de Criação IA</h1>
            <p class="text-sm text-stone-500 mt-1">Criação textual assistida com cotação prévia, reservas atômicas e BrandKit.</p>
        </div>
        <!-- Budget Widget Badge -->
        <div id="ai-budget-widget" hx-get="{% url 'creative:budget' workspace_id=workspace.id %}" hx-trigger="load" hx-swap="innerHTML">
            <div class="text-xs text-stone-400">Carregando saldo...</div>
        </div>
    </div>

    <!-- Main Grid: Surfaces & BrandKit -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Left: Tabbed Creation Panel (2 cols) -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Tabs container: APG Accessible Tabs (Texto, Imagem, Vídeo) -->
            <div class="bg-white rounded-xl border border-stone-200 shadow-sm overflow-hidden"
                 x-data="{ activeTab: 'texto' }">
                <!-- Tab navigation -->
                <div class="border-b border-stone-200 px-4 bg-stone-50/50">
                    <nav class="flex gap-4 -mb-px" role="tablist" aria-label="Superfícies de Criação">
                        <button type="button"
                                role="tab"
                                id="tab-texto"
                                aria-controls="panel-texto"
                                :aria-selected="activeTab === 'texto'"
                                @click="activeTab = 'texto'"
                                class="inline-flex items-center gap-2 py-3 px-3 border-b-2 text-sm font-semibold transition-colors focus:outline-none"
                                :class="activeTab === 'texto' ? 'border-orange-500 text-orange-600' : 'border-transparent text-stone-500 hover:text-stone-700'">
                            <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                            <span>Texto</span>
                        </button>
                        <button type="button"
                                role="tab"
                                id="tab-imagem"
                                aria-disabled="true"
                                disabled
                                class="inline-flex items-center gap-2 py-3 px-3 border-b-2 border-transparent text-sm font-medium text-stone-400 cursor-not-allowed opacity-60"
                                title="Fase futura: Criação de Imagens">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" ry="2" stroke-width="2"/><circle cx="8.5" cy="8.5" r="1.5" stroke-width="2"/><polyline points="21 15 16 10 5 21" stroke-width="2"/></svg>
                            <span>Imagem</span>
                            <span class="text-[10px] font-semibold uppercase px-1.5 py-0.5 rounded bg-stone-100 text-stone-500">Em breve</span>
                        </button>
                        <button type="button"
                                role="tab"
                                id="tab-video"
                                aria-disabled="true"
                                disabled
                                class="inline-flex items-center gap-2 py-3 px-3 border-b-2 border-transparent text-sm font-medium text-stone-400 cursor-not-allowed opacity-60"
                                title="Fase futura: Criação de Vídeos">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><polygon points="23 7 16 12 23 17 23 7" stroke-width="2"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2" stroke-width="2"/></svg>
                            <span>Vídeo</span>
                            <span class="text-[10px] font-semibold uppercase px-1.5 py-0.5 rounded bg-stone-100 text-stone-500">Em breve</span>
                        </button>
                    </nav>
                </div>

                <!-- Tab Panels -->
                <div class="p-6">
                    <!-- Panel Texto (Active) -->
                    <div id="panel-texto" role="tabpanel" aria-labelledby="tab-texto" x-show="activeTab === 'texto'">
                        <form hx-post="{% url 'creative:quote' workspace_id=workspace.id %}"
                              hx-target="#quote-result"
                              hx-indicator="#quote-spinner"
                              class="space-y-4">
                            {% csrf_token %}
                            <div>
                                <label for="id_prompt" class="block text-sm font-medium text-stone-700 mb-1">
                                    Instrução / Prompt Textual <span class="text-red-500">*</span>
                                </label>
                                <textarea id="id_prompt"
                                          name="prompt"
                                          rows="4"
                                          required
                                          placeholder="Ex: Crie uma legenda envolvente para o lançamento da nossa nova funcionalidade..."
                                          class="w-full rounded-lg border border-stone-300 p-3 text-sm focus:border-orange-500 focus:ring-1 focus:ring-orange-500 outline-none transition-shadow shadow-sm"></textarea>
                            </div>

                            <!-- Seletor de Referências de Curadoria da Biblioteca -->
                            <div class="space-y-2">
                                <label class="block text-xs font-semibold text-stone-700 uppercase tracking-wider">
                                    Referências da Biblioteca (Curadoria)
                                </label>
                                {% if saved_references %}
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 max-h-48 overflow-y-auto p-2 bg-stone-50 rounded-lg border border-stone-200">
                                    {% for ref in saved_references %}
                                    <label class="flex items-start gap-2 p-2 rounded hover:bg-white cursor-pointer text-xs border border-transparent hover:border-stone-200 transition-colors">
                                        <input type="checkbox" name="reference_ids" value="{{ ref.id }}" class="mt-0.5 rounded border-stone-300 text-orange-600 focus:ring-orange-500">
                                        <div class="truncate">
                                            <span class="font-medium text-stone-800 block truncate">{{ ref.caption|default:ref.permalink }}</span>
                                            {% if ref.author_handle %}<span class="text-stone-400 block truncate">@{{ ref.author_handle }}</span>{% endif %}
                                        </div>
                                    </label>
                                    {% endfor %}
                                </div>
                                {% else %}
                                <p class="text-xs text-stone-400 italic">Nenhuma referência salva na biblioteca deste workspace.</p>
                                {% endif %}
                            </div>

                            <!-- Aspectos a Incorporar -->
                            <div class="space-y-2">
                                <label class="block text-xs font-semibold text-stone-700 uppercase tracking-wider">
                                    Aspectos a Incorporar (Opcional)
                                </label>
                                <div class="flex flex-wrap gap-3 text-xs">
                                    <label class="inline-flex items-center gap-1.5 cursor-pointer">
                                        <input type="checkbox" name="aspects" value="positioning" class="rounded border-stone-300 text-orange-600 focus:ring-orange-500">
                                        <span class="text-stone-700">Posicionamento</span>
                                    </label>
                                    <label class="inline-flex items-center gap-1.5 cursor-pointer">
                                        <input type="checkbox" name="aspects" value="tone_of_voice" class="rounded border-stone-300 text-orange-600 focus:ring-orange-500">
                                        <span class="text-stone-700">Tom de Voz</span>
                                    </label>
                                    <label class="inline-flex items-center gap-1.5 cursor-pointer">
                                        <input type="checkbox" name="aspects" value="visual_identity" class="rounded border-stone-300 text-orange-600 focus:ring-orange-500">
                                        <span class="text-stone-700">Identidade Visual</span>
                                    </label>
                                    <label class="inline-flex items-center gap-1.5 cursor-pointer">
                                        <input type="checkbox" name="aspects" value="themes" class="rounded border-stone-300 text-orange-600 focus:ring-orange-500">
                                        <span class="text-stone-700">Temas</span>
                                    </label>
                                    <label class="inline-flex items-center gap-1.5 cursor-pointer">
                                        <input type="checkbox" name="aspects" value="formats" class="rounded border-stone-300 text-orange-600 focus:ring-orange-500">
                                        <span class="text-stone-700">Formatos</span>
                                    </label>
                                    <label class="inline-flex items-center gap-1.5 cursor-pointer">
                                        <input type="checkbox" name="aspects" value="commercial_approach" class="rounded border-stone-300 text-orange-600 focus:ring-orange-500">
                                        <span class="text-stone-700">Abordagem Comercial</span>
                                    </label>
                                    <label class="inline-flex items-center gap-1.5 cursor-pointer">
                                        <input type="checkbox" name="aspects" value="differentiation" class="rounded border-stone-300 text-orange-600 focus:ring-orange-500">
                                        <span class="text-stone-700">Diferenciação</span>
                                    </label>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <div>
                                    <label for="id_max_input_tokens" class="block text-xs font-medium text-stone-600 mb-1">
                                        Tokens de Entrada (Máx)
                                    </label>
                                    <input type="number"
                                           id="id_max_input_tokens"
                                           name="max_input_tokens"
                                           value="1000"
                                           min="1"
                                           max="2000000"
                                           required
                                           class="w-full rounded-lg border border-stone-300 p-2.5 text-sm focus:border-orange-500 focus:ring-1 focus:ring-orange-500 outline-none shadow-sm">
                                </div>
                                <div>
                                    <label for="id_max_output_tokens" class="block text-xs font-medium text-stone-600 mb-1">
                                        Tokens de Saída (Máx)
                                    </label>
                                    <input type="number"
                                           id="id_max_output_tokens"
                                           name="max_output_tokens"
                                           value="500"
                                           min="1"
                                           max="2000000"
                                           required
                                           class="w-full rounded-lg border border-stone-300 p-2.5 text-sm focus:border-orange-500 focus:ring-1 focus:ring-orange-500 outline-none shadow-sm">
                                </div>
                            </div>

                            <div class="flex items-center justify-between pt-2">
                                <span id="quote-spinner" class="htmx-indicator inline-flex items-center text-xs text-stone-500 gap-1.5">
                                    <svg class="animate-spin h-4 w-4 text-orange-500" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg>
                                    Calculando cotação em USD...
                                </span>
                                <button type="submit"
                                        class="ml-auto inline-flex items-center gap-2 px-4 py-2 bg-stone-900 hover:bg-black text-white text-sm font-medium rounded-lg transition-colors shadow-sm cursor-pointer">
                                    <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="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                                    <span>Obter Cotação</span>
                                </button>
                            </div>
                        </form>

                        <!-- Quote Output Slot -->
                        <div id="quote-result" class="mt-6"></div>

                        <!-- Job Execution and Polling Slot -->
                        <div id="job-status-container" class="mt-6"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right: BrandKit Context & Quick Edit (1 col) -->
        <div class="space-y-6">
            <div class="bg-white rounded-xl border border-stone-200 shadow-sm p-6">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-base font-bold text-stone-900 flex items-center gap-2">
                        <svg class="w-4 h-4 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/></svg>
                        <span>Diretrizes BrandKit</span>
                    </h2>
                    {% if can_manage_settings %}
                    <span class="text-xs px-2 py-0.5 rounded-full bg-green-50 text-green-700 font-medium">Gestor</span>
                    {% else %}
                    <span class="text-xs px-2 py-0.5 rounded-full bg-stone-100 text-stone-600 font-medium">Leitura</span>
                    {% endif %}
                </div>

                <div class="space-y-3 text-sm">
                    <div>
                        <span class="text-xs font-semibold uppercase text-stone-400">Tom de Voz</span>
                        <p class="text-stone-800 mt-0.5 font-medium">{{ brand_kit.voice_tone|default:"Não especificado" }}</p>
                    </div>
                    <div>
                        <span class="text-xs font-semibold uppercase text-stone-400">Público-Alvo</span>
                        <p class="text-stone-800 mt-0.5">{{ brand_kit.target_audience|default:"Geral" }}</p>
                    </div>
                    {% if brand_kit.default_first_comment %}
                    <div>
                        <span class="text-xs font-semibold uppercase text-stone-400">Primeiro Comentário</span>
                        <p class="text-stone-600 text-xs mt-0.5 italic">"{{ brand_kit.default_first_comment }}"</p>
                    </div>
                    {% endif %}
                </div>

                {% if can_manage_settings %}
                <div class="mt-6 pt-4 border-t border-stone-100">
                    <a href="{% url 'creative:brand_kit' workspace_id=workspace.id %}"
                       class="w-full inline-flex items-center justify-center gap-1.5 py-2 px-3 text-xs font-medium text-stone-700 bg-stone-50 hover:bg-stone-100 rounded-lg transition-colors border border-stone-200">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
                        <span>Editar BrandKit</span>
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}