@push('styles')
<link rel="stylesheet" href="{{ asset('vendor/report-libs/css/select2.min.css') }}?v={{ @filemtime(public_path('vendor/report-libs/css/select2.min.css')) ?: time() }}">
<link rel="stylesheet" href="{{ asset('vendor/report-libs/css/jquery.dataTables.min.css') }}?v={{ @filemtime(public_path('vendor/report-libs/css/jquery.dataTables.min.css')) ?: time() }}">
<style>
    .push-page {
        background: #f8fafc;
        min-height: 100vh;
        padding: 0 8px 8px;
    }

    .push-header {
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .push-title {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 700;
        color: #111827;
    }

    .push-subtitle {
        margin: 2px 0 0 0;
        font-size: 13px;
        color: #6b7280;
    }

    .notif-page {
        padding: 0;
    }

    .push-header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .push-header-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 1px solid #cbd5e1;
        border-radius: 999px;
        padding: 10px 16px;
        background: #fff;
        color: #0f172a;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
        transition: all 0.2s ease;
    }

    .push-header-link:hover {
        border-color: #111827;
        color: #111827;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
        transform: translateY(-1px);
    }

    .notif-status {
        display: none;
        margin-bottom: 12px;
        border-radius: 10px;
        border: 1px solid transparent;
        padding: 10px 12px;
        font-size: 13px;
    }

    .notif-status.success {
        background: #ecfdf5;
        color: #047857;
        border-color: #a7f3d0;
    }

    .notif-status.error {
        background: #fef2f2;
        color: #b91c1c;
        border-color: #fecaca;
    }

    .notif-status.info {
        background: #eff6ff;
        color: #1d4ed8;
        border-color: #bfdbfe;
    }

    .notif-tabs {
        display: flex;
        gap: 10px;
        margin-bottom: 16px;
        flex-wrap: wrap;
    }

    .notif-tab-btn {
        border: 1px solid #d1d5db;
        background: #fff;
        color: #374151;
        border-radius: 999px;
        padding: 9px 14px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
    }

    .notif-tab-btn.active {
        background: #111827;
        color: #fff;
        border-color: #111827;
    }

    .notif-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        padding: 16px;
    }

    .notif-section {
        display: none;
    }

    .notif-section.active {
        display: block;
    }

    .notif-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 12px;
    }

    .notif-head-title {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: #111827;
    }

    .notif-head-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .notif-input,
    .notif-select,
    .notif-textarea {
        width: 100%;
        border: 1px solid #d1d5db;
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 14px;
        color: #111827;
        background: #fff;
    }

    .notif-select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 14px 14px;
        padding-right: 36px;
    }

    .notif-select[multiple] {
        min-height: 132px;
        padding-right: 12px;
        background-image: none;
    }

    .notif-textarea {
        min-height: 90px;
        resize: vertical;
    }

    .notif-input.is-invalid,
    .notif-select.is-invalid,
    .notif-textarea.is-invalid {
        border-color: #ef4444;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
    }

    .notif-select.is-invalid + .select2 .select2-selection {
        border-color: #ef4444 !important;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
    }

    .notif-field-error {
        display: none;
        margin-top: 6px;
        font-size: 12px;
        font-weight: 600;
        color: #b91c1c;
    }

    .notif-field-error.visible {
        display: block;
    }

    .notif-required {
        color: #dc2626;
        font-weight: 700;
        margin-left: 2px;
    }

    .notif-btn-primary,
    .notif-btn-secondary,
    .notif-btn-danger {
        border-radius: 10px;
        border: none;
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        padding: 10px 14px;
    }

    .notif-btn-primary {
        background: #111827;
        color: #fff;
    }

    .notif-btn-secondary {
        background: #f3f4f6;
        color: #1f2937;
    }

    .notif-btn-danger {
        background: #dc2626;
        color: #fff;
    }

    .notif-btn-primary:disabled,
    .notif-btn-secondary:disabled,
    .notif-btn-danger:disabled {
        opacity: 0.7;
        cursor: wait;
        transform: none;
        box-shadow: none;
    }

    .notif-btn-loading {
        position: relative;
    }

    .notif-btn-loading::before {
        content: '';
        width: 14px;
        height: 14px;
        border-radius: 999px;
        border: 2px solid currentColor;
        border-right-color: transparent;
        display: inline-block;
        animation: notif-btn-spin 0.7s linear infinite;
    }

    @keyframes notif-btn-spin {
        to {
            transform: rotate(360deg);
        }
    }

    .notif-table-shell {
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: #fff;
        overflow: hidden;
        position: relative;
    }

    .notif-table-wrap {
        overflow: auto;
    }

    .notif-table {
        width: 100%;
        min-width: 820px;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 13px;
    }

    .notif-table th,
    .notif-table td {
        border-bottom: 1px solid #f1f5f9;
        padding: 12px 14px;
        text-align: left;
        vertical-align: top;
    }

    .notif-table th {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        background: #f8fafc;
    }

    .notif-table tbody tr:nth-child(even) {
        background: #fbfdff;
    }

    .notif-table-empty td {
        text-align: center;
        color: #64748b;
        font-weight: 600;
    }

    .notif-datatable {
        width: 100% !important;
        border-collapse: separate;
        border-spacing: 0;
        min-width: 820px;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    #notification-messages-table,
    #notification-segments-table {
        width: 100% !important;
        border-collapse: separate;
        border-spacing: 0;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    #notification-messages-table thead,
    #notification-segments-table thead {
        background: linear-gradient(to bottom, #fafbfc 0%, #f8fafc 100%);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    #notification-messages-table thead th,
    #notification-segments-table thead th {
        padding: 16px 20px;
        text-align: left;
        font-size: 0.875rem;
        font-weight: 700;
        color: #374151;
        border-bottom: 2px solid #e5e7eb;
        border-right: 1px solid #f0f0f0;
        white-space: nowrap;
        background-color: transparent !important;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    #notification-messages-table thead th:last-child,
    #notification-segments-table thead th:last-child {
        border-right: none;
    }

    #notification-messages-table tbody td,
    #notification-segments-table tbody td {
        padding: 16px 20px;
        border-bottom: 1px solid #f3f4f6;
        border-right: 1px solid #f9fafb;
        font-size: 0.875rem;
        color: #374151;
        vertical-align: middle;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    #notification-messages-table tbody td:last-child,
    #notification-segments-table tbody td:last-child {
        border-right: none;
    }

    #notification-messages-table tbody tr,
    #notification-segments-table tbody tr {
        transition: background-color 0.15s ease;
    }

    #notification-messages-table tbody tr:nth-child(even),
    #notification-segments-table tbody tr:nth-child(even) {
        background-color: #fafbfc;
    }

    #notification-messages-table tbody tr:nth-child(odd),
    #notification-segments-table tbody tr:nth-child(odd) {
        background-color: #fff;
    }

    #notification-messages-table tbody tr:hover,
    #notification-segments-table tbody tr:hover {
        background-color: #f0f4ff !important;
    }

    #notification-messages-table_wrapper,
    #notification-segments-table_wrapper {
        padding: 0 0 8px 0;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    #notification-messages-table_wrapper .dataTables_length,
    #notification-segments-table_wrapper .dataTables_length {
        padding: 0.75rem 1rem 0.75rem 1rem;
        margin-bottom: 0;
    }

    #notification-messages-table_wrapper .dataTables_length label,
    #notification-segments-table_wrapper .dataTables_length label {
        font-weight: 600;
        color: #374151;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    #notification-messages-table_wrapper .dataTables_length select,
    #notification-segments-table_wrapper .dataTables_length select {
        padding: 6px 10px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        margin: 0 8px;
        font-size: 14px;
        background-color: #fff;
        color: #374151;
        cursor: pointer;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    #notification-messages-table_wrapper .dataTables_length select:focus,
    #notification-segments-table_wrapper .dataTables_length select:focus {
        outline: none;
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    #notification-messages-table_wrapper .dataTables_filter,
    #notification-segments-table_wrapper .dataTables_filter {
        position: relative;
        padding: 0.75rem 1rem 0.75rem 1rem;
        margin-bottom: 0;
    }

    #notification-messages-table_wrapper .dataTables_filter label,
    #notification-segments-table_wrapper .dataTables_filter label {
        position: relative;
        font-weight: 600;
        color: #374151;
        font-size: 0;
        display: flex;
        align-items: center;
        gap: 0;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    #notification-messages-table_wrapper .dataTables_filter label::before,
    #notification-segments-table_wrapper .dataTables_filter label::before {
        content: '';
        position: absolute;
        left: 12px;
        top: 50%;
        width: 16px;
        height: 16px;
        transform: translateY(-50%);
        pointer-events: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%236b7280' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E") no-repeat center;
        opacity: 0.75;
    }

    #notification-messages-table_wrapper .dataTables_filter input,
    #notification-segments-table_wrapper .dataTables_filter input {
        margin-left: 0 !important;
        padding: 8px 12px 8px 38px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 0.875rem;
        width: 280px;
        color: #111827;
        font-family: 'Plus Jakarta Sans', sans-serif !important;
    }

    #notification-messages-table_wrapper .dataTables_filter input:focus,
    #notification-segments-table_wrapper .dataTables_filter input:focus {
        outline: none;
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    #notification-messages-table_wrapper .dataTables_paginate,
    #notification-segments-table_wrapper .dataTables_paginate {
        margin-top: 0;
        padding: 12px 1rem;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
    }

    #notification-messages-table_wrapper .dataTables_paginate .paginate_button,
    #notification-segments-table_wrapper .dataTables_paginate .paginate_button {
        padding: 6px 12px;
        margin: 0 2px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #fff;
        color: #374151;
        font-weight: 600;
        font-size: 0.875rem;
        cursor: pointer;
        transition: all 0.2s ease;
        min-width: 36px;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    #notification-messages-table_wrapper .dataTables_paginate .paginate_button:hover,
    #notification-segments-table_wrapper .dataTables_paginate .paginate_button:hover {
        background: #f9fafb;
        border-color: #d1d5db;
        color: #111827 !important;
    }

    #notification-messages-table_wrapper .dataTables_paginate .paginate_button.current,
    #notification-segments-table_wrapper .dataTables_paginate .paginate_button.current {
        background: #fff;
        color: #111827;
        border-color: #d1d5db;
        border-width: 2px;
        font-weight: 700;
    }

    #notification-messages-table_wrapper .dataTables_paginate .paginate_button.current:hover,
    #notification-segments-table_wrapper .dataTables_paginate .paginate_button.current:hover {
        background: #fff;
        color: #111827;
        border-color: #d1d5db;
    }

    #notification-messages-table_wrapper .dataTables_paginate .paginate_button.disabled,
    #notification-messages-table_wrapper .dataTables_paginate .paginate_button.disabled:hover,
    #notification-segments-table_wrapper .dataTables_paginate .paginate_button.disabled,
    #notification-segments-table_wrapper .dataTables_paginate .paginate_button.disabled:hover {
        opacity: 0.5;
        cursor: not-allowed;
        background: #f9fafb;
        color: #9ca3af;
    }

    #notification-messages-table_wrapper .dataTables_info,
    #notification-segments-table_wrapper .dataTables_info {
        padding: 12px 1rem;
        color: #6b7280;
        font-weight: 600;
        font-size: 14px;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    #notification-messages-table .action-buttons,
    #notification-segments-table .action-buttons {
        display: flex;
        gap: 6px;
        align-items: center;
    }

    #notification-messages-table .action-button,
    #notification-segments-table .action-button {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        background-color: #f8fafc;
        color: #6b7280;
        text-decoration: none;
    }

    #notification-messages-table .action-button .icon,
    #notification-segments-table .action-button .icon {
        width: 18px;
        height: 18px;
        stroke-width: 2;
    }

    #notification-segments-table .action-button.view {
        color: #64748b;
        background-color: #f1f5f9;
    }

    #notification-segments-table .action-button.view:hover {
        background-color: #e2e8f0;
        color: #334155;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(100, 116, 139, 0.2);
    }

    #notification-messages-table .action-button.view {
        color: #2563eb;
        background-color: #eff6ff;
    }

    #notification-messages-table .action-button.view:hover {
        background-color: #dbeafe;
        color: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(37, 99, 235, 0.18);
    }

    #notification-messages-table .action-button.debug {
        color: #0f766e;
        background-color: #ecfeff;
    }

    #notification-messages-table .action-button.debug:hover {
        background-color: #cffafe;
        color: #115e59;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(13, 148, 136, 0.18);
    }

    #notification-messages-table .action-button.delete,
    #notification-segments-table .action-button.delete {
        color: #dc2626;
        background-color: #fef2f2;
    }

    #notification-messages-table .action-button.delete:hover,
    #notification-segments-table .action-button.delete:hover {
        background-color: #fee2e2;
        color: #b91c1c;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
    }

    .pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 7px 12px;
        border-radius: 999px;
        font-size: 12px;
        line-height: 1;
        font-weight: 700;
        border: 1px solid transparent;
        white-space: nowrap;
    }

    .pill.segment,
    .pill.device,
    .pill.muted {
        background: #eef2ff;
        color: #4f46e5;
        border-color: #e0e7ff;
    }

    .pill.success {
        background: #ecfdf5;
        color: #047857;
        border-color: #a7f3d0;
    }

    .pill.warning {
        background: #fffbeb;
        color: #b45309;
        border-color: #fde68a;
    }

    .pill.danger {
        background: #fef2f2;
        color: #b91c1c;
        border-color: #fecaca;
    }

    .notif-stack {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }

    .notif-message-title {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .notif-message-title strong {
        color: #0f172a;
        font-size: 14px;
        font-weight: 700;
    }

    .notif-plain-link {
        border: none;
        padding: 0;
        background: transparent;
        color: #2563eb;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
    }

    .notif-plain-link:hover {
        color: #1d4ed8;
        text-decoration: underline;
    }

    .notif-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 8px;
        border-radius: 999px;
        border: 1px solid #dbeafe;
        background: #eff6ff;
        color: #1d4ed8;
        font-size: 11px;
        font-weight: 700;
        margin: 2px 4px 2px 0;
    }

    .notif-muted {
        color: #64748b;
        font-size: 12px;
    }

    .notif-actions {
        display: flex;
        gap: 8px;
    }

    .notif-link-btn {
        border: none;
        background: transparent;
        color: #2563eb;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        padding: 0;
    }

    .notif-modal {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 18px;
        background: rgba(15, 23, 42, 0.45);
        z-index: 90;
    }

    .notif-modal.open {
        display: flex;
    }

    .notif-modal-card {
        width: min(920px, 100%);
        max-height: calc(100vh - 40px);
        overflow: auto;
        background: #fff;
        border-radius: 16px;
        border: 1px solid #dbeafe;
        box-shadow: 0 30px 60px rgba(15, 23, 42, 0.28);
    }

    .notif-modal-card--compact {
        width: min(760px, 100%);
    }

    .notif-modal-card--wide {
        width: min(1180px, 100%);
    }

    .notif-modal-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 18px;
        border-bottom: 1px solid #e5e7eb;
    }

    .notif-modal-title {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: #111827;
    }

    .notif-modal-close {
        border: none;
        background: transparent;
        color: #64748b;
        font-size: 20px;
        cursor: pointer;
    }

    .notif-modal-body {
        padding: 18px;
    }

    .notif-modal-meta {
        margin-top: 4px;
        color: #64748b;
        font-size: 12px;
    }

    .notif-modal-table-shell {
        margin-top: 4px;
    }

    .notif-debug-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 14px;
    }

    .notif-debug-card {
        border: 1px solid #e5e7eb;
        border-radius: 14px;
        padding: 14px;
        background: #f8fafc;
    }

    .notif-debug-label {
        font-size: 12px;
        font-weight: 700;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 6px;
    }

    .notif-debug-value {
        font-size: 16px;
        font-weight: 700;
        color: #111827;
        word-break: break-word;
    }

    .notif-debug-sections {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin-bottom: 14px;
    }

    .notif-debug-panel {
        border: 1px solid #e5e7eb;
        border-radius: 14px;
        background: #fff;
        overflow: hidden;
    }

    .notif-debug-panel-head {
        padding: 12px 14px;
        border-bottom: 1px solid #e5e7eb;
        background: #f8fafc;
        font-size: 13px;
        font-weight: 700;
        color: #111827;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
    }

    .notif-debug-panel-body {
        padding: 14px;
    }

    .notif-debug-panel-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .notif-debug-mini-btn {
        border: 1px solid #d1d5db;
        border-radius: 999px;
        background: #fff;
        color: #334155;
        font-size: 12px;
        font-weight: 700;
        padding: 6px 12px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .notif-debug-mini-btn:hover {
        border-color: #cbd5e1;
        background: #f8fafc;
        color: #0f172a;
    }

    .notif-debug-kv {
        display: grid;
        gap: 10px;
    }

    .notif-debug-kv-row {
        display: grid;
        grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
        gap: 12px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eef2f7;
        align-items: start;
    }

    .notif-debug-kv-row:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

    .notif-debug-kv-key {
        font-size: 12px;
        font-weight: 700;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .notif-debug-kv-value {
        font-size: 14px;
        font-weight: 600;
        color: #111827;
        word-break: break-word;
    }

    .notif-debug-muted {
        color: #64748b;
        font-weight: 500;
    }

    .notif-debug-progress {
        display: grid;
        gap: 10px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid #e5e7eb;
    }

    .notif-debug-progress-row {
        display: grid;
        grid-template-columns: minmax(110px, 130px) minmax(0, 1fr) auto;
        gap: 12px;
        align-items: center;
    }

    .notif-debug-progress-label,
    .notif-debug-progress-value {
        font-size: 12px;
        font-weight: 700;
        color: #334155;
    }

    .notif-debug-progress-track {
        width: 100%;
        height: 10px;
        border-radius: 999px;
        background: #e5e7eb;
        overflow: hidden;
    }

    .notif-debug-progress-fill {
        height: 100%;
        border-radius: 999px;
    }

    .notif-debug-progress-fill.sent {
        background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
    }

    .notif-debug-progress-fill.failed {
        background: linear-gradient(90deg, #f97316 0%, #fb923c 100%);
    }

    .notif-debug-progress-fill.invalid {
        background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
    }

    .notif-debug-raw {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid #e5e7eb;
    }

    .notif-debug-raw > summary {
        cursor: pointer;
        color: #1d4ed8;
        font-size: 13px;
        font-weight: 700;
        list-style: none;
    }

    .notif-debug-raw > summary::-webkit-details-marker {
        display: none;
    }

    .notif-debug-raw[open] > summary {
        margin-bottom: 10px;
    }

    .notif-debug-table-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
        margin: 4px 0 10px;
    }

    .notif-debug-table-title {
        font-size: 14px;
        font-weight: 800;
        color: #111827;
    }

    .notif-json {
        margin: 0;
        padding: 12px;
        border-radius: 12px;
        background: #0f172a;
        color: #e2e8f0;
        font-size: 12px;
        line-height: 1.6;
        white-space: pre-wrap;
        word-break: break-word;
        overflow: auto;
        max-height: 320px;
    }

    .notif-recipient-details {
        margin: 6px 0 0;
    }

    .notif-recipient-details > summary {
        cursor: pointer;
        color: #0f172a;
        font-weight: 600;
    }

    .notif-recipient-details[open] > summary {
        margin-bottom: 8px;
    }

    .notif-grid-2 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .notif-field {
        margin-bottom: 12px;
    }

    .notif-options {
        margin-top: 8px;
        padding: 14px;
        border: 1px solid #e5e7eb;
        border-radius: 14px;
        background: #f8fafc;
    }

    .notif-options-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 12px;
        flex-wrap: wrap;
    }

    .notif-options-title {
        font-size: 14px;
        font-weight: 700;
        color: #111827;
    }

    .notif-thumb-row {
        display: grid;
        grid-template-columns: minmax(180px, 0.9fr) minmax(280px, 1.2fr) minmax(190px, 0.9fr);
        gap: 12px;
        align-items: start;
    }

    .notif-thumb-row > .notif-field,
    .notif-thumb-row > .notif-thumb-preview {
        margin-bottom: 0;
    }

    .notif-thumb-preview {
        display: none;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: #f8fafc;
        padding: 10px;
        min-height: 100%;
    }

    .notif-thumb-preview.is-visible {
        display: block;
    }

    .notif-thumb-preview-media {
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 10px;
        overflow: hidden;
        background: linear-gradient(135deg, #e2e8f0, #f8fafc);
        border: 1px solid #dbe3ee;
        margin-bottom: 8px;
    }

    .notif-thumb-preview-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .notif-thumb-preview-title {
        font-size: 12px;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 4px;
    }

    .notif-thumb-preview-caption {
        font-size: 12px;
        line-height: 1.5;
        color: #64748b;
        word-break: break-word;
    }

    .notif-key-value-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        gap: 10px;
        margin-bottom: 10px;
        align-items: center;
    }

    .notif-input[readonly] {
        background: #f8fafc;
        color: #475569;
    }

    .notif-icon-btn.hidden-btn {
        visibility: hidden;
        pointer-events: none;
    }

    .notif-label {
        display: block;
        margin-bottom: 6px;
        font-size: 13px;
        font-weight: 600;
        color: #374151;
    }

    .notif-rule-row {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(120px, 0.8fr) minmax(0, 1fr) auto;
        gap: 10px;
        margin-bottom: 10px;
        align-items: center;
    }

    .notif-rule-actions {
        display: flex;
        gap: 8px;
    }

    .notif-icon-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid #d1d5db;
        background: #fff;
        color: #1f2937;
        font-size: 20px;
        cursor: pointer;
    }

    .notif-check-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(90px, 1fr));
        gap: 8px;
    }

    .notif-check {
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 8px;
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .push-page .select2-container,
    .notif-modal .select2-container {
        width: 100% !important;
    }

    .push-page .select2-container .select2-selection--single,
    .notif-modal .select2-container .select2-selection--single {
        min-height: 42px;
        border: 1px solid #d1d5db;
        border-radius: 10px;
        background: #fff;
    }

    .push-page .select2-container .select2-selection--single .select2-selection__rendered,
    .notif-modal .select2-container .select2-selection--single .select2-selection__rendered {
        padding: 10px 38px 10px 12px;
        line-height: 20px;
        color: #111827;
    }

    .push-page .select2-container .select2-selection--single .select2-selection__arrow,
    .notif-modal .select2-container .select2-selection--single .select2-selection__arrow {
        height: 100%;
        right: 8px;
    }

    .push-page .select2-container .select2-selection--multiple,
    .notif-modal .select2-container .select2-selection--multiple {
        min-height: 42px;
        border: 1px solid #d1d5db;
        border-radius: 10px;
        background: #fff;
        padding: 4px 8px;
    }

    .push-page .select2-container .select2-selection--multiple .select2-selection__rendered,
    .notif-modal .select2-container .select2-selection--multiple .select2-selection__rendered {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 0;
    }

    .push-page .select2-container .select2-selection--multiple .select2-selection__choice,
    .notif-modal .select2-container .select2-selection--multiple .select2-selection__choice {
        margin: 0;
        border: 1px solid #dbeafe;
        border-radius: 999px;
        background: #eff6ff;
        color: #1d4ed8;
        font-size: 11px;
        font-weight: 700;
        padding: 2px 8px 2px 6px;
    }

    .push-page .select2-container .select2-selection--multiple .select2-selection__choice__remove,
    .notif-modal .select2-container .select2-selection--multiple .select2-selection__choice__remove {
        color: #1d4ed8;
        margin-right: 6px;
    }

    .push-page .select2-dropdown,
    .notif-modal .select2-dropdown {
        border: 1px solid #d1d5db;
        border-radius: 12px;
        box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
        overflow: hidden;
        z-index: 10060 !important;
    }

    .push-page .select2-dropdown .select2-search--dropdown,
    .notif-modal .select2-dropdown .select2-search--dropdown {
        padding: 10px;
        background: #fff;
    }

    .push-page .select2-dropdown .select2-search__field,
    .notif-modal .select2-dropdown .select2-search__field {
        border: 1px solid #d1d5db;
        border-radius: 10px;
        padding: 8px 10px;
        font-size: 13px;
    }

    .push-page .select2-dropdown .select2-results__options,
    .notif-modal .select2-dropdown .select2-results__options {
        max-height: 260px;
    }

    .push-page .select2-dropdown .select2-results__option,
    .notif-modal .select2-dropdown .select2-results__option {
        padding: 10px 12px;
        font-size: 13px;
        color: #111827;
        background: #fff;
    }

    .push-page .select2-dropdown .select2-results__option--highlighted[aria-selected],
    .notif-modal .select2-dropdown .select2-results__option--highlighted[aria-selected] {
        background: #1d4ed8;
        color: #fff;
    }

    .push-page .select2-dropdown .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted),
    .notif-modal .select2-dropdown .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
        background: #eff6ff;
        color: #1d4ed8;
    }

    .notif-modal-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 18px;
    }

    .notif-modal-actions--split {
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }

    .notif-modal-actions-group {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: auto;
        flex-wrap: wrap;
    }

    .notif-inline-status {
        display: none;
        flex: 1 1 280px;
        border-radius: 10px;
        border: 1px solid transparent;
        padding: 10px 12px;
        font-size: 13px;
        line-height: 1.5;
    }

    .notif-inline-status.success {
        display: block;
        background: #ecfdf5;
        color: #047857;
        border-color: #a7f3d0;
    }

    .notif-inline-status.error {
        display: block;
        background: #fef2f2;
        color: #b91c1c;
        border-color: #fecaca;
    }

    .notif-inline-status.info {
        display: block;
        background: #eff6ff;
        color: #1d4ed8;
        border-color: #bfdbfe;
    }

    .notif-confirm-text {
        margin: 0;
        font-size: 14px;
        line-height: 1.6;
        color: #374151;
    }

    .notif-modal-card--progress {
        max-width: 960px;
        width: min(960px, calc(100vw - 32px));
    }

    .notif-progress-shell {
        display: grid;
        gap: 16px;
    }

    .notif-progress-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding: 18px;
        border: 1px solid #bfdbfe;
        border-radius: 16px;
        background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
    }

    .notif-progress-title {
        margin: 0 0 6px;
        font-size: 22px;
        font-weight: 800;
        color: #0f172a;
    }

    .notif-progress-copy,
    .notif-progress-meta,
    .notif-progress-issues-empty {
        margin: 0;
        font-size: 13px;
        color: #475569;
    }

    .notif-progress-meta {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .notif-progress-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        border-radius: 999px;
        background: #ffffff;
        border: 1px solid #dbeafe;
        font-size: 12px;
        font-weight: 700;
        color: #1e3a8a;
    }

    .notif-progress-bar-card,
    .notif-progress-issues,
    .notif-progress-footer {
        padding: 18px;
        border-radius: 16px;
        border: 1px solid #e5e7eb;
        background: #fff;
    }

    .notif-progress-bar-row,
    .notif-progress-issues-head,
    .notif-progress-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }

    .notif-progress-track {
        width: 100%;
        height: 12px;
        border-radius: 999px;
        background: #e5eef9;
        overflow: hidden;
        margin-top: 12px;
    }

    .notif-progress-fill {
        height: 100%;
        width: 0;
        border-radius: 999px;
        background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
        transition: width 0.25s ease;
    }

    .notif-progress-batches {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
        gap: 12px;
    }

    .notif-progress-batch {
        padding: 14px;
        border-radius: 14px;
        border: 1px solid #e5e7eb;
        background: #f8fafc;
        display: grid;
        gap: 4px;
    }

    .notif-progress-batch.is-completed {
        background: #f0fdf4;
        border-color: #bbf7d0;
    }

    .notif-progress-batch.is-processing {
        background: #eff6ff;
        border-color: #93c5fd;
    }

    .notif-progress-batch.is-pending {
        background: #f8fafc;
        border-color: #e2e8f0;
    }

    .notif-progress-batch.is-failed {
        background: #fef2f2;
        border-color: #fecaca;
    }

    .notif-progress-batch-label {
        font-size: 14px;
        font-weight: 700;
        color: #0f172a;
    }

    .notif-progress-batch-range,
    .notif-progress-batch-status {
        font-size: 12px;
        color: #64748b;
    }

    .notif-progress-issues-list {
        display: grid;
        gap: 8px;
        margin-top: 12px;
    }

    .notif-progress-issue {
        display: grid;
        grid-template-columns: minmax(120px, 180px) 1fr auto;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 12px;
        background: #fff7ed;
        border: 1px solid #fed7aa;
        font-size: 13px;
        color: #7c2d12;
    }

    .notif-progress-issue-status {
        font-weight: 700;
        text-transform: capitalize;
    }

    .notif-progress-footer {
        justify-content: flex-end;
    }

    .notif-progress-footer-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        flex-wrap: wrap;
    }

    .notif-progress-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #334155;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }

    .notif-progress-toggle input {
        width: 16px;
        height: 16px;
        accent-color: #2563eb;
    }

    @media (max-width: 900px) {
        .notif-progress-head,
        .notif-progress-issue {
            grid-template-columns: 1fr;
        }
    }

    .hidden {
        display: none !important;
    }

    @media (max-width: 900px) {
        .notif-grid-2,
        .notif-rule-row,
        .notif-check-grid,
        .notif-debug-grid,
        .notif-debug-sections {
            grid-template-columns: 1fr;
        }

        .notif-debug-kv-row,
        .notif-debug-progress-row {
            grid-template-columns: 1fr;
        }

        .notif-thumb-row {
            grid-template-columns: 1fr;
        }

        .notif-head {
            align-items: stretch;
        }

        .notif-head-actions {
            width: 100%;
        }

        .push-header {
            align-items: stretch;
        }

        .push-header-actions {
            width: 100%;
        }

        .push-header-link {
            width: 100%;
        }

        #notification-messages-table_wrapper .dataTables_filter input,
        #notification-segments-table_wrapper .dataTables_filter input {
            width: 100%;
        }
    }
