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

{% block title %}Email Templates{% endblock %}

{% block alpine_data %}emailTemplatesPage(){% endblock %}

{% block content %}
<div class="py-6">
    <!-- Header -->
    <div class="mb-8">
        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
            Email Templates
        </h2>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
            Manage platform email templates. Vendors can override non-platform-only templates.
        </p>
    </div>

    <!-- Loading State -->
    <div x-show="loading" class="flex justify-center py-12">
        <span x-html="$icon('spinner', 'h-8 w-8 text-purple-600')"></span>
    </div>

    <div x-show="!loading" x-cloak>
        <!-- Category Tabs -->
        <div class="border-b border-gray-200 dark:border-gray-700 mb-6">
            <nav class="-mb-px flex space-x-8 overflow-x-auto">
                <button
                    @click="selectedCategory = null"
                    :class="{
                        'border-purple-500 text-purple-600 dark:text-purple-400': selectedCategory === null,
                        'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300': selectedCategory !== null
                    }"
                    class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors">
                    All Templates
                </button>
                <template x-for="cat in categories" :key="cat.code">
                    <button
                        @click="selectedCategory = cat.code"
                        :class="{
                            'border-purple-500 text-purple-600 dark:text-purple-400': selectedCategory === cat.code,
                            'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300': selectedCategory !== cat.code
                        }"
                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors">
                        <span x-text="cat.name"></span>
                    </button>
                </template>
            </nav>
        </div>

        <!-- Templates List -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-gray-700">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                            Template
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                            Category
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                            Languages
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                            Type
                        </th>
                        <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                            Actions
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                    <template x-for="template in filteredTemplates" :key="template.code">
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <span x-html="$icon('mail', 'h-5 w-5 text-gray-400 mr-3')"></span>
                                    <div>
                                        <div class="text-sm font-medium text-gray-900 dark:text-white" x-text="template.name"></div>
                                        <div class="text-sm text-gray-500 dark:text-gray-400 font-mono" x-text="template.code"></div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs rounded-full"
                                      :class="getCategoryClass(template.category)"
                                      x-text="template.category"></span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex space-x-1">
                                    <template x-for="lang in template.languages" :key="lang">
                                        <span class="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300 rounded uppercase"
                                              x-text="lang"></span>
                                    </template>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span x-show="template.is_platform_only"
                                      class="px-2 py-1 text-xs bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200 rounded-full">
                                    Platform Only
                                </span>
                                <span x-show="!template.is_platform_only"
                                      class="px-2 py-1 text-xs bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full">
                                    Overridable
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <button @click="editTemplate(template)"
                                        class="text-purple-600 hover:text-purple-900 dark:text-purple-400 dark:hover:text-purple-300 mr-3">
                                    Edit
                                </button>
                                <button @click="previewTemplate(template)"
                                        class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">
                                    Preview
                                </button>
                            </td>
                        </tr>
                    </template>

                    <tr x-show="filteredTemplates.length === 0">
                        <td colspan="5" class="px-6 py-12 text-center text-gray-500 dark:text-gray-400">
                            No templates found
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Edit Template Modal -->
<div x-show="showEditModal"
     x-cloak
     class="fixed inset-0 z-50 overflow-y-auto"
     x-transition:enter="transition ease-out duration-300"
     x-transition:enter-start="opacity-0"
     x-transition:enter-end="opacity-100"
     x-transition:leave="transition ease-in duration-200"
     x-transition:leave-start="opacity-100"
     x-transition:leave-end="opacity-0">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
        <!-- Backdrop -->
        <div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-75 transition-opacity"
             @click="closeEditModal()"></div>

        <!-- Modal Panel -->
        <div class="relative bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-4xl sm:w-full">
            <!-- Header -->
            <div class="bg-gray-50 dark:bg-gray-700 px-6 py-4 border-b border-gray-200 dark:border-gray-600">
                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 dark:text-white" x-text="editingTemplate?.name || 'Edit Template'"></h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400 font-mono" x-text="editingTemplate?.code"></p>
                    </div>
                    <button @click="closeEditModal()" class="text-gray-400 hover:text-gray-500">
                        <span x-html="$icon('x', 'h-6 w-6')"></span>
                    </button>
                </div>

                <!-- Language Tabs -->
                <div class="mt-4 flex space-x-2">
                    <template x-for="lang in ['en', 'fr', 'de', 'lb']" :key="lang">
                        <button
                            @click="editLanguage = lang; loadTemplateLanguage()"
                            :class="{
                                'bg-purple-600 text-white': editLanguage === lang,
                                'bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-500': editLanguage !== lang
                            }"
                            class="px-3 py-1 text-sm font-medium rounded-md uppercase transition-colors">
                            <span x-text="lang"></span>
                        </button>
                    </template>
                </div>
            </div>

            <!-- Body -->
            <div class="px-6 py-4 max-h-[60vh] overflow-y-auto">
                <!-- Loading -->
                <div x-show="loadingTemplate" class="flex justify-center py-8">
                    <span x-html="$icon('spinner', 'h-6 w-6 text-purple-600')"></span>
                </div>

                <div x-show="!loadingTemplate" class="space-y-4">
                    <!-- Subject -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                            Subject
                        </label>
                        <input type="text"
                               x-model="editForm.subject"
                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:text-white text-sm">
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                            Supports Jinja2 variables like {{ '{{' }} customer_name {{ '}}' }}
                        </p>
                    </div>

                    <!-- HTML Body -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                            HTML Body
                        </label>
                        <textarea x-model="editForm.body_html"
                                  rows="12"
                                  class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:text-white text-sm font-mono"></textarea>
                    </div>

                    <!-- Plain Text Body -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                            Plain Text Body
                        </label>
                        <textarea x-model="editForm.body_text"
                                  rows="6"
                                  class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:text-white text-sm font-mono"></textarea>
                    </div>

                    <!-- Variables Reference -->
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                        <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Available Variables</h4>
                        <div class="flex flex-wrap gap-2">
                            <template x-for="variable in editForm.variables || []" :key="variable">
                                <span class="px-2 py-1 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded text-xs font-mono"
                                      x-text="'{{ ' + variable + ' }}'"></span>
                            </template>
                            <span x-show="!editForm.variables || editForm.variables.length === 0"
                                  class="text-gray-500 dark:text-gray-400 text-sm">No variables defined</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Footer -->
            <div class="bg-gray-50 dark:bg-gray-700 px-6 py-4 border-t border-gray-200 dark:border-gray-600 flex justify-between">
                <div>
                    <button @click="sendTestEmail()"
                            :disabled="sendingTest"
                            class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
                        <span x-show="sendingTest" x-html="$icon('spinner', '-ml-1 mr-2 h-4 w-4')"></span>
                        <span x-html="$icon('mail', '-ml-1 mr-2 h-4 w-4')"></span>
                        <span x-text="sendingTest ? 'Sending...' : 'Send Test Email'"></span>
                    </button>
                </div>
                <div class="flex space-x-3">
                    <button @click="closeEditModal()"
                            class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 hover:bg-gray-50 dark:hover:bg-gray-500">
                        Cancel
                    </button>
                    <button @click="saveTemplate()"
                            :disabled="saving"
                            class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
                        <span x-show="saving" x-html="$icon('spinner', '-ml-1 mr-2 h-4 w-4 text-white')"></span>
                        <span x-text="saving ? 'Saving...' : 'Save Changes'"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Preview Modal -->
