{% extends 'base.html.twig' %}
{% block title %}New Campaign – Rise Mailer{% endblock %}

{% block stylesheets %}
<style>
/* ── Template picker ─────────────────────────────────────────── */
.tpl-picker-trigger {
    display: flex;
    align-items: center;
    gap: .85rem;
    border: 2px dashed #e2e8f0;
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    background: #fafafa;
}
.tpl-picker-trigger:hover { border-color: var(--primary); background: #f5f3ff; }
.tpl-picker-trigger.has-selection { border-style: solid; border-color: var(--primary); background: #fff; }

.tpl-selected-preview {
    width: 72px; height: 54px; border-radius: .5rem; overflow: hidden;
    border: 1px solid #e2e8f0; flex-shrink: 0; background: #f8fafc;
    position: relative;
}
.tpl-selected-preview iframe {
    width: 600px; height: 450px; border: none; pointer-events: none;
    transform: scale(.12); transform-origin: top left;
}

/* ── Modal grid ──────────────────────────────────────────────── */
.tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    max-height: 60vh;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}
.tpl-card {
    border: 2px solid #e2e8f0;
    border-radius: .85rem;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s, transform .18s;
    background: #fff;
}
.tpl-card:hover {
    border-color: var(--primary);
    box-shadow: 0 6px 20px rgba(124,58,237,.15);
    transform: translateY(-2px);
}
.tpl-card.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(124,58,237,.2);
}
.tpl-card-frame {
    height: 130px;
    overflow: hidden;
    background: #f8fafc;
    position: relative;
}
.tpl-card-frame iframe {
    width: 600px; height: 450px; border: none; pointer-events: none;
    transform: scale(.33); transform-origin: top left;
}
.tpl-card-frame .tpl-selected-badge {
    position: absolute; top: 6px; right: 6px;
    background: var(--primary); color: #fff;
    border-radius: 50%; width: 22px; height: 22px;
    display: none; align-items: center; justify-content: center;
    font-size: .7rem;
}
.tpl-card.selected .tpl-selected-badge { display: flex; }
.tpl-card-info {
    padding: .6rem .75rem;
    border-top: 1px solid #f1f5f9;
}
.tpl-card-name { font-weight: 700; font-size: .8rem; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-card-sub  { font-size: .7rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .15rem; }

/* ── Search bar ──────────────────────────────────────────────── */
.tpl-search { border: 1.5px solid #e2e8f0; border-radius: .65rem; padding: .5rem .9rem; font-size: .875rem; outline: none; width: 100%; }
.tpl-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124,58,237,.1); }
</style>
{% endblock %}

{% block body %}
<div class="page-header animate-fade-in">
    <h1><i class="bi bi-send"></i> Create New Campaign</h1>
    <p>Send emails to your clients</p>
</div>

