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

{% block main_content %}
<!-- Enhanced Page Header -->
{% set breadcrumbs = [
    {"name": t('nav.home'), "url": "/", "icon": "fas fa-home"},
    {"name": t('nav.rules'), "url": "/rules", "icon": "fas fa-book"},
    {"name": t('rules.builder'), "icon": "fas fa-puzzle-piece"}
] %}
{% set header_title = t('rules.builder') %}
{% set header_subtitle = t('rules.builder_desc') %}
{% set header_icon = "fas fa-puzzle-piece" %}
{% set header_actions = [
    {
        "type": "button",
        "text": t('rules.save_combination'),
        "onclick": "saveCombination()",
        "icon": "fas fa-save",
        "style": "primary"
    },
    {
        "type": "button",
        "text": t('common.clear'),
        "onclick": "clearBuilder()",
        "icon": "fas fa-broom",
        "style": "secondary"
    }
] %}
{% include "components/page_header.html" %}

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    
    <!-- Rules Library (Left Panel) -->
    <div class="lg:col-span-1">
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
                    <i class="fas fa-book mr-2 text-purple-500"></i>
                    {{ t('rules.available_rules') }}
                </h3>
                
                <!-- Search and Filter -->
                <div class="space-y-3 mb-4">
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-search text-gray-400"></i>
                        </div>
                        <input type="text" id="rule-search" 
                               class="form-input pl-10 text-sm" 
                               placeholder="{{ t('rules.search_rules') }}"
                               onkeyup="filterRules()">
                    </div>
                    <select id="category-filter" class="form-select text-sm" onchange="filterRules()">
                        <option value="">{{ t('rules.all_categories') }}</option>
                        {% for category in categories %}
                            <option value="{{ category }}">{{ category }}</option>
                        {% endfor %}
                    </select>
                </div>
                
                <!-- Rules List -->
                <div id="rules-library" class="space-y-2 max-h-96 overflow-y-auto">
                    {% for rule in rules %}
                        <div class="rule-item border border-gray-200 rounded-lg p-3 cursor-pointer hover:bg-purple-50 hover:border-purple-300 transition-colors duration-200"
                             data-rule-id="{{ rule.id }}"
                             data-category="{{ rule.category }}"
                             data-tags="{{ rule.tags or '' }}"
                             onclick="addRuleToBuilder({{ rule.id }}, '{{ rule.name }}', '{{ rule.title }}', `{{ rule.content|replace('`', '\\`')|replace('\n', '\\n') }}`)">
                            <div class="flex items-start justify-between">
                                <div class="flex-1">
                                    <h4 class="text-sm font-medium text-gray-900">{{ rule.name }}</h4>
                                    <p class="text-xs text-gray-600 mt-1">{{ rule.title }}</p>
                                    <div class="flex items-center mt-2">
                                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800">
                                            {{ rule.category }}
                                        </span>
                                        {% if rule.is_builtin %}
                                            <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
                                                <i class="fas fa-shield-alt mr-1"></i>
                                                {{ t('rules.builtin') }}
                                            </span>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="ml-2">
                                    <button class="text-purple-600 hover:text-purple-800">
                                        <i class="fas fa-plus text-sm"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    
    <!-- Builder Area (Right Panel) -->
    <div class="lg:col-span-2">
        <div class="space-y-6">
            
            <!-- Build Configuration -->
            <div class="bg-white shadow rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
                        <i class="fas fa-cog mr-2 text-blue-500"></i>
                        {{ t('rules.builder_config') }}
                    </h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label for="combination-name" class="block text-sm font-medium text-gray-700">
                                {{ t('rules.combination_name') }}
                            </label>
                            <input type="text" id="combination-name" 
                                   class="form-input mt-1" 
                                   placeholder="{{ t('rules.combination_name_placeholder') }}">
                        </div>
                        <div>
                            <label for="combination-category" class="block text-sm font-medium text-gray-700">
                                {{ t('rules.combination_category') }}
                            </label>
                            <input type="text" id="combination-category" 
                                   class="form-input mt-1" 
                                   placeholder="{{ t('rules.combination_category_placeholder') }}">
                        </div>
                        <div>
                            <label for="separator-style" class="block text-sm font-medium text-gray-700">
                                {{ t('rules.separator_style') }}
                            </label>
                            <select id="separator-style" class="form-select mt-1" onchange="updatePreview()">
                                <option value="header">{{ t('rules.header_separator') }}</option>
                                <option value="line">{{ t('rules.line_separator') }}</option>
                                <option value="space">{{ t('rules.space_separator') }}</option>
                                <option value="number">{{ t('rules.numbered_separator') }}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Selected Rules -->
            <div class="bg-white shadow rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg leading-6 font-medium text-gray-900">
                            <i class="fas fa-list-ol mr-2 text-green-500"></i>
                            {{ t('rules.selected_rules') }} (<span id="selected-count">0</span>)
                        </h3>
                        <button onclick="clearSelectedRules()" class="text-sm text-red-600 hover:text-red-800">
                            <i class="fas fa-trash mr-1"></i>
                            {{ t('common.clear_all') }}
                        </button>
                    </div>
                    
                    <div id="selected-rules" class="space-y-2 min-h-32">
                        <div id="empty-state" class="text-center py-8 text-gray-500">
                            <i class="fas fa-mouse-pointer text-2xl mb-2"></i>
                            <p>{{ t('rules.drag_rules_here') }}</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Live Preview -->
            <div class="bg-white shadow rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg leading-6 font-medium text-gray-900">
                            <i class="fas fa-eye mr-2 text-purple-500"></i>
                            {{ t('rules.live_preview') }}
                        </h3>
                        <div class="flex items-center space-x-2">
                            <button onclick="copyPreview()" class="text-sm text-primary-600 hover:text-primary-800">
                                <i class="fas fa-copy mr-1"></i>
                                {{ t('common.copy') }}
                            </button>
                            <button onclick="downloadRules()" class="text-sm text-green-600 hover:text-green-800">
                                <i class="fas fa-download mr-1"></i>
                                {{ t('common.download') }}
                            </button>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 rounded-lg p-4 min-h-48 max-h-96 overflow-y-auto">
                        <pre id="rules-preview" class="whitespace-pre-wrap text-sm text-gray-700 font-mono"></pre>
                    </div>
                    
                    <div class="mt-3 flex items-center justify-between text-sm text-gray-500">
                        <div>
                            <span id="preview-chars">0</span> {{ t('rules.characters') }} • 
                            <span id="preview-lines">0</span> {{ t('rules.lines') }}
                        </div>
                        <div>
                            {{ t('rules.last_updated') }}: <span id="last-updated">{{ t('common.never') }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Rule Details Modal -->
<div id="rule-details-modal" class="fixed inset-0 z-50 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closeRuleDetails()"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full">
            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg leading-6 font-medium text-gray-900" id="rule-details-title">
                        <i class="fas fa-info-circle mr-2 text-blue-500"></i>
                        {{ t('rules.rule_details') }}
                    </h3>
                    <button onclick="closeRuleDetails()" class="text-gray-400 hover:text-gray-600">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div id="rule-details-content" class="prose prose-sm max-w-none bg-gray-50 rounded-lg p-4 max-h-80 overflow-y-auto">
                    <!-- Rule content will be loaded here -->
                </div>
            </div>
            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button onclick="addCurrentRuleToBuilder()" class="btn-primary sm:ml-3">
                    <i class="fas fa-plus mr-2"></i>
                    {{ t('rules.add_to_builder') }}
                </button>
                <button onclick="closeRuleDetails()" class="btn-secondary mt-3 sm:mt-0">{{ t('common.close') }}</button>
            </div>
        </div>
    </div>
</div>

<script>
let selectedRules = [];
let currentRule = null;

function filterRules() {
    const search = document.getElementById('rule-search').value.toLowerCase();
    const category = document.getElementById('category-filter').value;
    const ruleItems = document.querySelectorAll('.rule-item');
    
    ruleItems.forEach(item => {
        const name = item.querySelector('h4').textContent.toLowerCase();
        const title = item.querySelector('p').textContent.toLowerCase();
        const itemCategory = item.dataset.category;
        const tags = item.dataset.tags.toLowerCase();
        
        const matchesSearch = name.includes(search) || title.includes(search) || tags.includes(search);
        const matchesCategory = !category || itemCategory === category;
        
        item.style.display = matchesSearch && matchesCategory ? 'block' : 'none';
    });
}

function addRuleToBuilder(id, name, title, content) {
    // Check if rule is already selected
    if (selectedRules.find(rule => rule.id === id)) {
        showToast(`Rule "${name}" is already selected`, 'warning');
        return;
    }
    
    const rule = { id, name, title, content };
    selectedRules.push(rule);
    updateSelectedRules();
    updatePreview();
    showToast(`Rule "${name}" added to builder`, 'success');
}

function removeRuleFromBuilder(id) {
    selectedRules = selectedRules.filter(rule => rule.id !== id);
    updateSelectedRules();
    updatePreview();
}

function moveRuleUp(id) {
    const index = selectedRules.findIndex(rule => rule.id === id);
    if (index > 0) {
        [selectedRules[index], selectedRules[index - 1]] = [selectedRules[index - 1], selectedRules[index]];
        updateSelectedRules();
        updatePreview();
    }
}

function moveRuleDown(id) {
    const index = selectedRules.findIndex(rule => rule.id === id);
    if (index < selectedRules.length - 1) {
        [selectedRules[index], selectedRules[index + 1]] = [selectedRules[index + 1], selectedRules[index]];
        updateSelectedRules();
        updatePreview();
    }
}

function updateSelectedRules() {
    const container = document.getElementById('selected-rules');
    const emptyState = document.getElementById('empty-state');
    
    if (selectedRules.length === 0) {
        emptyState.style.display = 'block';
        container.innerHTML = `<div id="empty-state" class="text-center py-8 text-gray-500">
            <i class="fas fa-mouse-pointer text-2xl mb-2"></i>
            <p>{{ t('rules.drag_rules_here') }}</p>
        </div>`;
    } else {
        container.innerHTML = selectedRules.map((rule, index) => `
            <div class="flex items-center justify-between p-3 bg-purple-50 border border-purple-200 rounded-lg">
                <div class="flex items-center flex-1">
                    <div class="flex flex-col space-y-1 mr-3">
                        <button onclick="moveRuleUp(${rule.id})" 
                                class="text-xs text-gray-500 hover:text-gray-700 ${index === 0 ? 'opacity-50 cursor-not-allowed' : ''}"
                                ${index === 0 ? 'disabled' : ''}>
                            <i class="fas fa-chevron-up"></i>
                        </button>
                        <button onclick="moveRuleDown(${rule.id})" 
                                class="text-xs text-gray-500 hover:text-gray-700 ${index === selectedRules.length - 1 ? 'opacity-50 cursor-not-allowed' : ''}"
                                ${index === selectedRules.length - 1 ? 'disabled' : ''}>
                            <i class="fas fa-chevron-down"></i>
                        </button>
                    </div>
                    <div class="flex-1">
                        <h4 class="text-sm font-medium text-gray-900">${rule.name}</h4>
                        <p class="text-xs text-gray-600">${rule.title}</p>
                    </div>
                </div>
                <div class="flex items-center space-x-2">
                    <button onclick="showRuleDetails(${rule.id}, '${rule.name}', '${rule.title}', \`${rule.content.replace(/`/g, '\\`').replace(/\n/g, '\\n')}\`)" 
                            class="text-blue-600 hover:text-blue-800" title="View Details">
                        <i class="fas fa-eye text-sm"></i>
                    </button>
                    <button onclick="removeRuleFromBuilder(${rule.id})" 
                            class="text-red-600 hover:text-red-800" title="Remove">
                        <i class="fas fa-times text-sm"></i>
                    </button>
                </div>
            </div>
        `).join('');
    }
    
    document.getElementById('selected-count').textContent = selectedRules.length;
}

