{% extends "base.html" %}

{% block title %}Message Templates{% endblock %}
{% block page_id %}message-templates{% endblock %}
{% block page_title %}Message Templates{% endblock %}
{% block eyebrow %}Settings{% endblock %}

{% block content %}
<section class="panel-stack">

    <!-- Template Tabs -->
    <div style="display: flex; gap: 1rem; margin-bottom: 2rem; border-bottom: 2px solid #e2e8f0;">
        <button onclick="showTab('email')" id="emailTab" class="tab-btn active" style="padding: 1rem 2rem; border: none; background: none; cursor: pointer; font-weight: 600; border-bottom: 3px solid #2c7da0; color: #2c7da0;">
            📧 Email Templates
        </button>
        <button onclick="showTab('whatsapp')" id="whatsappTab" class="tab-btn" style="padding: 1rem 2rem; border: none; background: none; cursor: pointer; font-weight: 600; border-bottom: 3px solid transparent; color: #64748b;">
            💬 WhatsApp Templates
        </button>
    </div>

    <!-- EMAIL TEMPLATES TAB -->
    <div id="emailContent" class="tab-content">
        <article class="glass-card panel-card">
            <div class="panel-header">
                <div>
                    <p class="eyebrow">Email Templates</p>
                    <h3>Manage Email Templates</h3>
                </div>
            </div>

            <div style="margin-top: 1.5rem;">
                {% for template in templates if template.channel == 'email' %}
                <div style="padding: 1rem; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center;">
                    <div>
                        <h4 style="margin: 0 0 0.5rem; font-size: 1rem; color: #0f172a;">{{ template.template_name }}</h4>
                        <p style="margin: 0; font-size: 0.85rem; color: #64748b;">Subject: {{ template.subject }}</p>
                        <span style="font-size: 0.75rem; padding: 0.25rem 0.5rem; background: {% if template.is_active %}#dcfce7{% else %}#f1f5f9{% endif %}; color: {% if template.is_active %}#16a34a{% else %}#64748b{% endif %}; border-radius: 12px; display: inline-block; margin-top: 0.5rem;">
                            {% if template.is_active %}ACTIVE{% else %}INACTIVE{% endif %}
                        </span>
                    </div>
                    <button onclick="editTemplate({{ template.id }}, 'email')" class="primary-btn" style="background: #2c7da0;">
                        Edit Template
                    </button>
                </div>
                {% endfor %}
            </div>
        </article>
    </div>

    <!-- WHATSAPP TEMPLATES TAB -->
    <div id="whatsappContent" class="tab-content" style="display: none;">
        <article class="glass-card panel-card">
            <div class="panel-header">
                <div>
                    <p class="eyebrow">WhatsApp Templates</p>
                    <h3>Manage WhatsApp Templates</h3>
                </div>
            </div>

            <p style="color: #64748b; margin: 1rem 0; padding: 1rem; background: #f8fafc; border-radius: 8px;">
                💡 <strong>Note:</strong> WhatsApp templates must be approved by Meta/SmartChat before use. Changes here update the template name and media URL used when sending messages.
            </p>

            <div style="margin-top: 1.5rem;">
                {% for template in templates if template.channel == 'whatsapp' %}
                <div style="padding: 1rem; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center;">
                    <div>
                        <h4 style="margin: 0 0 0.5rem; font-size: 1rem; color: #0f172a;">{{ template.template_name }}</h4>
                        <p style="margin: 0; font-size: 0.85rem; color: #64748b;">Template: {{ template.whatsapp_template_name or 'event_gallery_link' }}</p>
                        <p style="margin: 0.25rem 0 0; font-size: 0.85rem; color: #64748b;">Message: {{ template.email_body[:80] }}...</p>
                        <span style="font-size: 0.75rem; padding: 0.25rem 0.5rem; background: {% if template.is_active %}#dcfce7{% else %}#f1f5f9{% endif %}; color: {% if template.is_active %}#16a34a{% else %}#64748b{% endif %}; border-radius: 12px; display: inline-block; margin-top: 0.5rem;">
                            {% if template.is_active %}ACTIVE{% else %}INACTIVE{% endif %}
                        </span>
                    </div>
                    <button onclick="editTemplate({{ template.id }}, 'whatsapp')" class="primary-btn" style="background: #16a34a;">
                        Edit Template
                    </button>
                </div>
                {% endfor %}
            </div>
        </article>
    </div>

    <!-- Global Settings -->
    <article class="glass-card panel-card" style="margin-top: 2rem;">
        <div class="panel-header">
            <div>
                <p class="eyebrow">Global Settings</p>
                <h3>Email & WhatsApp Configuration</h3>
            </div>
        </div>

        <form id="settingsForm" style="margin-top: 1.5rem;">
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
                <div>
                    <label style="display: block; font-weight: 600; font-size: 0.85rem; color: #475569; margin-bottom: 0.5rem;">Email Sender Name</label>
                    <input type="text" name="sender_name" value="{{ settings.sender_name.setting_value if settings.sender_name else 'IMTMA Events' }}" style="width: 100%; padding: 0.75rem; border: 1px solid #cbd5e1; border-radius: 8px;">
                </div>
                <div>
                    <label style="display: block; font-weight: 600; font-size: 0.85rem; color: #475569; margin-bottom: 0.5rem;">Email Sender Address</label>
                    <input type="email" name="sender_email" value="{{ settings.sender_email.setting_value if settings.sender_email else 'noreply@imtma.in' }}" style="width: 100%; padding: 0.75rem; border: 1px solid #cbd5e1; border-radius: 8px;">
                </div>
                <div>
                    <label style="display: block; font-weight: 600; font-size: 0.85rem; color: #475569; margin-bottom: 0.5rem;">Primary Color</label>
                    <input type="color" name="primary_color" value="{{ settings.primary_color.setting_value if settings.primary_color else '#2c7da0' }}" style="padding: 0.5rem; border: 1px solid #cbd5e1; border-radius: 8px;">
                </div>
                <div>
                    <label style="display: block; font-weight: 600; font-size: 0.85rem; color: #475569; margin-bottom: 0.5rem;">WhatsApp API Token</label>
                    <input type="text" name="whatsapp_token" value="{{ settings.whatsapp_token.setting_value if settings.whatsapp_token else 'IMT365MA' }}" style="width: 100%; padding: 0.75rem; border: 1px solid #cbd5e1; border-radius: 8px;">
                </div>
            </div>

            <button type="submit" class="primary-btn" style="margin-top: 1.5rem; background: #16a34a;">
                Save Settings
            </button>
        </form>
    </article>