<div class="card animate-fade-in">
    <div class="card-body p-4">
        <form method="post" action="{{ path('app_campaign_create') }}" id="campaignForm">
            <input type="hidden" name="_token" value="{{ csrf_token('campaign_create') }}">

            {# ── Campaign Name ── #}
            <div class="mb-4">
                <label class="form-label fw-semibold">Campaign Name</label>
                <input type="text" name="campaign_name" class="form-control" required placeholder="e.g. Summer Promo 2026">
            </div>

            {# ── Template picker ── #}
            <div class="mb-4">
                <label class="form-label fw-semibold">Select Template</label>
                <input type="hidden" name="template_id" id="templateId" required>

                {# Trigger / selection display #}
                <div class="tpl-picker-trigger" id="pickerTrigger" onclick="openTemplatePicker()">
                    <div class="tpl-selected-preview" id="selectedThumb" style="display:none">
                        <iframe id="selectedThumbFrame" sandbox="allow-same-origin" title="selected"></iframe>
                    </div>
                    <div style="display:flex;align-items:center;gap:.6rem;flex:1" id="pickerPlaceholder">
                        <i class="bi bi-file-earmark-richtext" style="font-size:1.5rem;color:#94a3b8"></i>
                        <div>
                            <div style="font-weight:600;color:#475569;font-size:.9rem">Choose a template…</div>
                            <div style="font-size:.75rem;color:#94a3b8">Click to browse all templates with live previews</div>
                        </div>
                    </div>
                    <div id="selectedInfo" style="display:none;flex:1">
                        <div id="selectedName" style="font-weight:700;color:#1e293b;font-size:.9rem"></div>
                        <div id="selectedSubject" style="font-size:.75rem;color:#94a3b8;margin-top:.15rem"></div>
                    </div>
                    <div style="display:flex;gap:.4rem;flex-shrink:0">
                        <span id="changeBtn" style="display:none;background:#ede9fe;color:var(--primary);border-radius:.5rem;padding:.3rem .7rem;font-size:.75rem;font-weight:600">
                            <i class="bi bi-pencil-fill me-1"></i>Change
                        </span>
                        <span style="background:linear-gradient(135deg,var(--primary),#ec4899);color:#fff;border-radius:.5rem;padding:.3rem .7rem;font-size:.75rem;font-weight:600" id="browseBtn">
                            <i class="bi bi-grid-3x3-gap-fill me-1"></i>Browse
                        </span>
                    </div>
                </div>
            </div>

            {# ── Recipients ── #}
            <div class="mb-4">
                <label class="form-label fw-semibold">Recipients</label>
                <div class="mb-3">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="recipient_type" id="recipientAll" value="all" checked onchange="toggleRecipientOptions()">
                        <label class="form-check-label" for="recipientAll">All Clients ({{ clients|length }} clients)</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="recipient_type" id="recipientCategory" value="category" onchange="toggleRecipientOptions()">
                        <label class="form-check-label" for="recipientCategory">By Category</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="recipient_type" id="recipientSelected" value="selected" onchange="toggleRecipientOptions()">
                        <label class="form-check-label" for="recipientSelected">Select Specific Clients</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="recipient_type" id="recipientManual" value="manual" onchange="toggleRecipientOptions()">
                        <label class="form-check-label" for="recipientManual">Manual Email Input</label>
                    </div>
                </div>

                <div id="categoryDiv" style="display:none">
                    <label class="form-label">Select Category</label>
                    <select class="form-select" name="category_id">
                        <option value="">Choose a category…</option>
                        {% for category in categories %}
                        <option value="{{ category.id }}">{{ category.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div id="selectedClientsDiv" style="display:none">
                    <label class="form-label">Select Clients</label>
                    <div style="max-height:300px;overflow-y:auto;border:2px solid #e2e8f0;border-radius:.75rem;padding:1rem">
                        {% for client in clients %}
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="selected_clients[]" value="{{ client.id }}" id="client{{ client.id }}">
                            <label class="form-check-label" for="client{{ client.id }}">{{ client.name }} ({{ client.email }})</label>
                        </div>
                        {% endfor %}
                    </div>
                </div>

                <div id="manualEmailsDiv" style="display:none">
                    <label class="form-label">Manual Emails</label>
                    <textarea name="manual_emails" class="form-control" rows="8" placeholder="Enter emails, one per line. Format:&#10;John Doe <john@example.com>&#10;or just:&#10;jane@example.com"></textarea>
                    <small class="text-muted">One email per line. Supports: Name &lt;email&gt; or just email@example.com</small>
                </div>
            </div>

            {# ── Send Time ── #}
            <div class="card border-0 bg-light p-3 mb-4">
                <label class="form-label fw-semibold mb-2"><i class="bi bi-clock me-1 text-primary"></i> Send Time</label>
                <div class="d-flex align-items-center gap-3 flex-wrap">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="send_mode" id="sendNow" value="now" checked onchange="toggleSchedule()">
                        <label class="form-check-label" for="sendNow"><i class="bi bi-send me-1"></i> Send immediately</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="send_mode" id="sendLater" value="later" onchange="toggleSchedule()">
                        <label class="form-check-label" for="sendLater"><i class="bi bi-calendar-event me-1"></i> Schedule for later</label>
                    </div>
                </div>
                <div id="schedulePickerDiv" class="mt-2 d-none">
                    <input type="datetime-local" name="scheduled_at" id="scheduledAt" class="form-control"
                           min="{{ 'now'|date('Y-m-d') }}T{{ 'now'|date('H:i') }}"
                           style="max-width:300px">
                    <small class="text-muted">The campaign will be sent automatically at the selected date and time.</small>
                </div>
            </div>

            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary" id="submitBtn">
                    <i class="bi bi-send"></i> Send Campaign
                </button>
                <a href="{{ path('app_campaign_index') }}" class="btn btn-secondary">
                    <i class="bi bi-x-circle"></i> Cancel
                </a>
            </div>
        </form>
    </div>
</div>

{# ── Template Picker Modal ── #}
<div class="modal fade" id="templatePickerModal" tabindex="-1" style="--bs-modal-width:860px">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-file-earmark-richtext me-2"></i>Choose a Template</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div style="padding:.75rem 1.25rem;border-bottom:1px solid #f1f5f9;background:#fafafa">
                <input type="text" id="tplSearch" class="tpl-search" placeholder="Search templates…" oninput="filterTemplates(this.value)">
            </div>
            <div class="tpl-grid" id="tplGrid">
                {# populated by JS #}
            </div>
            <div class="modal-footer" style="border-top:1px solid #f1f5f9">
                <span style="font-size:.8rem;color:#94a3b8" id="tplCount">{{ templates|length }} templates</span>
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary btn-sm" id="confirmBtn" disabled onclick="confirmSelection()">
                    <i class="bi bi-check2 me-1"></i>Use Selected
                </button>
            </div>
        </div>
    </div>
</div>

{# ── Full Preview Modal ── #}
<div class="modal fade" id="fullPreviewModal" tabindex="-1" style="--bs-modal-width:760px;z-index:1060">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="fullPreviewTitle">Preview</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0">
                <iframe id="fullPreviewFrame" style="width:100%;height:520px;border:none" sandbox="allow-same-origin"></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary btn-sm" id="fullPreviewSelectBtn" onclick="selectFromPreview()">
                    <i class="bi bi-check2 me-1"></i>Use This Template
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
// ── Template data injected from server ──────────────────────────
const TEMPLATES = [
    {% for template in templates %}
    {
        id:      {{ template.id }},
        name:    {{ template.name|json_encode|raw }},
        subject: {{ template.subject|json_encode|raw }},
        html:    {{ template.htmlContent|json_encode|raw }},
    },
    {% endfor %}
];

let currentSelectedId = null;   // in-modal hover/click state
let confirmedId       = null;   // committed to form
let previewingId      = null;   // which template is in full-preview modal

// ── Build grid ──────────────────────────────────────────────────
function buildGrid(filter = '') {
    const grid  = document.getElementById('tplGrid');
    const lower = filter.toLowerCase();
    const list  = filter
        ? TEMPLATES.filter(t => t.name.toLowerCase().includes(lower) || t.subject.toLowerCase().includes(lower))
        : TEMPLATES;

    document.getElementById('tplCount').textContent = list.length + ' template' + (list.length !== 1 ? 's' : '');

    if (!list.length) {
        grid.innerHTML = '<div style="grid-column:1/-1;text-align:center;padding:3rem;color:#94a3b8"><i class="bi bi-search" style="font-size:2rem;display:block;margin-bottom:.5rem"></i>No templates match.</div>';
        return;
    }

    grid.innerHTML = list.map(t => `
        <div class="tpl-card ${t.id === (currentSelectedId ?? confirmedId) ? 'selected' : ''}"
             id="tpl-card-${t.id}"
             onclick="selectTemplate(${t.id})"
             ondblclick="openFullPreview(${t.id})">
            <div class="tpl-card-frame">
                <iframe srcdoc="${escAttr(t.html)}" sandbox="allow-same-origin" title="${escAttr(t.name)}" loading="lazy"></iframe>
                <div class="tpl-selected-badge"><i class="bi bi-check2"></i></div>
            </div>
            <div class="tpl-card-info">
                <div class="tpl-card-name">${escHtml(t.name)}</div>
                <div class="tpl-card-sub"><i class="bi bi-envelope me-1"></i>${escHtml(t.subject)}</div>
            </div>
            <div style="padding:.45rem .75rem;border-top:1px solid #f1f5f9;display:flex;justify-content:flex-end">
                <button type="button" style="background:#ede9fe;border:none;border-radius:.45rem;padding:.25rem .6rem;
                    font-size:.72rem;color:#7c3aed;font-weight:600;cursor:pointer"
                    onclick="event.stopPropagation();openFullPreview(${t.id})">
                    <i class="bi bi-eye me-1"></i>Preview
                </button>
            </div>
        </div>
    `).join('');
}

function escHtml(str) {
    return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}
function escAttr(str) {
    return String(str).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');
}

// ── Open/close picker ───────────────────────────────────────────
function openTemplatePicker() {
    currentSelectedId = confirmedId;
    document.getElementById('tplSearch').value = '';
    buildGrid();
    updateConfirmBtn();
    new bootstrap.Modal(document.getElementById('templatePickerModal')).show();
}

function filterTemplates(val) {
    buildGrid(val);
}

// ── Select inside modal ─────────────────────────────────────────
function selectTemplate(id) {
    currentSelectedId = id;
    document.querySelectorAll('.tpl-card').forEach(c => c.classList.remove('selected'));
    document.getElementById('tpl-card-' + id)?.classList.add('selected');
    updateConfirmBtn();
}

function updateConfirmBtn() {
    document.getElementById('confirmBtn').disabled = !currentSelectedId;
}

function confirmSelection() {
    if (!currentSelectedId) return;
    confirmedId = currentSelectedId;
    applySelection(confirmedId);
    bootstrap.Modal.getInstance(document.getElementById('templatePickerModal'))?.hide();
}

// ── Full preview ────────────────────────────────────────────────
function openFullPreview(id) {
    const t = TEMPLATES.find(x => x.id === id);
    if (!t) return;
    previewingId = id;
    document.getElementById('fullPreviewTitle').textContent = t.name;
    document.getElementById('fullPreviewFrame').srcdoc = t.html;
    document.getElementById('fullPreviewSelectBtn').textContent = confirmedId === id ? '✓ Selected' : 'Use This Template';
    document.getElementById('fullPreviewSelectBtn').disabled = confirmedId === id;
    new bootstrap.Modal(document.getElementById('fullPreviewModal')).show();
}

function selectFromPreview() {
    if (!previewingId) return;
    currentSelectedId = previewingId;
    confirmSelection();
    bootstrap.Modal.getInstance(document.getElementById('fullPreviewModal'))?.hide();
}

// ── Apply confirmed selection to form ──────────────────────────
function applySelection(id) {
    const t = TEMPLATES.find(x => x.id === id);
    if (!t) return;

    document.getElementById('templateId').value = id;

    // Update thumbnail
    const thumb = document.getElementById('selectedThumb');
    document.getElementById('selectedThumbFrame').srcdoc = t.html;
    thumb.style.display = 'block';

    // Update info
    document.getElementById('pickerPlaceholder').style.display = 'none';
    document.getElementById('selectedInfo').style.display = 'block';
    document.getElementById('selectedName').textContent = t.name;
    document.getElementById('selectedSubject').textContent = t.subject;

    // Show Change button
    document.getElementById('changeBtn').style.display = '';
    document.getElementById('browseBtn').innerHTML = '<i class="bi bi-grid-3x3-gap-fill me-1"></i>Browse';

    // Style trigger
    document.getElementById('pickerTrigger').classList.add('has-selection');
}

// ── Validation before submit ────────────────────────────────────
document.getElementById('campaignForm').addEventListener('submit', function(e) {
    if (!document.getElementById('templateId').value) {
        e.preventDefault();
        document.getElementById('pickerTrigger').style.borderColor = '#ef4444';
        document.getElementById('pickerTrigger').scrollIntoView({ behavior: 'smooth', block: 'center' });
        openTemplatePicker();
    }
});

// ── Schedule / recipients toggles ──────────────────────────────
function toggleSchedule() {
    const later = document.getElementById('sendLater').checked;
    document.getElementById('schedulePickerDiv').classList.toggle('d-none', !later);
    const btn = document.getElementById('submitBtn');
    btn.innerHTML = later
        ? '<i class="bi bi-calendar-check"></i> Schedule Campaign'
        : '<i class="bi bi-send"></i> Send Campaign';
    if (later) document.getElementById('scheduledAt').required = true;
    else { document.getElementById('scheduledAt').required = false; document.getElementById('scheduledAt').value = ''; }
}

function toggleRecipientOptions() {
    document.getElementById('selectedClientsDiv').style.display = document.getElementById('recipientSelected').checked ? 'block' : 'none';
    document.getElementById('categoryDiv').style.display        = document.getElementById('recipientCategory').checked  ? 'block' : 'none';
    document.getElementById('manualEmailsDiv').style.display    = document.getElementById('recipientManual').checked    ? 'block' : 'none';
}

document.addEventListener('DOMContentLoaded', toggleRecipientOptions);
</script>
{% endblock %}