@extends('backend.app')

@section('title', 'WhatsApp Settings')

@push('style')
    <style>
        /* Modern Breadcrumb Styles */
        .modern-breadcrumb {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
            border-radius: 12px;
            padding: 1rem 1.5rem 1rem 0;
            margin-bottom: 1.5rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .breadcrumb-items {
            display: flex;
            align-items: center;
            list-style: none;
            margin: 0;
            padding: 0;
            gap: 0.5rem;
        }

        .breadcrumb-item {
            display: flex;
            align-items: center;
            font-size: 0.875rem;
        }

        .breadcrumb-link {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            text-decoration: none;
            color: #6c757d;
            padding: 0.5rem 0.75rem;
            border-radius: 8px;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .breadcrumb-link:hover {
            background: white;
            color: #7367f0;
            box-shadow: 0 2px 8px rgba(115, 103, 240, 0.15);
            transform: translateY(-1px);
        }

        .breadcrumb-item.active {
            color: #7367f0;
            font-weight: 600;
        }

        .breadcrumb-item.active .breadcrumb-text {
            background: linear-gradient(135deg, #7367f0 0%, #a767ff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .breadcrumb-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            background: white;
            border-radius: 8px;
            color: #7367f0;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        }

        .breadcrumb-link:hover .breadcrumb-icon {
            background: linear-gradient(135deg, #7367f0 0%, #a767ff 100%);
            color: white;
        }

        .breadcrumb-item.active .breadcrumb-icon {
            background: linear-gradient(135deg, #7367f0 0%, #a767ff 100%);
            color: white;
        }

        .breadcrumb-separator {
            color: #adb5bd;
            font-size: 0.7rem;
            margin: 0 0.25rem;
        }

        .breadcrumb-text {
            text-transform: capitalize;
        }

        .settings-section {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
            margin-bottom: 1.5rem;
            overflow: hidden;
        }

        .settings-section-header {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 1rem 1.5rem;
            font-weight: 600;
        }

        .form-label {
            font-weight: 600;
            color: #5d596c;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: #4facfe;
            box-shadow: 0 0 0 0.2rem rgba(79, 172, 254, 0.15);
        }

        .sms-status {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.85rem;
        }

        .sms-status.active {
            background: #d4edda;
            color: #155724;
        }

        .sms-status.inactive {
            background: #f8d7da;
            color: #721c24;
        }

        .template-card {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 1rem;
            transition: all 0.3s ease;
        }

        .template-card:hover {
            border-color: #4facfe;
            box-shadow: 0 4px 12px rgba(79, 172, 254, 0.15);
        }

        .template-variable {
            display: inline-block;
            background: #e3f2fd;
            color: #1976d2;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-size: 0.85rem;
            margin: 0.25rem;
            font-family: monospace;
        }

        /* Live preview inside the "Send Test WhatsApp" dialog */
        .preview-box {
            background: #e7ffdb;
            border: 1px solid #c5e8b0;
            border-radius: 10px;
            padding: 0.75rem 0.9rem;
        }

        .preview-label {
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #128C7E;
            margin-bottom: 0.4rem;
        }

        .preview-body {
            white-space: pre-wrap;
            word-break: break-word;
            font-size: 0.875rem;
            line-height: 1.5;
            color: #222;
        }

        .preview-filled {
            background: #b7f0a0;
            border-radius: 3px;
            padding: 0 2px;
            font-weight: 600;
        }

        .preview-empty {
            color: #9aa0a6;
            font-family: monospace;
            font-size: 0.82rem;
        }

        .content-sid {
            font-family: monospace;
            font-size: 0.72rem;
            color: #6c757d;
            word-break: break-all;
        }
    </style>
@endpush

@section('content')
    <div class="app-content content">
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row align-items-center">
                        <div class="col-12">
                            @include('backend.partials.breadcrumb', [
                                'items' => [
                                    ['url' => route('dashboard'), 'title' => 'Dashboard', 'icon' => 'fas fa-home'],
                                    [
                                        'url' => route('settings.index'),
                                        'title' => 'Settings',
                                        'icon' => 'fas fa-cog',
                                    ],
                                    ['title' => 'WhatsApp', 'icon' => 'fab fa-whatsapp'],
                                ],
                            ])
                        </div>
                    </div>
                </div>
                <div class="content-body">
                    <form method="POST" action="{{ route('sms-settings.update') }}">
                        @csrf
                        @if(session('success'))
                            <div class="alert alert-success alert-dismissible">
                                <strong>Success!</strong> {{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        @endif

                        @if ($errors->any())
                            <div class="alert alert-danger alert-dismissible">
                                <strong>Error:</strong> Please fix the following issues:
                                <ul class="mb-0 mt-2">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        @endif
                        <!-- Twilio WhatsApp Configuration -->
                        <div class="settings-section">
                            <div class="settings-section-header" style="background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);">
                                <i class="fab fa-whatsapp"></i> Twilio WhatsApp Configuration
                            </div>
                            <div class="card-body">
                                <div class="row mb-4">
                                    <div class="col-12">
                                        <div class="alert alert-info d-flex align-items-center">
                                            <i class="fab fa-whatsapp me-3 fa-2x" style="color: #25D366;"></i>
                                            <div>
                                                <strong>WhatsApp Integration</strong> - Configure your Twilio WhatsApp to send
                                                WhatsApp notifications. Get your credentials from <a
                                                    href="https://www.twilio.com/console" target="_blank">Twilio
                                                    Console</a>. Enable WhatsApp sandbox from <a
                                                    href="https://www.twilio.com/console/sms/whatsapp/sandbox" target="_blank">WhatsApp Sandbox</a>.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Twilio Account SID</label>
                                            <input type="text" name="twilio_sid" class="form-control"
                                                value="{{ $settings->twilio_sid ?? '' }}"
                                                placeholder="ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
                                            <small class="text-muted">Your Twilio Account SID from console</small>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Twilio Auth Token</label>
                                            <input type="password" name="twilio_token" class="form-control"
                                                value="{{ $settings->twilio_token ?? '' }}"
                                                placeholder="Your Twilio Auth Token">
                                            <small class="text-muted">Keep this secret and secure</small>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">WhatsApp Number</label>
                                            <input type="text" name="twilio_whatsapp_number" class="form-control"
                                                value="{{ $settings->twilio_whatsapp_number ?? '' }}"
                                                placeholder="whatsapp:+14155238886">
                                            <small class="text-muted">Your Twilio WhatsApp sandbox number (e.g., whatsapp:+14155238886)</small>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Status</label>
                                            <select name="status" class="form-select">
                                                <option value="1"
                                                    {{ ($settings->status ?? 0) == 1 ? 'selected' : '' }}>Enabled</option>
                                                <option value="0"
                                                    {{ ($settings->status ?? 0) == 0 ? 'selected' : '' }}>Disabled</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="row">
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary btn-lg me-2"
                                    style="background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); border: none;">
                                    <i class="fas fa-save me-2"></i> Save WhatsApp Settings
                                </button>
                                <button type="button" class="btn btn-outline-success btn-lg" onclick="testWhatsApp()">
                                    <i class="fab fa-whatsapp me-2"></i> Send Test WhatsApp
                                </button>
                                <a href="{{ route('settings.index') }}" class="btn btn-outline-secondary btn-lg ms-2">
                                    <i class="fas fa-times me-2"></i> Cancel
                                </a>
                            </div>
                        </div>
                    </form>

                    <!-- WhatsApp Templates -->
                    <div class="mt-5">
                        <div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
                            <div>
                                <h5 class="fw-bold mb-1">WhatsApp Templates</h5>
                                @php
                                    $lastSynced = $templates->max('content_synced_at');
                                @endphp
                                <small class="text-muted">
                                    @if ($lastSynced)
                                        Last synced with Twilio {{ $lastSynced->diffForHumans() }}
                                    @else
                                        Never synced with Twilio
                                    @endif
                                </small>
                            </div>
                            <button type="button" class="btn btn-outline-primary" id="sync-templates-btn"
                                onclick="syncTemplates()">
                                <i class="fas fa-rotate me-1"></i> Sync from Twilio
                            </button>
                        </div>

                        @php
                            $approvalCounts = $templates->countBy('approval_status');
                        @endphp
                        <div class="mb-3">
                            <span class="badge bg-success me-1">{{ $approvalCounts['approved'] ?? 0 }} Approved</span>
                            <span class="badge bg-danger me-1">{{ $approvalCounts['rejected'] ?? 0 }} Rejected</span>
                            <span class="badge bg-warning text-dark me-1">
                                {{ ($approvalCounts['pending'] ?? 0) + ($approvalCounts['received'] ?? 0) }} Pending
                            </span>
                            <span class="badge bg-secondary">{{ $templates->whereNull('content_sid')->count() }} Not Linked</span>
                        </div>

                        <div class="row">
                            @foreach ($templates as $template)
                                <div class="col-md-6 mb-3">
                                    <div class="template-card">
                                        <h6 class="fw-bold mb-2">
                                            <i class="fas fa-file-alt me-2"></i>{{ $template->name }}
                                            <span class="badge bg-primary ms-2">{{ $template->slug }}</span>
                                            <span class="badge {{ $template->approvalBadgeClass() }} ms-1">
                                                <i class="fas {{ $template->approvalIcon() }} me-1"></i>{{ $template->approvalLabel() }}
                                            </span>
                                            @if ($template->approval_category)
                                                <span class="badge bg-light text-dark ms-1">{{ $template->approval_category }}</span>
                                            @endif
                                        </h6>
                                        @if ($template->content_sid)
                                            <div class="content-sid mb-2">{{ $template->content_sid }}</div>
                                        @endif
                                        @if ($template->approval_status === 'rejected')
                                            <div class="alert alert-danger py-1 px-2 small mb-2">
                                                <i class="fas fa-triangle-exclamation me-1"></i>
                                                Rejected by WhatsApp{{ $template->rejection_reason ? ': ' . $template->rejection_reason : '.' }}
                                                Messages using this template will not be delivered.
                                            </div>
                                        @elseif (!$template->content_sid)
                                            <div class="alert alert-secondary py-1 px-2 small mb-2">
                                                <i class="fas fa-link-slash me-1"></i>
                                                Not linked to a Twilio template - sends as freeform text, which only
                                                works within the 24-hour customer service window.
                                            </div>
                                        @endif
                                        @php
                                            $openBrace = '{' . '{';
                                            $closeBrace = '}' . '}';
                                            $previewContent = preg_replace('/\{(\w+)\}/', $openBrace . '$1' . $closeBrace, $template->content);
                                        @endphp
                                        <p class="text-muted small mb-2">{{ $previewContent }}</p>
                                        @if ($template->variables)
                                            <div class="mb-2">
                                                <small class="text-muted"><strong>Variables:</strong></small>
                                                @foreach ($template->variables as $variable)
                                                    <span class="template-variable">{{ '{' }}{{ '{' }} {{ $variable }} {{ '}' }}{{ '}' }}</span>
                                                @endforeach
                                            </div>
                                        @endif
                                        <button type="button" class="btn btn-sm btn-outline-primary"
                                            onclick="editTemplate('{{ $template->slug }}')">
                                            <i class="fas fa-edit"></i> Edit &amp; Submit
                                        </button>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- WhatsApp Statistics -->
                    <div class="mt-5">
                        <h5 class="fw-bold mb-3">WhatsApp Statistics</h5>
                        <div class="row">
                            <div class="col-md-3 col-6 mb-3">
                                <div class="card text-center">
                                    <div class="card-body">
                                        <h3 class="text-primary">{{ $stats['total_sent'] ?? 0 }}</h3>
                                        <p class="text-muted mb-0">Total Sent</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-6 mb-3">
                                <div class="card text-center">
                                    <div class="card-body">
                                        <h3 class="text-danger">{{ $stats['total_failed'] ?? 0 }}</h3>
                                        <p class="text-muted mb-0">Failed</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-6 mb-3">
                                <div class="card text-center">
                                    <div class="card-body">
                                        <h3 class="text-info">{{ $stats['today_sent'] ?? 0 }}</h3>
                                        <p class="text-muted mb-0">Today</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-6 mb-3">
                                <div class="card text-center">
                                    <div class="card-body">
                                        <h3 class="text-success">{{ $stats['this_month_sent'] ?? 0 }}</h3>
                                        <p class="text-muted mb-0">This Month</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>

    @push('script')
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        @php
            $whatsappTemplateData = $templates->map(fn($t) => [
                'id' => $t->id,
                'name' => $t->name,
                'slug' => $t->slug,
                'content' => $t->content,
                'variables' => $t->variables ?? [],
                'content_variables' => $t->content_variables ?: ($t->variables ?? []),
                'content_sid' => $t->content_sid,
                'approval_status' => $t->approval_status,
                'approval_label' => $t->approvalLabel(),
                'approval_category' => $t->approval_category ?: 'UTILITY',
                'is_approved' => $t->isApproved(),
            ])->values();
        @endphp
        <script>
            const whatsappTemplates = @json($whatsappTemplateData);

            // Built by concatenation so Blade never sees a pair of adjacent
            // opening braces here and try to compile it as an echo.
            const OPEN_BRACE = '{' + '{';
            const CLOSE_BRACE = '}' + '}';

            function escapeHtml(value) {
                return String(value).replace(/[&<>"']/g, (c) => ({
                    '&': '&amp;',
                    '<': '&lt;',
                    '>': '&gt;',
                    '"': '&quot;',
                    "'": '&#39;'
                })[c]);
            }

            function humanizeVariable(name) {
                const names = { '1': 'Greeting Name', '2': 'Service', '3': 'Date', '4': 'Time', '5': 'Business/Client' };
                return names[name] || name.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
            }

            let activeTemplate = null;

            function renderLivePreview() {
                const preview = document.getElementById('test-preview');

                if (!preview) {
                    return;
                }

                if (!activeTemplate) {
                    preview.innerHTML = '';
                    return;
                }

                const values = collectTemplateVariables();
                let body = escapeHtml(activeTemplate.content);

                let vars = activeTemplate.variables || [];
                if (!vars.length) {
                    const matches = activeTemplate.content.match(/\{\{(\d+)\}\}/g);
                    if (matches) {
                        vars = [...new Set(matches)].sort().map((m) => m.replace(/[{}]/g, ''));
                    }
                }

                vars.forEach((variable) => {
                    const token = '{{' + variable + '}}';
                    const value = (values[variable] || '').trim();
                    const replacement = value ?
                        `<span class="preview-filled">${escapeHtml(value)}</span>` :
                        `<span class="preview-empty">${escapeHtml(token)}</span>`;

                    body = body.split(token).join(replacement);
                });

                const warning = activeTemplate.is_approved ? '' : `
                    <div class="alert ${activeTemplate.approval_status === 'rejected' ? 'alert-danger' : 'alert-warning'} py-1 px-2 small mb-2">
                        <i class="fas fa-triangle-exclamation me-1"></i>
                        This template is <strong>${escapeHtml(activeTemplate.approval_label)}</strong> on WhatsApp.
                        It will only be delivered inside the 24-hour customer service window.
                    </div>
                `;

                preview.innerHTML = `
                    ${warning}
                    <div class="preview-box text-start">
                        <div class="preview-label"><i class="fab fa-whatsapp me-1"></i> Message Preview</div>
                        <div class="preview-body">${body}</div>
                    </div>
                `;
            }

            function renderTemplateFields(slug) {
                const container = document.getElementById('test-variables');
                activeTemplate = whatsappTemplates.find((t) => t.slug === slug) || null;

                if (!activeTemplate) {
                    container.innerHTML = '';
                    renderLivePreview();
                    return;
                }

                let variables = activeTemplate.variables || [];

                if (!variables.length) {
                    const matches = activeTemplate.content.match(/\{\{(\d+)\}\}/g);
                    if (matches) {
                        variables = [...new Set(matches)].sort().map((m) => m.replace(/[{}]/g, ''));
                    }
                    activeTemplate.variables = variables;
                }

                container.innerHTML = variables.length ?
                    variables.map((variable) => `
                        <div class="mb-2 text-start">
                            <label class="form-label small fw-semibold mb-1">${escapeHtml(humanizeVariable(variable))}</label>
                            <input type="text" class="form-control test-variable-input"
                                data-variable="${escapeHtml(variable)}"
                                placeholder="{{ '{' }}${escapeHtml(variable)}{{ '}' }}">
                        </div>
                    `).join('') :
                    '<p class="text-muted small mb-0">This template has no variables.</p>';

                container.querySelectorAll('.test-variable-input').forEach((input) => {
                    input.addEventListener('input', renderLivePreview);
                });

                renderLivePreview();
            }

            function collectTemplateVariables() {
                const variables = {};
                document.querySelectorAll('.test-variable-input').forEach((input) => {
                    variables[input.dataset.variable] = input.value;
                });
                return variables;
            }

            function testWhatsApp() {
                if (!whatsappTemplates.length) {
                    Swal.fire({
                        title: 'No Templates',
                        text: 'There are no active WhatsApp templates to send.',
                        icon: 'warning',
                        confirmButtonColor: '#ea5455'
                    });
                    return;
                }

                const options = whatsappTemplates
                    .map((t) => {
                        const mark = t.is_approved ? '✅' : (t.approval_status === 'rejected' ? '⛔' : '⚠️');
                        return `<option value="${escapeHtml(t.slug)}">${mark} ${escapeHtml(t.name)} — ${escapeHtml(t.approval_label)}</option>`;
                    })
                    .join('');

                Swal.fire({
                    title: 'Send Test WhatsApp',
                    width: 600,
                    html: `
                        <div class="text-start">
                            <label class="form-label small fw-semibold mb-1">Phone Number</label>
                            <input id="test-phone" class="form-control mb-3" placeholder="+1234567890">

                            <label class="form-label small fw-semibold mb-1">Template</label>
                            <select id="test-template" class="form-select mb-2">
                                <option value="">-- Select a template --</option>
                                ${options}
                            </select>
                            <div id="test-variables" class="mb-3"></div>
                            <div id="test-preview"></div>
                        </div>
                    `,
                    showCancelButton: true,
                    confirmButtonText: '<i class="fab fa-whatsapp"></i> Send',
                    cancelButtonText: '<i class="fas fa-times"></i> Cancel',
                    confirmButtonColor: '#25D366',
                    cancelButtonColor: '#ea5455',
                    didOpen: () => {
                        activeTemplate = null;
                        document.getElementById('test-template')
                            .addEventListener('change', (e) => renderTemplateFields(e.target.value));
                    },
                    preConfirm: () => {
                        const phone = document.getElementById('test-phone').value.trim();
                        const slug = document.getElementById('test-template').value;

                        if (!phone) {
                            Swal.showValidationMessage('Please enter a phone number');
                            return false;
                        }
                        if (!phone.startsWith('+')) {
                            Swal.showValidationMessage('Phone number must start with + (country code)');
                            return false;
                        }
                        if (!slug) {
                            Swal.showValidationMessage('Please select a template');
                            return false;
                        }

                        return {
                            phone: phone,
                            slug: slug,
                            variables: collectTemplateVariables()
                        };
                    }
                }).then((result) => {
                    if (!result.isConfirmed) {
                        return;
                    }

                    Swal.fire({
                        title: 'Sending...',
                        text: 'Sending test WhatsApp message to ' + result.value.phone,
                        icon: 'info',
                        showConfirmButton: false,
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    $.ajax({
                        url: "{{ route('sms-settings.test-template') }}",
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            to: result.value.phone,
                            template_slug: result.value.slug,
                            variables: result.value.variables
                        },
                        success: function(response) {
                            Swal.fire({
                                title: 'Success!',
                                icon: 'success',
                                html: `<p>${escapeHtml(response.message)}</p>` +
                                    (response.preview ?
                                        `<div class="alert alert-light text-start small mb-0">${escapeHtml(response.preview)}</div>` :
                                        ''),
                                confirmButtonColor: '#25D366'
                            });
                        },
                        error: function(xhr) {
                            Swal.fire({
                                title: 'Error!',
                                text: xhr.responseJSON?.message ||
                                    'Failed to send test WhatsApp message. Please check your Twilio configuration.',
                                icon: 'error',
                                confirmButtonColor: '#ea5455'
                            });
                        }
                    });
                });
            }

            function syncTemplates() {
                const btn = document.getElementById('sync-templates-btn');
                const original = btn.innerHTML;

                btn.disabled = true;
                btn.innerHTML = '<i class="fas fa-rotate fa-spin me-1"></i> Syncing...';

                $.ajax({
                    url: "{{ route('sms-settings.sync-templates') }}",
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        const s = response.summary || {};
                        const counts = response.counts || {};
                        const unmatched = (s.unmatched || []);
                        const imported = (s.imported || []);

                        let detail = `
                            <div class="text-start small">
                                <p class="mb-2">${escapeHtml(response.message)}</p>
                                <ul class="mb-2 ps-3">
                                    <li><strong>${counts.approved || 0}</strong> approved</li>
                                    <li><strong>${counts.rejected || 0}</strong> rejected</li>
                                    <li><strong>${s.created || 0}</strong> imported from Twilio</li>
                                    <li><strong>${s.remote_total || 0}</strong> templates found on Twilio</li>
                                </ul>
                        `;

                        if (imported.length) {
                            detail += `<p class="mb-1 text-muted">Newly imported from Twilio:</p>
                                       <p class="mb-2 text-muted">${escapeHtml(imported.join(', '))}</p>`;
                        }

                        if (unmatched.length) {
                            detail += `<p class="mb-1 text-muted">Local templates with no Twilio match:</p>
                                       <p class="mb-0 text-muted">${escapeHtml(unmatched.join(', '))}</p>`;
                        }

                        detail += '</div>';

                        Swal.fire({
                            title: 'Sync Complete',
                            html: detail,
                            icon: 'success',
                            confirmButtonColor: '#25D366',
                            confirmButtonText: 'Reload'
                        }).then(() => window.location.reload());
                    },
                    error: function(xhr) {
                        btn.disabled = false;
                        btn.innerHTML = original;
                        Swal.fire({
                            title: 'Sync Failed',
                            text: xhr.responseJSON?.message || 'Could not reach Twilio. Check your credentials.',
                            icon: 'error',
                            confirmButtonColor: '#ea5455'
                        });
                    }
                });
            }


            /**
             * Show the WhatsApp-facing version of the body, where each named
             * variable becomes the positional placeholder Twilio requires.
             */
            function toPositionalBody(content, orderedVariables) {
                let body = content;
                (orderedVariables || []).forEach((name, index) => {
                    body = body.split('{' + name + '}').join(OPEN_BRACE + (index + 1) + CLOSE_BRACE);
                });
                return body;
            }

            function refreshWhatsAppBody(template) {
                const textarea = document.getElementById('template-content');
                const target = document.getElementById('whatsapp-body');

                if (!textarea || !target) {
                    return;
                }

                target.textContent = toPositionalBody(textarea.value, template.content_variables);
            }

            function editTemplate(slug) {
                const template = whatsappTemplates.find((t) => t.slug === slug);

                if (!template) {
                    return;
                }

                const categories = ['UTILITY', 'MARKETING', 'AUTHENTICATION'];
                const categoryOptions = categories
                    .map((c) => `<option value="${c}" ${template.approval_category === c ? 'selected' : ''}>${c}</option>`)
                    .join('');

                const variableChips = (template.content_variables || [])
                    .map((v, i) => `<span class="template-variable">${OPEN_BRACE}${i + 1}${CLOSE_BRACE} = ${escapeHtml(v)}</span>`)
                    .join('');

                Swal.fire({
                    title: 'Edit: ' + template.name,
                    width: 720,
                    html: `
                        <div class="text-start">
                            <label class="form-label small fw-semibold mb-1">Template Body</label>
                            <textarea id="template-content" class="form-control mb-1"
                                rows="6">${escapeHtml(template.content)}</textarea>
                            <p class="text-muted small mb-3">
                                Use the named placeholders below. They are converted to WhatsApp's
                                numbered format automatically.
                            </p>

                            <div class="mb-3">${variableChips || '<span class="text-muted small">No variables</span>'}</div>

                            <label class="form-label small fw-semibold mb-1">Sent to WhatsApp as</label>
                            <pre id="whatsapp-body" class="preview-box preview-body mb-3"></pre>

                            <label class="form-label small fw-semibold mb-1">WhatsApp Category</label>
                            <select id="template-category" class="form-select mb-3">${categoryOptions}</select>

                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="submit-approval" checked>
                                <label class="form-check-label small" for="submit-approval">
                                    Submit for WhatsApp approval after saving
                                </label>
                            </div>

                            <div class="alert alert-warning small mb-0">
                                <i class="fas fa-triangle-exclamation me-1"></i>
                                Editing a live template resets it to <strong>pending</strong> until WhatsApp
                                re-approves it. Meta limits edits to once per 24 hours per template.
                            </div>
                        </div>
                    `,
                    showCancelButton: true,
                    confirmButtonText: '<i class="fas fa-paper-plane"></i> Save &amp; Push to Twilio',
                    cancelButtonText: '<i class="fas fa-times"></i> Cancel',
                    confirmButtonColor: '#25D366',
                    cancelButtonColor: '#ea5455',
                    didOpen: () => {
                        refreshWhatsAppBody(template);
                        document.getElementById('template-content')
                            .addEventListener('input', () => refreshWhatsAppBody(template));
                    },
                    preConfirm: () => {
                        const content = document.getElementById('template-content').value.trim();

                        if (!content) {
                            Swal.showValidationMessage('Template content cannot be empty');
                            return false;
                        }

                        return {
                            content: content,
                            category: document.getElementById('template-category').value,
                            submit: document.getElementById('submit-approval').checked
                        };
                    }
                }).then((result) => {
                    if (!result.isConfirmed) {
                        return;
                    }

                    Swal.fire({
                        title: 'Pushing to Twilio...',
                        text: 'Updating the template and submitting it for approval.',
                        icon: 'info',
                        showConfirmButton: false,
                        allowOutsideClick: false,
                        didOpen: () => Swal.showLoading()
                    });

                    $.ajax({
                        url: "/admin/sms-settings/templates/" + template.id + "/push",
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            content: result.value.content,
                            category: result.value.category,
                            submit_for_approval: result.value.submit ? 1 : 0
                        },
                        success: function(response) {
                            const approval = response.approval || {};
                            Swal.fire({
                                title: 'Pushed to Twilio',
                                icon: 'success',
                                html: `
                                    <div class="text-start small">
                                        <p class="mb-2">${escapeHtml(response.message)}</p>
                                        <p class="mb-1"><strong>Content SID:</strong></p>
                                        <p class="content-sid mb-2">${escapeHtml(response.content_sid || '')}</p>
                                        ${approval.status ? `<p class="mb-0"><strong>Approval status:</strong> ${escapeHtml(approval.status)}</p>` : ''}
                                    </div>
                                `,
                                confirmButtonColor: '#25D366',
                                confirmButtonText: 'Reload'
                            }).then(() => location.reload());
                        },
                        error: function(xhr) {
                            Swal.fire({
                                title: 'Push Failed',
                                text: xhr.responseJSON?.message || 'Failed to update the template on Twilio.',
                                icon: 'error',
                                confirmButtonColor: '#ea5455'
                            });
                        }
                    });
                });
            }
        </script>
    @endpush
@endsection