{% extends 'base.html.twig' %}

{% block title %}{{ template ? 'Edit' : 'New' }} Template - Purple Mailer{% endblock %}

{% block stylesheets %}
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<style>
    #editor {
        height: 400px;
        background: white;
        border-radius: 0.75rem;
    }
    .ql-toolbar {
        border-radius: 0.75rem 0.75rem 0 0 !important;
        border: 2px solid #e2e8f0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    .ql-container {
        border-radius: 0 0 0.75rem 0.75rem !important;
        border: 2px solid #e2e8f0 !important;
        border-top: none !important;
    }
</style>
{% endblock %}

{% block body %}
<div class="page-header animate-fade-in">
    <h1><i class="bi bi-file-earmark-code"></i> {{ template ? 'Edit' : 'New' }} Template</h1>
    <p>Create beautiful HTML email templates</p>
</div>

<div class="card animate-fade-in">
    <div class="card-body p-4">
        <form method="post" action="{{ template ? path('app_template_update', {id: template.id}) : path('app_template_create') }}" id="templateForm">
            <div class="mb-4">
                <label class="form-label">Template Name</label>
                <input type="text" name="name" class="form-control" value="{{ template ? template.name : '' }}" required>
                <small class="text-muted">Give your template a descriptive name</small>
            </div>

            <div class="mb-3">
                <label for="subject" class="form-label">Email Subject</label>
                <input type="text" class="form-control" id="subject" name="subject" value="{{ template ? template.subject : '' }}" required>
                <small class="text-muted">Use variables: {% verbatim %}{{client_name}}, {{client_email}}, {{client_contact}}{% endverbatim %}</small>
            </div>

            {% if is_granted('ROLE_ADMIN') %}
            <div class="mb-3">
                <label for="user_id" class="form-label">Assign to User</label>
                <select name="user_id" id="user_id" class="form-select">
                    <option value="">-- Assign to myself --</option>
                    {% for user in users %}
                        <option value="{{ user.id }}" {% if template and template.user and template.user.id == user.id %}selected{% endif %}>
                            {{ user.email }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            {% endif %}

            <div class="mb-4">
                <label class="form-label d-flex justify-content-between align-items-center">
                    <span>HTML Content</span>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="toggleSourceBtn">
                        <i class="bi bi-code-slash"></i> Edit Source Code
                    </button>
                </label>
                
                <!-- Visual Editor Container -->
                <div id="editor-container">
                    <div id="editor"></div>
                </div>

                <!-- Raw HTML Textarea (Hidden by default) -->
                <textarea name="html_content" id="html_content" class="form-control font-monospace" rows="20" style="display:none;">{{ template ? template.htmlContent|raw : '' }}</textarea>
                
                <small class="text-muted mt-2 d-block">Available variables: {% verbatim %}{{client_name}}, {{client_email}}, {{client_contact}}{% endverbatim %}</small>
            </div>

            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-save"></i> Save Template
                </button>
                <a href="{{ path('app_template_index') }}" class="btn btn-secondary">
                    <i class="bi bi-x-circle"></i> Cancel
                </a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
var editorContainer = document.getElementById('editor-container');
var textarea        = document.getElementById('html_content');
var toggleBtn       = document.getElementById('toggleSourceBtn');

// Keep a clean copy of the saved HTML that Quill will never touch
var savedHtml   = textarea.value;
var isSourceMode = false;
var initializing = true;

// Initialize Quill (visual editor)
var quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
        toolbar: [
            [{ 'header': [1,2,3,4,5,6,false] }],
            ['bold', 'italic', 'underline', 'strike'],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'align': [] }],
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            ['link', 'image'],
            ['clean']
        ]
    }
});

// Load content into Quill without triggering our text-change handler
if (savedHtml) {
    quill.root.innerHTML = savedHtml;
}
// Allow text-change to start tracking only after init settles
setTimeout(function() { initializing = false; }, 50);

// If template already has HTML → default to source mode so user sees their code
if (savedHtml.trim()) {
    isSourceMode = true;
    editorContainer.style.display = 'none';
    textarea.style.display        = 'block';
    textarea.value                = savedHtml;
    toggleBtn.innerHTML = '<i class="bi bi-eye"></i> Show Visual Editor';
}

// Toggle source ↔ visual
toggleBtn.addEventListener('click', function() {
    if (isSourceMode) {
        // Source → Visual: load whatever is currently in textarea into Quill
        savedHtml = textarea.value;
        initializing = true;
        quill.root.innerHTML = savedHtml;
        setTimeout(function() { initializing = false; }, 50);
        editorContainer.style.display = 'block';
        textarea.style.display        = 'none';
        toggleBtn.innerHTML = '<i class="bi bi-code-slash"></i> Edit Source Code';
    } else {
        // Visual → Source: dump Quill HTML into textarea
        textarea.value = savedHtml;
        editorContainer.style.display = 'none';
        textarea.style.display        = 'block';
        toggleBtn.innerHTML = '<i class="bi bi-eye"></i> Show Visual Editor';
    }
    isSourceMode = !isSourceMode;
});

// Keep savedHtml in sync when editing visually
quill.on('text-change', function() {
    if (!isSourceMode && !initializing) {
        savedHtml      = quill.root.innerHTML;
        textarea.value = savedHtml;
    }
});

// On submit: make sure textarea holds the right content
document.getElementById('templateForm').addEventListener('submit', function() {
    if (!isSourceMode) {
        textarea.value = quill.root.innerHTML;
    }
    // In source mode: textarea is already visible and has its value — nothing to do
});
</script>
{% endblock %}