{% extends "base.html" %}
{% set active_page = "proposals" %}

{% block title %}{% if proposal %}Edit {{ proposal.title }}{% else %}New Proposal{% endif %} — Proposals{% endblock %}

{% block extra_head %}
<style>
    .intake-spinner {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        border: 2px solid rgba(255,255,255,0.3);
        border-top-color: white;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .gen-card {
        animation: fadeIn 0.3s ease-out;
        cursor: pointer;
    }
    .gen-card:hover { border-color: rgba(59, 130, 246, 0.5); }
    .gen-card.selected { border-color: rgba(59, 130, 246, 0.7); background: rgba(59, 130, 246, 0.05); }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
</style>
{% endblock %}

{% block content %}
<!-- Breadcrumb -->
<nav class="mb-6 text-sm">
    <a href="/proposals" class="text-blue-400 hover:text-blue-300 transition">Proposals</a>
    <span class="text-slate-600 mx-2">/</span>
    {% if proposal %}
    <a href="/proposals/{{ proposal.id }}" class="text-blue-400 hover:text-blue-300 transition">{{ proposal.title }}</a>
    <span class="text-slate-600 mx-2">/</span>
    <span class="text-slate-400">Edit</span>
    {% else %}
    <span class="text-slate-400">New Proposal</span>
    {% endif %}
</nav>

{% if not proposal %}
<!-- ═══════════════════════════════════════════════════════════════════ -->
<!-- AI Generate Section (only on new, not edit)                        -->
<!-- ═══════════════════════════════════════════════════════════════════ -->
<div class="bg-slate-900 rounded-xl border border-slate-800 p-6 mb-6">
    <div class="flex items-center justify-between mb-4">
        <div>
            <h2 class="text-lg font-semibold text-white flex items-center gap-2">
                <svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                Quick Generate
            </h2>
            <p class="text-xs text-slate-500 mt-1">Paste a URL, article text, or notes — Claude generates multiple proposals automatically, linked to gaps.</p>
        </div>
        <button type="button" id="toggleManual" onclick="toggleManualForm()" class="text-xs text-slate-500 hover:text-slate-300 transition">
            Skip to manual form &darr;
        </button>
    </div>

    <div class="mb-4">
        <textarea id="intakeInput" rows="6"
            class="w-full bg-slate-950 border border-slate-700 rounded-lg px-4 py-3 text-sm text-slate-200 font-mono placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 resize-y"
            placeholder="Paste one or more of:&#10;&#10;• A URL (https://arxiv.org/..., blog post, RFC)&#10;• Article text or paper abstract&#10;• Your own notes or rough ideas&#10;&#10;URLs are fetched automatically. Multiple proposals will be generated and cross-referenced with existing gaps."></textarea>
    </div>

    <div class="flex items-center justify-between">
        <div class="text-xs text-slate-500">
            <span id="charCount">0</span> chars
            <span id="urlCount" class="ml-3 hidden">
                <span class="text-blue-400"><span id="urlNum">0</span> URL(s)</span> detected
            </span>
        </div>
        <button type="button" id="generateBtn" onclick="runGenerate()"
            class="inline-flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-500 disabled:bg-slate-700 disabled:text-slate-500 text-white text-sm font-medium rounded-lg transition">
            <svg id="genIcon" 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="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
            <span id="genText">Generate Proposals</span>
        </button>
    </div>

    <!-- Status -->
    <div id="genStatus" class="hidden mt-4 p-3 rounded-lg bg-blue-500/10 border border-blue-500/20">
        <div class="flex items-center gap-3 text-sm text-blue-400">
            <span class="intake-spinner"></span>
            <div>
                <span>Analyzing input and generating proposals...</span>
                <p class="text-xs text-blue-400/60 mt-0.5">Uses Haiku for cost efficiency. May take 15-30s.</p>
            </div>
        </div>
    </div>

    <!-- Error -->
    <div id="genError" class="hidden mt-4 p-3 rounded-lg bg-red-500/10 border border-red-500/20">
        <p class="text-sm text-red-400" id="genErrorText"></p>
    </div>

    <!-- Generated proposals (pick one to fill the form below) -->
    <div id="genResults" class="hidden mt-4">
        <div class="flex items-center justify-between mb-3">
            <p class="text-sm text-slate-300">
                <span id="genCount">0</span> proposal(s) generated
                <span id="genUsage" class="ml-2 text-xs text-slate-600"></span>
            </p>
            <p class="text-xs text-slate-500">Click a proposal to fill the form below, or save all directly.</p>
        </div>
        <div id="genList" class="space-y-3"></div>
        <div class="mt-4 flex gap-3">
            <button type="button" onclick="saveAllProposals()" id="saveAllBtn"
                class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-500 text-white text-sm font-medium rounded-lg 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="M5 13l4 4L19 7"/></svg>
                Save All Proposals
            </button>
            <span id="saveAllStatus" class="text-sm text-slate-400 self-center"></span>
        </div>
    </div>
</div>

<div id="manualDivider" class="flex items-center gap-4 mb-6">
    <div class="flex-1 border-t border-slate-800"></div>
    <span class="text-xs text-slate-600 uppercase tracking-wider">or create manually</span>
    <div class="flex-1 border-t border-slate-800"></div>
</div>
{% endif %}

<!-- ═══════════════════════════════════════════════════════════════════ -->
<!-- Manual Form (also used for edit)                                   -->
<!-- ═══════════════════════════════════════════════════════════════════ -->
<form method="POST" class="space-y-6" id="proposalForm">
    <!-- Title & Slug -->
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-6">
        <h2 class="text-lg font-semibold text-white mb-4">{% if proposal %}Edit Proposal{% else %}Manual Entry{% endif %}</h2>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
            <div>
                <label for="title" class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Title *</label>
                <input type="text" name="title" id="title" required
                    value="{{ proposal.title if proposal else '' }}"
                    class="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-sm text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 transition"
                    placeholder="e.g., Agent Capability Discovery Protocol"
                    oninput="autoSlug()">
            </div>
            <div>
                <label for="slug" class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Slug</label>
                <input type="text" name="slug" id="slug"
                    value="{{ proposal.slug if proposal else '' }}"
                    class="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-sm text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 transition"
                    placeholder="auto-generated-from-title">
                <p class="text-[10px] text-slate-600 mt-1">Leave blank to auto-generate from title</p>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
            <div>
                <label for="status" class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Status</label>
                <select name="status" id="status"
                    class="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-sm text-white focus:outline-none focus:border-blue-500 transition">
                    {% set current_status = proposal.status if proposal else 'idea' %}
                    <option value="idea" {% if current_status == 'idea' %}selected{% endif %}>Idea</option>
                    <option value="outline" {% if current_status == 'outline' %}selected{% endif %}>Outline</option>
                    <option value="draft" {% if current_status == 'draft' %}selected{% endif %}>Draft</option>
                    <option value="submitted" {% if current_status == 'submitted' %}selected{% endif %}>Submitted</option>
                    <option value="merged" {% if current_status == 'merged' %}selected{% endif %}>Merged</option>
                    <option value="abandoned" {% if current_status == 'abandoned' %}selected{% endif %}>Abandoned</option>
                </select>
            </div>
            <div>
                <label for="intended_wg" class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Intended Working Group</label>
                <input type="text" name="intended_wg" id="intended_wg"
                    value="{{ proposal.intended_wg if proposal else '' }}"
                    class="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-sm text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 transition"
                    placeholder="e.g., opsawg, httpbis">
            </div>
            <div>
                <label for="draft_name" class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Draft Name</label>
                <input type="text" name="draft_name" id="draft_name"
                    value="{{ proposal.draft_name if proposal else '' }}"
                    class="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-sm text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 transition font-mono text-xs"
                    placeholder="draft-nennemann-ai-agent-capability-00">
            </div>
        </div>

        <div>
            <label for="description" class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Description</label>
            <textarea name="description" id="description" rows="3"
                class="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-sm text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 transition"
                placeholder="Brief summary of the proposal idea...">{{ proposal.description if proposal else '' }}</textarea>
        </div>
    </div>

    <!-- Source -->
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-6">
        <h3 class="text-sm font-semibold text-slate-300 mb-4">Source Reference</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label for="source_paper" class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Source Paper / Document</label>
                <input type="text" name="source_paper" id="source_paper"
                    value="{{ proposal.source_paper if proposal else '' }}"
                    class="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-sm text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 transition"
                    placeholder="e.g., RFC 9999, research paper title">
            </div>
            <div>
                <label for="source_url" class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Source URL</label>
                <input type="url" name="source_url" id="source_url"
                    value="{{ proposal.source_url if proposal else '' }}"
                    class="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-sm text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 transition"
                    placeholder="https://...">
            </div>
        </div>
    </div>

    <!-- Content -->
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-6">
        <h3 class="text-sm font-semibold text-slate-300 mb-4">Content (Markdown)</h3>
        <textarea name="content_md" id="content_md" rows="20"
            class="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-sm text-slate-300 placeholder-slate-500 focus:outline-none focus:border-blue-500 transition font-mono leading-relaxed"
            placeholder="# Abstract

Write your proposal content here in Markdown...

## Introduction

## Problem Statement

## Proposed Solution

## Security Considerations">{{ proposal.content_md if proposal else '' }}</textarea>
    </div>

    <!-- Gap Links -->
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-6">
        <h3 class="text-sm font-semibold text-slate-300 mb-4">Linked Gaps</h3>
        <p class="text-xs text-slate-500 mb-4">Select the gaps this proposal addresses.</p>

        {% set selected_gap_ids = proposal.gap_ids if proposal else [] %}

        <!-- Group by severity -->
        {% set severities = ['critical', 'high', 'medium', 'low'] %}
        {% for sev in severities %}
        {% set sev_gaps = gaps | selectattr('severity', 'equalto', sev) | list %}
        {% if sev_gaps %}
        <div class="mb-4">
            <h4 class="text-xs font-semibold uppercase tracking-wider mb-2
                {% if sev == 'critical' %}text-red-400
                {% elif sev == 'high' %}text-orange-400
                {% elif sev == 'medium' %}text-yellow-400
                {% else %}text-green-400{% endif %}">{{ sev }} ({{ sev_gaps | length }})</h4>
            <div class="space-y-2">
                {% for gap in sev_gaps %}
                <label class="flex items-start gap-3 p-3 rounded-lg bg-slate-800/30 hover:bg-slate-800/60 transition cursor-pointer border border-transparent hover:border-slate-700">
                    <input type="checkbox" name="gap_ids" value="{{ gap.id }}"
                        {% if gap.id in selected_gap_ids %}checked{% endif %}
                        class="mt-0.5 rounded border-slate-600 text-blue-500 focus:ring-blue-500 bg-slate-900">
                    <div>
                        <span class="text-sm text-white">{{ gap.topic }}</span>
                        <span class="ml-2 px-1.5 py-0.5 rounded text-[10px] font-semibold
                            {% if sev == 'critical' %}bg-red-500/20 text-red-400
                            {% elif sev == 'high' %}bg-orange-500/20 text-orange-400
                            {% elif sev == 'medium' %}bg-yellow-500/20 text-yellow-400
                            {% else %}bg-green-500/20 text-green-400{% endif %}">{{ sev | upper }}</span>
                        <p class="text-xs text-slate-500 mt-1">{{ gap.description[:100] }}{% if gap.description | length > 100 %}...{% endif %}</p>
                    </div>
                </label>
                {% endfor %}
            </div>
        </div>
        {% endif %}
        {% endfor %}
    </div>

    <!-- Actions -->
    <div class="flex items-center gap-4">
        <button type="submit" class="inline-flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium rounded-lg 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="M5 13l4 4L19 7"/></svg>
            {% if proposal %}Save Changes{% else %}Create Proposal{% endif %}
        </button>
        {% if proposal %}
        <a href="/proposals/{{ proposal.id }}" class="px-4 py-2.5 text-sm text-slate-400 hover:text-white transition">Cancel</a>
        {% else %}
        <a href="/proposals" class="px-4 py-2.5 text-sm text-slate-400 hover:text-white transition">Cancel</a>
        {% endif %}
    </div>
</form>
{% endblock %}

{% block extra_scripts %}
<script>
let slugManuallyEdited = {{ 'true' if proposal and proposal.slug else 'false' }};

document.getElementById('slug').addEventListener('input', function() {
    slugManuallyEdited = this.value.length > 0;
});

function autoSlug() {
    if (slugManuallyEdited) return;
    const title = document.getElementById('title').value;
    const slug = title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
    document.getElementById('slug').value = slug;
}

{% if not proposal %}
// Pre-select gap from URL parameter
const params = new URLSearchParams(window.location.search);
const preGapId = params.get('gap_id');
if (preGapId) {
    const checkbox = document.querySelector(`input[name="gap_ids"][value="${preGapId}"]`);
    if (checkbox) checkbox.checked = true;
}

// ── Quick Generate ──────────────────────────────────────────────────
const intakeInput = document.getElementById('intakeInput');
const charCountEl = document.getElementById('charCount');
const urlCountEl = document.getElementById('urlCount');
const urlNumEl = document.getElementById('urlNum');

// Store generated proposals for "Save All"
let generatedProposals = [];

intakeInput.addEventListener('input', () => {
    charCountEl.textContent = intakeInput.value.length;
    const urls = intakeInput.value.match(/https?:\/\/[^\s<>"')\]]+/g) || [];
    if (urls.length > 0) {
        urlCountEl.classList.remove('hidden');
        urlNumEl.textContent = urls.length;
    } else {
        urlCountEl.classList.add('hidden');
    }
});

function toggleManualForm() {
    const form = document.getElementById('proposalForm');
    const divider = document.getElementById('manualDivider');
    form.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

function runGenerate() {
    const input = intakeInput.value.trim();
    if (!input) return;

    const btn = document.getElementById('generateBtn');
    const icon = document.getElementById('genIcon');
    const text = document.getElementById('genText');
    const status = document.getElementById('genStatus');
    const error = document.getElementById('genError');
    const results = document.getElementById('genResults');

    btn.disabled = true;
    icon.innerHTML = '';
    icon.classList.add('intake-spinner');
    text.textContent = 'Processing...';
    status.classList.remove('hidden');
    error.classList.add('hidden');
    results.classList.add('hidden');

    const formData = new FormData();
    formData.append('input_text', input);

    fetch('/proposals/intake', { method: 'POST', body: formData })
    .then(r => r.json())
    .then(data => {
        status.classList.add('hidden');
        icon.classList.remove('intake-spinner');
        icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>';

        if (data.error) {
            error.classList.remove('hidden');
            document.getElementById('genErrorText').textContent = data.error;
            text.textContent = 'Retry';
            btn.disabled = false;
            return;
        }

        generatedProposals = data.proposals;
        document.getElementById('genCount').textContent = data.count;

        // Show usage info
        if (data.usage) {
            const u = data.usage;
            document.getElementById('genUsage').textContent =
                `${u.model} · ${u.input_tokens.toLocaleString()} in / ${u.output_tokens.toLocaleString()} out · $${u.cost_usd.toFixed(3)}`;
        }

        const list = document.getElementById('genList');
        list.innerHTML = '';

        data.proposals.forEach((p, i) => {
            const gapPills = (p.gap_ids || []).map(gid =>
                `<span class="px-2 py-0.5 rounded text-[10px] bg-slate-800 text-slate-400">#${parseInt(gid)}</span>`
            ).join(' ');

            const card = document.createElement('div');
            card.className = 'gen-card bg-slate-950 rounded-lg border border-slate-700 p-4';
            card.style.animationDelay = `${i * 0.1}s`;
            card.dataset.index = i;
            card.onclick = () => fillFormFromProposal(i);
            card.innerHTML = `
                <div class="flex items-start justify-between gap-3 mb-1.5">
                    <h3 class="text-sm font-semibold text-white">${escapeHtml(p.title)}</h3>
                    <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-green-500/20 text-green-400 ring-1 ring-green-500/30 whitespace-nowrap">SAVED</span>
                </div>
                <p class="text-xs text-slate-400 mb-2">${escapeHtml(p.description || '')}</p>
                <div class="flex items-center gap-3 flex-wrap text-[10px]">
                    <span class="text-slate-500">Gaps: ${gapPills || '<span class="text-slate-600">none</span>'}</span>
                    ${p.intended_wg ? `<span class="text-slate-500">WG: <span class="text-slate-400">${escapeHtml(p.intended_wg)}</span></span>` : ''}
                    ${p.draft_name ? `<span class="text-slate-500 font-mono">${escapeHtml(p.draft_name)}</span>` : ''}
                </div>
                <p class="text-[10px] text-blue-400/60 mt-2">Click to load into editor below &darr;</p>
            `;
            list.appendChild(card);
        });

        results.classList.remove('hidden');
        text.textContent = 'Generate More';
        btn.disabled = false;

        // Update Save All button text
        document.getElementById('saveAllBtn').querySelector('span') ||
            (document.getElementById('saveAllBtn').textContent = `All ${data.count} saved`);
        // Proposals were already saved by the intake endpoint
        document.getElementById('saveAllBtn').classList.add('hidden');
        document.getElementById('saveAllStatus').textContent = `All ${data.count} proposals saved automatically.`;
    })
    .catch(err => {
        status.classList.add('hidden');
        error.classList.remove('hidden');
        document.getElementById('genErrorText').textContent = 'Network error: ' + err.message;
        icon.classList.remove('intake-spinner');
        icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>';
        text.textContent = 'Retry';
        btn.disabled = false;
    });
}

function fillFormFromProposal(index) {
    const p = generatedProposals[index];
    if (!p) return;

    // Highlight selected card
    document.querySelectorAll('.gen-card').forEach(c => c.classList.remove('selected'));
    document.querySelectorAll('.gen-card')[index].classList.add('selected');

    // Fill form fields
    document.getElementById('title').value = p.title || '';
    slugManuallyEdited = false;
    autoSlug();
    if (p.slug) {
        document.getElementById('slug').value = p.slug;
        slugManuallyEdited = true;
    }
    document.getElementById('description').value = p.description || '';
    document.getElementById('intended_wg').value = p.intended_wg || '';
    document.getElementById('draft_name').value = p.draft_name || '';
    document.getElementById('source_paper').value = p.source_paper || '';
    document.getElementById('source_url').value = p.source_url || '';
    document.getElementById('content_md').value = p.content_md || '';

    // Check matching gap checkboxes
    document.querySelectorAll('input[name="gap_ids"]').forEach(cb => {
        cb.checked = (p.gap_ids || []).includes(parseInt(cb.value));
    });

    // Scroll to form
    document.getElementById('proposalForm').scrollIntoView({ behavior: 'smooth', block: 'start' });
}

function saveAllProposals() {
    // Proposals are already saved by the intake endpoint, this is a no-op
    document.getElementById('saveAllStatus').textContent = 'All proposals were saved during generation.';
}
{% endif %}
</script>
{% endblock %}