function updatePreview() {
    const separatorStyle = document.getElementById('separator-style').value;
    let preview = '';
    
    if (selectedRules.length === 0) {
        preview = '# ' + (document.getElementById('combination-name').value || 'Combined Rules') + '\n\n' + 
                 '> No rules selected. Add rules from the library to see the preview.\n\n' +
                 '---\n\n' +
                 '*Generated with AI Prompt Manager*';
    } else {
        const combinationName = document.getElementById('combination-name').value || 'Combined Rules';
        preview = `# ${combinationName}\n\n`;
        
        selectedRules.forEach((rule, index) => {
            switch (separatorStyle) {
                case 'header':
                    preview += `## ${index + 1}. ${rule.name}\n\n${rule.content}\n\n`;
                    break;
                case 'line':
                    preview += `${rule.content}\n\n---\n\n`;
                    break;
                case 'space':
                    preview += `${rule.content}\n\n\n`;
                    break;
                case 'number':
                    preview += `${index + 1}. **${rule.name}**\n\n${rule.content}\n\n`;
                    break;
            }
        });
        
        preview += '*Generated with AI Prompt Manager*';
    }
    
    document.getElementById('rules-preview').textContent = preview;
    
    // Update statistics
    const charCount = preview.length;
    const lineCount = preview.split('\n').length;
    document.getElementById('preview-chars').textContent = charCount;
    document.getElementById('preview-lines').textContent = lineCount;
    document.getElementById('last-updated').textContent = new Date().toLocaleTimeString();
}