</section>

<!-- Edit EMAIL Template Modal -->
<div id="editEmailModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 1000; align-items: center; justify-content: center;">
    <div style="background: white; border-radius: 12px; max-width: 800px; width: 90%; max-height: 90vh; overflow-y: auto; padding: 2rem;">
        <h3 style="margin: 0 0 1.5rem;">Edit Email Template</h3>

        <form id="emailTemplateForm">
            <input type="hidden" id="emailTemplateId">

            <div style="margin-bottom: 1rem;">
                <label style="display: block; font-weight: 600; font-size: 0.85rem; color: #475569; margin-bottom: 0.5rem;">Subject Line</label>
                <input type="text" id="emailSubject" style="width: 100%; padding: 0.75rem; border: 1px solid #cbd5e1; border-radius: 8px;">
            </div>

            <div style="margin-bottom: 1rem;">
                <label style="display: block; font-weight: 600; font-size: 0.85rem; color: #475569; margin-bottom: 0.5rem;">Email Body (HTML)</label>
                <textarea id="emailBody" rows="10" style="width: 100%; padding: 0.75rem; border: 1px solid #cbd5e1; border-radius: 8px; font-family: monospace;"></textarea>
                <p style="font-size: 0.75rem; color: #64748b; margin-top: 0.5rem;">
                    Available placeholders: {user_name}, {gallery_link}, {event_name}, {user_email}
                </p>
            </div>

            <div style="margin-bottom: 1rem;">
                <label style="display: block; font-weight: 600; font-size: 0.85rem; color: #475569; margin-bottom: 0.5rem;">Footer Text</label>
                <textarea id="emailFooter" rows="3" style="width: 100%; padding: 0.75rem; border: 1px solid #cbd5e1; border-radius: 8px;"></textarea>
            </div>

            <div style="margin-bottom: 1.5rem;">
                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                    <input type="checkbox" id="emailActive" style="width: 18px; height: 18px;">
                    <span style="font-weight: 600; font-size: 0.85rem; color: #475569;">Active Template</span>
                </label>
            </div>

            <div style="display: flex; gap: 1rem;">
                <button type="button" onclick="previewEmail()" class="primary-btn" style="background: #f59e0b;">
                    Preview
                </button>
                <button type="submit" class="primary-btn" style="background: #16a34a;">
                    Save Template
                </button>
                <button type="button" onclick="closeEmailModal()" style="padding: 0.75rem 2rem; border: 1px solid #cbd5e1; background: white; border-radius: 8px; cursor: pointer;">
                    Cancel
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Edit WHATSAPP Template Modal -->
<div id="editWhatsAppModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 1000; align-items: center; justify-content: center;">
    <div style="background: white; border-radius: 12px; max-width: 700px; width: 90%; max-height: 90vh; overflow-y: auto; padding: 2rem;">
        <h3 style="margin: 0 0 1.5rem;">Edit WhatsApp Template</h3>

        <form id="whatsappTemplateForm">
            <input type="hidden" id="whatsappTemplateId">

            <div style="margin-bottom: 1rem;">
                <label style="display: block; font-weight: 600; font-size: 0.85rem; color: #475569; margin-bottom: 0.5rem;">SmartChat Template Name</label>
                <input type="text" id="whatsappTemplateName" placeholder="event_gallery_link" style="width: 100%; padding: 0.75rem; border: 1px solid #cbd5e1; border-radius: 8px;">
                <p style="font-size: 0.75rem; color: #64748b; margin-top: 0.5rem;">
                    This must match your approved template name in SmartChat/Meta
                </p>
            </div>

            <div style="margin-bottom: 1rem;">
                <label style="display: block; font-weight: 600; font-size: 0.85rem; color: #475569; margin-bottom: 0.5rem;">Message Text</label>
                <textarea id="whatsappBody" rows="5" style="width: 100%; padding: 0.75rem; border: 1px solid #cbd5e1; border-radius: 8px;"></textarea>
                <p style="font-size: 0.75rem; color: #64748b; margin-top: 0.5rem;">
                    Available placeholders: {user_name}, {gallery_link}, {event_name}
                </p>
            </div>

            <div style="margin-bottom: 1rem;">
                <label style="display: block; font-weight: 600; font-size: 0.85rem; color: #475569; margin-bottom: 0.5rem;">Media URL (Image/Video)</label>
                <input type="url" id="whatsappMediaUrl" placeholder="https://example.com/image.jpg" style="width: 100%; padding: 0.75rem; border: 1px solid #cbd5e1; border-radius: 8px;">
            </div>

            <div style="margin-bottom: 1.5rem;">
                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                    <input type="checkbox" id="whatsappActive" style="width: 18px; height: 18px;">
                    <span style="font-weight: 600; font-size: 0.85rem; color: #475569;">Active Template</span>
                </label>
            </div>

            <div style="display: flex; gap: 1rem;">
                <button type="submit" class="primary-btn" style="background: #16a34a;">
                    Save Template
                </button>
                <button type="button" onclick="closeWhatsAppModal()" style="padding: 0.75rem 2rem; border: 1px solid #cbd5e1; background: white; border-radius: 8px; cursor: pointer;">
                    Cancel
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Preview Modal -->
<div id="previewModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 1001; align-items: center; justify-content: center;">
    <div style="background: white; border-radius: 12px; max-width: 700px; width: 90%; max-height: 90vh; overflow-y: auto; padding: 2rem;">
        <h3 style="margin: 0 0 1rem;">Email Preview</h3>
        <h4 id="previewSubject" style="margin: 0 0 1rem; padding: 1rem; background: #f8fafc; border-left: 3px solid #2c7da0;"></h4>
        <div id="previewContent" style="border: 1px solid #e2e8f0; padding: 2rem; border-radius: 8px;"></div>
        <button onclick="document.getElementById('previewModal').style.display='none'" class="primary-btn" style="margin-top: 1.5rem; width: 100%;">
            Close Preview
        </button>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Tab switching
