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

{% block main_content %}
<!-- Enhanced Page Header -->
{% set breadcrumbs = [
    {"name": t('template.list'), "url": "/templates", "icon": "fas fa-layer-group"},
    {"name": t('template.create') if action == 'create' else t('template.edit'), "icon": "fas fa-" + ('plus' if action == 'create' else 'edit')}
] %}
{% set header_title = t('template.create') if action == 'create' else t('template.edit') %}
{% set header_subtitle = t('template.create_desc') if action == 'create' else t('template.edit_desc') %}
{% set header_icon = "fas fa-" + ('plus' if action == 'create' else 'edit') %}
{% set header_actions = [
    {
        "type": "button",
        "text": t('action.cancel'),
        "url": "/templates",
        "icon": "fas fa-arrow-left",
        "style": "secondary"
    }
] %}
{% include "components/page_header.html" %}

<div class="max-w-4xl mx-auto space-y-6">

    <!-- Error Alert -->
    {% if error %}
    <div class="rounded-md bg-red-50 p-4">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-exclamation-circle text-red-400"></i>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-medium text-red-800">
                    {{ t('template.validation_error') }}
                </h3>
                <div class="mt-2 text-sm text-red-700">
                    <p>{{ error }}</p>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Template Form -->
    <div class="bg-white shadow rounded-lg">
        <form method="POST" 
              action="{% if action == 'create' %}/templates{% else %}/templates/{{ template_id }}{% endif %}" 
              class="space-y-6 p-6">
            
            <!-- Basic Information -->
            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                <!-- Template Name -->
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700">
                        {{ t('template.name') }} 
                        <span class="text-red-500">*</span>
                    </label>
                    <div class="mt-1">
                        <input type="text" 
                               name="name" 
                               id="name" 
                               required
                               value="{{ name or '' }}"
                               placeholder="{{ t('template.name_placeholder') }}"
                               class="form-input">
                    </div>
                </div>

                <!-- Category -->
                <div>
                    <label for="category" class="block text-sm font-medium text-gray-700">
                        {{ t('template.category') }}
                    </label>
                    <div class="mt-1">
                        <select name="category" id="category" class="form-select">
                            {% for cat in categories %}
                                <option value="{{ cat }}" 
                                        {% if cat == category %}selected{% endif %}>
                                    {{ t('template.category.' + cat.lower()) or cat }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    <p class="mt-1 text-sm text-gray-500">
                        {{ t('template.category_help') }}
                    </p>
                </div>
            </div>

            <!-- Description -->
            <div>
                <label for="description" class="block text-sm font-medium text-gray-700">
                    {{ t('template.description') }}
                </label>
                <div class="mt-1">
                    <input type="text" 
                           name="description" 
                           id="description"
                           value="{{ description or '' }}"
                           placeholder="{{ t('template.description_placeholder') }}"
                           class="form-input">
                </div>
            </div>

            <!-- Template Content -->
            <div>
                <label for="content" class="block text-sm font-medium text-gray-700">
                    {{ t('template.content') }} 
                    <span class="text-red-500">*</span>
                </label>
                <div class="mt-1">
                    <textarea name="content" 
                              id="content" 
                              rows="12" 
                              required
                              placeholder="{{ t('template.content_placeholder') }}"
                              class="form-textarea"
                              oninput="extractVariables()">{{ content or '' }}</textarea>
                </div>
                <p class="mt-1 text-sm text-gray-500">
                    {{ t('template.variables_help') }}
                </p>
            </div>

            <!-- Variables Preview -->
            <div id="variables-section" class="bg-gray-50 rounded-lg p-4" style="display: none;">
                <h3 class="text-sm font-medium text-gray-700 mb-2">
                    <i class="fas fa-code text-gray-400 mr-1"></i>
                    {{ t('template.variables') }}
                </h3>
                <div id="variables-list" class="flex flex-wrap gap-2"></div>
            </div>

            <!-- Preview Section -->
            <div class="bg-blue-50 rounded-lg p-4">
                <h3 class="text-sm font-medium text-blue-800 mb-2">
                    <i class="fas fa-eye text-blue-600 mr-1"></i>
                    {{ t('template.preview') }}
                </h3>
                <div id="template-preview" class="text-sm text-blue-700 whitespace-pre-wrap bg-white rounded border p-3 min-h-16">
                    {{ content or t('template.preview') + '...' }}
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex justify-end space-x-3 pt-6 border-t border-gray-200">
                <a href="/templates" class="btn-secondary">
                    {{ t('template.cancel') }}
                </a>
                <button type="button" onclick="validateTemplate()" class="btn-outline">
                    <i class="fas fa-check-circle mr-2"></i>
                    {{ t('template.validate') }}
                </button>
                <button type="submit" class="btn-primary" id="save-btn">
                    <i class="fas fa-save mr-2"></i>
                    {% if action == 'create' %}
                        {{ t('template.create') }}
                    {% else %}
                        {{ t('template.save') }}
                    {% endif %}
                </button>
            </div>
        </form>
    </div>
</div>

<script>
// Extract variables from template content
function extractVariables() {
    const content = document.getElementById('content').value;
    const preview = document.getElementById('template-preview');
    const variablesSection = document.getElementById('variables-section');
    const variablesList = document.getElementById('variables-list');
    
    // Update preview
    preview.textContent = content || "{{ t('template.preview') }}...";
    
    // Extract variables using regex
    const variableRegex = /\{([^}]+)\}/g;
    const variables = [];
    let match;
    
    while ((match = variableRegex.exec(content)) !== null) {
        if (!variables.includes(match[1])) {
            variables.push(match[1]);
        }
    }
    
    // Update variables display
    if (variables.length > 0) {
        variablesSection.style.display = 'block';
        variablesList.innerHTML = variables.map(variable => 
            `<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                {${variable}}
            </span>`
        ).join('');
    } else {
        variablesSection.style.display = 'none';
    }
}

// Validate template
function validateTemplate() {
    const content = document.getElementById('content').value;
    const name = document.getElementById('name').value;
    
    if (!name.trim()) {
        alert("{{ t('template.validation_error') }}: {{ t('template.name') }} {{ t('form.required').lower() }}");
        return;
    }
    
    if (!content.trim()) {
        alert("{{ t('template.validation_error') }}: {{ t('template.content') }} {{ t('form.required').lower() }}");
        return;
    }
    
    // Check for balanced braces
    const openBraces = (content.match(/\{/g) || []).length;
    const closeBraces = (content.match(/\}/g) || []).length;
    
    if (openBraces !== closeBraces) {
        alert("{{ t('template.validation_error') }}: Mismatched braces in template content");
        return;
    }
    
    alert("✅ {{ t('template.validation_error').replace('failed', 'passed') }}");
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    extractVariables();
});
</script>

<style>
.form-input, .form-textarea, .form-select {
    @apply block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm;
}

.btn-primary {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500;
}

.btn-secondary {
    @apply inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500;
}

.btn-outline {
    @apply inline-flex items-center px-4 py-2 border border-primary-600 text-sm font-medium rounded-md text-primary-600 bg-white hover:bg-primary-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500;
}
</style>
{% endblock %}