function clearSelectedRules() {
    selectedRules = [];
    updateSelectedRules();
    updatePreview();
    showToast('All rules cleared from builder', 'info');
}

function clearBuilder() {
    if (confirm('{{ t("rules.clear_builder_confirm") }}')) {
        selectedRules = [];
        document.getElementById('combination-name').value = '';
        document.getElementById('combination-category').value = '';
        updateSelectedRules();
        updatePreview();
        showToast('Builder cleared', 'info');
    }
}

function copyPreview() {
    const preview = document.getElementById('rules-preview').textContent;
    navigator.clipboard.writeText(preview).then(() => {
        showToast('Combined rules copied to clipboard', 'success');
    }).catch(() => {
        showToast('Failed to copy rules', 'error');
    });
}

function downloadRules() {
    const preview = document.getElementById('rules-preview').textContent;
    const combinationName = document.getElementById('combination-name').value || 'combined-rules';
    const filename = combinationName.toLowerCase().replace(/[^a-z0-9]/g, '-') + '.md';
    
    const blob = new Blob([preview], { type: 'text/markdown' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    
    showToast(`Rules downloaded as ${filename}`, 'success');
}

function saveCombination() {
    const name = document.getElementById('combination-name').value;
    const category = document.getElementById('combination-category').value || 'Combined';
    const preview = document.getElementById('rules-preview').textContent;
    
    if (!name) {
        showToast('Please enter a name for the combination', 'error');
        return;
    }
    
    if (selectedRules.length === 0) {
        showToast('Please select at least one rule', 'error');
        return;
    }
    
    // Create form data
    const formData = new FormData();
    formData.append('name', name);
    formData.append('title', `Combined Rules: ${name}`);
    formData.append('content', preview);
    formData.append('category', category);
    formData.append('description', `Combined rule set with ${selectedRules.length} rules`);
    formData.append('tags', 'combined,builder,' + selectedRules.map(r => r.name.toLowerCase()).join(','));
    
    // Save as new rule
    fetch('/rules/new', {
        method: 'POST',
        body: formData
    }).then(response => {
        if (response.ok) {
            showToast(`Combination "${name}" saved successfully`, 'success');
            // Optionally redirect to rules list
            setTimeout(() => {
                window.location.href = '/rules';
            }, 2000);
        } else {
            showToast('Failed to save combination', 'error');
        }
    }).catch(() => {
        showToast('Error saving combination', 'error');
    });
}

function showRuleDetails(id, name, title, content) {
    currentRule = { id, name, title, content };
    document.getElementById('rule-details-title').innerHTML = `
        <i class="fas fa-info-circle mr-2 text-blue-500"></i>
        ${name}
    `;
    
    // Simple markdown rendering for preview
    let html = content
        .replace(/^# (.+)$/gm, '<h1 class="text-lg font-bold mb-2">$1</h1>')
        .replace(/^## (.+)$/gm, '<h2 class="text-md font-semibold mb-2">$1</h2>')
        .replace(/^### (.+)$/gm, '<h3 class="text-sm font-medium mb-1">$1</h3>')
        .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
        .replace(/\*(.+?)\*/g, '<em>$1</em>')
        .replace(/`(.+?)`/g, '<code class="bg-gray-200 px-1 rounded">$1</code>')
        .replace(/^- (.+)$/gm, '<li class="ml-4">$1</li>')
        .replace(/\n/g, '<br>');
    
    document.getElementById('rule-details-content').innerHTML = html;
    document.getElementById('rule-details-modal').classList.remove('hidden');
}

function closeRuleDetails() {
    document.getElementById('rule-details-modal').classList.add('hidden');
}

function addCurrentRuleToBuilder() {
    if (currentRule) {
        addRuleToBuilder(currentRule.id, currentRule.name, currentRule.title, currentRule.content);
        closeRuleDetails();
    }
}

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    updatePreview();
    
    // Auto-update preview when configuration changes
    document.getElementById('combination-name').addEventListener('input', updatePreview);
    document.getElementById('combination-category').addEventListener('input', updatePreview);
});
</script>
{% endblock %}