function showTab(tab) {
    if (tab === 'email') {
        document.getElementById('emailContent').style.display = 'block';
        document.getElementById('whatsappContent').style.display = 'none';
        document.getElementById('emailTab').classList.add('active');
        document.getElementById('whatsappTab').classList.remove('active');
        document.getElementById('emailTab').style.borderBottom = '3px solid #2c7da0';
        document.getElementById('emailTab').style.color = '#2c7da0';
        document.getElementById('whatsappTab').style.borderBottom = '3px solid transparent';
        document.getElementById('whatsappTab').style.color = '#64748b';
    } else {
        document.getElementById('emailContent').style.display = 'none';
        document.getElementById('whatsappContent').style.display = 'block';
        document.getElementById('emailTab').classList.remove('active');
        document.getElementById('whatsappTab').classList.add('active');
        document.getElementById('emailTab').style.borderBottom = '3px solid transparent';
        document.getElementById('emailTab').style.color = '#64748b';
        document.getElementById('whatsappTab').style.borderBottom = '3px solid #16a34a';
        document.getElementById('whatsappTab').style.color = '#16a34a';
    }
}

// Edit template
function editTemplate(id, channel) {
    fetch('/admin/api/email-templates/' + id)
    .then(r => r.json())
    .then(data => {
        if (channel === 'email') {
            document.getElementById('emailTemplateId').value = data.id;
            document.getElementById('emailSubject').value = data.subject;
            document.getElementById('emailBody').value = data.email_body;
            document.getElementById('emailFooter').value = data.footer_text || '';
            document.getElementById('emailActive').checked = data.is_active;
            document.getElementById('editEmailModal').style.display = 'flex';
        } else {
            document.getElementById('whatsappTemplateId').value = data.id;
            document.getElementById('whatsappTemplateName').value = data.whatsapp_template_name || 'event_gallery_link';
            document.getElementById('whatsappBody').value = data.email_body;
            document.getElementById('whatsappMediaUrl').value = data.whatsapp_media_url || '';
            document.getElementById('whatsappActive').checked = data.is_active;
            document.getElementById('editWhatsAppModal').style.display = 'flex';
        }
    });
}

