@extends('root')
@section('title', 'Laporan Pengiriman')

@push('styles')
<style>
    .summary-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 12px;
        color: white;
        padding: 20px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .summary-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .summary-card.active {
        box-shadow: 0 0 0 3px rgba(255,255,255,0.5);
        transform: scale(1.02);
    }
    .summary-card.success { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
    .summary-card.warning { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
    .summary-card.info { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
    .summary-card .icon {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 48px;
        opacity: 0.3;
    }
    .summary-card h3 { font-size: 28px; margin-bottom: 5px; }
    .summary-card p { margin: 0; opacity: 0.9; }
    
    .stat-badge { font-size: 12px; padding: 4px 8px; }
    .chart-container { min-height: 250px; }
    
    .filter-row { background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
    .table-responsive { max-height: 500px; }
    
    .status-badge {
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
    }
    .status-sent { background: #e3f2fd; color: #1976d2; }
    .status-delivered { background: #e8f5e9; color: #388e3c; }
    .status-read { background: #c8e6c9; color: #2e7d32; }
    .status-failed { background: #ffebee; color: #c62828; }
    .status-queued { background: #fff3e0; color: #ef6c00; }
    
    /* Message preview styles */
    .message-preview {
        max-width: 300px;
        position: relative;
    }
    .message-preview-content {
        font-size: 12px;
        line-height: 1.4;
        white-space: pre-wrap;
        word-break: break-word;
    }
    .message-preview-content.collapsed {
        max-height: 60px;
        overflow: hidden;
    }
    .message-preview-content.expanded {
        max-height: none;
    }
    .toggle-message {
        color: #0d6efd;
        cursor: pointer;
        font-size: 11px;
        display: inline-block;
        margin-top: 4px;
    }
    .toggle-message:hover {
        text-decoration: underline;
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Laporan Pengiriman',
        'links' => [
            ['url' => route('client.dashboard'), 'label' => 'Dashboard'],
        ],
        'current' => 'Laporan Pengiriman'
    ])

    {{-- Filters --}}
    <div class="filter-row">
        <form id="filter-form" class="row g-2 align-items-end">
            <div class="col-md-2">
                <label class="form-label small">Dari Tanggal</label>
                <input type="date" name="date_from" id="date_from" class="form-control form-control-sm" 
                    value="{{ now()->startOfMonth()->toDateString() }}">
            </div>
            <div class="col-md-2">
                <label class="form-label small">Sampai Tanggal</label>
                <input type="date" name="date_to" id="date_to" class="form-control form-control-sm" 
                    value="{{ now()->toDateString() }}">
            </div>
            <div class="col-md-2">
                <label class="form-label small">Recipient</label>
                <input type="text" name="recipient" id="recipient" class="form-control form-control-sm" 
                    placeholder="Nama / No. HP">
            </div>
            <div class="col-md-1">
                <label class="form-label small">Kategori</label>
                <select name="category" id="category" class="form-select form-select-sm">
                    <option value="">Semua</option>
                    <option value="marketing">Marketing</option>
                    <option value="utility">Utility</option>
                    <option value="otp">OTP</option>
                    <option value="service">Service</option>
                </select>
            </div>
            <div class="col-md-1">
                <label class="form-label small">Status</label>
                <select name="status" id="status" class="form-select form-select-sm">
                    <option value="">Semua</option>
                    <option value="sent">Sent</option>
                    <option value="delivered">Delivered</option>
                    <option value="read">Read</option>
                    <option value="success">Success (Delivered + Read)</option>
                    <option value="failed">Failed</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label small">Template</label>
                <select name="template_name" id="template_name" class="form-select form-select-sm select-template">
                    <option value="">Semua Template</option>
                    @foreach($templates as $tpl)
                        <option value="{{ $tpl }}">{{ $tpl }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary btn-sm w-100">
                    <i class="ti ti-filter me-1"></i>Filter
                </button>
            </div>
        </form>
    </div>

    {{-- Summary Cards --}}
    <div class="row g-3 mb-4" id="summary-cards">
        <div class="col-md-3">
            <div class="summary-card" data-filter-type="all" title="Klik untuk melihat semua pesan">
                <i class="ti ti-send icon"></i>
                <h3 id="total-messages" class="text-white" >-</h3>
                <p>Total Pesan</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="summary-card success" data-filter-type="success" title="Klik untuk melihat pesan sukses (delivered/read)">
                <i class="ti ti-check icon"></i>
                <h3 id="success-rate" class="text-white">-</h3>
                <p>Success Rate</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="summary-card warning" data-filter-type="failed" title="Klik untuk melihat pesan gagal">
                <i class="ti ti-x icon"></i>
                <h3 id="failed-count" class="text-white">-</h3>
                <p>Gagal</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="summary-card info" data-filter-type="all" title="Klik untuk melihat semua pesan">
                <i class="ti ti-currency-dollar icon"></i>
                <h3 id="total-cost" class="text-white">-</h3>
                <p>Total Biaya</p>
            </div>
        </div>
    </div>
        {{-- Data Table --}}
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h6 class="mb-0"><i class="ti ti-list me-1"></i>Detail Pengiriman</h6>
            <div class="btn-group">
                <button type="button" class="btn btn-sm btn-outline-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="ti ti-download me-1"></i>Export
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <!-- <li><a class="dropdown-item" href="#" id="btn-export-csv">
                        <i class="ti ti-file-text me-2"></i>Export CSV
                    </a></li> -->
                    <li><a class="dropdown-item" href="#" id="btn-export-excel">
                        <i class="ti ti-file-spreadsheet me-2"></i>Export Excel
                    </a></li>
                </ul>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-sm table-hover" id="messages-table">
                    <thead class="table-light">
                        <tr>
                            <th>Waktu</th>
                            <th>Template</th>
                            <th>Isi Pesan</th>
                            <th>Recipient</th>
                            <th>No. HP</th>
                            <th>Kategori</th>
                            <th>Status</th>
                            <th class="text-end">Biaya</th>
                            <th>Error</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <nav id="pagination-nav" class="mt-3"></nav>
        </div>
    </div>

    {{-- Charts Row --}}
    <div class="row g-3 mb-4">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0"><i class="ti ti-chart-line me-1"></i>Trend Pengiriman Harian</h6>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="dailyTrendChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0"><i class="ti ti-chart-pie me-1"></i>Status</h6>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="statusChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Statistics Row --}}
    <div class="row g-3 mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header d-flex justify-content-between">
                    <h6 class="mb-0"><i class="ti ti-template me-1"></i>Top Templates</h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0" id="top-templates-table">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-end">Total</th>
                                    <th class="text-end">Success</th>
                                    <th class="text-end">Failed</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0"><i class="ti ti-alert-triangle me-1"></i>Top Errors</h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0" id="top-errors-table">
                            <thead class="table-light">
                                <tr>
                                    <th>Error Message</th>
                                    <th class="text-end">Count</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let dailyTrendChart, statusChart;
let currentPage = 1;

$(document).ready(function() {
    $('#template_name').select2({ placeholder: 'Semua Template', allowClear: true, width: '100%' });

    loadReportData();

    $('#filter-form').on('submit', function(e) {
        e.preventDefault();
        currentPage = 1;
        loadReportData();
    });

    $('#btn-export-csv').on('click', function(e) {
        e.preventDefault();
        exportData('csv');
    });

    $('#btn-export-excel').on('click', function(e) {
        e.preventDefault();
        exportData('excel');
    });

    // Handle summary card click to apply filter
    $('.summary-card').on('click', function() {
        const filterType = $(this).data('filter-type');
        applySummaryCardFilter(filterType);
    });
});

function loadReportData() {
    const params = new URLSearchParams($('#filter-form').serialize());
    params.append('page', currentPage);

    $.ajax({
        url: '{{ route("client.reports.data") }}',
        data: params.toString(),
        success: function(resp) {
            updateSummary(resp.summary);
            updateCharts(resp.statistics);
            updateTopTemplates(resp.statistics.top_templates);
            updateTopErrors(resp.statistics.top_errors);
            updateDataTable(resp.data);
            
            // Update active card based on current status filter
            updateActiveCard();
        },
        error: function(xhr) {
            toastr.error('Gagal memuat data laporan');
        }
    });
}

/**
 * Update active card highlight based on current filter
 */
function updateActiveCard() {
    const currentStatus = $('#status').val();
    $('.summary-card').removeClass('active');
    
    if (currentStatus === 'success') {
        $('.summary-card[data-filter-type="success"]').addClass('active');
    } else if (currentStatus === 'failed') {
        $('.summary-card[data-filter-type="failed"]').addClass('active');
    } else if (!currentStatus) {
        // No status filter = all messages
        $('.summary-card[data-filter-type="all"]').first().addClass('active');
    }
}

function updateSummary(summary) {
    $('#total-messages').text(summary.total_messages.toLocaleString('id-ID'));
    $('#success-rate').text(summary.success_rate + '%');
    $('#failed-count').text(summary.failed_count.toLocaleString('id-ID'));
    $('#total-cost').text('Rp ' + summary.total_cost.toLocaleString('id-ID'));
}

function updateCharts(statistics) {
    // Daily Trend Chart
    const trendData = statistics.daily_trend || [];
    const labels = trendData.map(d => d.date);
    const successData = trendData.map(d => d.success);
    const failedData = trendData.map(d => d.failed);

    if (dailyTrendChart) dailyTrendChart.destroy();
    dailyTrendChart = new Chart(document.getElementById('dailyTrendChart'), {
        type: 'line',
        data: {
            labels: labels,
            datasets: [
                { label: 'Success', data: successData, borderColor: '#38ef7d', backgroundColor: 'rgba(56,239,125,0.1)', fill: true },
                { label: 'Failed', data: failedData, borderColor: '#f5576c', backgroundColor: 'rgba(245,87,108,0.1)', fill: true }
            ]
        },
        options: { responsive: true, maintainAspectRatio: false }
    });

    // Status Pie Chart
    const statusData = statistics.by_status || [];
    const statusLabels = statusData.map(d => d.status);
    const statusCounts = statusData.map(d => d.count);
    const statusColors = statusLabels.map(s => {
        const colors = { sent: '#1976d2', delivered: '#388e3c', read: '#2e7d32', failed: '#c62828', queued: '#ef6c00' };
        return colors[s] || '#999';
    });

    if (statusChart) statusChart.destroy();
    statusChart = new Chart(document.getElementById('statusChart'), {
        type: 'doughnut',
        data: {
            labels: statusLabels,
            datasets: [{ data: statusCounts, backgroundColor: statusColors }]
        },
        options: { responsive: true, maintainAspectRatio: false }
    });
}

function updateTopTemplates(templates) {
    const $tbody = $('#top-templates-table tbody').empty();
    if (!templates.length) {
        $tbody.append('<tr><td colspan="4" class="text-center text-muted">Tidak ada data</td></tr>');
        return;
    }
    templates.forEach(function(t) {
        $tbody.append(`
            <tr>
               
                <td class="text-end">${t.total_sent}</td>
                <td class="text-end text-success">${t.success}</td>
                <td class="text-end text-danger">${t.failed}</td>
            </tr>
        `);
    });
}

function updateTopErrors(errors) {
    const $tbody = $('#top-errors-table tbody').empty();
    if (!errors.length) {
        $tbody.append('<tr><td colspan="2" class="text-center text-muted">Tidak ada error</td></tr>');
        return;
    }
    errors.forEach(function(e) {
        $tbody.append(`
            <tr>
                <td><small class="text-danger">${e.error_message ? (e.error_message.length > 20 ? e.error_message.substring(0, 20) + '...' : e.error_message) : '-'}</small></td>
                <td class="text-end">${e.count}</td>
            </tr>
        `);
    });
}

function updateDataTable(data) {
    const $tbody = $('#messages-table tbody').empty();
    const items = data.data || [];
    
    if (!items.length) {
        $tbody.append('<tr><td colspan="9" class="text-center text-muted">Tidak ada data</td></tr>');
        return;
    }

    items.forEach(function(m, index) {
        const payload = typeof m.payload === 'string' ? JSON.parse(m.payload) : m.payload;
        const templateName = payload?.template_name || payload?.template || '-';
        
        // Get phone number from payload
        const phoneNumber = payload?.to || '-';
        
        // Get recipient name (contact name if available)
        const recipientName = m.contact_name || '-';
        
        // Extract template name from various payload formats
        let payloadTemplateName = '';
        let payloadSentComponents = [];
        
        if (payload?.template && typeof payload.template === 'object') {
            // Standard format: { template: { name: "...", components: [...] } }
            payloadTemplateName = payload.template.name || '';
            payloadSentComponents = payload.template.components || [];
        } else if (payload?.template && typeof payload.template === 'string') {
            // Legacy format: { template: "template_name" }
            payloadTemplateName = payload.template;
            payloadSentComponents = payload.components || [];
        } else if (payload?.template_name) {
            // Another legacy format: { template_name: "..." }
            payloadTemplateName = payload.template_name;
            payloadSentComponents = payload.components || [];
        }
        
        // Build template object with database data + sent data for rendering
        const templateData = {
            name: m.template_name_db || payloadTemplateName,
            display_name: m.template_display_name || payloadTemplateName,
            body: m.template_body || payload?.body,
            template_components: parseJsonSafe(m.template_components),
            sent_components: payloadSentComponents,
            template_params: payload?.template_params || []
        };
        
        // DEBUG: Log template data to see what's being received
        if (index === 0) {
            console.log('=== Template Data Debug ===');
            console.log('Raw message:', m);
            console.log('template_name_db:', m.template_name_db);
            console.log('template_display_name:', m.template_display_name);
            console.log('template_body:', m.template_body);
            console.log('template_components (raw):', m.template_components);
            console.log('template_components (parsed):', parseJsonSafe(m.template_components));
            console.log('Payload:', payload);
            console.log('payloadTemplateName:', payloadTemplateName);
            console.log('payloadSentComponents:', payloadSentComponents);
            console.log('Final templateData:', templateData);
        }
        
        // Render message content like inbox
        const messageContent = renderTemplateMessage(templateData);
        const messageId = 'msg-' + index;
        
        const statusClass = 'status-' + m.status;
        
        $tbody.append(`
            <tr>
                <td><small>${formatDate(m.sent_at || m.created_at)}</small></td>
                <td><code>${templateName}</code></td>
                <td>
                    <div class="message-preview">
                        <div class="message-preview-content collapsed" id="${messageId}">${messageContent}</div>
                        <span class="toggle-message" data-target="${messageId}" data-state="collapsed">Show More</span>
                    </div>
                </td>
                <td>${recipientName}</td>
                <td><small><code>${phoneNumber}</code></small></td>
                <td><span class="badge bg-light text-dark">${m.category || '-'}</span></td>
                <td><span class="status-badge ${statusClass}">${m.status}</span></td>
                <td class="text-end">Rp ${(m.status === 'failed' ? 0 : parseFloat(m.cost)).toLocaleString('id-ID')}</td>
                <td><small class="text-danger">${m.error_message ? (m.error_message.length > 20 ? m.error_message.substring(0, 20) + '...' : m.error_message) : '-'}</small></td>
            </tr>
        `);
    });
    
    // Bind toggle events
    $('.toggle-message').on('click', function() {
        const targetId = $(this).data('target');
        const $content = $('#' + targetId);
        const state = $(this).data('state');
        
        if (state === 'collapsed') {
            $content.removeClass('collapsed').addClass('expanded');
            $(this).text('Show Less').data('state', 'expanded');
        } else {
            $content.removeClass('expanded').addClass('collapsed');
            $(this).text('Show More').data('state', 'collapsed');
        }
    });

    // Pagination
    updatePagination(data);
}

function updatePagination(data) {
    const $nav = $('#pagination-nav').empty();
    if (data.last_page <= 1) return;

    let html = '<ul class="pagination pagination-sm justify-content-center">';
    
    // Previous
    html += `<li class="page-item ${data.current_page === 1 ? 'disabled' : ''}">
        <a class="page-link" href="#" data-page="${data.current_page - 1}">«</a>
    </li>`;

    // Pages
    for (let i = 1; i <= data.last_page; i++) {
        if (i === 1 || i === data.last_page || (i >= data.current_page - 2 && i <= data.current_page + 2)) {
            html += `<li class="page-item ${i === data.current_page ? 'active' : ''}">
                <a class="page-link" href="#" data-page="${i}">${i}</a>
            </li>`;
        } else if (i === data.current_page - 3 || i === data.current_page + 3) {
            html += '<li class="page-item disabled"><span class="page-link">...</span></li>';
        }
    }

    // Next
    html += `<li class="page-item ${data.current_page === data.last_page ? 'disabled' : ''}">
        <a class="page-link" href="#" data-page="${data.current_page + 1}">»</a>
    </li>`;

    html += '</ul>';
    $nav.html(html);

    $nav.find('.page-link').on('click', function(e) {
        e.preventDefault();
        const page = $(this).data('page');
        if (page && page >= 1 && page <= data.last_page) {
            currentPage = page;
            loadReportData();
        }
    });
}

function formatDate(dateStr) {
    if (!dateStr) return '-';
    const d = new Date(dateStr);
    return d.toLocaleDateString('id-ID') + ' ' + d.toLocaleTimeString('id-ID', {hour: '2-digit', minute: '2-digit'});
}

function exportData(format = 'csv') {
    const params = new URLSearchParams($('#filter-form').serialize());
    params.append('format', format);
    window.location.href = '{{ route("client.reports.export") }}?' + params.toString();
}

/**
 * Apply filter based on summary card clicked
 */
function applySummaryCardFilter(filterType) {
    // Reset all filters first
    $('#date_from').val('{{ now()->startOfMonth()->toDateString() }}');
    $('#date_to').val('{{ now()->toDateString() }}');
    $('#recipient').val('');
    $('#category').val('');
    $('#template_name').val('').trigger('change');
    $('#status').val('');

    // Apply specific filter based on card type
    switch(filterType) {
        case 'success':
            // Success rate: show delivered or read messages
            // Use special "success" value which backend will interpret as delivered + read
            $('#status').val('success');
            toastr.info('Filter diterapkan: Menampilkan pesan sukses (Delivered + Read)');
            break;
        case 'failed':
            // Failed: show only failed messages
            $('#status').val('failed');
            toastr.info('Filter diterapkan: Status = Failed');
            break;
        case 'all':
        default:
            // All messages: no status filter (already reset above)
            toastr.info('Filter direset: Menampilkan semua pesan');
            break;
    }

    // Reset to first page and reload data
    currentPage = 1;
    loadReportData();
}

// Escape HTML to prevent XSS
function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Safely parse JSON
function parseJsonSafe(str) {
    if (!str) return [];
    if (typeof str === 'object') return str;
    try {
        return JSON.parse(str);
    } catch (e) {
        return [];
    }
}

// Render WhatsApp template message (matching inbox rendering)
function renderTemplateMessage(template) {
    if (!template || !template.name) {
        return '<em>[Template]</em>';
    }
    
    let html = '<div style="border-left:3px solid #25D366;padding-left:10px;font-size:12px;">';
    
    // Get template components from database definition
    const templateComponents = template.template_components || [];
    const sentComponents = template.sent_components || [];
    const templateParams = template.template_params || [];
    
    // Build parameter map from sent components for substitution
    const paramMap = {};
    sentComponents.forEach(comp => {
        if (comp.type === 'header' && comp.parameters) {
            paramMap.header = comp.parameters;
        } else if (comp.type === 'body' && comp.parameters) {
            paramMap.body = comp.parameters;
        } else if (comp.type === 'button' && comp.parameters) {
            if (!paramMap.buttons) paramMap.buttons = [];
            paramMap.buttons[comp.index || 0] = comp.parameters;
        }
    });
    
    // Also use template_params as body parameters if paramMap.body is empty
    if (!paramMap.body && templateParams.length > 0) {
        paramMap.body = templateParams.map(p => ({ text: String(p) }));
    }
    
    // Parse and render template components from database
    let hasContent = false;
    
    templateComponents.forEach(comp => {
        const compType = comp.type?.toLowerCase();
        
        if (compType === 'header') {
            hasContent = true;
            const format = comp.format?.toLowerCase();
            
            if (format === 'image') {
                const headerParams = paramMap.header || [];
                const imageUrl = headerParams[0]?.image?.link || '';
                if (imageUrl) {
                    html += `<div style="margin-bottom:6px"><img src="${imageUrl}" style="max-width:150px;border-radius:6px;"></div>`;
                }
            } else if (format === 'video') {
                html += `<div style="margin-bottom:6px;color:#666;"><em>[Video]</em></div>`;
            } else if (format === 'document') {
                const headerParams = paramMap.header || [];
                const docFilename = headerParams[0]?.document?.filename || 'Document';
                html += `<div style="margin-bottom:6px;padding:6px;background:#f5f5f5;border-radius:4px;"><i class="ti ti-file"></i> ${escapeHtml(docFilename)}</div>`;
            } else if (format === 'text' || !format) {
                let headerText = comp.text || '';
                const headerParams = paramMap.header || [];
                headerParams.forEach((p, i) => {
                    if (p.text) {
                        const placeholder = new RegExp(`\\{\\{${i + 1}\\}\\}`, 'g');
                        headerText = headerText.replace(placeholder, p.text);
                    }
                });
                if (headerText) {
                    html += `<div style="font-weight:600;margin-bottom:4px">${escapeHtml(headerText)}</div>`;
                }
            }
        } else if (compType === 'body') {
            hasContent = true;
            let bodyText = comp.text || template.body || '';
            const bodyParams = paramMap.body || [];
            
            // Replace {{1}}, {{2}}, etc. with actual parameter values
            bodyParams.forEach((p, i) => {
                if (p.text) {
                    const placeholder = new RegExp(`\\{\\{${i + 1}\\}\\}`, 'g');
                    bodyText = bodyText.replace(placeholder, p.text);
                }
            });
            
            if (bodyText) {
                bodyText = escapeHtml(bodyText).replace(/\n/g, '<br>');
                html += `<div style="line-height:1.4">${bodyText}</div>`;
            }
        } else if (compType === 'footer') {
            hasContent = true;
            const footerText = comp.text || '';
            if (footerText) {
                html += `<div style="color:#888;margin-top:4px;font-size:11px">${escapeHtml(footerText)}</div>`;
            }
        } else if (compType === 'buttons') {
            hasContent = true;
            const buttons = comp.buttons || [];
            if (buttons.length > 0) {
                html += `<div style="margin-top:6px;display:flex;flex-wrap:wrap;gap:4px">`;
                buttons.forEach((btn, idx) => {
                    const btnText = btn.text || 'Button';
                    html += `<span style="padding:3px 8px;background:#e3f2fd;border-radius:4px;color:#1976d2;font-size:11px">${escapeHtml(btnText)}</span>`;
                });
                html += `</div>`;
            }
        }
    });
    
    // Fallback: if we have body text but no template_components, show body directly
    if (!hasContent && template.body) {
        let bodyText = template.body;
        const bodyParams = paramMap.body || [];
        bodyParams.forEach((p, i) => {
            if (p.text) {
                const placeholder = new RegExp(`\\{\\{${i + 1}\\}\\}`, 'g');
                bodyText = bodyText.replace(placeholder, p.text);
            }
        });
        bodyText = escapeHtml(bodyText).replace(/\n/g, '<br>');
        html += `<div style="line-height:1.4">${bodyText}</div>`;
        hasContent = true;
    }
    
    // If still no content, show template params directly
    if (!hasContent) {
        const bodyParams = paramMap.body || [];
        if (bodyParams.length > 0) {
            html += `<div style="line-height:1.4">`;
            bodyParams.forEach((p, i) => {
                if (p.text) {
                    html += `<div>${escapeHtml(p.text)}</div>`;
                }
            });
            html += `</div>`;
        } else {
            html += `<em style="color:#666">[Template: ${escapeHtml(template.name)}]</em>`;
        }
    }
    
    html += '</div>';
    return html;
}
</script>
@endpush