<div x-show="showPreviewModal"
     x-cloak
     class="fixed inset-0 z-50 overflow-y-auto"
     x-transition:enter="transition ease-out duration-300"
     x-transition:enter-start="opacity-0"
     x-transition:enter-end="opacity-100"
     x-transition:leave="transition ease-in duration-200"
     x-transition:leave-start="opacity-100"
     x-transition:leave-end="opacity-0">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
        <!-- Backdrop -->
        <div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-75 transition-opacity"
             @click="showPreviewModal = false"></div>

        <!-- Modal Panel -->
        <div class="relative bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-4xl sm:w-full">
            <!-- Header -->
            <div class="bg-gray-50 dark:bg-gray-700 px-6 py-4 border-b border-gray-200 dark:border-gray-600">
                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 dark:text-white">Email Preview</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400" x-text="previewData?.subject"></p>
                    </div>
                    <button @click="showPreviewModal = false" class="text-gray-400 hover:text-gray-500">
                        <span x-html="$icon('x', 'h-6 w-6')"></span>
                    </button>
                </div>
            </div>

            <!-- Body -->
            <div class="p-6 max-h-[70vh] overflow-y-auto bg-gray-100 dark:bg-gray-900">
                <div class="bg-white rounded-lg shadow-lg overflow-hidden">
                    <iframe :srcdoc="previewData?.body_html"
                            class="w-full h-96 border-0"
                            sandbox="allow-same-origin"></iframe>
                </div>
            </div>

            <!-- Footer -->
            <div class="bg-gray-50 dark:bg-gray-700 px-6 py-4 border-t border-gray-200 dark:border-gray-600 flex justify-end">
                <button @click="showPreviewModal = false"
                        class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 hover:bg-gray-50 dark:hover:bg-gray-500">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Test Email Modal -->
<div x-show="showTestEmailModal"
     x-cloak
     class="fixed inset-0 z-50 overflow-y-auto"
     x-transition:enter="transition ease-out duration-300"
     x-transition:enter-start="opacity-0"
     x-transition:enter-end="opacity-100"
     x-transition:leave="transition ease-in duration-200"
     x-transition:leave-start="opacity-100"
     x-transition:leave-end="opacity-0">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
        <!-- Backdrop -->
        <div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-75 transition-opacity"
             @click="showTestEmailModal = false"></div>

        <!-- Modal Panel -->
        <div class="relative bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-md sm:w-full">
            <!-- Header -->
            <div class="bg-gray-50 dark:bg-gray-700 px-6 py-4 border-b border-gray-200 dark:border-gray-600">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Send Test Email</h3>
            </div>

            <!-- Body -->
            <div class="px-6 py-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        Send to Email
                    </label>
                    <input type="email"
                           x-model="testEmailAddress"
                           placeholder="your@email.com"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:text-white text-sm">
                </div>
            </div>

            <!-- Footer -->
            <div class="bg-gray-50 dark:bg-gray-700 px-6 py-4 border-t border-gray-200 dark:border-gray-600 flex justify-end space-x-3">
                <button @click="showTestEmailModal = false"
                        class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 hover:bg-gray-50 dark:hover:bg-gray-500">
                    Cancel
                </button>
                <button @click="confirmSendTestEmail()"
                        :disabled="!testEmailAddress || sendingTest"
                        class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 disabled:opacity-50 disabled:cursor-not-allowed">
                    <span x-show="sendingTest" x-html="$icon('spinner', '-ml-1 mr-2 h-4 w-4 text-white')"></span>
                    <span x-text="sendingTest ? 'Sending...' : 'Send Test'"></span>
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script src="{{ url_for('static', path='admin/js/email-templates.js') }}"></script>
{% endblock %}