{% extends "layouts/base.html" %}

{% block title %}Prompt Builder{% endblock %}

{% block main_content %}
<!-- Enhanced Page Header -->
{% set breadcrumbs = [
    {"name": t('nav.home'), "url": "/", "icon": "fas fa-home"},
    {"name": t('nav.builder'), "icon": "fas fa-hammer"}
] %}
{% set header_title = t('nav.builder') %}
{% set header_subtitle = t('builder.empty_builder') %}
{% set header_icon = "fas fa-hammer" %}
{% include "components/page_header.html" %}

<div class="container mx-auto px-4 py-8">

    <!-- Builder Interface -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Available Prompts Panel -->
        <div class="lg:col-span-1">
            <div class="bg-white rounded-lg shadow-sm border">
                <div class="p-4 border-b border-gray-200">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg font-semibold text-gray-900">Available Prompts</h3>
                        <button onclick="refreshPrompts()" 
                                class="p-2 text-gray-500 hover:text-gray-700 rounded-lg hover:bg-gray-100">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd"/>
                            </svg>
                        </button>
                    </div>
                    
                    <!-- Search and Filter -->
                    <div class="space-y-3">
                        <input type="text" id="prompt-search" placeholder="Search prompts..." 
                               onkeyup="filterPrompts()"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        
                        <select id="category-filter" onchange="filterPrompts()"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            <option value="">All Categories</option>
                            {% for category in categories %}
                            <option value="{{ category }}">{{ category }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                
                <!-- Prompt Cards -->
                <div class="p-4 max-h-96 overflow-y-auto" id="available-prompts">
                    {% for prompt in prompts %}
                    <div class="prompt-card mb-3 p-3 border border-gray-200 rounded-lg cursor-move hover:border-blue-300 hover:shadow-sm transition-all"
                         draggable="true" 
                         data-prompt-id="{{ prompt.id }}"
                         data-prompt-name="{{ prompt.name }}"
                         data-prompt-category="{{ prompt.category }}"
                         ondragstart="handleDragStart(event)"
                         onclick="selectPrompt(this)">
                        <div class="flex items-start justify-between">
                            <div class="flex-1 min-w-0">
                                <h4 class="font-medium text-gray-900 truncate">{{ prompt.title or prompt.name }}</h4>
                                <p class="text-sm text-gray-500 mb-2">{{ prompt.category }}</p>
                                <p class="text-xs text-gray-600 line-clamp-2">{{ prompt.content[:100] }}...</p>
                            </div>
                            <div class="ml-2 flex-shrink-0">
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                    {{ prompt.content|length }} chars
                                </span>
                            </div>
                        </div>
                    </div>
                    {% else %}
                    <div class="text-center text-gray-500 py-8">
                        <p>No prompts available</p>
                        <a href="/prompts/new" class="text-blue-500 hover:text-blue-700 text-sm">Create your first prompt</a>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- Selected Prompts and Template Panel -->
        <div class="lg:col-span-2">
            <div class="space-y-6">
                <!-- Selected Prompts -->
                <div class="bg-white rounded-lg shadow-sm border">
                    <div class="p-4 border-b border-gray-200">
                        <h3 class="text-lg font-semibold text-gray-900">Selected Prompts</h3>
                        <p class="text-sm text-gray-500">Drag prompts here or click to select. Drag to reorder.</p>
                    </div>
                    
                    <div class="p-4">
                        <div id="selected-prompts" 
                             class="min-h-32 border-2 border-dashed border-gray-300 rounded-lg p-4 transition-colors"
                             ondrop="handleDrop(event)" 
                             ondragover="handleDragOver(event)"
                             ondragenter="handleDragEnter(event)"
                             ondragleave="handleDragLeave(event)">
                            <div class="text-center text-gray-500" id="drop-placeholder">
                                <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                                <p class="text-lg font-medium">Drag prompts here to combine them</p>
                                <p class="text-sm">Or click prompts to select them</p>
                            </div>
                        </div>
                        
                        <!-- Selection Info -->
                        <div class="mt-4 flex justify-between items-center text-sm text-gray-600">
                            <span id="selection-count">0 prompts selected</span>
                            <button onclick="clearSelection()" 
                                    class="text-red-500 hover:text-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
                                    id="clear-btn" disabled>
                                Clear All
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Template Selection -->
                <div class="bg-white rounded-lg shadow-sm border">
                    <div class="p-4 border-b border-gray-200">
                        <h3 class="text-lg font-semibold text-gray-900">Combination Template</h3>
                        <p class="text-sm text-gray-500">Choose how to combine your selected prompts</p>
                    </div>
                    
                    <div class="p-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                            <label class="template-option">
                                <input type="radio" name="template" value="sequential" checked onchange="updatePreview()">
                                <div class="template-card">
                                    <div class="template-icon">📋</div>
                                    <h4 class="font-medium">Sequential</h4>
                                    <p class="text-sm text-gray-600">Combine prompts one after another with clear separation</p>
                                </div>
                            </label>
                            
                            <label class="template-option">
                                <input type="radio" name="template" value="sections" onchange="updatePreview()">
                                <div class="template-card">
                                    <div class="template-icon">📑</div>
                                    <h4 class="font-medium">Sections</h4>
                                    <p class="text-sm text-gray-600">Create distinct sections with headers for each prompt</p>
                                </div>
                            </label>
                            
                            <label class="template-option">
                                <input type="radio" name="template" value="layered" onchange="updatePreview()">
                                <div class="template-card">
                                    <div class="template-icon">🏗️</div>
                                    <h4 class="font-medium">Layered</h4>
                                    <p class="text-sm text-gray-600">Build context in layers with base + additional layers</p>
                                </div>
                            </label>
                            
                            <label class="template-option">
                                <input type="radio" name="template" value="custom" onchange="updatePreview()">
                                <div class="template-card">
                                    <div class="template-icon">🎨</div>
                                    <h4 class="font-medium">Custom</h4>
                                    <p class="text-sm text-gray-600">Use your own formatting template with placeholders</p>
                                </div>
                            </label>
                        </div>
                        
                        <!-- Template Options -->
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Custom Separator</label>
                                <input type="text" id="custom-separator" value="\n\n" onchange="updatePreview()"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            </div>
                            
                            <div class="flex items-center">
                                <input type="checkbox" id="add-numbers" onchange="updatePreview()"
                                       class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                <label for="add-numbers" class="ml-2 block text-sm text-gray-700">
                                    Add sequence numbers
                                </label>
                            </div>
                            
                            <div id="custom-template-section" class="hidden">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Custom Template</label>
                                <textarea id="custom-template" rows="4" onchange="updatePreview()"
                                          placeholder="Use {content}, {name}, {title}, {category}, {tags} as placeholders"
                                          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"></textarea>
                                <p class="text-xs text-gray-500 mt-1">Available placeholders: {content}, {name}, {title}, {category}, {tags}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Preview and Actions -->
                <div class="bg-white rounded-lg shadow-sm border">
                    <div class="p-4 border-b border-gray-200">
                        <div class="flex justify-between items-center">
                            <h3 class="text-lg font-semibold text-gray-900">Preview</h3>
                            <div class="flex space-x-2">
                                <button onclick="updatePreview()" 
                                        class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">
                                    👁️ Refresh Preview
                                </button>
                                <button onclick="combinePrompts()" 
                                        id="combine-btn"
                                        class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
                                        disabled>
                                    🔗 Combine Prompts
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="p-4">
                        <div class="bg-gray-50 rounded-lg p-4 min-h-32">
                            <pre id="preview-content" class="text-sm text-gray-700 whitespace-pre-wrap font-mono">
{{ t('builder.select_prompts_preview') }}
                            </pre>
                        </div>
                        
                        <div class="mt-4 flex justify-between items-center text-sm text-gray-600">
                            <span id="preview-stats">0 {{ t('builder.characters') }}, 0 {{ t('builder.tokens_estimated') }}</span>
                            <span id="preview-sources">0 {{ t('builder.source_prompts') }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- CSS for drag-and-drop styling -->
<style>
.template-option {
    cursor: pointer;
}

.template-option input[type="radio"] {
    display: none;
}

.template-card {
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    transition: all 0.2s;
}

.template-option input[type="radio"]:checked + .template-card {
    border-color: #3b82f6;
    background-color: #eff6ff;
}

.template-card:hover {
    border-color: #9ca3af;
}

.template-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.prompt-card.selected {
    border-color: #3b82f6;
    background-color: #eff6ff;
}

.prompt-card.selected::after {
    content: '✓';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: #3b82f6;
    font-weight: bold;
}

.prompt-card {
    position: relative;
}

#selected-prompts.drag-over {
    border-color: #3b82f6;
    background-color: #eff6ff;
}

.selected-prompt {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    cursor: move;
}

.selected-prompt:hover {
    border-color: #cbd5e0;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>

<!-- JavaScript for Prompt Builder -->
<script>
let selectedPrompts = [];
let availablePrompts = {{ prompts|tojson }};

function handleDragStart(event) {
    const promptId = event.target.dataset.promptId;
    event.dataTransfer.setData('text/plain', promptId);
    event.dataTransfer.effectAllowed = 'copy';
}

function handleDragOver(event) {
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy';
}

function handleDragEnter(event) {
    event.preventDefault();
    document.getElementById('selected-prompts').classList.add('drag-over');
}

function handleDragLeave(event) {
    const rect = event.currentTarget.getBoundingClientRect();
    const x = event.clientX;
    const y = event.clientY;
    
    if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
        document.getElementById('selected-prompts').classList.remove('drag-over');
    }
}

function handleDrop(event) {
    event.preventDefault();
    document.getElementById('selected-prompts').classList.remove('drag-over');
    
    const promptId = event.dataTransfer.getData('text/plain');
    addPromptToSelection(promptId);
}

function selectPrompt(element) {
    const promptId = element.dataset.promptId;
    addPromptToSelection(promptId);
}

function addPromptToSelection(promptId) {
    if (selectedPrompts.find(p => p.id === promptId)) {
        return; // Already selected
    }
    
    const prompt = availablePrompts.find(p => p.id === promptId);
    if (prompt) {
        selectedPrompts.push(prompt);
        updateSelectedPromptsDisplay();
        updatePreview();
    }
}

function removeFromSelection(promptId) {
    selectedPrompts = selectedPrompts.filter(p => p.id !== promptId);
    updateSelectedPromptsDisplay();
    updatePreview();
}

function updateSelectedPromptsDisplay() {
    const container = document.getElementById('selected-prompts');
    const placeholder = document.getElementById('drop-placeholder');
    
    if (selectedPrompts.length === 0) {
        placeholder.style.display = 'block';
        container.innerHTML = placeholder.outerHTML;
        document.getElementById('selection-count').textContent = `0 {{ t('builder.prompts_selected') }}`;
        document.getElementById('clear-btn').disabled = true;
        document.getElementById('combine-btn').disabled = true;
        return;
    }
    
    let html = '';
    selectedPrompts.forEach((prompt, index) => {
        html += `
            <div class="selected-prompt" draggable="true" data-prompt-id="${prompt.id}">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <h4 class="font-medium text-gray-900">${prompt.title || prompt.name}</h4>
                        <p class="text-sm text-gray-500">${prompt.category} • ${prompt.content.length} {{ t('builder.chars') }}</p>
                    </div>
                    <div class="flex items-center space-x-2">
                        <span class="text-xs text-gray-400">#${index + 1}</span>
                        <button onclick="removeFromSelection('${prompt.id}')" 
                                class="text-red-500 hover:text-red-700">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        `;
    });
    
    container.innerHTML = html;
    document.getElementById('selection-count').textContent = `${selectedPrompts.length} ${selectedPrompts.length === 1 ? '{{ t("builder.prompt_selected") }}' : '{{ t("builder.prompts_selected") }}'}`;
    document.getElementById('clear-btn').disabled = false;
    document.getElementById('combine-btn').disabled = selectedPrompts.length < 2;
}

function clearSelection() {
    selectedPrompts = [];
    updateSelectedPromptsDisplay();
    updatePreview();
}

function updatePreview() {
    if (selectedPrompts.length === 0) {
        document.getElementById('preview-content').textContent = '{{ t("builder.select_prompts_preview") }}';
        document.getElementById('preview-stats').textContent = `0 {{ t('builder.characters') }}, 0 {{ t('builder.tokens_estimated') }}`;
        document.getElementById('preview-sources').textContent = `0 {{ t('builder.source_prompts') }}`;
        return;
    }
    
    const template = document.querySelector('input[name="template"]:checked').value;
    const separator = document.getElementById('custom-separator').value.replace(/\\n/g, '\n');
    const addNumbers = document.getElementById('add-numbers').checked;
    const customTemplate = document.getElementById('custom-template').value;
    
    let combined = '';
    
    if (template === 'custom' && customTemplate) {
        // Custom template
        selectedPrompts.forEach((prompt, index) => {
            let formatted = customTemplate
                .replace(/\{content\}/g, prompt.content)
                .replace(/\{name\}/g, prompt.name)
                .replace(/\{title\}/g, prompt.title || prompt.name)
                .replace(/\{category\}/g, prompt.category)
                .replace(/\{tags\}/g, prompt.tags || '');
            
            if (addNumbers) {
                formatted = `${index + 1}. ${formatted}`;
            }
            
            combined += formatted + (index < selectedPrompts.length - 1 ? separator : '');
        });
    } else if (template === 'sections') {
        // Sections template
        selectedPrompts.forEach((prompt, index) => {
            const title = prompt.title || prompt.name;
            combined += `## ${addNumbers ? (index + 1) + '. ' : ''}${title}\n${prompt.content}`;
            if (index < selectedPrompts.length - 1) {
                combined += '\n\n---\n\n';
            }
        });
    } else if (template === 'layered') {
        // Layered template
        combined = 'Base Context:\n' + selectedPrompts[0].content;
        for (let i = 1; i < selectedPrompts.length; i++) {
            combined += `\n\nLayer ${i}:\n${selectedPrompts[i].content}`;
        }
        combined += '\n\nInstructions: Integrate all layers above into a cohesive response.';
    } else {
        // Sequential template (default)
        selectedPrompts.forEach((prompt, index) => {
            let content = prompt.content;
            if (addNumbers) {
                content = `${index + 1}. ${content}`;
            }
            combined += content + (index < selectedPrompts.length - 1 ? separator : '');
        });
    }
    
    document.getElementById('preview-content').textContent = combined;
    
    // Update stats
    const charCount = combined.length;
    const tokenCount = Math.ceil(charCount / 4); // Rough estimation
    document.getElementById('preview-stats').textContent = `${charCount} {{ t('builder.characters') }}, ${tokenCount} {{ t('builder.tokens_estimated') }}`;
    document.getElementById('preview-sources').textContent = `${selectedPrompts.length} {{ t('builder.source_prompts') }}`;
    
    // Show/hide custom template section
    const customSection = document.getElementById('custom-template-section');
    if (template === 'custom') {
        customSection.classList.remove('hidden');
    } else {
        customSection.classList.add('hidden');
    }
}

function combinePrompts() {
    if (selectedPrompts.length < 2) {
        alert('{{ t("builder.min_prompts_required") }}');
        return;
    }
    
    const combined = document.getElementById('preview-content').textContent;
    
    // Generate metadata
    const name = 'Combined_' + selectedPrompts.map(p => p.name).join('+');
    const title = `{{ t('builder.combined_prompt_name') }}`.replace('{count}', selectedPrompts.length);
    const category = '{{ t("builder.combined_category") }}';
    const tags = [...new Set(selectedPrompts.flatMap(p => (p.tags || '').split(',').map(t => t.trim()).filter(t => t)))].join(', ') + ', {{ t("builder.combined_tags_suffix") }}'.replace('{count}', selectedPrompts.length);
    
    // Create form data and submit
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '/prompts/new';
    
    const fields = {
        name: name,
        title: title,
        content: combined,
        category: category,
        tags: tags,
        description: `{{ t('builder.combined_description') }}`.replace('{sources}', selectedPrompts.map(p => p.title || p.name).join(', '))
    };
    
    Object.entries(fields).forEach(([key, value]) => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = key;
        input.value = value;
        form.appendChild(input);
    });
    
    document.body.appendChild(form);
    form.submit();
}

function filterPrompts() {
    const search = document.getElementById('prompt-search').value.toLowerCase();
    const category = document.getElementById('category-filter').value;
    const cards = document.querySelectorAll('.prompt-card');
    
    cards.forEach(card => {
        const name = card.dataset.promptName.toLowerCase();
        const cardCategory = card.dataset.promptCategory;
        const content = card.textContent.toLowerCase();
        
        const matchesSearch = name.includes(search) || content.includes(search);
        const matchesCategory = !category || cardCategory === category;
        
        if (matchesSearch && matchesCategory) {
            card.style.display = 'block';
        } else {
            card.style.display = 'none';
        }
    });
}

function refreshPrompts() {
    location.reload();
}

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    // Show custom template section if custom is selected
    document.querySelectorAll('input[name="template"]').forEach(radio => {
        radio.addEventListener('change', updatePreview);
    });
    
    updatePreview();
});
</script>
{% endblock %}