</style>
@endpush

<x-filament-panels::page>
    <div class="push-page">
        <div class="push-header">
            <div>
                <h1 class="push-title">Push Notifications</h1>
                <p class="push-subtitle">Manage campaign compose content and notification segments.</p>
            </div>
            <div class="push-header-actions">
                <a href="{{ \App\Filament\Pages\Operations\PushNotificationV2::getUrl() }}" class="push-header-link">
                    Push notification v2
                </a>
            </div>
        </div>

        <section>
            <div class="notif-page">
                <div id="notif-status" class="notif-status"></div>

                <div class="notif-tabs">
                    <button type="button" class="notif-tab-btn active" data-tab="messages">Campaign Compose</button>
                    <button type="button" class="notif-tab-btn" data-tab="segments">Segments</button>
                </div>

                <section id="messages-section" class="notif-section active">
                    <div class="notif-card">
                        <div class="notif-head">
                            <h2 class="notif-head-title">Campaign Compose</h2>
                            <div class="notif-head-actions">
                                <button type="button" id="create-message-btn" class="notif-btn-primary">Create Compose</button>
                            </div>
                        </div>

                        <div class="notif-table-shell">
                            <div class="notif-table-wrap">
                                <table id="notification-messages-table" class="notif-datatable">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Title</th>
                                            <th>Segments</th>
                                            <th>Devices</th>
                                            <th>Type</th>
                                            <th>Action</th>
                                            <th>Created</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </section>

                <section id="segments-section" class="notif-section">
                    <div class="notif-card">
                        <div class="notif-head">
                            <h2 class="notif-head-title">Saved Notification Segments</h2>
                            <div class="notif-head-actions">
                                <button type="button" id="create-segment-btn" class="notif-btn-primary">Create Segment</button>
                            </div>
                        </div>

                        <div class="notif-table-shell">
                            <div class="notif-table-wrap">
                                <table id="notification-segments-table" class="notif-datatable">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Title</th>
                                            <th>Description</th>
                                            <th>Rules</th>
                                            <th>Created</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </section>
    </div>

    <div id="segment-modal" class="notif-modal">
        <div class="notif-modal-card">
            <div class="notif-modal-head">
                <h3 class="notif-modal-title">Create Segment</h3>
                <button type="button" class="notif-modal-close" data-close="segment-modal">&times;</button>
            </div>
            <div class="notif-modal-body">
                <div class="notif-field">
                    <label class="notif-label" for="segment-title">Title <span class="notif-required">*</span></label>
                    <input id="segment-title" class="notif-input" type="text" maxlength="100" placeholder="Segment title">
                    <div id="segment-title-error" class="notif-field-error"></div>
                </div>
                <div class="notif-field">
                    <label class="notif-label" for="segment-description">Description</label>
                    <textarea id="segment-description" class="notif-textarea" placeholder="Segment description"></textarea>
                </div>
                <div class="notif-field">
                    <label class="notif-label">Rules <span class="notif-required">*</span></label>
                    <div id="segment-rules"></div>
                    <button type="button" id="add-rule-btn" class="notif-btn-secondary">Add Rule</button>
                    <div id="segment-rules-error" class="notif-field-error"></div>
                </div>
                <div class="notif-modal-actions notif-modal-actions--split">
                    <div id="segment-modal-status" class="notif-inline-status" aria-live="polite"></div>
                    <div class="notif-modal-actions-group">
                        <button type="button" class="notif-btn-secondary" data-close="segment-modal">Cancel</button>
                        <button type="button" id="save-segment-btn" class="notif-btn-primary">Save Segment</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="message-modal" class="notif-modal">
        <div class="notif-modal-card">
            <div class="notif-modal-head">
                <h3 class="notif-modal-title">Create Campaign Compose</h3>
                <button type="button" class="notif-modal-close" data-close="message-modal">&times;</button>
            </div>
            <div class="notif-modal-body">
                <div id="message-editor-shell">
                    <div class="notif-grid-2">
                        <div class="notif-field">
                            <label class="notif-label" for="message-title">Title <span class="notif-required">*</span></label>
                            <input id="message-title" class="notif-input" type="text" maxlength="500" placeholder="Notification title">
                            <div id="message-title-error" class="notif-field-error"></div>
                        </div>
                        <div class="notif-field">
                            <label class="notif-label" for="message-device">Device <span class="notif-required">*</span></label>
                            <select id="message-device" class="notif-select">
                                <option value="all">All</option>
                                <option value="android">Android</option>
                                <option value="ios">iOS</option>
                                <option value="web">Web</option>
                                <option value="other">Other</option>
                            </select>
                            <div id="message-device-error" class="notif-field-error"></div>
                        </div>
                    </div>
                    <div class="notif-field">
                        <label class="notif-label" for="message-description">Description <span class="notif-required">*</span></label>
                        <textarea id="message-description" class="notif-textarea" placeholder="Notification body or internal description"></textarea>
                        <div id="message-description-error" class="notif-field-error"></div>
                    </div>
                    <div class="notif-thumb-row">
                        <div class="notif-field">
                            <label class="notif-label" for="message-thumb-type">Thumb Type</label>
                            <select id="message-thumb-type" class="notif-select">
                                <option value="browse">Manual Browse</option>
                                <option value="url">Type URL</option>
                            </select>
                        </div>
                        <div class="notif-field" id="message-thumb-file-wrapper">
                            <label class="notif-label" for="message-thumb-file">Browse</label>
                            <input id="message-thumb-file" class="notif-input" type="file" accept="image/*">
                        </div>
                        <div class="notif-field hidden" id="message-thumb-url-wrapper">
                            <label class="notif-label" for="message-thumb-url">URL</label>
                            <input id="message-thumb-url" class="notif-input" type="url" maxlength="4000" placeholder="Enter thumb URL">
                            <div id="message-thumb-url-error" class="notif-field-error"></div>
                        </div>
                        <div id="message-thumb-preview" class="notif-thumb-preview">
                            <div class="notif-thumb-preview-media">
                                <img id="message-thumb-preview-image" src="" alt="Thumb preview">
                            </div>
                            <div class="notif-thumb-preview-title">Preview</div>
                            <div id="message-thumb-preview-caption" class="notif-thumb-preview-caption">Used for image and largeImageUrl.</div>
                        </div>
                    </div>
                    <div class="notif-grid-2">
                        <div class="notif-field">
                            <label class="notif-label" for="message-segments">Segments <span class="notif-required">*</span></label>
                            <select id="message-segments" class="notif-select" multiple size="6"></select>
                            <div class="notif-muted">Use Ctrl/Cmd + click to select multiple segments.</div>
                            <div id="message-segments-error" class="notif-field-error"></div>
                        </div>
                        <div class="notif-field">
                            <label class="notif-label" for="message-type">Type <span class="notif-required">*</span></label>
                            <select id="message-type" class="notif-select">
                                <option value="custom">Custom</option>
                            </select>
                            <div id="message-type-error" class="notif-field-error"></div>
                        </div>
                    </div>
                    <div class="notif-field hidden" id="message-content-wrapper">
                        <label class="notif-label" for="message-content-id" id="message-content-label">Select Content</label>
                        <input id="message-content-id" class="notif-input" type="text" maxlength="100" placeholder="Enter content ID">
                    </div>
                    <div class="notif-grid-2">
                        <div class="notif-field">
                            <label class="notif-label" for="message-action">Action <span class="notif-required">*</span></label>
                            <select id="message-action" class="notif-select">
                                <option value="now">Now</option>
                                <option value="schedule">Schedule</option>
                            </select>
                            <div id="message-action-error" class="notif-field-error"></div>
                        </div>
                        <div class="notif-field hidden" id="message-schedule-wrapper">
                            <label class="notif-label" for="message-schedule-time">Schedule <span class="notif-required">*</span></label>
                            <input id="message-schedule-time" class="notif-input" type="datetime-local">
                            <div id="message-schedule-error" class="notif-field-error"></div>
                        </div>
                    </div>
                    <div class="notif-options">
                        <div class="notif-options-head">
                            <div class="notif-options-title">Additional options (optional)</div>
                            <div class="notif-muted">All fields optional.</div>
                        </div>
                        <div class="notif-field">
                            <label class="notif-label" for="message-android-channel">Android Notification Channel</label>
                            <input id="message-android-channel" class="notif-input" type="text" maxlength="255" placeholder="Enter Android notification channel">
                        </div>
                        <div class="notif-field" style="margin-bottom: 0;">
                            <div class="notif-options-head" style="margin-bottom: 10px;">
                                <label class="notif-label" for="message-custom-data" style="margin-bottom: 0;">Custom data</label>
                                <button type="button" id="add-custom-data-btn" class="notif-btn-secondary">Add Row</button>
                            </div>
                            <div id="message-custom-data"></div>
                        </div>
                    </div>
                    <div class="notif-modal-actions notif-modal-actions--split">
                        <div id="message-modal-status" class="notif-inline-status" aria-live="polite"></div>
                        <div class="notif-modal-actions-group">
                            <button type="button" class="notif-btn-secondary" data-close="message-modal">Cancel</button>
                            <button type="button" id="send-message-btn" class="notif-btn-secondary hidden">Send Notification</button>
                            <button type="button" id="save-message-btn" class="notif-btn-primary">Save Content</button>
                        </div>
                    </div>
                </div>
                <div id="message-progress-panel" class="hidden">
                    <div class="notif-progress-shell">
                        <div>
                            <h3 id="message-progress-title" class="notif-modal-title">Sending Notification...</h3>
                            <div id="message-progress-caption" class="notif-modal-meta">We are processing recipients in batches. This may take a few minutes.</div>
                        </div>

                        <div class="notif-progress-head">
                            <div>
                                <h4 id="message-progress-stage-label" class="notif-progress-title">Preparing notification...</h4>
                                <p id="message-progress-copy" class="notif-progress-copy">We are processing recipients in batches. This may take a few minutes.</p>
                            </div>
                            <div class="notif-progress-meta">
                                <span id="message-progress-status-chip" class="notif-progress-chip">Preparing</span>
                                <span id="message-progress-elapsed" class="notif-progress-chip">00:00 elapsed</span>
                            </div>
                        </div>

                        <div class="notif-progress-bar-card">
                            <div class="notif-progress-bar-row">
                                <strong id="message-progress-counts">0 / 0</strong>
                                <strong id="message-progress-percent">0%</strong>
                            </div>
                            <div class="notif-progress-track">
                                <div id="message-progress-fill" class="notif-progress-fill"></div>
                            </div>
                        </div>

                        <div class="notif-progress-footer">
                            <label class="notif-progress-toggle" for="message-progress-notify">
                                <input type="checkbox" id="message-progress-notify" checked>
                                <span>Notify me when completed</span>
                            </label>
                            <div class="notif-progress-footer-actions">
                                <button type="button" id="message-progress-back-btn" class="notif-btn-secondary hidden">Back to Editor</button>
                                <button type="button" id="message-progress-close-btn" class="notif-btn-secondary" data-close="message-modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="segment-detail-modal" class="notif-modal">
        <div class="notif-modal-card notif-modal-card--compact">
            <div class="notif-modal-head">
                <div>
                    <h3 class="notif-modal-title">Data View</h3>
                    <div id="segment-detail-caption" class="notif-modal-meta"></div>
                </div>
                <button type="button" class="notif-modal-close" data-close="segment-detail-modal">&times;</button>
            </div>
            <div class="notif-modal-body">
                <div class="notif-table-shell notif-modal-table-shell">
                    <div class="notif-table-wrap">
                        <table class="notif-table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Type</th>
                                    <th>Relation</th>
                                    <th>Value</th>
                                </tr>
                            </thead>
                            <tbody id="segment-detail-tbody"></tbody>
                        </table>
                    </div>
                </div>
                <div class="notif-modal-actions">
                    <button type="button" class="notif-btn-secondary" data-close="segment-detail-modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div id="message-debug-modal" class="notif-modal">
        <div class="notif-modal-card notif-modal-card--wide">
            <div class="notif-modal-head">
                <div>
                    <h3 class="notif-modal-title">Delivery Debug</h3>
                    <div id="message-debug-caption" class="notif-modal-meta"></div>
                </div>
                <button type="button" class="notif-modal-close" data-close="message-debug-modal">&times;</button>
            </div>
            <div class="notif-modal-body">
                <div id="message-debug-summary" class="notif-debug-grid"></div>
                <div class="notif-debug-sections">
                    <div class="notif-debug-panel">
                        <div class="notif-debug-panel-head">
                            <span>Campaign Information</span>
                            <div class="notif-debug-panel-actions">
                                <button type="button" id="message-debug-copy-payload" class="notif-debug-mini-btn">Copy Payload</button>
                            </div>
                        </div>
                        <div class="notif-debug-panel-body">
                            <div id="message-debug-payload-summary" class="notif-debug-kv"></div>
                            <details class="notif-debug-raw">
                                <summary>View Raw JSON</summary>
                                <pre id="message-debug-payload-source" class="notif-json"></pre>
                            </details>
                        </div>
                    </div>
                    <div class="notif-debug-panel">
                        <div class="notif-debug-panel-head">
                            <span>Delivery Summary</span>
                            <div class="notif-debug-panel-actions">
                                <button type="button" id="message-debug-copy-summary" class="notif-debug-mini-btn">Copy Summary</button>
                            </div>
                        </div>
                        <div class="notif-debug-panel-body">
                            <div id="message-debug-campaign-summary" class="notif-debug-kv"></div>
                            <div id="message-debug-campaign-progress" class="notif-debug-progress"></div>
                            <details class="notif-debug-raw">
                                <summary>View Raw JSON</summary>
                                <pre id="message-debug-campaign" class="notif-json"></pre>
                            </details>
                        </div>
                    </div>
                </div>
                <div class="notif-debug-table-head">
                    <div class="notif-debug-table-title">Device Delivery Details</div>
                    <div class="notif-muted">Recipient-level delivery status and provider response.</div>
                </div>
                <div class="notif-table-shell notif-modal-table-shell">
                    <div class="notif-table-wrap">
                        <table class="notif-table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>sms_cust_id</th>
                                    <th>Device</th>
                                    <th>Status</th>
                                    <th>Token</th>
                                    <th>Error</th>
                                    <th>Debug</th>
                                </tr>
                            </thead>
                            <tbody id="message-debug-tbody"></tbody>
                        </table>
                    </div>
                </div>
                <div class="notif-modal-actions">
                    <button type="button" class="notif-btn-secondary" data-close="message-debug-modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div id="confirm-modal" class="notif-modal">
        <div class="notif-modal-card notif-modal-card--compact">
            <div class="notif-modal-head">
                <h3 id="confirm-modal-title" class="notif-modal-title">Confirm Action</h3>
                <button type="button" class="notif-modal-close" data-close="confirm-modal">&times;</button>
            </div>
            <div class="notif-modal-body">
                <p id="confirm-modal-message" class="notif-confirm-text">Are you sure you want to continue?</p>
                <div class="notif-modal-actions">
                    <button type="button" id="confirm-cancel-btn" class="notif-btn-secondary" data-close="confirm-modal">Cancel</button>
                    <button type="button" id="confirm-ok-btn" class="notif-btn-danger">Delete</button>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script src="{{ asset('vendor/report-libs/js/jquery-3.6.0.min.js') }}?v={{ @filemtime(public_path('vendor/report-libs/js/jquery-3.6.0.min.js')) ?: time() }}"></script>
    <script src="{{ asset('vendor/report-libs/js/jquery.dataTables.min.js') }}?v={{ @filemtime(public_path('vendor/report-libs/js/jquery.dataTables.min.js')) ?: time() }}"></script>
    <script src="{{ asset('vendor/report-libs/js/select2.min.js') }}?v={{ @filemtime(public_path('vendor/report-libs/js/select2.min.js')) ?: time() }}"></script>
    <script>
        (function () {
            'use strict';

            const endpoints = {
                token: '/admin/api/tokens/current',
                filters: '/admin/api/operations/notification-segments/filters',
                segments: '/admin/api/operations/notification-segments/segments',
                segmentOptions: '/admin/api/operations/notification-segments/segment-options',
                packageOptions: '/admin/api/operations/notification-segments/package-options',
                segment(id) {
                    return `/admin/api/operations/notification-segments/segments/${encodeURIComponent(String(id || '').trim())}`;
                },
                messages: '/admin/api/operations/notification-segments/messages',
                thumbUpload: '/admin/api/operations/notification-segments/messages/thumb-upload',
                message(id) {
                    return `/admin/api/operations/notification-segments/messages/${encodeURIComponent(String(id || '').trim())}`;
                },
                messageDeliveryDebug(id) {
                    return `/admin/api/operations/notification-segments/messages/${encodeURIComponent(String(id || '').trim())}/delivery-debug`;
                },
                messageDispatchProgress(id) {
                    return `/admin/api/operations/notification-segments/messages/${encodeURIComponent(String(id || '').trim())}/dispatch-progress`;
                },
                messageDispatch(id) {
                    return `/admin/api/operations/notification-segments/messages/${encodeURIComponent(String(id || '').trim())}/dispatch`;
                },
            };

            const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
            const statusBox = document.getElementById('notif-status');
            const segmentModal = document.getElementById('segment-modal');
            const messageModal = document.getElementById('message-modal');
            const messageEditorShell = document.getElementById('message-editor-shell');
            const messageProgressPanel = document.getElementById('message-progress-panel');
            const segmentDetailModal = document.getElementById('segment-detail-modal');
            const messageDebugModal = document.getElementById('message-debug-modal');
            const confirmModal = document.getElementById('confirm-modal');
            const segmentDetailCaption = document.getElementById('segment-detail-caption');
            const segmentDetailTbody = document.getElementById('segment-detail-tbody');
            const messageDebugCaption = document.getElementById('message-debug-caption');
            const messageDebugSummary = document.getElementById('message-debug-summary');
            const messageDebugPayloadSummary = document.getElementById('message-debug-payload-summary');
            const messageDebugPayloadSource = document.getElementById('message-debug-payload-source');
            const messageDebugCampaignSummary = document.getElementById('message-debug-campaign-summary');
            const messageDebugCampaignProgress = document.getElementById('message-debug-campaign-progress');
            const messageDebugCampaign = document.getElementById('message-debug-campaign');
            const messageDebugTbody = document.getElementById('message-debug-tbody');
            const messageDebugCopyPayloadButton = document.getElementById('message-debug-copy-payload');
            const messageDebugCopySummaryButton = document.getElementById('message-debug-copy-summary');
            const messageProgressTitle = document.getElementById('message-progress-title');
            const messageProgressCaption = document.getElementById('message-progress-caption');
            const messageProgressStageLabel = document.getElementById('message-progress-stage-label');
            const messageProgressCopy = document.getElementById('message-progress-copy');
            const messageProgressStatusChip = document.getElementById('message-progress-status-chip');
            const messageProgressElapsed = document.getElementById('message-progress-elapsed');
            const messageProgressCounts = document.getElementById('message-progress-counts');
            const messageProgressPercent = document.getElementById('message-progress-percent');
            const messageProgressFill = document.getElementById('message-progress-fill');
            const messageProgressBatches = document.getElementById('message-progress-batches');
            const messageProgressIssuesCount = document.getElementById('message-progress-issues-count');
            const messageProgressIssuesList = document.getElementById('message-progress-issues-list');
            const messageProgressBackButton = document.getElementById('message-progress-back-btn');
            const messageProgressCloseButton = document.getElementById('message-progress-close-btn');
            const messageProgressNotifyCheckbox = document.getElementById('message-progress-notify');
            const confirmModalTitle = document.getElementById('confirm-modal-title');
            const confirmModalMessage = document.getElementById('confirm-modal-message');
            const confirmOkButton = document.getElementById('confirm-ok-btn');
            const segmentRulesBox = document.getElementById('segment-rules');
            const segmentTitleInput = document.getElementById('segment-title');
            const segmentDescriptionInput = document.getElementById('segment-description');
            const segmentTitleError = document.getElementById('segment-title-error');
            const segmentRulesError = document.getElementById('segment-rules-error');
            const segmentModalStatus = document.getElementById('segment-modal-status');
            const saveSegmentButton = document.getElementById('save-segment-btn');
            const segmentModalTitle = segmentModal?.querySelector('.notif-modal-title') || null;
            const messageTitleInput = document.getElementById('message-title');
            const messageTitleError = document.getElementById('message-title-error');
            const messageDeviceError = document.getElementById('message-device-error');
            const messageDescriptionInput = document.getElementById('message-description');
            const messageDescriptionError = document.getElementById('message-description-error');
            const messageSegmentsSelect = document.getElementById('message-segments');
            const messageSegmentsError = document.getElementById('message-segments-error');
            const messageTypeSelect = document.getElementById('message-type');
            const messageTypeError = document.getElementById('message-type-error');
            const messageThumbTypeSelect = document.getElementById('message-thumb-type');
            const messageDeviceSelect = document.getElementById('message-device');
            const messageThumbFileWrapper = document.getElementById('message-thumb-file-wrapper');
            const messageThumbUrlWrapper = document.getElementById('message-thumb-url-wrapper');
            const messageThumbFileInput = document.getElementById('message-thumb-file');
            const messageThumbUrlInput = document.getElementById('message-thumb-url');
            const messageThumbUrlError = document.getElementById('message-thumb-url-error');
            const messageThumbPreview = document.getElementById('message-thumb-preview');
            const messageThumbPreviewImage = document.getElementById('message-thumb-preview-image');
            const messageThumbPreviewCaption = document.getElementById('message-thumb-preview-caption');
            const messageContentWrapper = document.getElementById('message-content-wrapper');
            const messageContentLabel = document.getElementById('message-content-label');
            const messageContentIdInput = document.getElementById('message-content-id');
            const messageScheduleWrapper = document.getElementById('message-schedule-wrapper');
            const messageActionSelect = document.getElementById('message-action');
            const messageActionError = document.getElementById('message-action-error');
            const messageScheduleTimeInput = document.getElementById('message-schedule-time');
            const messageScheduleError = document.getElementById('message-schedule-error');
            const messageAndroidChannelInput = document.getElementById('message-android-channel');
            const messageCustomDataBox = document.getElementById('message-custom-data');
            const messageModalTitle = messageModal?.querySelector('.notif-modal-title') || null;
            const messageModalStatus = document.getElementById('message-modal-status');
            const saveMessageButton = document.getElementById('save-message-btn');
            const sendMessageButton = document.getElementById('send-message-btn');
            const messagesTableElement = document.getElementById('notification-messages-table');
            const segmentsTableElement = document.getElementById('notification-segments-table');
            const messagesTableBody = messagesTableElement?.querySelector('tbody') || null;
            const segmentsTableBody = segmentsTableElement?.querySelector('tbody') || null;
            const tabs = Array.from(document.querySelectorAll('.notif-tab-btn'));
            const sections = {
                messages: document.getElementById('messages-section'),
                segments: document.getElementById('segments-section'),
            };

            let bearerToken = '';
            let filterMeta = [];
            let segmentRows = [];
            let messageRows = [];
            let segmentOptions = [];
            const packageOptionLabels = new Map();
            let editingSegmentId = '';
            let editingMessageId = '';
            let editingMessageThumb = '';
            let confirmResolver = null;
            const defaultCustomDataKeys = ['source', 'seasonId', 'contentId', 'image', 'largeImageUrl', 'initial'];
            const select2Enabled = Boolean(window.jQuery && window.jQuery.fn?.select2);
            const dataTableEnabled = Boolean(window.jQuery && window.jQuery.fn?.DataTable);
            let segmentsTable = null;
            let messagesTable = null;
            let statusHideTimer = null;
            let segmentModalHideTimer = null;
            let messageModalHideTimer = null;
            let messageThumbPreviewObjectUrl = '';
            let segmentLoadPromise = null;
            let messageLoadPromise = null;
            const messageDispatchNotifyPreferenceKey = 'push.notifications.v1.notify-on-complete';
            const messageDispatchCompletionNotifications = new Set();
            const messageDispatchProgressState = {
                active: false,
                messageId: '',
                pollTimer: null,
                pollRequest: null,
                completing: false,
                awaitingDispatch: false,
                pendingStageLabel: '',
                pendingCopy: '',
                payload: null,
                notifyOnComplete: true,
            };

            function asId(value) {
                return String(value ?? '').trim();
            }

            function idEquals(left, right) {
                return asId(left) !== '' && asId(left) === asId(right);
            }

            function hasShownMessageDispatchCompletion(messageId) {
                const normalizedId = asId(messageId);
                return normalizedId !== '' && messageDispatchCompletionNotifications.has(normalizedId);
            }

            function markMessageDispatchCompletionShown(messageId) {
                const normalizedId = asId(messageId);
                if (normalizedId !== '') {
                    messageDispatchCompletionNotifications.add(normalizedId);
                }
            }

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

            function prettyJson(value) {
                try {
                    return JSON.stringify(value ?? {}, null, 2);
                } catch (error) {
                    return String(value ?? '');
                }
            }

            function notifyPushAction(message, type = 'info') {
                const text = String(message || '').trim();
                if (text === '') {
                    return;
                }

                const normalizedType = String(type || 'info').trim().toLowerCase();
                const alertType = normalizedType === 'error' ? 'danger' : normalizedType;

                if (typeof window.showAppAlert === 'function') {
                    window.showAppAlert(text, alertType, 5000);
                    return;
                }

                if (typeof window.showReportNotification === 'function') {
                    window.showReportNotification(text, alertType);
                    return;
                }

                if (window.Filament?.notification) {
                    const notification = Filament.notification().title(text);

                    if (alertType === 'success') {
                        notification.success();
                    } else if (alertType === 'danger') {
                        notification.danger();
                    } else if (alertType === 'warning') {
                        notification.warning();
                    } else {
                        notification.info();
                    }

                    notification.send();
                    return;
                }

                console[alertType === 'danger' ? 'error' : 'log'](text);
            }

            function loadBooleanPreference(key, fallback = true) {
                try {
                    const stored = window.localStorage?.getItem(key);
                    if (stored === null) {
                        return fallback;
                    }

                    return stored === '1';
                } catch (error) {
                    return fallback;
                }
            }

            function storeBooleanPreference(key, value) {
                try {
                    window.localStorage?.setItem(key, value ? '1' : '0');
                } catch (error) {
                    console.warn('Unable to persist push preference.', error);
                }
            }

            async function ensureBrowserNotificationPermission() {
                if (!messageDispatchProgressState.notifyOnComplete || !('Notification' in window)) {
                    return 'unsupported';
                }

                if (Notification.permission === 'granted' || Notification.permission === 'denied') {
                    return Notification.permission;
                }

                try {
                    return await Notification.requestPermission();
                } catch (error) {
                    return Notification.permission || 'default';
                }
            }

            function showBrowserCompletionNotification(message) {
                const text = String(message || '').trim();
                if (
                    text === ''
                    || !messageDispatchProgressState.notifyOnComplete
                    || !('Notification' in window)
                    || Notification.permission !== 'granted'
                    || document.visibilityState === 'visible'
                ) {
                    return;
                }

                try {
                    const notification = new Notification('Push Notifications', {
                        body: text,
                        tag: 'push-notifications-dispatch',
                    });

                    window.setTimeout(() => {
                        notification.close();
                    }, 7000);
                } catch (error) {
                    console.warn('Unable to show browser notification.', error);
                }
            }

            function syncMessageDispatchNotifyPreference() {
                const checked = messageProgressNotifyCheckbox instanceof HTMLInputElement
                    ? messageProgressNotifyCheckbox.checked
                    : true;

                messageDispatchProgressState.notifyOnComplete = checked;
                storeBooleanPreference(messageDispatchNotifyPreferenceKey, checked);
            }

            function showStatus(message, type = 'info') {
                if (statusHideTimer) {
                    window.clearTimeout(statusHideTimer);
                    statusHideTimer = null;
                }

                notifyPushAction(message, type);
            }

            function hideStatus() {
                if (statusHideTimer) {
                    window.clearTimeout(statusHideTimer);
                    statusHideTimer = null;
                }

            }

            function setBusyButtonState(button, isBusy, busyLabel = 'Working...') {
                if (!(button instanceof HTMLButtonElement)) {
                    return;
                }

                if (!button.dataset.originalLabel) {
                    button.dataset.originalLabel = button.textContent || '';
                }

                if (isBusy) {
                    button.disabled = true;
                    button.classList.add('notif-btn-loading');
                    button.textContent = busyLabel;
                    return;
                }

                button.disabled = false;
                button.classList.remove('notif-btn-loading');
                button.textContent = button.dataset.originalLabel || button.textContent || '';
            }

            function setButtonLabel(button, label) {
                if (!(button instanceof HTMLButtonElement)) {
                    return;
                }

                button.textContent = label;
                button.dataset.originalLabel = label;
            }

            function setMessageModalBusyState(isBusy, mode = 'save') {
                const primaryLabel = mode === 'schedule'
                    ? 'Scheduling...'
                    : (mode === 'send' ? 'Sending...' : 'Saving...');
                const secondaryLabel = mode === 'schedule' ? 'Scheduling...' : 'Sending...';

                if (!isBusy) {
                    setBusyButtonState(saveMessageButton, false);
                    setBusyButtonState(sendMessageButton, false);
                    return;
                }

                if (mode === 'save') {
                    setBusyButtonState(saveMessageButton, true, primaryLabel);

                    if (sendMessageButton instanceof HTMLButtonElement) {
                        setBusyButtonState(sendMessageButton, false);
                        sendMessageButton.disabled = true;
                    }

                    return;
                }

                setBusyButtonState(sendMessageButton, true, secondaryLabel);

                if (saveMessageButton instanceof HTMLButtonElement) {
                    setBusyButtonState(saveMessageButton, false);
                    saveMessageButton.disabled = true;
                }
            }

            function setMessageDispatchEditorLocked(isLocked) {
                if (saveMessageButton instanceof HTMLButtonElement) {
                    saveMessageButton.disabled = isLocked;
                }

                if (sendMessageButton instanceof HTMLButtonElement) {
                    sendMessageButton.disabled = isLocked;
                }
            }

            function hideMessageModalStatus() {
                if (messageModalHideTimer) {
                    window.clearTimeout(messageModalHideTimer);
                    messageModalHideTimer = null;
                }

            }

            function showMessageEditorView() {
                messageEditorShell?.classList.remove('hidden');
                messageProgressPanel?.classList.add('hidden');
                messageProgressBackButton?.classList.add('hidden');
            }

            function showMessageProgressView() {
                messageEditorShell?.classList.remove('hidden');
                messageProgressPanel?.classList.remove('hidden');
                messageProgressBackButton?.classList.add('hidden');
                if (messageProgressPanel instanceof HTMLElement) {
                    window.requestAnimationFrame(() => {
                        messageProgressPanel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                    });
                }
            }

            function formatElapsedSeconds(totalSeconds) {
                const seconds = Math.max(0, Number(totalSeconds) || 0);
                const hours = Math.floor(seconds / 3600);
                const minutes = Math.floor((seconds % 3600) / 60);
                const remainder = seconds % 60;
                const parts = [minutes, remainder].map((part) => String(part).padStart(2, '0'));

                if (hours > 0) {
                    parts.unshift(String(hours).padStart(2, '0'));
                }

                return parts.join(':');
            }

            function dispatchStatusLabel(status) {
                return ({
                    pending: 'Pending',
                    queued: 'Queued',
                    processing: 'In Progress',
                    sent: 'Sent',
                    completed: 'Completed',
                    failed: 'Failed',
                    invalid: 'Invalid',
                    cancelled: 'Cancelled',
                    scheduled: 'Scheduled',
                    saved: 'Saved',
                })[String(status || '').trim().toLowerCase()] || 'Preparing';
            }

            function buildBatchCards(total, batchSize, status, processed) {
                const totalCount = Math.max(0, Number(total) || 0);
                const safeBatchSize = Math.max(10, Number(batchSize) || 200);
                const totalBatches = totalCount > 0 ? Math.ceil(totalCount / safeBatchSize) : 0;
                const activeStatus = String(status || '').trim().toLowerCase();
                const processedCount = Math.max(0, Number(processed) || 0);
                const completedBatches = totalBatches > 0 ? Math.min(totalBatches, Math.floor(processedCount / safeBatchSize)) : 0;
                const currentBatch = ['queued', 'processing'].includes(activeStatus) && totalBatches > 0
                    ? Math.min(totalBatches, Math.max(completedBatches + 1, 1))
                    : (activeStatus === 'completed' ? totalBatches : 0);

                if (totalBatches <= 0) {
                    return [];
                }

                const maxVisible = 8;
                let start = 1;
                if (currentBatch > maxVisible) {
                    start = Math.max(1, currentBatch - 3);
                }
                let end = Math.min(totalBatches, start + maxVisible - 1);
                start = Math.max(1, end - maxVisible + 1);

                const cards = [];

                for (let batchNo = start; batchNo <= end; batchNo += 1) {
                    let cardStatus = 'pending';

                    if (activeStatus === 'failed' && batchNo === currentBatch && currentBatch > 0) {
                        cardStatus = 'failed';
                    } else if (batchNo <= completedBatches) {
                        cardStatus = 'completed';
                    } else if (['queued', 'processing'].includes(activeStatus) && batchNo === currentBatch) {
                        cardStatus = 'processing';
                    } else if (activeStatus === 'completed' && batchNo <= totalBatches) {
                        cardStatus = 'completed';
                    }

                    cards.push({
                        batchNo,
                        rangeStart: ((batchNo - 1) * safeBatchSize) + 1,
                        rangeEnd: Math.min(totalCount, batchNo * safeBatchSize),
                        status: cardStatus,
                    });
                }

                return cards;
            }

            function renderMessageDispatchProgress() {
                const payload = messageDispatchProgressState.payload || {};
                const status = String(payload.status || '').trim().toLowerCase();
                const total = Math.max(0, Number(payload.total_count) || 0);
                const processed = Math.max(0, Number(payload.processed_count) || 0);
                const percent = Math.max(0, Math.min(100, Number(payload.progress_percent) || 0));
                const stageLabel = String(payload.stage_label || messageDispatchProgressState.pendingStageLabel || 'Preparing notification...');
                const stageCopy = String(payload.dispatch_status_message || messageDispatchProgressState.pendingCopy || 'We are processing recipients in batches. This may take a few minutes.');
                const batchCards = buildBatchCards(total, payload.batch_size || 200, status, processed);
                const issues = Array.isArray(payload.issues) ? payload.issues : [];

                if (messageProgressStageLabel instanceof HTMLElement) {
                    messageProgressStageLabel.textContent = stageLabel;
                }
                if (messageProgressCopy instanceof HTMLElement) {
                    messageProgressCopy.textContent = stageCopy;
                }
                if (messageProgressStatusChip instanceof HTMLElement) {
                    messageProgressStatusChip.textContent = dispatchStatusLabel(status);
                }
                if (messageProgressElapsed instanceof HTMLElement) {
                    messageProgressElapsed.textContent = `${formatElapsedSeconds(payload.elapsed_seconds || 0)} elapsed`;
                }
                if (messageProgressCounts instanceof HTMLElement) {
                    messageProgressCounts.textContent = `${processed.toLocaleString()} / ${total.toLocaleString()}`;
                }
                if (messageProgressPercent instanceof HTMLElement) {
                    messageProgressPercent.textContent = `${percent}%`;
                }
                if (messageProgressFill instanceof HTMLElement) {
                    messageProgressFill.style.width = `${percent}%`;
                }
                if (messageProgressTitle instanceof HTMLElement) {
                    messageProgressTitle.textContent = total > 0 ? 'Sending Notification...' : 'Preparing Notification...';
                }
                if (messageProgressCaption instanceof HTMLElement) {
                    messageProgressCaption.textContent = total > 0
                        ? `We are processing ${total.toLocaleString()} recipients in batches.`
                        : 'We are preparing recipients and validating the dispatch.';
                }
                if (messageProgressBatches instanceof HTMLElement) {
                    if (batchCards.length === 0) {
                        messageProgressBatches.innerHTML = '';
                    } else {
                        messageProgressBatches.innerHTML = batchCards.map((card) => `
                            <div class="notif-progress-batch is-${escapeHtml(card.status)}">
                                <div class="notif-progress-batch-label">Batch ${escapeHtml(String(card.batchNo))}</div>
                                <div class="notif-progress-batch-range">${escapeHtml(String(card.rangeStart))} - ${escapeHtml(String(card.rangeEnd))}</div>
                                <div class="notif-progress-batch-status">${escapeHtml(dispatchStatusLabel(card.status))}</div>
                            </div>
                        `).join('');
                    }
                }
                if (messageProgressIssuesCount instanceof HTMLElement) {
                    messageProgressIssuesCount.textContent = `${issues.length} found`;
                }
                if (messageProgressIssuesList instanceof HTMLElement) {
                    if (!issues.length) {
                        messageProgressIssuesList.innerHTML = '<p class="notif-progress-issues-empty">No issues found yet.</p>';
                    } else {
                        messageProgressIssuesList.innerHTML = issues.map((issue) => `
                            <div class="notif-progress-issue">
                                <div>${escapeHtml(String(issue.reference || issue.id || '-'))}</div>
                                <div>${escapeHtml(String(issue.message || 'Delivery skipped during dispatch.'))}</div>
                                <div class="notif-progress-issue-status">${escapeHtml(dispatchStatusLabel(issue.status || 'failed'))}</div>
                            </div>
                        `).join('');
                    }
                }
                if (messageProgressBackButton instanceof HTMLButtonElement) {
                    messageProgressBackButton.classList.add('hidden');
                }
                if (messageProgressCloseButton instanceof HTMLButtonElement) {
                    messageProgressCloseButton.textContent = messageDispatchProgressState.active ? 'Hide' : 'Close';
                }
            }

            function stopMessageDispatchProgressPolling() {
                if (messageDispatchProgressState.pollTimer) {
                    window.clearInterval(messageDispatchProgressState.pollTimer);
                    messageDispatchProgressState.pollTimer = null;
                }
            }

            async function pollMessageDispatchProgress() {
                if (!messageDispatchProgressState.active || messageDispatchProgressState.messageId === '' || messageDispatchProgressState.awaitingDispatch) {
                    return;
                }

                if (messageDispatchProgressState.pollRequest) {
                    return messageDispatchProgressState.pollRequest;
                }

                const trackedMessageId = asId(messageDispatchProgressState.messageId);
                const request = (async () => {
                    try {
                        const response = await apiRequest(endpoints.messageDispatchProgress(trackedMessageId), { method: 'GET' });

                        if (!idEquals(trackedMessageId, messageDispatchProgressState.messageId)) {
                            return;
                        }

                        messageDispatchProgressState.payload = response?.data || {};
                        renderMessageDispatchProgress();

                        const status = String(messageDispatchProgressState.payload?.status || '').trim().toLowerCase();
                        if (['completed', 'failed', 'cancelled'].includes(status)) {
                            if (messageDispatchProgressState.completing) {
                                return;
                            }

                            messageDispatchProgressState.completing = true;
                            const completedMessageId = asId(messageDispatchProgressState.messageId);
                            messageDispatchProgressState.active = false;
                            stopMessageDispatchProgressPolling();
                            setMessageDispatchEditorLocked(false);
                            await loadMessages();
                            syncMessageDispatchNotifyPreference();
                            const completionMessage = messageDispatchProgressState.payload?.dispatch_status_message || 'Notification dispatch completed.';
                            if (!hasShownMessageDispatchCompletion(completedMessageId)) {
                                markMessageDispatchCompletionShown(completedMessageId);
                                showStatus(completionMessage, status === 'completed' ? 'success' : 'error');
                                showBrowserCompletionNotification(completionMessage);
                            }
                            renderMessageDispatchProgress();
                        }
                    } catch (error) {
                        console.warn('Unable to refresh notification dispatch progress.', error);
                    } finally {
                        if (messageDispatchProgressState.pollRequest === request) {
                            messageDispatchProgressState.pollRequest = null;
                        }
                    }
                })();

                messageDispatchProgressState.pollRequest = request;
                return request;
            }

            function startMessageDispatchProgress(messageId, pendingStageLabel, pendingCopy) {
                syncMessageDispatchNotifyPreference();
                messageDispatchProgressState.active = true;
                messageDispatchProgressState.messageId = asId(messageId);
                messageDispatchProgressState.completing = false;
                messageDispatchProgressState.awaitingDispatch = true;
                messageDispatchProgressState.pollRequest = null;
                if (messageDispatchProgressState.messageId !== '') {
                    messageDispatchCompletionNotifications.delete(messageDispatchProgressState.messageId);
                }
                messageDispatchProgressState.pendingStageLabel = String(pendingStageLabel || 'Preparing notification...');
                messageDispatchProgressState.pendingCopy = String(pendingCopy || 'We are processing recipients in batches. This may take a few minutes.');
                messageDispatchProgressState.payload = null;
                setMessageDispatchEditorLocked(true);
                void ensureBrowserNotificationPermission();
                showMessageProgressView();
                renderMessageDispatchProgress();
                openModal(messageModal);
                stopMessageDispatchProgressPolling();
                messageDispatchProgressState.pollTimer = window.setInterval(() => {
                    void pollMessageDispatchProgress();
                }, 2500);
            }

            function showMessageModalStatus(message, type = 'error', autoHide = false) {
                if (!String(message || '').trim()) {
                    return;
                }

                if (messageModalHideTimer) {
                    window.clearTimeout(messageModalHideTimer);
                    messageModalHideTimer = null;
                }

                notifyPushAction(message, type);

                if (autoHide) {
                    messageModalHideTimer = window.setTimeout(() => {
                        hideMessageModalStatus();
                    }, 5000);
                }
            }

            function clearMessageValidation() {
                setFieldError(messageTitleInput, messageTitleError, '');
                setFieldError(messageDeviceSelect, messageDeviceError, '');
                setFieldError(messageDescriptionInput, messageDescriptionError, '');
                setFieldError(messageThumbUrlInput, messageThumbUrlError, '');
                setFieldError(messageSegmentsSelect, messageSegmentsError, '');
                setFieldError(messageTypeSelect, messageTypeError, '');
                setFieldError(messageActionSelect, messageActionError, '');
                setFieldError(messageScheduleTimeInput, messageScheduleError, '');
            }

            function applyMessageValidationErrors(errors = {}) {
                clearMessageValidation();

                const setFirst = (key, field, errorNode) => {
                    const message = Array.isArray(errors?.[key]) ? String(errors[key][0] || '') : '';
                    if (message) {
                        setFieldError(field, errorNode, message);
                    }
                };

                setFirst('title', messageTitleInput, messageTitleError);
                setFirst('description', messageDescriptionInput, messageDescriptionError);
                setFirst('segment_ids', messageSegmentsSelect, messageSegmentsError);
                setFirst('device', messageDeviceSelect, messageDeviceError);
                setFirst('device_types', messageDeviceSelect, messageDeviceError);
                setFirst('thumb', messageThumbUrlInput, messageThumbUrlError);
                setFirst('thumb_url', messageThumbUrlInput, messageThumbUrlError);
                setFirst('type', messageTypeSelect, messageTypeError);
                setFirst('action', messageActionSelect, messageActionError);
                setFirst('schedule_time', messageScheduleTimeInput, messageScheduleError);
            }

            function isValidHttpUrl(value) {
                try {
                    const parsed = new URL(String(value || ''));
                    return parsed.protocol === 'http:' || parsed.protocol === 'https:';
                } catch (error) {
                    return false;
                }
            }

            function validateMessageForm() {
                clearMessageValidation();

                let payload;

                try {
                    payload = {
                        title: messageTitleInput?.value.trim() || '',
                        description: messageDescriptionInput?.value.trim() || '',
                        segment_ids: selectedSegmentIds(),
                        device_types: selectedMessageDeviceTypes(),
                        device: selectedMessageDevice(),
                        type: messageTypeSelect?.value || 'custom',
                        content_id: messageContentIdInput?.value.trim() || '',
                        thumb_type: messageThumbTypeSelect?.value || 'browse',
                        thumb: '',
                        action: messageActionSelect?.value || 'now',
                        schedule_time: messageScheduleTimeInput?.value || null,
                        android_notification_channel: messageAndroidChannelInput?.value.trim() || '',
                        custom_data: readCustomDataRows(),
                    };
                } catch (error) {
                    return {
                        isValid: false,
                        payload: null,
                        firstInvalidField: messageCustomDataBox?.querySelector('.custom-data-key, .custom-data-value') || null,
                        message: error.message || 'Please fix the highlighted content fields.',
                    };
                }

                let firstInvalidField = null;
                let message = '';

                if (!payload.title) {
                    setFieldError(messageTitleInput, messageTitleError, 'Content title is required.');
                    firstInvalidField = firstInvalidField || messageTitleInput;
                    message = message || 'Content title is required.';
                }

                if (!payload.description) {
                    setFieldError(messageDescriptionInput, messageDescriptionError, 'Content description is required.');
                    firstInvalidField = firstInvalidField || messageDescriptionInput;
                    message = message || 'Content description is required.';
                }

                if (payload.thumb_type === 'url') {
                    const thumbUrl = String(messageThumbUrlInput?.value || '').trim();

                    if (!thumbUrl) {
                        setFieldError(messageThumbUrlInput, messageThumbUrlError, 'Thumb URL is required when Thumb Type is URL.');
                        firstInvalidField = firstInvalidField || messageThumbUrlInput;
                        message = message || 'Thumb URL is required when Thumb Type is URL.';
                    } else if (!isValidHttpUrl(thumbUrl)) {
                        setFieldError(messageThumbUrlInput, messageThumbUrlError, 'Enter a valid http or https thumb URL.');
                        firstInvalidField = firstInvalidField || messageThumbUrlInput;
                        message = message || 'Enter a valid http or https thumb URL.';
                    }
                }

                if (!payload.segment_ids.length) {
                    setFieldError(messageSegmentsSelect, messageSegmentsError, 'Select at least one segment.');
                    firstInvalidField = firstInvalidField || messageSegmentsSelect;
                    message = message || 'Select at least one segment.';
                }

                if (!payload.device_types.length) {
                    setFieldError(messageDeviceSelect, messageDeviceError, 'Select a valid device.');
                    firstInvalidField = firstInvalidField || messageDeviceSelect;
                    message = message || 'Select a valid device.';
                }

                if (!String(payload.type || '').trim()) {
                    setFieldError(messageTypeSelect, messageTypeError, 'Type is required.');
                    firstInvalidField = firstInvalidField || messageTypeSelect;
                    message = message || 'Type is required.';
                }

                if (!String(payload.action || '').trim()) {
                    setFieldError(messageActionSelect, messageActionError, 'Action is required.');
                    firstInvalidField = firstInvalidField || messageActionSelect;
                    message = message || 'Action is required.';
                }

                if (payload.action === 'schedule' && !payload.schedule_time) {
                    setFieldError(messageScheduleTimeInput, messageScheduleError, 'Schedule time is required for scheduled content.');
                    firstInvalidField = firstInvalidField || messageScheduleTimeInput;
                    message = message || 'Schedule time is required for scheduled content.';
                } else if (payload.action === 'schedule' && payload.schedule_time) {
                    const scheduleTimestamp = new Date(payload.schedule_time).getTime();
                    if (Number.isNaN(scheduleTimestamp)) {
                        setFieldError(messageScheduleTimeInput, messageScheduleError, 'Enter a valid schedule time.');
                        firstInvalidField = firstInvalidField || messageScheduleTimeInput;
                        message = message || 'Enter a valid schedule time.';
                    } else if (scheduleTimestamp <= Date.now()) {
                        setFieldError(messageScheduleTimeInput, messageScheduleError, 'Schedule time must be in the future.');
                        firstInvalidField = firstInvalidField || messageScheduleTimeInput;
                        message = message || 'Schedule time must be in the future.';
                    }
                }

                return {
                    isValid: message === '',
                    payload,
                    firstInvalidField,
                    message,
                };
            }

            function formatDate(value) {
                if (!value) {
                    return '-';
                }

                const date = new Date(value);
                return Number.isNaN(date.getTime()) ? value : date.toLocaleString();
            }

            function formatTableDate(value) {
                if (!value) {
                    return '-';
                }

                const date = new Date(value);
                if (Number.isNaN(date.getTime())) {
                    return escapeHtml(value);
                }

                return escapeHtml(date.toLocaleString('en-US', {
                    year: 'numeric',
                    month: 'short',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit',
                }));
            }

            function formatDebugDate(value, includeSeconds = false) {
                if (!value) {
                    return '-';
                }

                const date = new Date(value);
                if (Number.isNaN(date.getTime())) {
                    return String(value);
                }

                return date.toLocaleString('en-US', {
                    year: 'numeric',
                    month: 'short',
                    day: '2-digit',
                    hour: 'numeric',
                    minute: '2-digit',
                    ...(includeSeconds ? { second: '2-digit' } : {}),
                });
            }

            function formatHumanDuration(seconds, startedAt = '', completedAt = '') {
                let totalSeconds = Math.max(0, Number(seconds) || 0);

                if (totalSeconds <= 0 && startedAt && completedAt) {
                    const start = new Date(startedAt).getTime();
                    const end = new Date(completedAt).getTime();
                    if (!Number.isNaN(start) && !Number.isNaN(end) && end >= start) {
                        totalSeconds = Math.round((end - start) / 1000);
                    }
                }

                if (totalSeconds <= 0) {
                    return '-';
                }

                const hours = Math.floor(totalSeconds / 3600);
                const minutes = Math.floor((totalSeconds % 3600) / 60);
                const remainder = totalSeconds % 60;
                const parts = [];

                if (hours > 0) {
                    parts.push(`${hours} hour${hours === 1 ? '' : 's'}`);
                }
                if (minutes > 0) {
                    parts.push(`${minutes} minute${minutes === 1 ? '' : 's'}`);
                }
                if (remainder > 0 || !parts.length) {
                    parts.push(`${remainder} second${remainder === 1 ? '' : 's'}`);
                }

                return parts.join(' ');
            }

            function normalizeCount(value, fallback = 0) {
                const parsed = Number(value);
                return Number.isFinite(parsed) ? Math.max(0, parsed) : fallback;
            }

            function deliveryTypeLabel(value) {
                const normalized = String(value || '').trim().toLowerCase();

                if (normalized === 'schedule' || normalized === 'scheduled') {
                    return 'Scheduled';
                }

                if (normalized === 'now' || normalized === 'immediate' || normalized === 'send_now') {
                    return 'Immediate (Now)';
                }

                return normalized ? normalized.replace(/_/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase()) : '-';
            }

            function thumbTypeLabel(value) {
                const normalized = String(value || '').trim().toLowerCase();

                if (normalized === 'url') {
                    return 'URL';
                }

                if (normalized === 'browse') {
                    return 'Browse';
                }

                return normalized ? normalized.replace(/\b\w/g, (char) => char.toUpperCase()) : '-';
            }

            function yesNoLabel(value) {
                return String(value || '').trim() !== '' ? 'Yes' : 'No';
            }

            function fallbackText(value, fallback = '-') {
                const text = String(value ?? '').trim();
                return text !== '' ? text : fallback;
            }

            function renderDebugKeyValueRows(entries = []) {
                return entries.map((entry) => `
                    <div class="notif-debug-kv-row">
                        <div class="notif-debug-kv-key">${escapeHtml(entry.label || '-')}</div>
                        <div class="notif-debug-kv-value">${escapeHtml(fallbackText(entry.value, '-'))}</div>
                    </div>
                `).join('');
            }

            function renderDebugProgressRows(items = [], total = 0) {
                const safeTotal = Math.max(0, Number(total) || 0);

                return items.map((item) => {
                    const count = normalizeCount(item.count, 0);
                    const percent = safeTotal > 0 ? Math.min(100, Math.round((count / safeTotal) * 100)) : 0;

                    return `
                        <div class="notif-debug-progress-row">
                            <div class="notif-debug-progress-label">${escapeHtml(item.label)}</div>
                            <div class="notif-debug-progress-track">
                                <div class="notif-debug-progress-fill ${escapeHtml(item.variant)}" style="width: ${percent}%;"></div>
                            </div>
                            <div class="notif-debug-progress-value">${percent}% (${count})</div>
                        </div>
                    `;
                }).join('');
            }

            async function copyTextToClipboard(text) {
                const value = String(text || '');

                if (navigator.clipboard?.writeText) {
                    await navigator.clipboard.writeText(value);
                    return;
                }

                const textarea = document.createElement('textarea');
                textarea.value = value;
                textarea.setAttribute('readonly', 'readonly');
                textarea.style.position = 'fixed';
                textarea.style.opacity = '0';
                document.body.appendChild(textarea);
                textarea.select();
                document.execCommand('copy');
                document.body.removeChild(textarea);
            }

            function tableSearchText(parts = []) {
                return parts
                    .map((part) => String(part ?? '').trim())
                    .filter(Boolean)
                    .join(' ');
            }

            function renderPill(label, variant = 'muted') {
                return `<span class="pill ${escapeHtml(variant)}">${escapeHtml(label || '-')}</span>`;
            }

            function normalizeMessageTypeLabel(value) {
                const normalized = String(value || '').trim().toLowerCase();
                if (!normalized) {
                    return '-';
                }

                if (normalized === 'vod') {
                    return 'CUSTOM';
                }

                return normalized.toUpperCase();
            }

            function renderPillStack(items, variant) {
                if (!Array.isArray(items) || !items.length) {
                    return '<span class="notif-muted">-</span>';
                }

                return `<div class="notif-stack">${items.map((item) => renderPill(item, variant)).join('')}</div>`;
            }

            function renderDeleteIcon() {
                return `
                    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                    </svg>
                `;
            }

            function renderViewIcon() {
                return `
                    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                    </svg>
                `;
            }

            function renderEditIcon() {
                return `
                    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 20h9"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"></path>
                    </svg>
                `;
            }

            function renderDebugIcon() {
                return `
                    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 3v2.25M14.25 3v2.25M8.25 8.25h7.5M6 7.5a2.25 2.25 0 012.25-2.25h7.5A2.25 2.25 0 0118 7.5v8.25A2.25 2.25 0 0115.75 18h-7.5A2.25 2.25 0 016 15.75V7.5z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h.008v.008H9V12zm3 0h.008v.008H12V12zm3 0h.008v.008H15V12z"></path>
                    </svg>
                `;
            }

            function openModal(modal) {
                modal?.classList.add('open');
                window.requestAnimationFrame(() => {
                    if (modal === segmentModal) {
                        initSegmentRuleSelects();
                    }
                    if (modal === messageModal) {
                        initMessageModalSelects();
                        onMessageThumbTypeChange();
                        onMessageTypeChange();
                        onMessageActionChange();
                    }
                });
            }

            function closeModal(modal) {
                if (modal === segmentModal) {
                    setSegmentModalBusyState(false);
                    hideSegmentModalStatus();
                    clearSegmentValidation();
                }
                if (modal === messageModal) {
                    setMessageModalBusyState(false);
                    hideMessageModalStatus();
                    clearMessageValidation();
                    showMessageEditorView();

                    if (messageDispatchProgressState.active) {
                        syncMessageDispatchNotifyPreference();
                        showStatus(
                            messageDispatchProgressState.notifyOnComplete
                                ? 'Notification dispatch is still running in background. We will notify you when it completes.'
                                : 'Notification dispatch is still running in background.',
                            'info'
                        );
                    }
                }
                modal?.classList.remove('open');
            }

            function askForConfirmation({
                title = 'Confirm Action',
                message = 'Are you sure you want to continue?',
                confirmLabel = 'Delete',
            } = {}) {
                if (!(confirmModal instanceof HTMLElement) || !(confirmOkButton instanceof HTMLButtonElement)) {
                    return Promise.resolve(window.confirm(message));
                }

                if (confirmModalTitle instanceof HTMLElement) {
                    confirmModalTitle.textContent = title;
                }

                if (confirmModalMessage instanceof HTMLElement) {
                    confirmModalMessage.textContent = message;
                }

                confirmOkButton.textContent = confirmLabel;
                openModal(confirmModal);

                return new Promise((resolve) => {
                    confirmResolver = resolve;
                });
            }

            function resolveConfirmation(confirmed) {
                if (typeof confirmResolver === 'function') {
                    confirmResolver(Boolean(confirmed));
                }

                confirmResolver = null;
                closeModal(confirmModal);
            }

            function select2BaseConfig(overrides = {}) {
                return {
                    width: '100%',
                    ...overrides,
                };
            }

            function cleanupSelect2Compat(select, config = {}) {
                const cleanConfig = { ...config };
                [
                    'dropdownCss',
                    'dropdownCssClass',
                    'adaptDropdownCssClass',
                    'containerCss',
                    'containerCssClass',
                    'adaptContainerCssClass',
                ].forEach((key) => {
                    delete cleanConfig[key];
                });

                if (select instanceof HTMLSelectElement) {
                    [
                        'dropdownCss',
                        'dropdownCssClass',
                        'adaptDropdownCssClass',
                        'containerCss',
                        'containerCssClass',
                        'adaptContainerCssClass',
                    ].forEach((key) => {
                        select.removeAttribute('data-' + key.replace(/[A-Z]/g, (match) => '-' + match.toLowerCase()));
                    });
                }

                return cleanConfig;
            }

            function refreshSelectEnhancement(select, config = {}) {
                if (!(select instanceof HTMLSelectElement) || !select2Enabled) {
                    return;
                }

                try {
                    const $select = window.jQuery(select);
                    if ($select.data('select2')) {
                        $select.select2('destroy');
                    }

                    [
                        'dropdownCss',
                        'dropdownCssClass',
                        'adaptDropdownCssClass',
                        'containerCss',
                        'containerCssClass',
                        'adaptContainerCssClass',
                    ].forEach((key) => $select.removeData(key));

                    $select.select2(select2BaseConfig(cleanupSelect2Compat(select, config)));
                } catch (error) {
                    if (window.console && typeof window.console.warn === 'function') {
                        window.console.warn('Notification manager select init failed.', error);
                    }
                }
            }

            function refreshSelects(root, config = {}) {
                if (!(root instanceof Element) && root !== document) {
                    return;
                }

                root.querySelectorAll('select').forEach((select) => {
                    const isMultiple = select.hasAttribute('multiple');
                    refreshSelectEnhancement(select, {
                        minimumResultsForSearch: isMultiple ? 0 : Infinity,
                        closeOnSelect: !isMultiple,
                        ...config,
                    });
                });
            }

            function initMessageModalSelects() {
                const dropdownParent = select2Enabled ? window.jQuery(messageModal) : null;

                refreshSelectEnhancement(messageTypeSelect, {
                    minimumResultsForSearch: Infinity,
                    dropdownParent,
                });
                refreshSelectEnhancement(messageThumbTypeSelect, {
                    minimumResultsForSearch: Infinity,
                    dropdownParent,
                });
                refreshSelectEnhancement(messageDeviceSelect, {
                    minimumResultsForSearch: Infinity,
                    dropdownParent,
                });
                refreshSelectEnhancement(messageActionSelect, {
                    minimumResultsForSearch: Infinity,
                    dropdownParent,
                });
                refreshSelectEnhancement(messageSegmentsSelect, {
                    closeOnSelect: false,
                    placeholder: 'Select notification segments',
                    dropdownParent,
                });

                if (select2Enabled && window.jQuery) {
                    window.jQuery(messageTypeSelect).off('.notif-modal').on('change.notif-modal select2:select.notif-modal', onMessageTypeChange);
                    window.jQuery(messageThumbTypeSelect).off('.notif-modal').on('change.notif-modal select2:select.notif-modal', onMessageThumbTypeChange);
                    window.jQuery(messageActionSelect).off('.notif-modal').on('change.notif-modal select2:select.notif-modal', onMessageActionChange);
                }
            }

            function initSegmentRuleSelects() {
                if (!(segmentRulesBox instanceof HTMLElement)) {
                    return;
                }

                segmentRulesBox.querySelectorAll('.rule-type, .rule-relation, .rule-value').forEach((field) => {
                    if (!(field instanceof HTMLSelectElement)) {
                        return;
                    }

                    if (select2Enabled) {
                        const $field = window.jQuery(field);
                        if ($field.data('select2')) {
                            $field.select2('destroy');
                        }
                    }
                });

                if (!select2Enabled || !window.jQuery) {
                    return;
                }

                const dropdownParent = segmentModal instanceof HTMLElement ? window.jQuery(segmentModal) : null;

                segmentRulesBox.querySelectorAll('.notif-rule-row').forEach((row) => {
                    const type = String(row.querySelector('.rule-type')?.value || '').trim();
                    const valueField = row.querySelector('.rule-value');

                    if (!(valueField instanceof HTMLSelectElement) || type !== 'package') {
                        return;
                    }

                    const currentValue = String(valueField.value || '').trim();

                    refreshSelectEnhancement(valueField, {
                        dropdownParent,
                        placeholder: 'Search packages',
                        minimumInputLength: 0,
                        ajax: {
                            delay: 250,
                            transport(params, success, failure) {
                                apiRequest(buildPackageOptionsUrl({
                                    search: params?.data?.term || '',
                                    page: params?.data?.page || 1,
                                    perPage: 10,
                                }), { method: 'GET' })
                                    .then(success)
                                    .catch(failure);

                                return { abort() {} };
                            },
                            processResults(data) {
                                const results = Array.isArray(data?.data) ? data.data : [];
                                cachePackageOptions(results);

                                return {
                                    results: results.map((option) => ({
                                        id: String(option?.value ?? '').trim(),
                                        text: String(option?.label ?? option?.value ?? '').trim(),
                                    })),
                                    pagination: {
                                        more: Boolean(data?.meta?.pagination?.more),
                                    },
                                };
                            },
                            cache: true,
                        },
                    });

                    if (currentValue !== '' && !packageOptionLabels.has(currentValue)) {
                        hydratePackageOptionLabels([currentValue]).then(() => {
                            const normalizedValue = String(currentValue).trim();
                            const label = optionLabelForRuleValue('package', normalizedValue);

                            if (!Array.from(valueField.options).some((option) => String(option.value).trim() === normalizedValue)) {
                                valueField.appendChild(new Option(label, normalizedValue, true, true));
                            }

                            window.jQuery(valueField).trigger('change.select2');
                        }).catch(() => null);
                    }
                });
            }

            async function fetchBearerToken(forceRefresh = false) {
                if (!forceRefresh && bearerToken) {
                    return bearerToken;
                }

                const response = await fetch(endpoints.token, {
                    method: 'GET',
                    credentials: 'same-origin',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': csrf,
                    },
                });

                const data = await response.json().catch(() => ({}));
                if (!response.ok || !data.token) {
                    throw new Error(data.message || 'Unable to fetch bearer token.');
                }

                bearerToken = String(data.token);
                return bearerToken;
            }

            async function apiRequest(url, options = {}, hasRetried = false) {
                const token = await fetchBearerToken(hasRetried);
                const response = await fetch(url, {
                    credentials: 'same-origin',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + token,
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': csrf,
                    },
                    ...options,
                });

                const data = await response.json().catch(() => ({}));
                if (!response.ok) {
                    if (response.status === 401 && !hasRetried) {
                        bearerToken = '';
                        return apiRequest(url, options, true);
                    }

                    const error = new Error(data.message || 'Request failed.');
                    error.status = response.status;
                    error.validationErrors = data.errors || null;
                    throw error;
                }

                return data;
            }

            async function apiFormRequest(url, formData, hasRetried = false) {
                const token = await fetchBearerToken(hasRetried);
                const response = await fetch(url, {
                    method: 'POST',
                    credentials: 'same-origin',
                    headers: {
                        'Accept': 'application/json',
                        'Authorization': 'Bearer ' + token,
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': csrf,
                    },
                    body: formData,
                });

                const data = await response.json().catch(() => ({}));
                if (!response.ok) {
                    if (response.status === 401 && !hasRetried) {
                        bearerToken = '';
                        return apiFormRequest(url, formData, true);
                    }

                    const error = new Error(data.message || 'Upload failed.');
                    error.status = response.status;
                    error.validationErrors = data.errors || null;
                    throw error;
                }

                return data;
            }

            function setActiveTab(tabName) {
                tabs.forEach((tab) => {
                    tab.classList.toggle('active', tab.dataset.tab === tabName);
                });

                Object.entries(sections).forEach(([name, section]) => {
                    section?.classList.toggle('active', name === tabName);
                });

                window.requestAnimationFrame(() => {
                    if (tabName === 'messages') {
                        refreshSelects(sections.messages || document);
                        if (messagesTable && typeof messagesTable.columns === 'function') {
                            messagesTable.columns.adjust().draw(false);
                        }
                    }
                    if (tabName === 'segments') {
                        refreshSelects(sections.segments || document);
                        if (segmentsTable && typeof segmentsTable.columns === 'function') {
                            segmentsTable.columns.adjust().draw(false);
                        }
                    }
                });
            }

            function selectedSegmentIds() {
                return Array.from(messageSegmentsSelect?.selectedOptions || [])
                    .map((option) => asId(option.value))
                    .filter((id) => id !== '');
            }

            function selectedMessageDeviceTypes() {
                const value = String(messageDeviceSelect?.value || '').trim().toLowerCase();
                return value ? [value] : [];
            }

            function selectedMessageDevice() {
                return String(messageDeviceSelect?.value || '').trim().toLowerCase();
            }

            function renderSegmentOptions() {
                if (!messageSegmentsSelect) {
                    return;
                }

                const selected = new Set(selectedSegmentIds());
                messageSegmentsSelect.innerHTML = segmentOptions.map((segment) => `
                    <option value="${escapeHtml(asId(segment.id))}">${escapeHtml(segment.title || 'Segment')}</option>
                `).join('');

                Array.from(messageSegmentsSelect.options).forEach((option) => {
                    option.selected = selected.has(asId(option.value));
                });

                initMessageModalSelects();
            }

            function relationOptionsForType(type) {
                const filter = filterMeta.find((item) => item.key === type);
                return Array.isArray(filter?.relations) ? filter.relations : ['is'];
            }

            function filterLabelForType(type) {
                const filter = filterMeta.find((item) => item.key === type);
                return String(filter?.label || type || '').trim();
            }

            function cachePackageOptions(options = []) {
                const packageFilter = filterMeta.find((item) => item.key === 'package');
                const mergedOptions = new Map(
                    (Array.isArray(packageFilter?.options) ? packageFilter.options : []).map((option) => {
                        const value = String(option?.value ?? '').trim();
                        const label = String(option?.label ?? option?.value ?? '').trim() || value;
                        return [value, { value, label }];
                    })
                );

                options.forEach((option) => {
                    const value = String(option?.value ?? '').trim();
                    if (value === '') {
                        return;
                    }

                    const label = String(option?.label ?? option?.value ?? '').trim() || value;
                    packageOptionLabels.set(value, label);
                    mergedOptions.set(value, { value, label });
                });

                if (packageFilter) {
                    packageFilter.options = Array.from(mergedOptions.values());
                }
            }

            function optionLabelForRuleValue(type, value) {
                const filter = filterMeta.find((item) => item.key === type);
                const normalizedValue = String(value ?? '').trim();
                const options = Array.isArray(filter?.options) ? filter.options : [];
                const match = options.find((option) => String(option?.value ?? '').trim() === normalizedValue);

                if (match?.label) {
                    return String(match.label).trim();
                }

                if (type === 'package' && packageOptionLabels.has(normalizedValue)) {
                    return String(packageOptionLabels.get(normalizedValue) || normalizedValue).trim();
                }

                return normalizedValue;
            }

            function relationLabel(relation) {
                const normalized = String(relation || '').trim().toLowerCase();

                return ({
                    is: 'Is',
                    '=': '=',
                    '>': '>',
                    '<': '<',
                    '>=': '>=',
                    '<=': '<=',
                    contains: 'Contains',
                })[normalized] || normalized.toUpperCase();
            }

            function valueInputHtml(type, value = '') {
                const filter = filterMeta.find((item) => item.key === type) || {};
                const inputType = filter.input || 'text';
                let options = Array.isArray(filter.options) ? [...filter.options] : [];

                if (inputType === 'select') {
                    if (type === 'package' && String(value).trim() !== '' && !options.some((option) => String(option?.value ?? '').trim() === String(value).trim())) {
                        options = [{
                            value: String(value).trim(),
                            label: optionLabelForRuleValue(type, value),
                        }].concat(options);
                    }

                    return `
                        <select class="notif-select rule-value">
                            <option value="">Select</option>
                            ${options.map((option) => `
                                <option value="${escapeHtml(option.value)}" ${String(option.value) === String(value) ? 'selected' : ''}>
                                    ${escapeHtml(option.label)}
                                </option>
                            `).join('')}
                        </select>
                    `;
                }

                if (inputType === 'number') {
                    return `<input class="notif-input rule-value" type="number" min="0" value="${escapeHtml(value)}" placeholder="Enter value">`;
                }

                if (type === 'email') {
                    return `<input class="notif-input rule-value" type="text" value="${escapeHtml(value)}" placeholder="Enter email">`;
                }

                if (type === 'contact_number') {
                    return `<input class="notif-input rule-value" type="text" value="${escapeHtml(value)}" placeholder="Enter contact number">`;
                }

                return `<input class="notif-input rule-value" type="text" value="${escapeHtml(value)}" placeholder="Enter value">`;
            }

            function buildPackageOptionsUrl({ search = '', page = 1, perPage = 10, selected = [] } = {}) {
                const params = new URLSearchParams();

                if (String(search).trim() !== '') {
                    params.set('search', String(search).trim());
                }

                params.set('page', String(Math.max(1, Number(page) || 1)));
                params.set('per_page', String(Math.max(1, Number(perPage) || 10)));

                (Array.isArray(selected) ? selected : []).forEach((value) => {
                    const normalizedValue = String(value ?? '').trim();
                    if (normalizedValue !== '') {
                        params.append('selected[]', normalizedValue);
                    }
                });

                const query = params.toString();
                return query === '' ? endpoints.packageOptions : `${endpoints.packageOptions}?${query}`;
            }

            async function hydratePackageOptionLabels(values = []) {
                const selected = Array.from(new Set((Array.isArray(values) ? values : [])
                    .map((value) => String(value ?? '').trim())
                    .filter((value) => value !== '' && !packageOptionLabels.has(value))));

                if (selected.length === 0) {
                    return;
                }

                const data = await apiRequest(buildPackageOptionsUrl({
                    selected,
                    perPage: Math.max(10, selected.length),
                }), { method: 'GET' });

                cachePackageOptions(Array.isArray(data.data) ? data.data : []);
            }

            function packageRuleValuesFromSegments(rows = []) {
                return (Array.isArray(rows) ? rows : []).flatMap((row) => (
                    Array.isArray(row?.rules)
                        ? row.rules
                            .filter((rule) => String(rule?.type || '').trim() === 'package')
                            .map((rule) => String(rule?.value || '').trim())
                        : []
                )).filter((value) => value !== '');
            }

            function buildRuleRow(rule = {}) {
                const typeOptions = filterMeta.map((item) => `
                    <option value="${escapeHtml(item.key)}" ${item.key === rule.type ? 'selected' : ''}>${escapeHtml(item.label)}</option>
                `).join('');

                const selectedType = rule.type || filterMeta[0]?.key || 'gender';
                const relationOptions = relationOptionsForType(selectedType)
                    .map((relation) => `<option value="${escapeHtml(relation)}" ${relation === rule.relation ? 'selected' : ''}>${escapeHtml(relationLabel(relation))}</option>`)
                    .join('');

                const wrapper = document.createElement('div');
                wrapper.className = 'notif-rule-row';
                wrapper.innerHTML = `
                    <select class="notif-select rule-type">${typeOptions}</select>
                    <select class="notif-select rule-relation">${relationOptions}</select>
                    <div class="rule-value-wrapper">${valueInputHtml(selectedType, rule.value || '')}</div>
                    <div class="notif-rule-actions">
                        <button type="button" class="notif-icon-btn rule-add">+</button>
                        <button type="button" class="notif-icon-btn rule-remove">-</button>
                    </div>
                `;

                return wrapper;
            }

            function isManagedThumbDataKey(key) {
                return ['image', 'largeImageUrl'].includes(String(key || '').trim());
            }

            function revokeMessageThumbPreviewObjectUrl() {
                if (messageThumbPreviewObjectUrl !== '') {
                    URL.revokeObjectURL(messageThumbPreviewObjectUrl);
                    messageThumbPreviewObjectUrl = '';
                }
            }

            function currentManagedThumbValue() {
                const thumbType = String(messageThumbTypeSelect?.value || 'browse').trim().toLowerCase();

                if (thumbType === 'url') {
                    return String(messageThumbUrlInput?.value || '').trim();
                }

                const selectedFile = messageThumbFileInput instanceof HTMLInputElement
                    ? (messageThumbFileInput.files?.[0] || null)
                    : null;

                if (selectedFile) {
                    return '';
                }

                return String(editingMessageThumb || '').trim();
            }

            function syncManagedThumbRows(value = '') {
                const managedValue = String(value || '').trim();

                Array.from(messageCustomDataBox?.querySelectorAll('.notif-key-value-row') || []).forEach((row) => {
                    const keyInput = row.querySelector('.custom-data-key');
                    const valueInput = row.querySelector('.custom-data-value');
                    const key = String(keyInput?.value || '').trim();

                    if (!isManagedThumbDataKey(key) || !(valueInput instanceof HTMLInputElement)) {
                        return;
                    }

                    valueInput.value = managedValue;
                    valueInput.placeholder = managedValue !== ''
                        ? 'Synced from selected thumb'
                        : 'Auto from selected thumb';
                });
            }

            function updateThumbPreview() {
                revokeMessageThumbPreviewObjectUrl();

                if (!(messageThumbPreview instanceof HTMLElement) || !(messageThumbPreviewImage instanceof HTMLImageElement)) {
                    return;
                }

                const thumbType = String(messageThumbTypeSelect?.value || 'browse').trim().toLowerCase();
                let previewUrl = '';
                let caption = 'Used for image and largeImageUrl.';

                if (thumbType === 'url') {
                    const typedUrl = String(messageThumbUrlInput?.value || '').trim();
                    if (isValidHttpUrl(typedUrl)) {
                        previewUrl = typedUrl;
                        caption = 'Preview from URL. image and largeImageUrl will use this URL.';
                    } else if (typedUrl !== '') {
                        caption = 'Enter a valid image URL to preview and sync.';
                    } else {
                        caption = 'Enter a thumb URL to preview and sync image fields.';
                    }
                } else {
                    const selectedFile = messageThumbFileInput instanceof HTMLInputElement
                        ? (messageThumbFileInput.files?.[0] || null)
                        : null;

                    if (selectedFile) {
                        messageThumbPreviewObjectUrl = URL.createObjectURL(selectedFile);
                        previewUrl = messageThumbPreviewObjectUrl;
                        caption = 'Preview from selected file. image and largeImageUrl will sync after upload.';
                    } else if (String(editingMessageThumb || '').trim() !== '') {
                        previewUrl = String(editingMessageThumb || '').trim();
                        caption = 'Current saved thumb. image and largeImageUrl are synced from this image.';
                    } else {
                        caption = 'Select an image file to preview and sync image fields.';
                    }
                }

                if (messageThumbPreviewCaption instanceof HTMLElement) {
                    messageThumbPreviewCaption.textContent = caption;
                }

                if (previewUrl !== '') {
                    messageThumbPreviewImage.src = previewUrl;
                    messageThumbPreview.classList.add('is-visible');
                    return;
                }

                messageThumbPreviewImage.removeAttribute('src');
                messageThumbPreview.classList.remove('is-visible');
            }

            function refreshManagedThumbState() {
                syncManagedThumbRows(currentManagedThumbValue());
                updateThumbPreview();
            }

            function ensureRuleRows() {
                if (segmentRulesBox && !segmentRulesBox.children.length) {
                    segmentRulesBox.appendChild(buildRuleRow());
                    initSegmentRuleSelects();
                }
            }

            function buildCustomDataRow(entry = {}) {
                const fixed = Boolean(entry?.fixed);
                const key = String(entry?.key || '').trim();
                const managedThumbValue = isManagedThumbDataKey(key);
                const wrapper = document.createElement('div');
                wrapper.className = 'notif-key-value-row';
                wrapper.innerHTML = `
                    <input class="notif-input custom-data-key" type="text" maxlength="255" placeholder="Key" value="${escapeHtml(entry?.key || '')}" ${fixed ? 'readonly data-fixed-key="1"' : ''}>
                    <input class="notif-input custom-data-value" type="text" maxlength="5000" placeholder="${managedThumbValue ? 'Auto from selected thumb' : 'Value'}" value="${escapeHtml(entry?.value || '')}" ${managedThumbValue ? 'readonly data-managed-thumb-value="1"' : ''}>
                    <div class="notif-rule-actions">
                        <button type="button" class="notif-icon-btn custom-data-add hidden-btn">+</button>
                        <button type="button" class="notif-icon-btn custom-data-remove ${fixed ? 'hidden-btn' : ''}">-</button>
                    </div>
                `;

                return wrapper;
            }

            function normalizeCustomDataRows(value) {
                if (Array.isArray(value)) {
                    return value.map((entry) => ({
                        key: String(entry?.key || '').trim(),
                        value: String(entry?.value || '').trim(),
                    })).filter((entry) => entry.key !== '' || entry.value !== '');
                }

                if (value && typeof value === 'object') {
                    return Object.entries(value).map(([key, entryValue]) => ({
                        key: String(key || '').trim(),
                        value: String(entryValue ?? '').trim(),
                    })).filter((entry) => entry.key !== '' || entry.value !== '');
                }

                return [];
            }

            function buildDefaultCustomDataRows(value) {
                const rows = normalizeCustomDataRows(value);
                const valueMap = new Map();

                rows.forEach((entry) => {
                    if (entry.key !== '') {
                        valueMap.set(entry.key, entry.value);
                    }
                });

                const orderedRows = defaultCustomDataKeys.map((key) => ({
                    key,
                    value: valueMap.has(key) ? valueMap.get(key) : '',
                    fixed: true,
                }));

                rows.forEach((entry) => {
                    if (entry.key === '' || defaultCustomDataKeys.includes(entry.key)) {
                        return;
                    }

                    orderedRows.push({
                        key: entry.key,
                        value: entry.value,
                        fixed: false,
                    });
                });

                return orderedRows;
            }

            function resetCustomDataRows(entries = []) {
                if (!(messageCustomDataBox instanceof HTMLElement)) {
                    return;
                }

                const rows = buildDefaultCustomDataRows(entries);
                messageCustomDataBox.innerHTML = '';

                (rows.length ? rows : buildDefaultCustomDataRows([])).forEach((entry) => {
                    messageCustomDataBox.appendChild(buildCustomDataRow(entry));
                });

                syncManagedThumbRows(currentManagedThumbValue());
            }

            function readCustomDataRows() {
                const entries = [];
                const seenKeys = new Set();

                Array.from(messageCustomDataBox?.querySelectorAll('.notif-key-value-row') || []).forEach((row) => {
                    const key = String(row.querySelector('.custom-data-key')?.value || '').trim();
                    const value = String(row.querySelector('.custom-data-value')?.value || '').trim();

                    if (key === '' && value === '') {
                        return;
                    }

                    if (key === '') {
                        throw new Error('Custom data key is required when a value is provided.');
                    }

                    if (seenKeys.has(key)) {
                        throw new Error('Custom data keys must be unique.');
                    }

                    seenKeys.add(key);
                    entries.push({ key, value });
                });

                return entries;
            }

            function buildSyncedCustomDataEntries(entries = [], thumbValue = '') {
                const normalizedThumb = String(thumbValue || '').trim();
                const preserved = new Map();
                const existingManaged = new Map();

                (Array.isArray(entries) ? entries : []).forEach((entry) => {
                    const key = String(entry?.key || '').trim();
                    const value = String(entry?.value || '').trim();

                    if (key === '' || value === '') {
                        return;
                    }

                    if (isManagedThumbDataKey(key)) {
                        existingManaged.set(key, value);
                        return;
                    }

                    preserved.set(key, value);
                });

                const syncedEntries = [];
                defaultCustomDataKeys.forEach((key) => {
                    if (isManagedThumbDataKey(key)) {
                        return;
                    }

                    if (preserved.has(key)) {
                        syncedEntries.push({ key, value: preserved.get(key) });
                        preserved.delete(key);
                    }
                });

                const managedValue = normalizedThumb !== '' ? normalizedThumb : '';
                if (managedValue !== '') {
                    syncedEntries.push({ key: 'image', value: managedValue });
                    syncedEntries.push({ key: 'largeImageUrl', value: managedValue });
                } else {
                    ['image', 'largeImageUrl'].forEach((key) => {
                        if (existingManaged.has(key)) {
                            syncedEntries.push({ key, value: existingManaged.get(key) });
                        }
                    });
                }

                preserved.forEach((value, key) => {
                    syncedEntries.push({ key, value });
                });

                return syncedEntries;
            }

            function readSegmentRules() {
                return Array.from(segmentRulesBox?.querySelectorAll('.notif-rule-row') || []).map((row) => ({
                    type: row.querySelector('.rule-type')?.value || '',
                    relation: row.querySelector('.rule-relation')?.value || '',
                    value: row.querySelector('.rule-value')?.value || '',
                })).filter((rule) => rule.type && rule.relation && String(rule.value).trim() !== '');
            }

            function hideSegmentModalStatus() {
                if (segmentModalHideTimer) {
                    window.clearTimeout(segmentModalHideTimer);
                    segmentModalHideTimer = null;
                }

            }

            function showSegmentModalStatus(message, type = 'error', autoHide = false) {
                if (!String(message || '').trim()) {
                    return;
                }

                if (segmentModalHideTimer) {
                    window.clearTimeout(segmentModalHideTimer);
                    segmentModalHideTimer = null;
                }

                notifyPushAction(message, type);

                if (autoHide) {
                    segmentModalHideTimer = window.setTimeout(() => {
                        hideSegmentModalStatus();
                    }, 5000);
                }
            }

            function setSegmentModalBusyState(isBusy) {
                if (!(saveSegmentButton instanceof HTMLButtonElement)) {
                    return;
                }

                if (!saveSegmentButton.dataset.originalLabel) {
                    saveSegmentButton.dataset.originalLabel = saveSegmentButton.textContent || 'Save Segment';
                }

                if (isBusy) {
                    saveSegmentButton.disabled = true;
                    saveSegmentButton.classList.add('notif-btn-loading');
                    saveSegmentButton.textContent = editingSegmentId !== '' ? 'Updating...' : 'Saving...';
                    return;
                }

                saveSegmentButton.disabled = false;
                saveSegmentButton.classList.remove('notif-btn-loading');
                saveSegmentButton.textContent = saveSegmentButton.dataset.originalLabel || 'Save Segment';
            }

            function setFieldError(field, errorNode, message = '') {
                const hasError = String(message || '').trim() !== '';

                if (field instanceof HTMLElement) {
                    field.classList.toggle('is-invalid', hasError);
                }

                if (errorNode instanceof HTMLElement) {
                    errorNode.textContent = String(message || '');
                    errorNode.classList.toggle('visible', hasError);
                }
            }

            function clearSegmentValidation() {
                setFieldError(segmentTitleInput, segmentTitleError, '');
                setFieldError(null, segmentRulesError, '');

                Array.from(segmentRulesBox?.querySelectorAll('.rule-type, .rule-relation, .rule-value') || []).forEach((field) => {
                    if (field instanceof HTMLElement) {
                        field.classList.remove('is-invalid');
                    }
                });
            }

            function applySegmentValidationErrors(errors = {}) {
                clearSegmentValidation();

                const titleMessage = Array.isArray(errors?.title) ? String(errors.title[0] || '') : '';
                const rulesMessage = Array.isArray(errors?.rules) ? String(errors.rules[0] || '') : '';

                if (titleMessage) {
                    setFieldError(segmentTitleInput, segmentTitleError, titleMessage);
                }

                if (rulesMessage) {
                    setFieldError(null, segmentRulesError, rulesMessage);
                }
            }

            function validateSegmentForm() {
                clearSegmentValidation();

                const payload = {
                    title: String(segmentTitleInput?.value || '').trim(),
                    description: String(segmentDescriptionInput?.value || '').trim(),
                    rules: [],
                };

                let firstInvalidField = null;
                let rulesMessage = '';
                const seenRules = new Set();

                Array.from(segmentRulesBox?.querySelectorAll('.notif-rule-row') || []).forEach((row) => {
                    const typeField = row.querySelector('.rule-type');
                    const relationField = row.querySelector('.rule-relation');
                    const valueField = row.querySelector('.rule-value');
                    const type = String(typeField?.value || '').trim();
                    const relation = String(relationField?.value || '').trim();
                    const value = String(valueField?.value || '').trim();
                    let rowHasError = false;

                    if (type === '') {
                        typeField?.classList.add('is-invalid');
                        rowHasError = true;
                        rulesMessage = rulesMessage || 'Select a valid rule type.';
                    }

                    if (relation === '') {
                        relationField?.classList.add('is-invalid');
                        rowHasError = true;
                        rulesMessage = rulesMessage || 'Select a valid rule relation.';
                    }

                    if (value === '') {
                        valueField?.classList.add('is-invalid');
                        rowHasError = true;
                        rulesMessage = rulesMessage || 'Rule value is required.';
                    }

                    if (!rowHasError) {
                        const duplicateKey = [type, relation, value.toLowerCase()].join('::');
                        if (seenRules.has(duplicateKey)) {
                            typeField?.classList.add('is-invalid');
                            relationField?.classList.add('is-invalid');
                            valueField?.classList.add('is-invalid');
                            rowHasError = true;
                            rulesMessage = rulesMessage || 'Duplicate rules are not allowed.';
                        } else {
                            seenRules.add(duplicateKey);
                            payload.rules.push({ type, relation, value });
                        }
                    }

                    if (rowHasError && !firstInvalidField) {
                        firstInvalidField = typeField || relationField || valueField;
                    }
                });

                if (payload.title === '') {
                    setFieldError(segmentTitleInput, segmentTitleError, 'Segment title is required.');
                    firstInvalidField = firstInvalidField || segmentTitleInput;
                }

                if (rulesMessage !== '') {
                    setFieldError(null, segmentRulesError, rulesMessage);
                } else if (payload.rules.length === 0) {
                    setFieldError(null, segmentRulesError, rulesMessage || 'Add at least one valid segment rule.');
                    firstInvalidField = firstInvalidField || segmentRulesBox?.querySelector('.rule-value, .rule-type, .rule-relation');
                }

                return {
                    isValid: payload.title !== '' && payload.rules.length > 0 && String(segmentRulesError?.textContent || '').trim() === '',
                    payload,
                    firstInvalidField,
                    message: String(segmentTitleError?.textContent || segmentRulesError?.textContent || '').trim(),
                };
            }

            function resetSegmentModal() {
                editingSegmentId = '';
                hideSegmentModalStatus();
                clearSegmentValidation();

                if (segmentTitleInput) {
                    segmentTitleInput.value = '';
                }
                if (segmentDescriptionInput) {
                    segmentDescriptionInput.value = '';
                }
                if (segmentRulesBox) {
                    segmentRulesBox.innerHTML = '';
                }
                if (segmentModalTitle instanceof HTMLElement) {
                    segmentModalTitle.textContent = 'Create Segment';
                }
                setButtonLabel(saveSegmentButton, 'Save Segment');
                ensureRuleRows();
            }

            function populateSegmentModal(row = {}) {
                editingSegmentId = asId(row?.id);
                hideSegmentModalStatus();
                clearSegmentValidation();

                if (segmentTitleInput instanceof HTMLInputElement) {
                    segmentTitleInput.value = String(row?.title || '');
                }
                if (segmentDescriptionInput instanceof HTMLTextAreaElement) {
                    segmentDescriptionInput.value = String(row?.description || '');
                }
                if (segmentRulesBox instanceof HTMLElement) {
                    segmentRulesBox.innerHTML = '';
                    const rules = Array.isArray(row?.rules) && row.rules.length ? row.rules : [{}];
                    rules.forEach((rule) => {
                        segmentRulesBox.appendChild(buildRuleRow(rule));
                    });
                }
                if (segmentModalTitle instanceof HTMLElement) {
                    segmentModalTitle.textContent = 'Edit Segment';
                }
                setButtonLabel(saveSegmentButton, 'Update Segment');
                initSegmentRuleSelects();
            }

            function resetMessageModal() {
                setMessageModalBusyState(false);
                hideMessageModalStatus();
                clearMessageValidation();
                stopMessageDispatchProgressPolling();
                messageDispatchProgressState.active = false;
                messageDispatchProgressState.messageId = '';
                messageDispatchProgressState.pollRequest = null;
                messageDispatchProgressState.completing = false;
                messageDispatchProgressState.awaitingDispatch = false;
                messageDispatchProgressState.pendingStageLabel = '';
                messageDispatchProgressState.pendingCopy = '';
                messageDispatchProgressState.payload = null;
                messageDispatchProgressState.notifyOnComplete = loadBooleanPreference(messageDispatchNotifyPreferenceKey, true);
                setMessageDispatchEditorLocked(false);
                showMessageEditorView();
                editingMessageId = '';
                editingMessageThumb = '';
                revokeMessageThumbPreviewObjectUrl();
                if (messageTitleInput) {
                    messageTitleInput.value = '';
                }
                if (messageDescriptionInput) {
                    messageDescriptionInput.value = '';
                }
                if (messageTypeSelect) {
                    messageTypeSelect.value = 'custom';
                }
                if (messageThumbTypeSelect) {
                    messageThumbTypeSelect.value = 'browse';
                }
                if (messageDeviceSelect) {
                    messageDeviceSelect.value = 'all';
                }
                if (messageContentIdInput) {
                    messageContentIdInput.value = '';
                }
                if (messageThumbFileInput) {
                    messageThumbFileInput.value = '';
                }
                if (messageThumbUrlInput) {
                    messageThumbUrlInput.value = '';
                }
                if (messageActionSelect) {
                    messageActionSelect.value = 'now';
                }
                if (messageScheduleTimeInput) {
                    messageScheduleTimeInput.value = '';
                }
                if (messageAndroidChannelInput) {
                    messageAndroidChannelInput.value = '';
                }
                if (messageProgressNotifyCheckbox instanceof HTMLInputElement) {
                    messageProgressNotifyCheckbox.checked = messageDispatchProgressState.notifyOnComplete;
                }
                Array.from(messageSegmentsSelect?.options || []).forEach((option) => {
                    option.selected = false;
                });
                resetCustomDataRows();
                if (messageModalTitle instanceof HTMLElement) {
                    messageModalTitle.textContent = 'Create Campaign Compose';
                }
                setButtonLabel(saveMessageButton, 'Save Content');
                if (sendMessageButton instanceof HTMLElement) {
                    setButtonLabel(sendMessageButton, 'Send Notification');
                    sendMessageButton.classList.add('hidden');
                }
                onMessageThumbTypeChange();
                onMessageTypeChange();
                onMessageActionChange();
                initMessageModalSelects();
                refreshManagedThumbState();
            }

            function setMessageSegmentSelection(segmentIds = []) {
                const selectedIds = new Set((Array.isArray(segmentIds) ? segmentIds : [])
                    .map((id) => asId(id))
                    .filter((id) => id !== ''));

                Array.from(messageSegmentsSelect?.options || []).forEach((option) => {
                    option.selected = selectedIds.has(asId(option.value));
                });

                initMessageModalSelects();
            }

            function toDateTimeLocal(value) {
                if (!value) {
                    return '';
                }

                const date = new Date(value);
                if (Number.isNaN(date.getTime())) {
                    return '';
                }

                const pad = (part) => String(part).padStart(2, '0');

                return [
                    date.getFullYear(),
                    pad(date.getMonth() + 1),
                    pad(date.getDate()),
                ].join('-') + 'T' + [pad(date.getHours()), pad(date.getMinutes())].join(':');
            }

            function populateMessageModal(row = {}) {
                editingMessageId = asId(row?.id);
                editingMessageThumb = String(row?.thumb || '').trim();

                document.getElementById('message-title').value = String(row?.title || '');
                document.getElementById('message-description').value = String(row?.description || '');

                if (messageTypeSelect) {
                    messageTypeSelect.value = 'custom';
                }
                if (messageThumbTypeSelect) {
                    messageThumbTypeSelect.value = String(row?.thumb_type || 'browse').toLowerCase() === 'url' ? 'url' : 'browse';
                }
                if (messageDeviceSelect) {
                    const deviceValue = String(
                        row?.device || (Array.isArray(row?.device_types) && row.device_types.length ? row.device_types[0] : 'all')
                    ).trim().toLowerCase();
                    messageDeviceSelect.value = deviceValue || 'all';
                }
                if (messageContentIdInput) {
                    messageContentIdInput.value = String(row?.content_id || '');
                }
                if (messageThumbFileInput instanceof HTMLInputElement) {
                    messageThumbFileInput.value = '';
                }
                if (messageThumbUrlInput instanceof HTMLInputElement) {
                    messageThumbUrlInput.value = String(messageThumbTypeSelect?.value || 'browse') === 'url'
                        ? String(row?.thumb || '')
                        : '';
                }
                if (messageActionSelect) {
                    messageActionSelect.value = String(row?.action || 'now').trim().toLowerCase() === 'schedule' ? 'schedule' : 'now';
                }
                if (messageScheduleTimeInput instanceof HTMLInputElement) {
                    messageScheduleTimeInput.value = toDateTimeLocal(row?.schedule_time || '');
                }
                if (messageAndroidChannelInput instanceof HTMLInputElement) {
                    messageAndroidChannelInput.value = String(row?.android_notification_channel || row?.meta?.android_notification_channel || '');
                }

                const segmentIds = Array.isArray(row?.filters?.segment_ids) && row.filters.segment_ids.length
                    ? row.filters.segment_ids
                    : (Array.isArray(row?.segments) ? row.segments.map((segment) => asId(segment?.id)) : []);

                setMessageSegmentSelection(segmentIds);
                resetCustomDataRows(row?.custom_data || row?.data_payload || []);

                if (messageModalTitle instanceof HTMLElement) {
                    messageModalTitle.textContent = 'Edit Campaign Compose';
                }
                showMessageEditorView();
                setButtonLabel(saveMessageButton, 'Update Content');
                if (sendMessageButton instanceof HTMLElement) {
                    setButtonLabel(sendMessageButton, 'Send Notification');
                    sendMessageButton.classList.remove('hidden');
                }

                onMessageThumbTypeChange();
                onMessageTypeChange();
                onMessageActionChange();
                refreshManagedThumbState();

                const isDispatchLocked = messageDispatchProgressState.active
                    && idEquals(editingMessageId, messageDispatchProgressState.messageId);

                if (saveMessageButton instanceof HTMLButtonElement) {
                    saveMessageButton.disabled = isDispatchLocked;
                }

                if (sendMessageButton instanceof HTMLButtonElement) {
                    sendMessageButton.disabled = isDispatchLocked;
                }
            }

            function dataTableProcessingMarkup(label) {
                return `<span class="sms-dt-processing-pill">${escapeHtml(label || 'Loading records...')}</span>`;
            }

            function configureDataTableProcessing(tableElement, instance, label) {
                if (!(tableElement instanceof HTMLTableElement) || !instance || !window.jQuery) {
                    return instance;
                }

                const $table = window.jQuery(tableElement);
                const $wrapper = $table.closest('.dataTables_wrapper');

                if (!$wrapper.length) {
                    return instance;
                }

                const updateProcessingMarkup = (nextLabel) => {
                    const $processing = $wrapper.find('.dataTables_processing');

                    if (!$processing.length) {
                        return;
                    }

                    $processing.html(dataTableProcessingMarkup(nextLabel || label));
                };

                $wrapper.addClass('sms-dt-wrapper');
                updateProcessingMarkup(label);

                $table.off('.pushLoader');
                $table.on('processing.dt.pushLoader', function (_event, _settings, processing) {
                    updateProcessingMarkup(label);
                    $wrapper.toggleClass('sms-dt-processing', Boolean(processing));
                    $wrapper.find('.dataTables_processing').toggleClass('processing-visible', Boolean(processing));
                });

                return instance;
            }

            function setDataTableLoading(instance, isLoading, label) {
                if (!instance || !window.jQuery || typeof instance.table !== 'function') {
                    return;
                }

                const $table = window.jQuery(instance.table().node());
                const $wrapper = $table.closest('.dataTables_wrapper');

                if (!$wrapper.length) {
                    return;
                }

                const $processing = $wrapper.find('.dataTables_processing');

                if ($processing.length) {
                    $processing.html(dataTableProcessingMarkup(label));
                    $processing.toggleClass('processing-visible', Boolean(isLoading));
                }

                $wrapper.toggleClass('sms-dt-processing', Boolean(isLoading));
            }

            function dataTableLanguage(emptyLabel, processingLabel = 'Loading records...') {
                return {
                    processing: dataTableProcessingMarkup(processingLabel),
                    emptyTable: emptyLabel,
                    zeroRecords: 'No matching records found',
                    info: 'Showing _START_ to _END_ of _TOTAL_ entries',
                    infoEmpty: 'Showing 0 to 0 of 0 entries',
                    lengthMenu: 'Show _MENU_ entries',
                    search: '',
                    searchPlaceholder: 'Search records...',
                    paginate: {
                        previous: 'Previous',
                        next: 'Next',
                    },
                };
            }

            function ensureSegmentsTable() {
                if (!dataTableEnabled || !(segmentsTableElement instanceof HTMLTableElement)) {
                    return null;
                }

                if (segmentsTable) {
                    return segmentsTable;
                }

                segmentsTable = window.jQuery(segmentsTableElement).DataTable({
                    data: segmentRows,
                    autoWidth: false,
                    processing: true,
                    pageLength: 10,
                    lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                    order: [[0, 'desc']],
                    columns: [
                        {
                            data: 'id',
                            name: 'id',
                            render(data, type) {
                                const value = asId(data);
                                return type === 'display' ? escapeHtml(value || '-') : value;
                            },
                        },
                        {
                            data: 'title',
                            name: 'title',
                            render(data, type, row) {
                                const title = String(data || '-');
                                const description = String(row?.description || '');
                                if (type === 'display') {
                                    return `
                                        <div class="notif-message-title">
                                            <strong>${escapeHtml(title)}</strong>
                                            <span class="notif-muted">${escapeHtml(description || '-')}</span>
                                        </div>
                                    `;
                                }

                                return tableSearchText([title, description]);
                            },
                        },
                        {
                            data: 'description',
                            name: 'description',
                            render(data, type) {
                                const description = String(data || '-');
                                return type === 'display' ? escapeHtml(description) : description;
                            },
                        },
                        {
                            data: null,
                            name: 'rules',
                            orderable: false,
                            render(data, type, row) {
                                const rules = Array.isArray(row?.rules) ? row.rules : [];
                                const label = `View ${Number(row?.rule_count || rules.length || 0)} rule(s)`;
                                if (type === 'display') {
                                    return `<button type="button" class="notif-plain-link view-rules-btn" data-id="${escapeHtml(asId(row?.id))}">${escapeHtml(label)}</button>`;
                                }

                                return tableSearchText([
                                    label,
                                    ...rules.map((rule) => `${filterLabelForType(rule.type)} ${relationLabel(rule.relation)} ${optionLabelForRuleValue(rule.type, rule.value)}`),
                                ]);
                            },
                        },
                        {
                            data: 'created_at',
                            name: 'created_at',
                            render(data, type) {
                                if (type === 'display') {
                                    return formatTableDate(data);
                                }

                                const timestamp = new Date(data || '').getTime();
                                return Number.isNaN(timestamp) ? 0 : timestamp;
                            },
                        },
                        {
                            data: null,
                            name: 'actions',
                            orderable: false,
                            searchable: false,
                            render(data, type, row) {
                                if (type !== 'display') {
                                    return '';
                                }

                                return `
                                    <div class="action-buttons">
                                        <button type="button" class="action-button view view-rules-btn" title="View Rules" data-id="${escapeHtml(asId(row?.id))}">
                                            ${renderViewIcon()}
                                        </button>
                                        <button type="button" class="action-button view edit-segment-btn" title="Edit Segment" data-id="${escapeHtml(asId(row?.id))}">
                                            ${renderEditIcon()}
                                        </button>
                                        <button type="button" class="action-button delete delete-segment-btn" title="Delete Segment" data-id="${escapeHtml(asId(row?.id))}">
                                            ${renderDeleteIcon()}
                                        </button>
                                    </div>
                                `;
                            },
                        },
                    ],
                    language: dataTableLanguage('No notification segments found', 'Loading notification segments...'),
                });

                configureDataTableProcessing(segmentsTableElement, segmentsTable, 'Loading notification segments...');

                return segmentsTable;
            }

            function ensureMessagesTable() {
                if (!dataTableEnabled || !(messagesTableElement instanceof HTMLTableElement)) {
                    return null;
                }

                if (messagesTable) {
                    return messagesTable;
                }

                messagesTable = window.jQuery(messagesTableElement).DataTable({
                    data: messageRows,
                    autoWidth: false,
                    processing: true,
                    pageLength: 10,
                    lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                    order: [[0, 'desc']],
                    columns: [
                        {
                            data: 'id',
                            name: 'id',
                            render(data, type) {
                                const value = asId(data);
                                return type === 'display' ? escapeHtml(value || '-') : value;
                            },
                        },
                        {
                            data: 'title',
                            name: 'title',
                            render(data, type, row) {
                                const title = String(data || '-');
                                const description = String(row?.description || '');
                                if (type === 'display') {
                                    return `
                                        <div class="notif-message-title">
                                            <strong>${escapeHtml(title)}</strong>
                                            <span class="notif-muted">${escapeHtml(description || '-')}</span>
                                        </div>
                                    `;
                                }

                                return tableSearchText([title, description]);
                            },
                        },
                        {
                            data: 'segments',
                            name: 'segments',
                            orderable: false,
                            render(data, type) {
                                const segments = Array.isArray(data) ? data : [];
                                if (type === 'display') {
                                    return renderPillStack(
                                        segments.map((segment) => segment?.title || 'Segment'),
                                        'segment'
                                    );
                                }

                                return tableSearchText(segments.map((segment) => segment?.title || ''));
                            },
                        },
                        {
                            data: null,
                            name: 'devices',
                            orderable: false,
                            render(data, type, row) {
                                const devices = (Array.isArray(row?.device_types) && row.device_types.length
                                    ? row.device_types
                                    : (row?.device ? [row.device] : [])
                                ).map((device) => String(device || '').toUpperCase()).filter(Boolean);

                                if (type === 'display') {
                                    return renderPillStack(devices, 'device');
                                }

                                return tableSearchText(devices);
                            },
                        },
                        {
                            data: 'type',
                            name: 'type',
                            render(data, type) {
                                const value = normalizeMessageTypeLabel(data);
                                return type === 'display' ? renderPill(value, 'muted') : value;
                            },
                        },
                        {
                            data: 'action',
                            name: 'action',
                            render(data, type) {
                                const value = String(data || '-').toUpperCase();
                                return type === 'display' ? escapeHtml(value) : value;
                            },
                        },
                        {
                            data: 'created_at',
                            name: 'created_at',
                            render(data, type) {
                                if (type === 'display') {
                                    return formatTableDate(data);
                                }

                                const timestamp = new Date(data || '').getTime();
                                return Number.isNaN(timestamp) ? 0 : timestamp;
                            },
                        },
                        {
                            data: null,
                            name: 'actions',
                            orderable: false,
                            searchable: false,
                            render(data, type, row) {
                                if (type !== 'display') {
                                    return '';
                                }

                                return `
                                    <div class="action-buttons">
                                        <button type="button" class="action-button view edit-message-btn" title="View or Edit Compose" data-id="${escapeHtml(asId(row?.id))}">
                                            ${renderViewIcon()}
                                        </button>
                                        <button type="button" class="action-button debug debug-message-btn" title="Delivery Debug" data-id="${escapeHtml(asId(row?.id))}">
                                            ${renderDebugIcon()}
                                        </button>
                                        <button type="button" class="action-button delete delete-message-btn" title="Delete Compose" data-id="${escapeHtml(asId(row?.id))}">
                                            ${renderDeleteIcon()}
                                        </button>
                                    </div>
                                `;
                            },
                        },
                    ],
                    language: dataTableLanguage('No notification content found', 'Loading notification content...'),
                });

                configureDataTableProcessing(messagesTableElement, messagesTable, 'Loading notification content...');

                return messagesTable;
            }

            function renderSegmentsFallback() {
                if (!(segmentsTableBody instanceof HTMLElement)) {
                    return;
                }

                if (!segmentRows.length) {
                    segmentsTableBody.innerHTML = '<tr class="notif-table-empty"><td colspan="6">No notification segments found.</td></tr>';
                    return;
                }

                segmentsTableBody.innerHTML = segmentRows.map((row) => `
                    <tr>
                        <td>${escapeHtml(asId(row.id) || '-')}</td>
                        <td>${escapeHtml(row.title || '-')}</td>
                        <td>${escapeHtml(row.description || '-')}</td>
                        <td><button type="button" class="notif-plain-link view-rules-btn" data-id="${escapeHtml(asId(row.id))}">View ${Number(row.rule_count || 0)} rule(s)</button></td>
                        <td>${formatTableDate(row.created_at)}</td>
                        <td>
                            <div class="action-buttons">
                                <button type="button" class="action-button view view-rules-btn" title="View Rules" data-id="${escapeHtml(asId(row.id))}">${renderViewIcon()}</button>
                                <button type="button" class="action-button view edit-segment-btn" title="Edit Segment" data-id="${escapeHtml(asId(row.id))}">${renderEditIcon()}</button>
                                <button type="button" class="action-button delete delete-segment-btn" title="Delete Segment" data-id="${escapeHtml(asId(row.id))}">${renderDeleteIcon()}</button>
                            </div>
                        </td>
                    </tr>
                `).join('');
            }

            function renderMessagesFallback() {
                if (!(messagesTableBody instanceof HTMLElement)) {
                    return;
                }

                if (!messageRows.length) {
                    messagesTableBody.innerHTML = '<tr class="notif-table-empty"><td colspan="8">No notification content found.</td></tr>';
                    return;
                }

                messagesTableBody.innerHTML = messageRows.map((row) => {
                    const devices = (Array.isArray(row.device_types) && row.device_types.length ? row.device_types : (row.device ? [row.device] : []))
                        .map((device) => String(device || '').toUpperCase())
                        .filter(Boolean);

                    return `
                        <tr>
                            <td>${escapeHtml(asId(row.id) || '-')}</td>
                            <td>
                                <div class="notif-message-title">
                                    <strong>${escapeHtml(row.title || '-')}</strong>
                                    <span class="notif-muted">${escapeHtml(row.description || '-')}</span>
                                </div>
                            </td>
                            <td>${renderPillStack((row.segments || []).map((segment) => segment?.title || 'Segment'), 'segment')}</td>
                            <td>${renderPillStack(devices, 'device')}</td>
                            <td>${renderPill(normalizeMessageTypeLabel(row.type), 'muted')}</td>
                            <td>${escapeHtml(String(row.action || '-').toUpperCase())}</td>
                            <td>${formatTableDate(row.created_at)}</td>
                            <td>
                                <div class="action-buttons">
                                    <button type="button" class="action-button view edit-message-btn" title="View or Edit Compose" data-id="${escapeHtml(asId(row.id))}">${renderViewIcon()}</button>
                                    <button type="button" class="action-button debug debug-message-btn" title="Delivery Debug" data-id="${escapeHtml(asId(row.id))}">${renderDebugIcon()}</button>
                                    <button type="button" class="action-button delete delete-message-btn" title="Delete Compose" data-id="${escapeHtml(asId(row.id))}">${renderDeleteIcon()}</button>
                                </div>
                            </td>
                        </tr>
                    `;
                }).join('');
            }

            function renderSegments() {
                const table = ensureSegmentsTable();
                if (table) {
                    table.clear();
                    table.rows.add(segmentRows);
                    table.draw(false);
                    return;
                }

                renderSegmentsFallback();
            }

            function renderMessages() {
                const table = ensureMessagesTable();
                if (table) {
                    table.clear();
                    table.rows.add(messageRows);
                    table.draw(false);
                    return;
                }

                renderMessagesFallback();
            }

            function openSegmentDetailModal(row) {
                if (!(segmentDetailTbody instanceof HTMLElement)) {
                    return;
                }

                const rules = Array.isArray(row?.rules) ? row.rules : [];
                const title = String(row?.title || '').trim();
                const description = String(row?.description || '').trim();
                const metaParts = [title];
                if (description) {
                    metaParts.push(description);
                }

                if (segmentDetailCaption instanceof HTMLElement) {
                    segmentDetailCaption.textContent = metaParts.filter(Boolean).join(' | ');
                }

                if (!rules.length) {
                    segmentDetailTbody.innerHTML = '<tr class="notif-table-empty"><td colspan="4">No rules found.</td></tr>';
                    openModal(segmentDetailModal);
                    return;
                }

                segmentDetailTbody.innerHTML = rules.map((rule, index) => `
                    <tr>
                        <td>${index + 1}</td>
                        <td>${escapeHtml(filterLabelForType(rule.type))}</td>
                        <td>${escapeHtml(relationLabel(rule.relation))}</td>
                        <td>${escapeHtml(optionLabelForRuleValue(rule.type, rule.value))}</td>
                    </tr>
                `).join('');

                openModal(segmentDetailModal);
            }

            async function openMessageDebug(id) {
                hideStatus();

                if (!(messageDebugTbody instanceof HTMLElement)) {
                    return;
                }

                try {
                    const response = await apiRequest(endpoints.messageDeliveryDebug(id), { method: 'GET' });
                    const debugData = response?.data || {};
                    const content = debugData?.content || {};
                    const payloadSource = debugData?.payload_source || {};
                    const campaign = debugData?.campaign || {};
                    const recipients = Array.isArray(debugData?.recipients) ? debugData.recipients : [];
                    const dispatchMessage = String(debugData?.dispatch_status_message || '').trim();
                    const captionParts = [
                        String(content?.title || '').trim(),
                        dispatchMessage,
                    ].filter(Boolean);
                    const recipientCounts = recipients.reduce((counts, recipient) => {
                        const status = String(recipient?.status || '').trim().toLowerCase();

                        if (status === 'sent') {
                            counts.sent += 1;
                        } else if (status === 'invalid') {
                            counts.invalid += 1;
                        } else if (status === 'failed') {
                            counts.failed += 1;
                        } else if (status === 'processing') {
                            counts.processing += 1;
                        } else if (status === 'queued' || status === 'pending') {
                            counts.pending += 1;
                        }

                        return counts;
                    }, {
                        sent: 0,
                        failed: 0,
                        invalid: 0,
                        pending: 0,
                        processing: 0,
                    });
                    const totalCount = normalizeCount(campaign?.total_count ?? content?.total_count ?? recipients.length, recipients.length);
                    const sentCount = normalizeCount(campaign?.sent_count ?? content?.sent_count ?? recipientCounts.sent, recipientCounts.sent);
                    const failedCount = normalizeCount(campaign?.failed_count ?? content?.failed_count ?? recipientCounts.failed, recipientCounts.failed);
                    const invalidCount = normalizeCount(campaign?.invalid_count ?? content?.invalid_count ?? recipientCounts.invalid, recipientCounts.invalid);
                    const pendingCount = normalizeCount(campaign?.pending_count ?? recipientCounts.pending, recipientCounts.pending);
                    const processingCount = normalizeCount(campaign?.processing_count ?? content?.processing_count ?? recipientCounts.processing, recipientCounts.processing);
                    const campaignStatus = String(campaign?.status || content?.campaign_status || 'saved').trim().toUpperCase() || 'SAVED';
                    const lastError = fallbackText(campaign?.last_error || content?.last_error, 'None');
                    const payloadSummaryEntries = [
                        { label: 'Description', value: payloadSource?.description || content?.description || '-' },
                        { label: 'Delivery Type', value: deliveryTypeLabel(payloadSource?.action || content?.action || campaign?.send_mode) },
                        { label: 'Total Recipients', value: String(totalCount) },
                        { label: 'Thumbnail Type', value: thumbTypeLabel(payloadSource?.thumb_type || content?.thumb_type) },
                        { label: 'Thumbnail Attached', value: yesNoLabel(payloadSource?.thumb || content?.thumb) },
                        { label: 'Android Channel', value: fallbackText(payloadSource?.android_notification_channel || content?.android_notification_channel, 'Not specified') },
                        { label: 'Created At', value: formatDebugDate(payloadSource?.created_at || content?.created_at || campaign?.created_at) },
                        { label: 'Last Updated', value: formatDebugDate(payloadSource?.updated_at || content?.updated_at || campaign?.updated_at) },
                    ];
                    const deliverySummaryEntries = [
                        { label: 'Campaign Status', value: campaignStatus },
                        { label: 'Send Mode', value: deliveryTypeLabel(campaign?.send_mode || payloadSource?.action || content?.action) },
                        { label: 'Total Recipients', value: String(totalCount) },
                        { label: 'Successfully Sent', value: String(sentCount) },
                        { label: 'Failed', value: String(failedCount) },
                        { label: 'Invalid Tokens', value: String(invalidCount) },
                        { label: 'Pending', value: String(pendingCount) },
                        { label: 'Processing', value: String(processingCount) },
                        { label: 'Started At', value: formatDebugDate(campaign?.started_at, true) },
                        { label: 'Completed At', value: formatDebugDate(campaign?.completed_at, true) },
                        { label: 'Duration', value: formatHumanDuration(campaign?.elapsed_seconds, campaign?.started_at, campaign?.completed_at) },
                        { label: 'Last Error', value: lastError },
                    ];

                    messageDebugModal?.querySelectorAll('.notif-debug-raw').forEach((details) => {
                        details.removeAttribute('open');
                    });

                    if (messageDebugCaption instanceof HTMLElement) {
                        messageDebugCaption.textContent = captionParts.join(' | ');
                    }

                    if (messageDebugSummary instanceof HTMLElement) {
                        const summaryCards = [
                            {
                                label: 'Campaign status',
                                value: campaignStatus,
                            },
                            {
                                label: 'Recipients',
                                value: String(totalCount),
                            },
                            {
                                label: 'Successfully sent',
                                value: String(sentCount),
                            },
                            {
                                label: 'Failed',
                                value: String(failedCount),
                            },
                        ];

                        messageDebugSummary.innerHTML = summaryCards.map((item) => `
                            <div class="notif-debug-card">
                                <div class="notif-debug-label">${escapeHtml(item.label)}</div>
                                <div class="notif-debug-value">${escapeHtml(item.value || '-')}</div>
                            </div>
                        `).join('');
                    }

                    if (messageDebugPayloadSummary instanceof HTMLElement) {
                        messageDebugPayloadSummary.innerHTML = renderDebugKeyValueRows(payloadSummaryEntries);
                    }

                    if (messageDebugPayloadSource instanceof HTMLElement) {
                        messageDebugPayloadSource.textContent = prettyJson(payloadSource);
                    }

                    if (messageDebugCampaignSummary instanceof HTMLElement) {
                        messageDebugCampaignSummary.innerHTML = renderDebugKeyValueRows(deliverySummaryEntries);
                    }

                    if (messageDebugCampaignProgress instanceof HTMLElement) {
                        messageDebugCampaignProgress.innerHTML = renderDebugProgressRows([
                            { label: 'Delivered', count: sentCount, variant: 'sent' },
                            { label: 'Failed', count: failedCount, variant: 'failed' },
                            { label: 'Invalid', count: invalidCount, variant: 'invalid' },
                        ], totalCount);
                    }

                    if (messageDebugCampaign instanceof HTMLElement) {
                        messageDebugCampaign.textContent = prettyJson(campaign || {});
                    }

                    if (!recipients.length) {
                        messageDebugTbody.innerHTML = '<tr class="notif-table-empty"><td colspan="7">No recipient delivery records found for this compose yet.</td></tr>';
                        openModal(messageDebugModal);
                        return;
                    }

                    messageDebugTbody.innerHTML = recipients.map((recipient, index) => `
                        <tr>
                            <td>${index + 1}</td>
                            <td>${escapeHtml(String(recipient?.sms_cust_id || '-'))}</td>
                            <td>${escapeHtml(String(recipient?.device_type || '-').toUpperCase())}<br><span class="notif-muted">${escapeHtml(String(recipient?.platform || '-'))}</span></td>
                            <td>${renderPill(String(recipient?.status || '-').toUpperCase(), String(recipient?.status || '').toLowerCase() === 'sent' ? 'success' : (String(recipient?.status || '').toLowerCase() === 'invalid' ? 'warning' : 'danger'))}</td>
                            <td>${escapeHtml(String(recipient?.push_token_preview || '-'))}</td>
                            <td>${escapeHtml(String(recipient?.error_message || '-'))}</td>
                            <td>
                                <details class="notif-recipient-details">
                                    <summary>Inspect JSON</summary>
                                    <div class="notif-muted" style="margin-bottom: 8px;">Device ID: ${escapeHtml(String(recipient?.customer_device_id || '-'))}</div>
                                    <div class="notif-muted" style="margin-bottom: 8px;">Provider Message ID: ${escapeHtml(String(recipient?.provider_message_id || '-'))}</div>
                                    <div class="notif-debug-panel" style="margin-bottom: 10px;">
                                        <div class="notif-debug-panel-head">Firebase payload</div>
                                        <div class="notif-debug-panel-body">
                                            <pre class="notif-json">${escapeHtml(prettyJson(recipient?.payload_preview || {}))}</pre>
                                        </div>
                                    </div>
                                    <div class="notif-debug-panel">
                                        <div class="notif-debug-panel-head">Provider response</div>
                                        <div class="notif-debug-panel-body">
                                            <pre class="notif-json">${escapeHtml(prettyJson(recipient?.provider_response || {}))}</pre>
                                        </div>
                                    </div>
                                </details>
                            </td>
                        </tr>
                    `).join('');

                    openModal(messageDebugModal);
                } catch (error) {
                    showStatus(error.message || 'Unable to load delivery debug details.', 'error');
                }
            }

            async function loadFilters() {
                const data = await apiRequest(endpoints.filters, { method: 'GET' });
                filterMeta = Array.isArray(data.data?.segment_filters) ? data.data.segment_filters : [];
                const packageFilter = filterMeta.find((item) => item.key === 'package');
                cachePackageOptions(Array.isArray(packageFilter?.options) ? packageFilter.options : []);
                resetSegmentModal();
            }

            async function loadSegmentOptions() {
                const data = await apiRequest(endpoints.segmentOptions, { method: 'GET' });
                segmentOptions = Array.isArray(data.data) ? data.data : [];
                renderSegmentOptions();
            }

            async function loadSegments() {
                if (segmentLoadPromise) {
                    return segmentLoadPromise;
                }

                const table = ensureSegmentsTable();
                const request = (async () => {
                    if (table) {
                        setDataTableLoading(table, true, 'Loading notification segments...');
                    }

                    try {
                        const data = await apiRequest(endpoints.segments + '?limit=100', { method: 'GET' });
                        segmentRows = Array.isArray(data.data) ? data.data : [];
                        await hydratePackageOptionLabels(packageRuleValuesFromSegments(segmentRows));
                        renderSegments();
                    } finally {
                        if (table || segmentsTable) {
                            setDataTableLoading(segmentsTable || table, false, 'Loading notification segments...');
                        }
                    }
                })();

                segmentLoadPromise = request;

                try {
                    return await request;
                } finally {
                    if (segmentLoadPromise === request) {
                        segmentLoadPromise = null;
                    }
                }
            }

            async function loadMessages() {
                if (messageLoadPromise) {
                    return messageLoadPromise;
                }

                const table = ensureMessagesTable();
                const request = (async () => {
                    if (table) {
                        setDataTableLoading(table, true, 'Loading notification content...');
                    }

                    try {
                        const data = await apiRequest(endpoints.messages + '?limit=100', { method: 'GET' });
                        messageRows = Array.isArray(data.data) ? data.data : [];
                        renderMessages();
                    } finally {
                        if (table || messagesTable) {
                            setDataTableLoading(messagesTable || table, false, 'Loading notification content...');
                        }
                    }
                })();

                messageLoadPromise = request;

                try {
                    return await request;
                } finally {
                    if (messageLoadPromise === request) {
                        messageLoadPromise = null;
                    }
                }
            }

            async function uploadMessageThumbIfNeeded() {
                const thumbType = String(messageThumbTypeSelect?.value || 'browse').trim().toLowerCase();
                if (thumbType === 'url') {
                    return String(messageThumbUrlInput?.value || '').trim();
                }

                const file = messageThumbFileInput instanceof HTMLInputElement
                    ? messageThumbFileInput.files?.[0] || null
                    : null;

                if (!file) {
                    return editingMessageThumb;
                }

                const formData = new FormData();
                formData.append('file', file);

                const data = await apiFormRequest(endpoints.thumbUpload, formData);
                return String(data.data?.url || '').trim();
            }

            async function openMessageEditor(id) {
                hideStatus();

                try {
                    if (messageDispatchProgressState.active && !idEquals(id, messageDispatchProgressState.messageId)) {
                        showStatus('A notification is still processing. Reopen the active compose after it completes.', 'warning');
                        return;
                    }

                    const data = await apiRequest(endpoints.message(id), { method: 'GET' });

                    if (!messageDispatchProgressState.active) {
                        resetMessageModal();
                    }

                    populateMessageModal(data.data || {});
                    if (messageDispatchProgressState.active && idEquals(id, messageDispatchProgressState.messageId)) {
                        showMessageProgressView();
                        renderMessageDispatchProgress();
                    }
                    openModal(messageModal);
                } catch (error) {
                    showStatus(error.message || 'Unable to load notification content.', 'error');
                }
            }

            async function saveSegment() {
                hideStatus();
                hideSegmentModalStatus();
                setSegmentModalBusyState(true);

                try {
                    const validation = validateSegmentForm();
                    if (!validation.isValid) {
                        showSegmentModalStatus(validation.message || 'Please fix the highlighted segment fields.', 'error');
                        validation.firstInvalidField?.focus?.();
                        return;
                    }

                    const isEditing = editingSegmentId !== '';
                    const response = await apiRequest(isEditing ? endpoints.segment(editingSegmentId) : endpoints.segments, {
                        method: isEditing ? 'PUT' : 'POST',
                        body: JSON.stringify(validation.payload),
                    });

                    await Promise.all([loadSegments(), loadSegmentOptions()]);
                    window.setTimeout(() => {
                        closeModal(segmentModal);
                        resetSegmentModal();
                        showStatus(
                            response?.message || (isEditing ? 'Notification segment updated successfully.' : 'Notification segment created successfully.'),
                            'success'
                        );
                    }, 900);
                } catch (error) {
                    applySegmentValidationErrors(error?.validationErrors || {});
                    showSegmentModalStatus(error.message || 'Unable to save segment.', 'error');
                } finally {
                    setSegmentModalBusyState(false);
                }
            }

            async function saveMessage(sendAfterSave = false) {
                hideStatus();
                hideMessageModalStatus();

                if (sendAfterSave instanceof Event) {
                    sendAfterSave = false;
                }

                const shouldDispatch = sendAfterSave === true;
                const isScheduleDispatch = shouldDispatch && String(messageActionSelect?.value || 'now') === 'schedule';
                const shouldTrackDispatchProgress = shouldDispatch && !isScheduleDispatch;
                setMessageModalBusyState(true, shouldDispatch ? (isScheduleDispatch ? 'schedule' : 'send') : 'save');

                try {
                    const validation = validateMessageForm();
                    if (!validation.isValid || !validation.payload) {
                        showMessageModalStatus(validation.message || 'Please fix the highlighted content fields.', 'error');
                        validation.firstInvalidField?.focus?.();
                        return;
                    }

                    const payload = validation.payload;
                    payload.thumb = await uploadMessageThumbIfNeeded();
                    payload.custom_data = buildSyncedCustomDataEntries(payload.custom_data, payload.thumb);
                    syncManagedThumbRows(payload.thumb);

                    const isEditing = editingMessageId !== '';
                    const response = await apiRequest(isEditing ? endpoints.message(editingMessageId) : endpoints.messages, {
                        method: isEditing ? 'PUT' : 'POST',
                        body: JSON.stringify(payload),
                    });

                    const messageId = asId(response?.data?.id || editingMessageId);

                    if (shouldDispatch && messageId !== '') {
                        if (shouldTrackDispatchProgress) {
                            startMessageDispatchProgress(
                                messageId,
                                'Preparing notification...',
                                'We are processing recipients in batches. This may take a few minutes.'
                            );
                        }

                        const dispatchResponse = await apiRequest(endpoints.messageDispatch(messageId), {
                            method: 'POST',
                        });

                        if (shouldTrackDispatchProgress) {
                            messageDispatchProgressState.awaitingDispatch = false;
                            await pollMessageDispatchProgress();
                        } else {
                            closeModal(messageModal);
                            resetMessageModal();
                            showStatus(dispatchResponse?.message || (isScheduleDispatch ? 'Notification scheduled successfully.' : 'Notification sent successfully.'), 'success');
                            await loadMessages();
                        }
                        return;
                    }

                    closeModal(messageModal);
                    resetMessageModal();
                    showStatus(
                        response?.message || (isEditing
                            ? 'Notification content updated successfully.'
                            : 'Notification content saved successfully.'),
                        'success'
                    );
                    await loadMessages();
                } catch (error) {
                    if (shouldTrackDispatchProgress && messageDispatchProgressState.active) {
                        messageDispatchProgressState.awaitingDispatch = false;
                        messageDispatchProgressState.active = false;
                        stopMessageDispatchProgressPolling();
                        setMessageDispatchEditorLocked(false);
                        messageDispatchProgressState.payload = {
                            status: 'failed',
                            stage_label: 'Notification failed',
                            dispatch_status_message: error.message || 'Unable to send notification.',
                            issues: [],
                            total_count: 0,
                            processed_count: 0,
                            progress_percent: 0,
                            elapsed_seconds: 0,
                        };
                        showMessageProgressView();
                        renderMessageDispatchProgress();
                        openModal(messageModal);
                    }
                    applyMessageValidationErrors(error?.validationErrors || {});
                    showMessageModalStatus(error.message || 'Unable to save notification content.', 'error');
                } finally {
                    setMessageModalBusyState(false);
                }
            }

            async function deleteSegment(id) {
                const confirmed = await askForConfirmation({
                    title: 'Delete Segment',
                    message: 'Are you sure you want to delete this notification segment? This action cannot be undone.',
                    confirmLabel: 'Delete Segment',
                });

                if (!confirmed) {
                    return;
                }

                try {
                    await apiRequest(`${endpoints.segments}/${id}`, { method: 'DELETE' });
                    showStatus('Notification segment deleted successfully.', 'success');
                    await Promise.all([loadSegments(), loadSegmentOptions()]);
                } catch (error) {
                    showStatus(error.message || 'Unable to delete segment.', 'error');
                }
            }

            async function deleteMessage(id) {
                const confirmed = await askForConfirmation({
                    title: 'Delete Campaign Compose',
                    message: 'Are you sure you want to delete this campaign compose content? This action cannot be undone.',
                    confirmLabel: 'Delete Compose',
                });

                if (!confirmed) {
                    return;
                }

                try {
                    await apiRequest(`${endpoints.messages}/${id}`, { method: 'DELETE' });
                    showStatus('Notification content deleted successfully.', 'success');
                    await loadMessages();
                } catch (error) {
                    showStatus(error.message || 'Unable to delete content.', 'error');
                }
            }

            function onMessageActionChange() {
                const isSchedule = String(messageActionSelect?.value || 'now') === 'schedule';
                messageScheduleWrapper?.classList.toggle('hidden', !isSchedule);
                if (!isSchedule) {
                    setFieldError(messageScheduleTimeInput, messageScheduleError, '');
                }
            }

            function onMessageThumbTypeChange() {
                const thumbType = String(messageThumbTypeSelect?.value || 'browse').trim().toLowerCase();
                const isUrl = thumbType === 'url';

                if (messageThumbFileWrapper instanceof HTMLElement) {
                    messageThumbFileWrapper.classList.toggle('hidden', isUrl);
                }
                if (messageThumbUrlWrapper instanceof HTMLElement) {
                    messageThumbUrlWrapper.classList.toggle('hidden', !isUrl);
                }
                if (messageThumbFileInput instanceof HTMLInputElement && isUrl) {
                    messageThumbFileInput.value = '';
                }
                if (messageThumbUrlInput instanceof HTMLInputElement && !isUrl) {
                    messageThumbUrlInput.value = '';
                }

                if (!isUrl) {
                    setFieldError(messageThumbUrlInput, messageThumbUrlError, '');
                }

                refreshManagedThumbState();
            }

            function onMessageTypeChange() {
                if (messageContentWrapper instanceof HTMLElement) {
                    messageContentWrapper.classList.add('hidden');
                }

                if (messageContentLabel) {
                    messageContentLabel.textContent = 'Select Content';
                }

                if (messageContentIdInput instanceof HTMLInputElement) {
                    messageContentIdInput.placeholder = 'Enter content ID';
                }
            }

            tabs.forEach((tab) => {
                tab.addEventListener('click', () => setActiveTab(tab.dataset.tab || 'messages'));
            });

            document.getElementById('create-segment-btn')?.addEventListener('click', () => {
                resetSegmentModal();
                openModal(segmentModal);
            });

            document.getElementById('create-message-btn')?.addEventListener('click', () => {
                if (messageDispatchProgressState.active) {
                    showStatus('Wait for the active notification dispatch to complete before creating another compose.', 'warning');
                    return;
                }

                resetMessageModal();
                openModal(messageModal);
            });

            document.getElementById('add-rule-btn')?.addEventListener('click', () => {
                segmentRulesBox?.appendChild(buildRuleRow());
                initSegmentRuleSelects();
            });

            document.getElementById('add-custom-data-btn')?.addEventListener('click', () => {
                messageCustomDataBox?.appendChild(buildCustomDataRow({ fixed: false }));
            });

            confirmOkButton?.addEventListener('click', () => {
                resolveConfirmation(true);
            });

            document.getElementById('save-segment-btn')?.addEventListener('click', saveSegment);
            document.getElementById('save-message-btn')?.addEventListener('click', () => saveMessage(false));
            document.getElementById('send-message-btn')?.addEventListener('click', () => saveMessage(true));
            messageDebugCopyPayloadButton?.addEventListener('click', async () => {
                const payloadText = String(messageDebugPayloadSource?.textContent || '').trim();
                if (payloadText === '') {
                    showStatus('No campaign payload is available to copy yet.', 'warning');
                    return;
                }

                try {
                    await copyTextToClipboard(payloadText);
                    showStatus('Campaign payload copied successfully.', 'success');
                } catch (error) {
                    showStatus('Unable to copy campaign payload.', 'error');
                }
            });
            messageDebugCopySummaryButton?.addEventListener('click', async () => {
                const summaryText = String(messageDebugCampaign?.textContent || '').trim();
                if (summaryText === '') {
                    showStatus('No campaign summary is available to copy yet.', 'warning');
                    return;
                }

                try {
                    await copyTextToClipboard(summaryText);
                    showStatus('Campaign summary copied successfully.', 'success');
                } catch (error) {
                    showStatus('Unable to copy campaign summary.', 'error');
                }
            });
            messageProgressNotifyCheckbox?.addEventListener('change', () => {
                syncMessageDispatchNotifyPreference();
                if (messageDispatchProgressState.notifyOnComplete) {
                    void ensureBrowserNotificationPermission();
                }
            });
            messageProgressBackButton?.addEventListener('click', () => {
                messageProgressPanel?.classList.add('hidden');
            });
            messageTypeSelect?.addEventListener('change', onMessageTypeChange);
            messageThumbTypeSelect?.addEventListener('change', onMessageThumbTypeChange);
            messageActionSelect?.addEventListener('change', onMessageActionChange);
            messageTitleInput?.addEventListener('input', () => {
                setFieldError(messageTitleInput, messageTitleError, '');
                if (messageModalStatus instanceof HTMLElement && messageModalStatus.classList.contains('error')) {
                    hideMessageModalStatus();
                }
            });
            messageDescriptionInput?.addEventListener('input', () => {
                setFieldError(messageDescriptionInput, messageDescriptionError, '');
                if (messageModalStatus instanceof HTMLElement && messageModalStatus.classList.contains('error')) {
                    hideMessageModalStatus();
                }
            });
            messageThumbUrlInput?.addEventListener('input', () => {
                setFieldError(messageThumbUrlInput, messageThumbUrlError, '');
                refreshManagedThumbState();
                if (messageModalStatus instanceof HTMLElement && messageModalStatus.classList.contains('error')) {
                    hideMessageModalStatus();
                }
            });
            messageThumbFileInput?.addEventListener('change', () => {
                refreshManagedThumbState();
                if (messageModalStatus instanceof HTMLElement && messageModalStatus.classList.contains('error')) {
                    hideMessageModalStatus();
                }
            });
            messageDeviceSelect?.addEventListener('change', () => {
                setFieldError(messageDeviceSelect, messageDeviceError, '');
                if (messageModalStatus instanceof HTMLElement && messageModalStatus.classList.contains('error')) {
                    hideMessageModalStatus();
                }
            });
            messageTypeSelect?.addEventListener('change', () => {
                setFieldError(messageTypeSelect, messageTypeError, '');
                if (messageModalStatus instanceof HTMLElement && messageModalStatus.classList.contains('error')) {
                    hideMessageModalStatus();
                }
            });
            messageThumbTypeSelect?.addEventListener('change', () => {
                setFieldError(messageThumbUrlInput, messageThumbUrlError, '');
                refreshManagedThumbState();
                if (messageModalStatus instanceof HTMLElement && messageModalStatus.classList.contains('error')) {
                    hideMessageModalStatus();
                }
            });
            messageActionSelect?.addEventListener('change', () => {
                setFieldError(messageActionSelect, messageActionError, '');
                if (messageModalStatus instanceof HTMLElement && messageModalStatus.classList.contains('error')) {
                    hideMessageModalStatus();
                }
            });
            messageScheduleTimeInput?.addEventListener('input', () => {
                setFieldError(messageScheduleTimeInput, messageScheduleError, '');
                if (messageModalStatus instanceof HTMLElement && messageModalStatus.classList.contains('error')) {
                    hideMessageModalStatus();
                }
            });
            segmentTitleInput?.addEventListener('input', () => {
                setFieldError(segmentTitleInput, segmentTitleError, '');
                if (segmentModalStatus instanceof HTMLElement && segmentModalStatus.classList.contains('error')) {
                    hideSegmentModalStatus();
                }
            });

            segmentRulesBox?.addEventListener('click', (event) => {
                const target = event.target instanceof HTMLElement ? event.target : null;
                if (!target) {
                    return;
                }

                const row = target.closest('.notif-rule-row');
                if (!row) {
                    return;
                }

                if (target.classList.contains('rule-add')) {
                    segmentRulesBox.appendChild(buildRuleRow());
                    initSegmentRuleSelects();
                }

                if (target.classList.contains('rule-remove')) {
                    if (segmentRulesBox.children.length > 1) {
                        row.remove();
                    }
                }
            });

            segmentRulesBox?.addEventListener('change', (event) => {
                const target = event.target instanceof HTMLElement ? event.target : null;
                if (!target) {
                    return;
                }

                if (target.classList.contains('rule-type') || target.classList.contains('rule-relation') || target.classList.contains('rule-value')) {
                    target.classList.remove('is-invalid');
                    setFieldError(null, segmentRulesError, '');
                    if (segmentModalStatus instanceof HTMLElement && segmentModalStatus.classList.contains('error')) {
                        hideSegmentModalStatus();
                    }
                }

                if (!target.classList.contains('rule-type')) {
                    return;
                }

                const row = target.closest('.notif-rule-row');
                if (!row) {
                    return;
                }

                const type = target.value;
                const relationSelect = row.querySelector('.rule-relation');
                const valueWrapper = row.querySelector('.rule-value-wrapper');
                if (!(relationSelect instanceof HTMLSelectElement) || !(valueWrapper instanceof HTMLElement)) {
                    return;
                }

                relationSelect.innerHTML = relationOptionsForType(type)
                    .map((relation) => `<option value="${escapeHtml(relation)}">${escapeHtml(relationLabel(relation))}</option>`)
                    .join('');
                valueWrapper.innerHTML = valueInputHtml(type);
                initSegmentRuleSelects();
            });

            segmentRulesBox?.addEventListener('input', (event) => {
                const target = event.target instanceof HTMLElement ? event.target : null;
                if (!target || !target.classList.contains('rule-value')) {
                    return;
                }

                target.classList.remove('is-invalid');
                setFieldError(null, segmentRulesError, '');
                if (segmentModalStatus instanceof HTMLElement && segmentModalStatus.classList.contains('error')) {
                    hideSegmentModalStatus();
                }
            });

            messageCustomDataBox?.addEventListener('click', (event) => {
                const target = event.target instanceof HTMLElement ? event.target.closest('button') : null;
                if (!target) {
                    return;
                }

                const row = target.closest('.notif-key-value-row');
                if (!row) {
                    return;
                }

                if (target.classList.contains('custom-data-add')) {
                    messageCustomDataBox.appendChild(buildCustomDataRow({ fixed: false }));
                }

                if (target.classList.contains('custom-data-remove')) {
                    if (messageCustomDataBox.children.length > 1) {
                        row.remove();
                        return;
                    }

                    row.querySelector('.custom-data-key').value = '';
                    row.querySelector('.custom-data-value').value = '';
                }
            });

            messageSegmentsSelect?.addEventListener('change', () => {
                setFieldError(messageSegmentsSelect, messageSegmentsError, '');
                if (messageModalStatus instanceof HTMLElement && messageModalStatus.classList.contains('error')) {
                    hideMessageModalStatus();
                }
            });

            segmentsTableElement?.addEventListener('click', (event) => {
                const target = event.target instanceof Element ? event.target : null;
                if (!target) {
                    return;
                }

                const actionButton = target.closest('.view-rules-btn, .edit-segment-btn, .delete-segment-btn');
                if (!(actionButton instanceof Element)) {
                    return;
                }

                if (actionButton.classList.contains('delete-segment-btn')) {
                    deleteSegment(asId(actionButton.dataset.id)).catch(() => null);
                }

                if (actionButton.classList.contains('edit-segment-btn')) {
                    const row = segmentRows.find((item) => idEquals(item.id, actionButton.dataset.id));
                    if (!row) {
                        return;
                    }

                    populateSegmentModal(row);
                    openModal(segmentModal);
                    return;
                }

                if (actionButton.classList.contains('view-rules-btn')) {
                    const row = segmentRows.find((item) => idEquals(item.id, actionButton.dataset.id));
                    if (!row) {
                        return;
                    }

                    openSegmentDetailModal(row);
                }
            });

            messagesTableElement?.addEventListener('click', (event) => {
                const target = event.target instanceof Element ? event.target : null;
                if (!target) {
                    return;
                }

                const actionButton = target.closest('.edit-message-btn, .debug-message-btn, .delete-message-btn');
                if (actionButton instanceof Element) {
                    if (actionButton.classList.contains('edit-message-btn')) {
                        if (messageDispatchProgressState.active && !idEquals(actionButton.dataset.id, messageDispatchProgressState.messageId)) {
                            showStatus('A notification is still processing. Reopen the active compose after it completes.', 'warning');
                            return;
                        }

                        openMessageEditor(asId(actionButton.dataset.id)).catch(() => null);
                        return;
                    }

                    if (actionButton.classList.contains('debug-message-btn')) {
                        openMessageDebug(asId(actionButton.dataset.id)).catch(() => null);
                        return;
                    }

                    if (messageDispatchProgressState.active) {
                        showStatus('Wait for the active notification dispatch to complete before deleting a compose.', 'warning');
                        return;
                    }

                    deleteMessage(asId(actionButton.dataset.id)).catch(() => null);
                }
            });

            document.querySelectorAll('[data-close]').forEach((button) => {
                button.addEventListener('click', () => {
                    const targetId = button.getAttribute('data-close');
                    if (!targetId) {
                        return;
                    }

                    if (targetId === 'confirm-modal') {
                        resolveConfirmation(false);
                        return;
                    }

                    closeModal(document.getElementById(targetId));
                });
            });

            window.addEventListener('keydown', (event) => {
                if (event.key !== 'Escape') {
                    return;
                }

                closeModal(segmentModal);
                closeModal(messageModal);
                closeModal(segmentDetailModal);
                closeModal(messageDebugModal);
                resolveConfirmation(false);
            });

            document.querySelectorAll('.notif-modal').forEach((modal) => {
                modal.addEventListener('click', (event) => {
                    if (event.target === modal) {
                        if (modal === confirmModal) {
                            resolveConfirmation(false);
                            return;
                        }

                        closeModal(modal);
                    }
                });
            });

            (async () => {
                try {
                    hideStatus();
                    messageDispatchProgressState.notifyOnComplete = loadBooleanPreference(messageDispatchNotifyPreferenceKey, true);
                    if (messageProgressNotifyCheckbox instanceof HTMLInputElement) {
                        messageProgressNotifyCheckbox.checked = messageDispatchProgressState.notifyOnComplete;
                    }
                    if (dataTableEnabled) {
                        ensureSegmentsTable();
                        ensureMessagesTable();
                    }
                    await loadFilters();
                    await Promise.all([
                        loadSegmentOptions(),
                        loadSegments(),
                        loadMessages(),
                    ]);
                    onMessageThumbTypeChange();
                    onMessageTypeChange();
                    onMessageActionChange();
                    initMessageModalSelects();
                    initSegmentRuleSelects();
                } catch (error) {
                    showStatus(error.message || 'Unable to load notification module.', 'error');
                }
            })();
        })();
    </script>
    @endpush
</x-filament-panels::page>