function closeEmailModal() {
    document.getElementById('editEmailModal').style.display = 'none';
}

function closeWhatsAppModal() {
    document.getElementById('editWhatsAppModal').style.display = 'none';
}

// Save EMAIL template
document.getElementById('emailTemplateForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const id = document.getElementById('emailTemplateId').value;
    const data = {
        subject: document.getElementById('emailSubject').value,
        email_body: document.getElementById('emailBody').value,
        footer_text: document.getElementById('emailFooter').value,
        is_active: document.getElementById('emailActive').checked
    };

    fetch('/admin/api/email-templates/' + id, {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    })
    .then(r => r.json())
    .then(result => {
        if (result.success) {
            alert('Email template updated successfully!');
            location.reload();
        } else {
            alert('Error: ' + result.error);
        }
    });
});

// Save WHATSAPP template
document.getElementById('whatsappTemplateForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const id = document.getElementById('whatsappTemplateId').value;
    const data = {
        whatsapp_template_name: document.getElementById('whatsappTemplateName').value,
        email_body: document.getElementById('whatsappBody').value,
        whatsapp_media_url: document.getElementById('whatsappMediaUrl').value,
        is_active: document.getElementById('whatsappActive').checked
    };

    fetch('/admin/api/email-templates/' + id, {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    })
    .then(r => r.json())
    .then(result => {
        if (result.success) {
            alert('WhatsApp template updated successfully!');
            location.reload();
        } else {
            alert('Error: ' + result.error);
        }
    });
});

// Preview email
function previewEmail() {
    const data = {
        subject: document.getElementById('emailSubject').value,
        email_body: document.getElementById('emailBody').value,
        footer_text: document.getElementById('emailFooter').value
    };

    fetch('/admin/api/email-templates/preview', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    })
    .then(r => r.json())
    .then(result => {
        if (result.success) {
            document.getElementById('previewSubject').textContent = result.subject;
            document.getElementById('previewContent').innerHTML = result.html;
            document.getElementById('previewModal').style.display = 'flex';
        }
    });
}

// Save settings
document.getElementById('settingsForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData.entries());

    fetch('/admin/api/email-templates/settings', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    })
    .then(r => r.json())
    .then(result => {
        if (result.success) {
            alert('Settings saved successfully!');
        } else {
            alert('Error: ' + result.error);
        }
    });
});
</script>
{% endblock %}