@php
    $aiChurnDateRangeOptions = [
        'today' => 'Today',
        '7_days' => 'Last 7 days',
        'mtd' => 'This Month',
        '30_days' => 'Last 30 days',
        'quarterly' => 'Last 3 months',
        'half_yearly' => 'Last 6 months',
        'last_year' => 'Last Year',
        'ytd' => 'Current Year',
    ];
@endphp

<x-filament-panels::page>
<div id="filter-loader" class="full-page-loader" style="display: none;">
    <div class="loader-content">
        <div class="spinner"></div>
        <p class="text-gray-700 font-medium">Loading AI Churn data...</p>
    </div>
</div>
<section class="flex flex-col gap-y-8 py-8">
<div class="dashboard-content-wrapper">
<div class="light-container">

    <div class="page-topbar">
        <div class="page-headline">
            <h1 class="page-title">AI Churn Management</h1>
            <p class="billing-subtitle">Predict churn risk, monitor model insights, and run retention campaigns</p>
            <div class="snapshot-meta" style="display:none;">
                <span class="snapshot-time" id="ai-churn-snapshot-time">Snapshot: --</span>
                <span class="snapshot-badge" id="ai-churn-snapshot-badge" style="display:none;">STALE</span>
            </div>
        </div>
    </div>

    <div class="filters-horizontal">
        <div class="filter-section">
            <label class="filter-label">Date Range:</label>
            <select class="input filter-input" id="ai-churn-date-range-filter">
                @foreach($aiChurnDateRangeOptions as $value => $label)
                    <option value="{{ $value }}">{{ $label }}</option>
                @endforeach
            </select>
        </div>

        <div class="filter-section package-filter-section">
            <label class="filter-label">Package:</label>
            <select class="input filter-input package-filter-input" id="ai-churn-package-filter">
                <option value="all">All Packages</option>
            </select>
        </div>

        <div class="filter-section package-mode-filter-section">
            <label class="filter-label">Package Mode:</label>
            <select class="input filter-input" id="ai-churn-package-mode-filter">
                <option value="all">All Mode</option>
            </select>
        </div>

        <div class="filter-section auto-renew-filter-section">
            <label class="filter-label">Is renewal:</label>
            <select class="input filter-input" id="ai-churn-auto-renew-filter">
                @foreach (\App\Helpers\AutoRenewHelper::filterOptions(true) as $autoRenewValue => $autoRenewLabel)
                    <option value="{{ $autoRenewValue }}">{{ $autoRenewLabel }}</option>
                @endforeach
            </select>
        </div>

        <div class="filter-section filter-buttons">
            <label class="filter-label" style="visibility:hidden;">Actions</label>
            <div class="filter-actions">
                <button type="button" class="btn-filter btn-search" id="ai-churn-search-btn">Search</button>
                <button type="button" class="btn-filter btn-reset" id="ai-churn-reset-btn">Reset</button>
            </div>
        </div>
    </div>
    <div id="ai-churn-page-status" class="ai-churn-page-status" style="display:none;"></div>

    {{-- ── Overview KPI Cards ─────────────────────────────────── --}}
    <div class="kpis-grid ajax-section-loading" id="ai-churn-section-kpi-cards">
        <div class="kpi-card kpi-card--registrations">
            <div class="kpi-title">Overall Risk Score <span class="info-icon" title="Average churn probability across all subscribers">ⓘ</span></div>
            <div class="kpi-value"><span id="ai-churn-kpi-avg-probability">--</span>%</div>
            <div class="kpi-foot delta-positive">Stable vs last run</div>
        </div>
        <div class="kpi-card kpi-card--churn-rate">
            <div class="kpi-title">High Risk Predictions <span class="info-icon" title="Count of users with > 80% churn probability">ⓘ</span></div>
            <div class="kpi-value" id="ai-churn-kpi-high-risk-count">--</div>
            <div class="kpi-foot">Actionable targets remaining</div>
        </div>
        <div class="kpi-card kpi-card--returning-conversions">
            <div class="kpi-title">Primary Risk Factor <span class="info-icon" title="Most common SHAP feature contributing to churn">ⓘ</span></div>
            <div class="kpi-value kpi-text" id="ai-churn-kpi-primary-factor">--</div>
            <div class="kpi-foot">Dominant ML factor</div>
        </div>
        <div class="kpi-card kpi-card--conversion-rate">
            <div class="kpi-title">Model Accuracy <span class="info-icon" title="AUC-ROC Score on current model registry">ⓘ</span></div>
            <div class="kpi-value"><span id="ai-churn-kpi-model-accuracy">--</span>%</div>
            <div class="kpi-foot">Latest active validation</div>
        </div>
    </div>

    {{-- ── Model Registry Panel ────────────────────────────────── --}}
    <div class="panel-card ajax-section-loading" id="ai-churn-section-model-registry" style="margin-bottom: 16px; display:none;">
        <div class="panel-header">
            <span class="panel-title">AI Model Performance Registry <span class="info-icon" title="Detailed metrics from the latest active training run">ⓘ</span></span>
        </div>
        <div class="panel-body">
            <div style="display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px;">
                <div style="text-align: center; border-right: 1px solid #f3f4f6;">
                    <div style="font-size: 11px; color: #6b7280; font-weight: 600; text-transform: uppercase;">Accuracy</div>
                    <div style="font-size: 1.1rem; font-weight: 700; color: #111827; margin-top: 4px;" id="ai-churn-model-accuracy-stat">--</div>
                </div>
                <div style="text-align: center; border-right: 1px solid #f3f4f6;">
                    <div style="font-size: 11px; color: #6b7280; font-weight: 600; text-transform: uppercase;">Precision</div>
                    <div style="font-size: 1.1rem; font-weight: 700; color: #111827; margin-top: 4px;" id="ai-churn-model-precision-stat">--</div>
                </div>
                <div style="text-align: center; border-right: 1px solid #f3f4f6;">
                    <div style="font-size: 11px; color: #6b7280; font-weight: 600; text-transform: uppercase;">Recall</div>
                    <div style="font-size: 1.1rem; font-weight: 700; color: #111827; margin-top: 4px;" id="ai-churn-model-recall-stat">--</div>
                </div>
                <div style="text-align: center; border-right: 1px solid #f3f4f6;">
                    <div style="font-size: 11px; color: #6b7280; font-weight: 600; text-transform: uppercase;">F1 Score</div>
                    <div style="font-size: 1.1rem; font-weight: 700; color: #111827; margin-top: 4px;" id="ai-churn-model-f1-stat">--</div>
                </div>
                <div style="text-align: center; border-right: 1px solid #f3f4f6;">
                    <div style="font-size: 11px; color: #6b7280; font-weight: 600; text-transform: uppercase;">AUC-ROC</div>
                    <div style="font-size: 1.1rem; font-weight: 700; color: #111827; margin-top: 4px;" id="ai-churn-model-auc-stat">--</div>
                </div>
                <div style="text-align: center; border-right: 1px solid #f3f4f6;">
                    <div style="font-size: 11px; color: #6b7280; font-weight: 600; text-transform: uppercase;">Version</div>
                    <div style="font-size: 1.1rem; font-weight: 700; color: #111827; margin-top: 4px;" id="ai-churn-model-version-stat">--</div>
                </div>
                <div style="text-align: center;">
                    <div style="font-size: 11px; color: #6b7280; font-weight: 600; text-transform: uppercase;">Model Type</div>
                    <div style="margin-top: 6px;">
                        <span class="model-badge model-badge-global" id="ai-churn-model-type-badge">Global Model</span>
                    </div>
                </div>
            </div>
            <div style="display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px dashed #e5e7eb;">
                <div style="text-align: center;">
                    <div style="font-size: 10px; color: #9ca3af; font-weight: 500;">Training Samples</div>
                    <div style="font-size: 0.95rem; font-weight: 600; color: #4b5563; margin-top: 2px;" id="ai-churn-model-training-samples">--</div>
                </div>
                <div style="text-align: center;">
                    <div style="font-size: 10px; color: #9ca3af; font-weight: 500;">Positive Cases</div>
                    <div style="font-size: 0.95rem; font-weight: 600; color: #4b5563; margin-top: 2px;" id="ai-churn-model-positive-cases">--</div>
                </div>
                <div style="text-align: center;">
                    <div style="font-size: 10px; color: #9ca3af; font-weight: 500;">Negative Cases</div>
                    <div style="font-size: 0.95rem; font-weight: 600; color: #4b5563; margin-top: 2px;" id="ai-churn-model-negative-cases">--</div>
                </div>
                <div style="text-align: center;">
                    <div style="font-size: 10px; color: #9ca3af; font-weight: 500;">Feature Columns</div>
                    <div style="font-size: 0.95rem; font-weight: 600; color: #4b5563; margin-top: 2px;" id="ai-churn-model-feature-columns">--</div>
                </div>
                <div style="text-align: center;">
                    <div style="font-size: 10px; color: #9ca3af; font-weight: 500;">Last Retrained</div>
                    <div style="font-size: 0.95rem; font-weight: 600; color: #4b5563; margin-top: 2px;" id="ai-churn-model-last-retrained">--</div>
                </div>
                <div style="text-align: center;">
                    <div style="font-size: 10px; color: #9ca3af; font-weight: 500;">Last Scored</div>
                    <div style="font-size: 0.95rem; font-weight: 600; color: #4b5563; margin-top: 2px;" id="ai-churn-model-last-scored">--</div>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Panels Row ──────────────────────────────────────────── --}}
    <div class="panels-grid">
        {{-- Distribution Panel --}}
        <div class="panel-card ajax-section-loading" id="ai-churn-section-probability-distribution">
            <div class="panel-header">
                <span class="panel-title">Probability Distribution <span class="info-icon">ⓘ</span></span>
            </div>
            <div class="panel-body">
                <div class="bar-chart-container">
                    <div class="bar-row">
                        <div class="bar-label">High (&gt;80%)</div>
                        <div class="bar-wrapper">
                            <div class="bar-fill bg-high" id="ai-churn-prob-dist-high-bar" style="width:0%;"></div>
                        </div>
                        <div class="bar-value" id="ai-churn-prob-dist-high-value">--</div>
                    </div>
                    <div class="bar-row">
                        <div class="bar-label">Medium (50-80%)</div>
                        <div class="bar-wrapper">
                            <div class="bar-fill bg-med" id="ai-churn-prob-dist-med-bar" style="width:0%;"></div>
                        </div>
                        <div class="bar-value" id="ai-churn-prob-dist-med-value">--</div>
                    </div>
                    <div class="bar-row">
                        <div class="bar-label">Low (&lt;50%)</div>
                        <div class="bar-wrapper">
                            <div class="bar-fill bg-low" id="ai-churn-prob-dist-low-bar" style="width:0%;"></div>
                        </div>
                        <div class="bar-value" id="ai-churn-prob-dist-low-value">--</div>
                    </div>
                </div>
                <div class="probability-actions">
                    <button type="button" id="ai-churn-send-campaign-btn" class="btn-black">Send Campaign</button>
                </div>
            </div>
        </div>

        {{-- System Status Panel --}}
        <div class="panel-card ajax-section-loading" id="ai-churn-section-pipeline-metrics">
            <div class="panel-header">
                <span class="panel-title">AI Pipeline Metrics <span class="info-icon">ⓘ</span></span>
            </div>
            <div class="panel-body">
                <div class="pipeline-list">
                    <div class="pl-item">
                        <span class="pl-label">Feature Store Integrity</span>
                        <span class="pl-val" id="ai-churn-pipeline-integrity">99.8% OK</span>
                    </div>
                    <div class="pl-item">
                        <span class="pl-label">Last Inference Run</span>
                        <span class="pl-val" id="ai-churn-pipeline-last-inference">--</span>
                    </div>
                    <div class="pl-item">
                        <span class="pl-label">Next Scheduled Run</span>
                        <span class="pl-val" id="ai-churn-pipeline-next-run">--</span>
                    </div>
                    <div class="pl-item">
                        <span class="pl-label">Next Monthly Retrain</span>
                        <span class="pl-val" id="ai-churn-pipeline-next-retrain">--</span>
                    </div>
                    <div class="pl-item">
                        <span class="pl-label">Model Engine Status</span>
                        <span class="pl-val status-badge" id="ai-churn-pipeline-engine-status">ONLINE</span>
                    </div>
                    <div class="pl-item">
                        <span class="pl-label">Version Endpoint</span>
                        <span class="pl-val" id="ai-churn-pipeline-version-endpoint">LightGBM v2.4</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Subscription Expiry vs AI Risk ─────────────────────── --}}
    <div class="panel-card ajax-section-loading" id="ai-churn-section-expiry-risk" style="margin-top: 16px;">
        <div class="panel-header">
            <span class="panel-title">Subscription Expiry vs. AI Risk <span class="info-icon" title="Intersection of days until subscription ends and high churn risk">ⓘ</span></span>
        </div>
        <div class="panel-body">
            <div class="expiry-grid" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;">
                <div class="expiry-kpi-card kpi-card kpi-card--churn-rate">
                    <div style="font-size: 13px; color: #4b5563; font-weight: 600; margin-bottom: 8px;">Expires in &lt; 7 Days</div>
                    <div style="font-size: 1.4rem; font-weight: 700; color: #111827;" id="ai-churn-expiry-e7">--</div>
                    <div style="margin-top: 8px; height: 6px; background: #f3f4f6; border-radius: 999px; overflow: hidden;">
                        <div style="height: 100%; width: 0%; background: #ef4444;" id="ai-churn-expiry-e7-bar"></div>
                    </div>
                    <div style="font-size: 12px; color: #6b7280; margin-top: 8px;">
                        <strong style="color: #ef4444;" id="ai-churn-expiry-e7h">--</strong> High Risk (<span id="ai-churn-expiry-e7p">0</span>%)
                    </div>
                </div>
                <div class="expiry-kpi-card kpi-card kpi-card--conversions">
                    <div style="font-size: 13px; color: #4b5563; font-weight: 600; margin-bottom: 8px;">Expires in 7 - 30 Days</div>
                    <div style="font-size: 1.4rem; font-weight: 700; color: #111827;" id="ai-churn-expiry-e30">--</div>
                    <div style="margin-top: 8px; height: 6px; background: #f3f4f6; border-radius: 999px; overflow: hidden;">
                        <div style="height: 100%; width: 0%; background: #f59e0b;" id="ai-churn-expiry-e30-bar"></div>
                    </div>
                    <div style="font-size: 12px; color: #6b7280; margin-top: 8px;">
                        <strong style="color: #f59e0b;" id="ai-churn-expiry-e30h">--</strong> High Risk (<span id="ai-churn-expiry-e30p">0</span>%)
                    </div>
                </div>
                <div class="expiry-kpi-card kpi-card kpi-card--returning-conversions">
                    <div style="font-size: 13px; color: #4b5563; font-weight: 600; margin-bottom: 8px;">Expires in 30 - 45 Days</div>
                    <div style="font-size: 1.4rem; font-weight: 700; color: #111827;" id="ai-churn-expiry-e45">--</div>
                    <div style="margin-top: 8px; height: 6px; background: #f3f4f6; border-radius: 999px; overflow: hidden;">
                        <div style="height: 100%; width: 0%; background: #f59e0b;" id="ai-churn-expiry-e45-bar"></div>
                    </div>
                    <div style="font-size: 12px; color: #6b7280; margin-top: 8px;">
                        <strong style="color: #f59e0b;" id="ai-churn-expiry-e45h">--</strong> High Risk (<span id="ai-churn-expiry-e45p">0</span>%)
                    </div>
                </div>
                <div class="expiry-kpi-card kpi-card kpi-card--retention-rate">
                    <div style="font-size: 13px; color: #4b5563; font-weight: 600; margin-bottom: 8px;">Expires &gt; 45 Days</div>
                    <div style="font-size: 1.4rem; font-weight: 700; color: #111827;" id="ai-churn-expiry-e90">--</div>
                    <div style="margin-top: 8px; height: 6px; background: #f3f4f6; border-radius: 999px; overflow: hidden;">
                        <div style="height: 100%; width: 0%; background: #10b981;" id="ai-churn-expiry-e90-bar"></div>
                    </div>
                    <div style="font-size: 12px; color: #6b7280; margin-top: 8px;">
                        <strong style="color: #10b981;" id="ai-churn-expiry-e90h">--</strong> High Risk (<span id="ai-churn-expiry-e90p">0</span>%)
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ═══════════════════════════════════════════════════════════ --}}
    {{-- WIN-BACK INTELLIGENCE SECTION                               --}}
    {{-- ═══════════════════════════════════════════════════════════ --}}

    <div class="wb-section-header">
        <div class="wb-section-label">
            <span class="wb-dot"></span>
            Win-Back Intelligence
        </div>
        <span class="wb-section-sub">Subscribers who have previously churned and may be re-engaged</span>
    </div>

    {{-- Win-Back KPI Cards --}}
    <div class="wb-kpis-grid ajax-section-loading" id="ai-churn-section-win-back-intelligence">
        <div class="kpi-card kpi-card--churn-rate wb-kpi-card">
            <div class="kpi-title">Total Expired <span class="info-icon" title="Unique subscribers whose subscription has Expired (status=7)">ⓘ</span></div>
            <div class="kpi-value" id="ai-churn-win-back-total-expired">--</div>
            <div class="kpi-foot">Historical subscription drop-offs</div>
        </div>
        <div class="kpi-card kpi-card--conversion-rate wb-kpi-card wb-kpi-highlight">
            <div class="kpi-title" style="color:#7c3aed;">Win-Back Eligible <span class="info-icon" title="Previously churned subscribers who have demonstrated payment history — prime reactivation targets">ⓘ</span></div>
            <div class="kpi-value" style="color:#7c3aed;" id="ai-churn-win-back-eligible">--</div>
            <div class="kpi-foot">Priority reactivation targets</div>
            <div class="probability-actions">
                <button type="button" id="ai-churn-winback-send-campaign-btn" class="btn-black">Send Campaign</button>
            </div>
        </div>
        <div class="kpi-card kpi-card--retention-rate wb-kpi-card">
            <div class="kpi-title">Already Won Back <span class="info-icon" title="Previously churned customers who are now active again">ⓘ</span></div>
            <div class="kpi-value" style="color:#10b981;" id="ai-churn-win-back-already-won">--</div>
            <div class="kpi-foot delta-positive">Successfully reactivated</div>
        </div>
    </div>

    <div class="panels-grid" style="margin-top: 16px;">
        {{-- Win-Back Potential Panel --}}
        <div class="panel-card ajax-section-loading" id="ai-churn-section-win-back-score">
            <div class="panel-header">
                <span class="panel-title">AI Win-Back Score <span class="info-icon" title="Powered by LightGBM — subscribers the model rated as LOW churn risk but who still left are the easiest to win back (1 − churn_probability)">ⓘ</span></span>
            </div>
            <div class="panel-body">
                <p style="font-size:12px; color:#6b7280; margin: 0 0 18px;">Powered by your LightGBM model. Subscribers with a <strong>low churn score</strong> who still left are your easiest win-backs — they were loyal but left for situational reasons.</p>
                <div class="bar-chart-container">
                    <div class="bar-row">
                        <div class="bar-label">High (&le; 30% churn)</div>
                        <div class="bar-wrapper">
                            <div class="bar-fill" id="ai-churn-win-back-score-high-bar" style="width:0%; background:#7c3aed;"></div>
                        </div>
                        <div class="bar-value" id="ai-churn-win-back-score-high">--</div>
                    </div>
                    <div class="bar-row">
                        <div class="bar-label">Med (31–60% churn)</div>
                        <div class="bar-wrapper">
                            <div class="bar-fill" id="ai-churn-win-back-score-med-bar" style="width:0%; background:#a78bfa;"></div>
                        </div>
                        <div class="bar-value" id="ai-churn-win-back-score-med">--</div>
                    </div>
                    <div class="bar-row">
                        <div class="bar-label">Low (&gt; 60% churn)</div>
                        <div class="bar-wrapper">
                            <div class="bar-fill" id="ai-churn-win-back-score-low-bar" style="width:0%; background:#ddd6fe;"></div>
                        </div>
                        <div class="bar-value" id="ai-churn-win-back-score-low">--</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Reactivation Window Panel --}}
        <div class="panel-card ajax-section-loading" id="ai-churn-section-reactivation-window">
            <div class="panel-header">
                <span class="panel-title">Reactivation Window <span class="info-icon" title="Recency of churn — more recently expired subscribers have a significantly higher win-back success rate">ⓘ</span></span>
            </div>
            <div class="panel-body">
                <p style="font-size:12px; color:#6b7280; margin: 0 0 18px;">Time since subscription expired. Subscribers churned within 30 days are your <strong>hottest</strong> win-back targets.</p>
                <div class="reactivation-grid">
                    <div class="wb-time-card wb-urgent">
                        <div class="wb-time-badge">🔥 Urgent</div>
                        <div class="wb-time-label">Churned &lt; 30 Days</div>
                        <div class="wb-time-value" id="ai-churn-reactivation-r30">--</div>
                        <div class="wb-time-sub">Highest win-back rate</div>
                    </div>
                    <div class="wb-time-card wb-warm">
                        <div class="wb-time-badge">⚡ Warm</div>
                        <div class="wb-time-label">31 – 60 Days Ago</div>
                        <div class="wb-time-value" id="ai-churn-reactivation-r60">--</div>
                        <div class="wb-time-sub">Still receptive</div>
                    </div>
                    <div class="wb-time-card wb-cool">
                        <div class="wb-time-badge">💤 Cooling</div>
                        <div class="wb-time-label">61 – 90 Days Ago</div>
                        <div class="wb-time-value" id="ai-churn-reactivation-r90">--</div>
                        <div class="wb-time-sub">Needs strong offer</div>
                    </div>
                    <div class="wb-time-card wb-cold">
                        <div class="wb-time-badge">❄️ Cold</div>
                        <div class="wb-time-label">&gt; 90 Days Ago</div>
                        <div class="wb-time-value" id="ai-churn-reactivation-r-old">--</div>
                        <div class="wb-time-sub">Lower priority</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
</div>
</section>

<div id="ai-churn-send-modal" class="campaign-modal-overlay" style="display:none;">
    <div class="campaign-modal">
        <div class="campaign-modal-header">
            <h3>Send Campaign</h3>
            <button type="button" class="campaign-modal-close" id="ai-churn-send-modal-close">&times;</button>
        </div>
        <div class="campaign-modal-body">
            <div class="campaign-modal-note-row">
                <div class="campaign-modal-note" id="ai-churn-modal-recipient-note">Recipients: --</div>
                <button type="button" id="ai-churn-export-btn" class="btn-outline campaign-export-btn" disabled>Export CSV</button>
            </div>
            <div class="campaign-form-group">
                <label for="ai-churn-provider-select">Provider</label>
                <select id="ai-churn-provider-select" class="campaign-input" disabled>
                    <option value="">Mailchimp</option>
                </select>
            </div>
            <div class="campaign-form-group" id="ai-churn-segment-group">
                <label for="ai-churn-segment-select">Segment</label>
                <select id="ai-churn-segment-select" class="campaign-input">
                    <option value="high">High (&gt;80%)</option>
                    <option value="medium">Medium (50-80%)</option>
                    <option value="low">Low (&lt;50%)</option>
                </select>
            </div>
            <div class="campaign-form-group">
                <label for="ai-churn-period-select">Period</label>
                <select id="ai-churn-period-select" class="campaign-input">
                    <option value="today">Today</option>
                    <option value="last_10_days">Last 10 Days</option>
                    <option value="next_30_days">Next 30 Days</option>
                    <option value="last_6_months">Last 6 Months</option>
                    <option value="last_3_months">Last 3 Months</option>
                    <option value="last_month">Last Month</option>
                    <option value="this_month">This Month</option>
                </select>
            </div>
            <div class="campaign-form-group">
                <label for="ai-churn-template-select">Mailchimp Template</label>
                <div class="campaign-template-row">
                    <select id="ai-churn-template-select" class="campaign-input">
                        <option value="">Loading templates...</option>
                    </select>
                    <button type="button" class="btn-outline campaign-template-preview-btn" id="ai-churn-template-preview-btn" disabled>Preview</button>
                </div>
            </div>
            <div id="ai-churn-template-preview" class="campaign-template-preview" style="display:none;">
                <div class="campaign-template-preview-header">
                    <strong id="ai-churn-template-preview-title">Template Preview</strong>
                    <button type="button" class="campaign-template-preview-close" id="ai-churn-template-preview-close">&times;</button>
                </div>
                <div class="campaign-template-preview-subject" id="ai-churn-template-preview-subject" style="display:none;"></div>
                <div class="campaign-template-preview-body" id="ai-churn-template-preview-body"></div>
            </div>
            <div id="ai-churn-campaign-status" class="campaign-status" style="display:none;"></div>
        </div>
        <div class="campaign-modal-footer">
            <button type="button" id="ai-churn-cancel-btn" class="btn-outline">Cancel</button>
            <button type="button" id="ai-churn-send-btn" class="btn-black">Queue Campaign</button>
        </div>
    </div>
</div>

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
<style>
    .full-page-loader {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 9999 !important;
        backdrop-filter: blur(4px) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: none !important;
    }
    .full-page-loader[style*="display: flex"] {
        display: flex !important;
    }
    .full-page-loader[style*="display: none"] {
        display: none !important;
    }
    .full-page-loader.show-loader {
        display: flex !important;
    }
    .loader-content {
        background: #ffffff;
        padding: 2rem;
        border-radius: 0.5rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    .spinner {
        border: 4px solid #f3f4f6;
        border-top: 4px solid #3b82f6;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .py-8 {
        padding-bottom: 0rem !important;
        padding-top: 0rem !important;
    }

    .gap-y-8 {
        row-gap: 1rem !important;
    }

    .dashboard-content-wrapper {
        padding: 1rem;
    }

    .light-container {
        font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
        color: #111827;
        padding-bottom: 24px;
        font-size: 0.875rem;
    }

    /* ── Topbar ─────────────────────────────────────────────── */
    .page-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
    .page-headline { display: flex; flex-direction: column; gap: 6px; }
    .page-title  { font-size: 1.5rem; font-weight: 700; line-height: 2rem; color: #111827; margin: 0; }
    .billing-subtitle { margin: 4px 0 0 0; font-size: 12px; color: #6b7280; }
    .page-actions { display: flex; gap: 8px; }
    .snapshot-meta { display: flex; align-items: center; gap: 8px; }
    .snapshot-time { font-size: 12px; color: #6b7280; }
    .snapshot-badge {
        display: inline-flex;
        align-items: center;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.3px;
        color: #b91c1c;
        background: #fee2e2;
        border: 1px solid #fecaca;
        border-radius: 999px;
        padding: 2px 8px;
    }

    /* ── Dashboard Filters ───────────────────────────────────── */
    .filters-horizontal {
        display: grid;
        grid-template-columns: minmax(170px, 1.2fr) minmax(240px, 2fr) minmax(150px, 1fr) minmax(90px, 0.45fr) auto;
        gap: 12px;
        align-items: end;
        padding: 14px;
        margin-bottom: 16px;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
    }
    .filter-section { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    .auto-renew-filter-section .filter-input {
        min-width: 0;
    }
    .filter-label { font-size: 0.875rem; color: #111827; font-weight: 500; }
    .filter-input {
        width: 100%;
        height: 40px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background: #fff;
        color: #111827;
        font-size: 0.875rem;
        padding: 0 12px;
        outline: none;
    }
    select.filter-input {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        padding-right: 34px;
        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='M5 7.5L10 12.5L15 7.5' stroke='%236B7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 14px 14px;
    }
    select.filter-input option {
        white-space: pre-line;
    }
    .package-filter-input {
        height: 40px;
        min-height: 40px;
        line-height: 20px;
    }
    .package-filter-section {
        overflow: visible;
    }
    #ai-churn-package-filter + .select2-container {
        width: 100% !important;
        min-width: 0 !important;
        z-index: 20;
    }
    #ai-churn-package-filter + .select2-container .select2-selection--single {
        height: 40px;
        min-height: 40px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        padding: 0;
        background: #fff;
    }
    #ai-churn-package-filter + .select2-container .select2-selection__rendered {
        padding: 9px 34px 9px 12px !important;
        line-height: 20px !important;
        display: block;
        color: #111827;
    }
    #ai-churn-package-filter + .select2-container .select2-selection__arrow {
        height: 100%;
        right: 8px;
    }
    .select2-container--open {
        z-index: 10050 !important;
    }
    .select2-container--open .select2-dropdown {
        z-index: 10050 !important;
        background: #ffffff !important;
        border: 1px solid #d1d5db !important;
    }
    .select2-container--default .select2-results > .select2-results__options {
        background: #ffffff !important;
    }
    .select2-container--default .select2-results__option {
        background: #ffffff !important;
        color: #111827 !important;
    }
    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background: #2563eb !important;
        color: #ffffff !important;
    }
    .select2-container--default .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
        background: #eff6ff !important;
        color: #1d4ed8 !important;
    }
    .ai-churn-package-option {
        display: flex;
        flex-direction: column;
        gap: 2px;
        line-height: 1.2;
    }
    .ai-churn-package-option__title {
        font-size: 13px;
        color: #111827;
        word-break: break-word;
    }
    .ai-churn-package-option__meta {
        font-size: 12px;
        color: #6b7280;
        word-break: break-word;
    }
    .select2-results__option--highlighted .ai-churn-package-option__title,
    .select2-results__option--highlighted .ai-churn-package-option__meta {
        color: #ffffff;
    }
    .filter-input:focus { border-color: #9ca3af; box-shadow: none; }
    .filter-actions { display: flex; align-items: center; gap: 8px; }
    .btn-filter {
        border-radius: 8px;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        border: 1px solid transparent;
        white-space: nowrap;
    }
    .btn-search { background: #111827; color: #fff; border-color: #111827; }
    .btn-search:hover { background: #374151; border-color: #374151; }
    .btn-search.is-loading { opacity: 0.9; cursor: wait; }
    .btn-reset { background: #fff; color: #374151; border-color: #d1d5db; }
    .btn-filter:disabled { opacity: .6; cursor: not-allowed; }
    .btn-black {
        background-color: #111827; color: white; border: none;
        padding: 0.5rem 1rem; border-radius: 8px; font-size: 0.875rem; font-weight: 500; cursor: pointer;
    }
    .btn-black:disabled { opacity: .6; cursor: not-allowed; }
    .btn-outline {
        background-color: white; color: #374151; border: 1px solid #d1d5db;
        padding: 0.5rem 1rem; border-radius: 8px; font-size: 0.875rem; font-weight: 500; cursor: pointer;
    }
    .btn-outline:disabled { opacity: .6; cursor: not-allowed; }
    .probability-actions { margin-top: 18px; display: flex; justify-content: flex-end; }

    .campaign-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(17, 24, 39, 0.45);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 10000;
        padding: 16px;
    }
    .campaign-modal {
        width: 100%;
        max-width: 760px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 20px 35px rgba(0, 0, 0, 0.2);
        overflow: hidden;
    }
    .campaign-modal-header,
    .campaign-modal-footer { padding: 14px 16px; border-bottom: 1px solid #e5e7eb; }
    .campaign-modal-footer { border-top: 1px solid #e5e7eb; border-bottom: 0; display: flex; justify-content: flex-end; gap: 8px; }
    .campaign-modal-header { display: flex; align-items: center; justify-content: space-between; }
    .campaign-modal-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: #111827; }
    .campaign-modal-close { border: 0; background: transparent; font-size: 24px; line-height: 1; color: #6b7280; cursor: pointer; padding: 0; }
    .campaign-modal-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
    .campaign-form-group { display: flex; flex-direction: column; gap: 6px; }
    .campaign-form-group label { font-size: 0.875rem; font-weight: 500; color: #374151; }
    .campaign-input {
        width: 100%;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        height: 40px;
        padding: 0 12px;
        font-size: 0.875rem;
        color: #111827;
        background: #fff;
    }
    select.campaign-input {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding-right: 36px;
        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='M5 7.5L10 12.5L15 7.5' stroke='%236B7280' 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;
    }
    select.campaign-input::-ms-expand {
        display: none;
    }
    select.campaign-input:disabled {
        background-color: #f9fafb;
        color: #374151;
        opacity: 1;
        cursor: not-allowed;
    }
    .campaign-modal-note {
        font-size: 0.8125rem;
        color: #4b5563;
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        padding: 8px 10px;
        border-radius: 8px;
    }
    .campaign-modal-note-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .campaign-modal-note-row .campaign-modal-note {
        flex: 1 1 auto;
    }
    .campaign-export-btn {
        white-space: nowrap;
        padding: 8px 12px;
        font-size: 0.8125rem;
    }
    .campaign-template-row { display: flex; align-items: center; gap: 8px; }
    .campaign-template-row .campaign-input { flex: 1 1 auto; }
    .campaign-template-preview-btn { min-width: 94px; white-space: nowrap; }
    .campaign-template-preview {
        border: 1px solid #e5e7eb;
        background: #f9fafb;
        border-radius: 8px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .campaign-template-preview-header { display: flex; align-items: center; justify-content: space-between; color: #111827; font-size: 0.875rem; }
    .campaign-template-preview-close { border: none; background: transparent; font-size: 18px; line-height: 1; color: #6b7280; cursor: pointer; padding: 2px 6px; }
    .campaign-template-preview-close:hover { color: #111827; }
    .campaign-template-preview-subject {
        font-size: 0.8125rem;
        color: #1f2937;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        padding: 8px 10px;
    }
    .campaign-template-preview-body {
        max-height: 220px;
        overflow: auto;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        padding: 10px;
        color: #111827;
        font-size: 0.875rem;
        line-height: 1.45;
    }
    .campaign-template-preview-body.is-loading { color: #6b7280; }
    .campaign-template-preview-body.is-plain-text { white-space: pre-wrap; word-break: break-word; }
    .campaign-status {
        font-size: 0.8125rem;
        border-radius: 8px;
        padding: 10px 12px;
        border: 1px solid transparent;
    }
    .campaign-status.success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
    .campaign-status.error { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
    .campaign-status.info { background: #eff6ff; color: #1e3a8a; border-color: #bfdbfe; }
    .ai-churn-page-status {
        font-size: 0.8125rem;
        border-radius: 8px;
        padding: 10px 12px;
        border: 1px solid #fecaca;
        background: #fef2f2;
        color: #991b1b;
        margin-bottom: 12px;
    }
    .ajax-section-loading.is-loading {
        opacity: 0.55;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    /* ── KPI Grid ───────────────────────────────────────────── */
    .kpis-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
    .kpi-card  {
        position: relative;
        z-index: 1;
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 14px !important;
        padding: 16px;
        box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .kpi-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
    }
    .kpi-card--registrations {
        background: linear-gradient(180deg, #f0ecff 0%, #f8f6ff 100%) !important;
        border-color: #e8e3ff !important;
    }
    .kpi-card--conversions {
        background: linear-gradient(180deg, #fff7e3 0%, #fffcf1 100%) !important;
        border-color: #fff1cf !important;
    }
    .kpi-card--returning-conversions {
        background: linear-gradient(180deg, #e8f7ff 0%, #f3fbff 100%) !important;
        border-color: #cfeeff !important;
    }
    .kpi-card--conversion-rate {
        background: linear-gradient(180deg, rgba(22, 205, 199, 0.12) 0%, rgba(22, 205, 199, 0.04) 100%) !important;
        border-color: rgba(22, 205, 199, 0.22) !important;
    }
    .kpi-card--churn-rate {
        background: linear-gradient(180deg, #fff0f6 0%, #fff7fa 100%) !important;
        border-color: #ffdbe8 !important;
    }
    .kpi-card--retention-rate {
        background: linear-gradient(180deg, #eafbf0 0%, #f5fdf8 100%) !important;
        border-color: #d3f5df !important;
    }
    .expiry-kpi-card {
        padding: 16px;
        border-radius: 10px !important;
        box-shadow: none !important;
    }
    .expiry-kpi-card:hover {
        transform: none;
        box-shadow: none !important;
    }
    .kpi-title { font-size: 0.875rem; color: var(--global-admin-heading-color); font-weight: 500; display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .info-icon { color: #9ca3af; cursor: help; font-size: 14px; }
    .kpi-value { font-size: 1.255rem; font-weight: 700; color: #111827; margin-bottom: 8px; min-height: 44px; display: flex; align-items: center; line-height: 2.25rem; }
    .kpi-text  { font-size: 1.255rem; line-height: 2.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .kpi-foot  { font-size: 12px; color: var(--global-admin-text-color); }
    .delta-positive { color: #10b981; }

    /* ── Panels ─────────────────────────────────────────────── */
    .panels-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .panel-card  { background: white; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); }
    .panel-header { padding: 16px; border-bottom: 1px solid #f3f4f6; }
    .panel-title  { font-size: 0.95rem; font-weight: 600; color: #111827; display: flex; align-items: center; justify-content: space-between; }
    .panel-body   { padding: 24px 16px; }

    /* ── Bar Chart ──────────────────────────────────────────── */
    .bar-row   { display: flex; align-items: center; margin-bottom: 16px; }
    .bar-row:last-child { margin-bottom: 0; }
    .bar-label  { width: 140px; font-size: 0.875rem; color: #4b5563; }
    .bar-wrapper { flex: 1; background: #f3f4f6; height: 14px; border-radius: 999px; margin: 0 12px; overflow: hidden; }
    .bar-fill  { height: 100%; border-radius: 999px; transition: width .6s ease; }
    .bar-value { width: 50px; text-align: right; font-size: 0.875rem; font-weight: 600; color: #111827; }
    .bg-high { background: #ef4444; }
    .bg-med  { background: #f59e0b; }
    .bg-low  { background: #10b981; }

    /* ── Pipeline List ──────────────────────────────────────── */
    .pipeline-list { display: flex; flex-direction: column; gap: 16px; }
    .pl-item { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; border-bottom: 1px solid #f3f4f6; padding-bottom: 12px; }
    .pl-item:last-child { border-bottom: none; padding-bottom: 0; }
    .pl-label { color: #6b7280; font-weight: 500; }
    .pl-val   { color: #111827; font-weight: 600; }
    .status-badge { background: #dcfce7; color: #166534; padding: 4px 10px; border-radius: 999px; font-size: 12px; }
    .model-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; }
    .model-badge-app { background: #dcfce7; color: #166534; }
    .model-badge-global { background: #fef3c7; color: #92400e; }

    /* ── Win-Back Section ───────────────────────────────────── */
    .wb-section-header {
        display: flex; align-items: center; justify-content: space-between;
        margin-top: 32px; margin-bottom: 16px;
        padding-bottom: 12px; border-bottom: 2px solid #ede9fe;
    }
    .wb-section-label { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 700; color: #7c3aed; }
    .wb-dot { width: 10px; height: 10px; border-radius: 50%; background: #7c3aed; display: inline-block; flex-shrink: 0; }
    .wb-section-sub { font-size: 12px; color: #9ca3af; }

    .wb-kpis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 0; }
    .wb-kpi-card { border-top: 3px solid #ede9fe; }
    .wb-kpi-highlight { border-top: 3px solid #7c3aed; }

    .reactivation-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .wb-time-card  { border-radius: 8px; padding: 14px 12px; text-align: center; border: 1px solid #e5e7eb; }
    .wb-time-badge { font-size: 11px; font-weight: 600; margin-bottom: 6px; }
    .wb-time-label { font-size: 11px; color: #6b7280; font-weight: 500; margin-bottom: 8px; line-height: 1.4; }
    .wb-time-value { font-size: 1.5rem; font-weight: 700; color: #111827; margin-bottom: 4px; min-height: 36px; display: flex; align-items: center; justify-content: center; }
    .wb-time-sub   { font-size: 10px; color: #9ca3af; }
    .wb-urgent { background: #fdf2f8; border-color: #f9a8d4; } .wb-urgent .wb-time-badge { color: #be185d; }
    .wb-warm   { background: #fffbeb; border-color: #fcd34d; } .wb-warm   .wb-time-badge { color: #92400e; }
    .wb-cool   { background: #f0f9ff; border-color: #7dd3fc; } .wb-cool   .wb-time-badge { color: #0369a1; }
    .wb-cold   { background: #f8fafc; border-color: #cbd5e1; } .wb-cold   .wb-time-badge { color: #475569; }

    /* ── Responsive ─────────────────────────────────────────── */
    @media (max-width: 1024px) {
        .filters-horizontal { grid-template-columns: 1fr 1fr; }
        .filter-buttons { grid-column: span 2; }
        .kpis-grid { grid-template-columns: repeat(2, 1fr); }
        .panels-grid { grid-template-columns: 1fr; }
        .wb-kpis-grid { grid-template-columns: repeat(2, 1fr); }
        .reactivation-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
        .filters-horizontal { grid-template-columns: 1fr; }
        .filter-buttons { grid-column: auto; }
        .filter-actions { width: 100%; }
        .btn-filter { flex: 1; }
        .kpis-grid { grid-template-columns: 1fr; }
        .wb-kpis-grid { grid-template-columns: 1fr; }
        .reactivation-grid { grid-template-columns: repeat(2, 1fr); }
    }
</style>
@endpush

@push('scripts')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    let aiChurnPackageInitTimer = null;
    let aiChurnPendingReinit = false;

    function getAiChurnPackageSelectEl() {
        return document.getElementById('ai-churn-package-filter');
    }

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

    function buildAiChurnPackageOptionMarkup(option, includeMeta = true) {
        if (!option || !option.id || String(option.id) === 'all') {
            return escapeAiChurnHtml(option?.text || 'All Packages');
        }

        const optionEl = option.element || null;
        const fallbackText = String(option?.text || '').trim();
        const fallbackLines = fallbackText.split(/\r\n|\r|\n/);
        const label = String(optionEl?.dataset?.packageLabel || fallbackLines[0] || option.id || '').trim();
        const meta = String(optionEl?.dataset?.packageMeta || fallbackLines.slice(1).join(' ') || '').trim();

        return `
            <div class="ai-churn-package-option">
                <span class="ai-churn-package-option__title">${escapeAiChurnHtml(label)}</span>
                ${includeMeta && meta ? `<span class="ai-churn-package-option__meta">${escapeAiChurnHtml(meta)}</span>` : ''}
            </div>
        `;
    }

    function hydrateAiChurnPackageOptionData(selectEl) {
        if (!selectEl) {
            return;
        }

        Array.from(selectEl.options || []).forEach((option) => {
            if (!option || !option.value || option.value === 'all') {
                return;
            }

            const rawText = String(option.text || '').trim();
            const existingLabel = String(option.dataset.packageLabel || '').trim();
            const existingMeta = String(option.dataset.packageMeta || '').trim();

            if (existingLabel !== '' && existingMeta !== '') {
                return;
            }

            // Handles both:
            // 1) "Package Name\n(SMS: ...)"
            // 2) "Package Name(SMS: ...)"
            const metaMatch = rawText.match(/\(\s*SMS:\s*[^)]+\)\s*$/i);
            if (metaMatch) {
                const metaText = metaMatch[0].trim();
                const labelText = rawText.slice(0, rawText.length - metaText.length).trim();
                option.dataset.packageLabel = labelText;
                option.dataset.packageMeta = metaText;
                return;
            }

            const lines = rawText.split(/\r\n|\r|\n/);
            option.dataset.packageLabel = existingLabel || String(lines[0] || option.value).trim();
            option.dataset.packageMeta = existingMeta || String(lines.slice(1).join(' ') || '').trim();
        });
    }

    function initializeAiChurnPackageSelect2() {
        const packageFilterSelect = getAiChurnPackageSelectEl();
        if (!packageFilterSelect || !window.jQuery || !window.jQuery.fn?.select2) {
            return;
        }

        hydrateAiChurnPackageOptionData(packageFilterSelect);

        const $packageFilterSelect = window.jQuery(packageFilterSelect);
        const existingInstance = $packageFilterSelect.data('select2');
        if (existingInstance && typeof existingInstance.isOpen === 'function' && existingInstance.isOpen()) {
            aiChurnPendingReinit = true;
            return;
        }

        if ($packageFilterSelect.data('select2')) {
            $packageFilterSelect.select2('destroy');
        }

        $packageFilterSelect.select2({
            width: '100%',
            dropdownAutoWidth: true,
            minimumResultsForSearch: 8,
            dropdownParent: window.jQuery(document.body),
            templateResult: function (option) {
                if (option?.element && option.element.disabled && String(option.id || '') !== '') {
                    return null;
                }
                return window.jQuery(buildAiChurnPackageOptionMarkup(option, true));
            },
            templateSelection: function (option) {
                if (!option || !option.id || String(option.id) === 'all') {
                    return option?.text || 'All Packages';
                }
                return window.jQuery(buildAiChurnPackageOptionMarkup(option, false));
            },
            escapeMarkup: function (markup) {
                return markup;
            },
        });

        $packageFilterSelect.off('select2:close.aiChurnReinit').on('select2:close.aiChurnReinit', function () {
            if (aiChurnPendingReinit) {
                aiChurnPendingReinit = false;
                scheduleAiChurnPackageSelectInit();
            }
        });
    }

    function scheduleAiChurnPackageSelectInit() {
        if (aiChurnPackageInitTimer) {
            window.clearTimeout(aiChurnPackageInitTimer);
        }
        aiChurnPackageInitTimer = window.setTimeout(() => {
            initializeAiChurnPackageSelect2();
        }, 80);
    }

    scheduleAiChurnPackageSelectInit();

    const filtersEndpoint = "{{ route('ai-churn.filter-options', [], false) }}";
    const dashboardEndpoint = "{{ route('ai-churn.dashboard', [], false) }}";
    const snapshotMetaEndpoint = "{{ route('ai-churn.snapshot-meta', [], false) }}";
    const kpiCardsEndpoint = "{{ route('ai-churn.sections.kpi-cards', [], false) }}";
    const modelRegistryEndpoint = "{{ route('ai-churn.sections.model-performance-registry', [], false) }}";
    const probabilityDistributionEndpoint = "{{ route('ai-churn.sections.probability-distribution', [], false) }}";
    const pipelineMetricsEndpoint = "{{ route('ai-churn.sections.pipeline-metrics', [], false) }}";
    const subscriptionExpiryRiskEndpoint = "{{ route('ai-churn.sections.subscription-expiry-risk', [], false) }}";
    const winBackIntelligenceEndpoint = "{{ route('ai-churn.sections.win-back-intelligence', [], false) }}";
    const winBackScoreEndpoint = "{{ route('ai-churn.sections.win-back-score', [], false) }}";
    const reactivationWindowEndpoint = "{{ route('ai-churn.sections.reactivation-window', [], false) }}";

    const defaultFilters = {
        date_range: 'quarterly',
        product_plan: 'all',
        package_mode: 'all',
        auto_renew: 'all',
        start_date: null,
        end_date: null,
    };

    const dateRangeFilter = document.getElementById('ai-churn-date-range-filter');
    const packageFilter = document.getElementById('ai-churn-package-filter');
    const packageModeFilter = document.getElementById('ai-churn-package-mode-filter');
    const autoRenewFilter = document.getElementById('ai-churn-auto-renew-filter');
    const searchButton = document.getElementById('ai-churn-search-btn');
    const resetButton = document.getElementById('ai-churn-reset-btn');
    const pageStatus = document.getElementById('ai-churn-page-status');
    const filterLoader = document.getElementById('filter-loader');

    let activeRequestId = 0;
    let currentFilters = { ...defaultFilters };
    let ajaxLoaderShownAt = 0;
    const aiChurnSectionIds = [
        'ai-churn-section-kpi-cards',
        'ai-churn-section-model-registry',
        'ai-churn-section-probability-distribution',
        'ai-churn-section-pipeline-metrics',
        'ai-churn-section-expiry-risk',
        'ai-churn-section-win-back-intelligence',
        'ai-churn-section-win-back-score',
        'ai-churn-section-reactivation-window',
    ];

    function setPageStatus(message = '') {
        if (!pageStatus) {
            return;
        }

        const normalizedMessage = String(message || '').trim();
        if (normalizedMessage === '') {
            pageStatus.style.display = 'none';
            pageStatus.textContent = '';
            return;
        }

        pageStatus.textContent = normalizedMessage;
        pageStatus.style.display = 'block';
    }

    function setSectionLoading(sectionId, loading) {
        const sectionEl = document.getElementById(sectionId);
        if (!sectionEl) {
            return;
        }

        if (loading) {
            sectionEl.classList.add('is-loading');
            return;
        }

        sectionEl.classList.remove('is-loading');
    }

    function showAjaxLoader() {
        if (!filterLoader) {
            return;
        }

        filterLoader.style.display = 'flex';
        filterLoader.classList.add('show-loader');
        ajaxLoaderShownAt = Date.now();
    }

    function hideAjaxLoader() {
        if (!filterLoader) {
            return;
        }

        const minVisibleMs = 300;
        const elapsed = Date.now() - ajaxLoaderShownAt;
        const remaining = Math.max(0, minVisibleMs - elapsed);

        window.setTimeout(() => {
            filterLoader.style.display = 'none';
            filterLoader.classList.remove('show-loader');
        }, remaining);
    }

    function setFilterButtonsLoading(loading, searchLoading = false) {
        if (searchButton) {
            searchButton.disabled = loading;
            searchButton.classList.toggle('is-loading', loading && searchLoading);
        }

        if (resetButton) {
            resetButton.disabled = loading;
        }
    }

    function setText(elId, value, fallback = '--') {
        const element = document.getElementById(elId);
        if (!element) {
            return;
        }

        const hasValue = value !== null && value !== undefined && String(value).trim() !== '';
        element.textContent = hasValue ? String(value) : fallback;
    }

    function setBarWidth(elId, percent) {
        const element = document.getElementById(elId);
        if (!element) {
            return;
        }

        const normalized = Math.max(0, Math.min(100, Number(percent || 0)));
        element.style.width = `${normalized}%`;
    }

    function buildSectionUrl(endpoint, filters) {
        const params = new URLSearchParams();
        Object.entries(filters || {}).forEach(([key, value]) => {
            if (value !== null && value !== undefined && String(value) !== '') {
                params.append(key, String(value));
            }
        });

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

    async function fetchJson(url, options = {}) {
        const cacheMode = String(options?.cacheMode || 'no-store').trim() || 'no-store';
        const response = await fetch(url, {
            method: 'GET',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
            },
            credentials: 'same-origin',
            cache: cacheMode,
        });

        const payload = await response.json().catch(() => ({}));
        if (!response.ok || payload?.success === false) {
            throw new Error(payload?.message || 'Failed to load AI churn section.');
        }

        return payload;
    }

    function readFiltersFromUi() {
        return {
            date_range: String(dateRangeFilter?.value || defaultFilters.date_range).trim() || defaultFilters.date_range,
            product_plan: String(packageFilter?.value || defaultFilters.product_plan).trim() || defaultFilters.product_plan,
            package_mode: String(packageModeFilter?.value || defaultFilters.package_mode).trim() || defaultFilters.package_mode,
            auto_renew: String(autoRenewFilter?.value || defaultFilters.auto_renew).trim() || defaultFilters.auto_renew,
            start_date: null,
            end_date: null,
        };
    }

    function setSnapshotMeta(data) {
        const snapshotTime = String(data?.snapshotGeneratedAt || '--').trim() || '--';
        const snapshotStale = Boolean(data?.isSnapshotStale);
        const staleReason = String(data?.snapshotStaleReason || '').trim();
        const snapshotTimeEl = document.getElementById('ai-churn-snapshot-time');
        const snapshotBadgeEl = document.getElementById('ai-churn-snapshot-badge');

        if (snapshotTimeEl) {
            snapshotTimeEl.textContent = `Snapshot: ${snapshotTime}`;
        }

        if (snapshotBadgeEl) {
            if (snapshotStale) {
                snapshotBadgeEl.style.display = 'inline-flex';
                snapshotBadgeEl.title = staleReason;
            } else {
                snapshotBadgeEl.style.display = 'none';
                snapshotBadgeEl.title = '';
            }
        }
    }

    function updateKpiCards(data) {
        setText('ai-churn-kpi-avg-probability', data?.avgProbability, '0.0');
        setText('ai-churn-kpi-high-risk-count', data?.highRiskCount, '0');
        setText('ai-churn-kpi-primary-factor', data?.primaryFactor, '--');
        setText('ai-churn-kpi-model-accuracy', data?.modelAccuracy, '0.0');
    }

    function updateModelRegistry(data) {
        const section = document.getElementById('ai-churn-section-model-registry');
        const modelStats = (data && typeof data.modelStats === 'object' && data.modelStats !== null) ? data.modelStats : {};
        const hasStats = Object.keys(modelStats).length > 0;

        if (section) {
            section.style.display = hasStats ? 'block' : 'none';
        }

        if (!hasStats) {
            return;
        }

        setText('ai-churn-model-accuracy-stat', modelStats.accuracy, '--');
        setText('ai-churn-model-precision-stat', modelStats.precision, '--');
        setText('ai-churn-model-recall-stat', modelStats.recall, '--');
        setText('ai-churn-model-f1-stat', modelStats.f1, '--');
        setText('ai-churn-model-auc-stat', modelStats.auc, '--');
        setText('ai-churn-model-version-stat', modelStats.version, '--');
        setText('ai-churn-model-training-samples', modelStats.samples, '--');
        setText('ai-churn-model-positive-cases', modelStats.positives, '--');
        setText('ai-churn-model-negative-cases', modelStats.negatives, '--');
        setText('ai-churn-model-feature-columns', modelStats.features, '--');
        setText('ai-churn-model-last-retrained', modelStats.trained_at, '--');
        setText('ai-churn-model-last-scored', modelStats.last_scored_at, '--');

        const badge = document.getElementById('ai-churn-model-type-badge');
        if (!badge) {
            return;
        }

        const modelType = String(modelStats.model_type || '').trim();
        const isAppSpecific = modelType.toLowerCase() === 'app-specific';
        badge.textContent = isAppSpecific ? 'App-Specific' : 'Global Model';
        badge.classList.toggle('model-badge-app', isAppSpecific);
        badge.classList.toggle('model-badge-global', !isAppSpecific);
    }

    function updateProbabilityDistribution(data) {
        setBarWidth('ai-churn-prob-dist-high-bar', data?.distHigh);
        setBarWidth('ai-churn-prob-dist-med-bar', data?.distMed);
        setBarWidth('ai-churn-prob-dist-low-bar', data?.distLow);
        setText('ai-churn-prob-dist-high-value', data?.probHigh, '0');
        setText('ai-churn-prob-dist-med-value', data?.probMed, '0');
        setText('ai-churn-prob-dist-low-value', data?.probLow, '0');
    }

    function updatePipelineMetrics(data) {
        setText('ai-churn-pipeline-integrity', data?.featureStoreIntegrity, '99.8% OK');
        setText('ai-churn-pipeline-last-inference', data?.lastInferenceRun, '--');
        setText('ai-churn-pipeline-next-run', data?.nextScheduledRun, '--');
        setText('ai-churn-pipeline-next-retrain', data?.nextRetrainRun, '--');
        setText('ai-churn-pipeline-engine-status', data?.modelEngineStatus, 'ONLINE');
        setText('ai-churn-pipeline-version-endpoint', data?.versionEndpoint, 'LightGBM v2.4');
    }

    function updateSubscriptionExpiryRisk(data) {
        setText('ai-churn-expiry-e7', data?.e7, '0');
        setText('ai-churn-expiry-e7h', data?.e7h, '0');
        setText('ai-churn-expiry-e7p', data?.e7p, '0');
        setBarWidth('ai-churn-expiry-e7-bar', data?.e7p);

        setText('ai-churn-expiry-e30', data?.e30, '0');
        setText('ai-churn-expiry-e30h', data?.e30h, '0');
        setText('ai-churn-expiry-e30p', data?.e30p, '0');
        setBarWidth('ai-churn-expiry-e30-bar', data?.e30p);

        setText('ai-churn-expiry-e45', data?.e45, '0');
        setText('ai-churn-expiry-e45h', data?.e45h, '0');
        setText('ai-churn-expiry-e45p', data?.e45p, '0');
        setBarWidth('ai-churn-expiry-e45-bar', data?.e45p);

        setText('ai-churn-expiry-e90', data?.e90, '0');
        setText('ai-churn-expiry-e90h', data?.e90h, '0');
        setText('ai-churn-expiry-e90p', data?.e90p, '0');
        setBarWidth('ai-churn-expiry-e90-bar', data?.e90p);
    }

    function updateWinBackIntelligence(data) {
        setText('ai-churn-win-back-total-expired', data?.totalExpired, '0');
        setText('ai-churn-win-back-eligible', data?.winBackEligible, '0');
        setText('ai-churn-win-back-already-won', data?.alreadyWonBack, '0');
    }

    function updateWinBackScore(data) {
        setText('ai-churn-win-back-score-high', data?.wbScoreHigh, '0');
        setText('ai-churn-win-back-score-med', data?.wbScoreMed, '0');
        setText('ai-churn-win-back-score-low', data?.wbScoreLow, '0');
        setBarWidth('ai-churn-win-back-score-high-bar', data?.wbHighPct);
        setBarWidth('ai-churn-win-back-score-med-bar', data?.wbMedPct);
        setBarWidth('ai-churn-win-back-score-low-bar', data?.wbLowPct);
    }

    function updateReactivationWindow(data) {
        setText('ai-churn-reactivation-r30', data?.r30, '0');
        setText('ai-churn-reactivation-r60', data?.r60, '0');
        setText('ai-churn-reactivation-r90', data?.r90, '0');
        setText('ai-churn-reactivation-r-old', data?.rOld, '0');
    }

    function setAllSectionsLoading(loading) {
        aiChurnSectionIds.forEach((sectionId) => setSectionLoading(sectionId, loading));
    }

    function applyDashboardPayload(payload) {
        const data = payload && typeof payload === 'object' ? payload : {};
        setSnapshotMeta(data?.snapshot_meta || {});
        updateKpiCards(data?.kpi_cards || {});
        updateModelRegistry(data?.model_performance_registry || {});
        updateProbabilityDistribution(data?.probability_distribution || {});
        updatePipelineMetrics(data?.pipeline_metrics || {});
        updateSubscriptionExpiryRisk(data?.subscription_expiry_risk || {});
        updateWinBackIntelligence(data?.win_back_intelligence || {});
        updateWinBackScore(data?.win_back_score || {});
        updateReactivationWindow(data?.reactivation_window || {});
    }

    async function loadSection(requestId, sectionId, endpoint, filters, onSuccess) {
        if (sectionId) {
            setSectionLoading(sectionId, true);
        }

        try {
            const payload = await fetchJson(buildSectionUrl(endpoint, filters));
            if (requestId !== activeRequestId) {
                return;
            }

            onSuccess(payload?.data || {});
        } finally {
            if (sectionId && requestId === activeRequestId) {
                setSectionLoading(sectionId, false);
            }
        }
    }

    async function loadAiChurnData(filters, options = {}) {
        const searchLoading = Boolean(options?.searchLoading);
        const requestId = ++activeRequestId;
        let ajaxLoaderHiddenAfterFirstPaint = false;
        setFilterButtonsLoading(true, searchLoading);
        setPageStatus('');
        showAjaxLoader();
        setAllSectionsLoading(true);

        const hideLoaderOnFirstPaint = () => {
            if (ajaxLoaderHiddenAfterFirstPaint) {
                return;
            }

            hideAjaxLoader();
            ajaxLoaderHiddenAfterFirstPaint = true;
        };

        try {
            const tasks = [
                (async () => {
                    try {
                        const bundlePayload = await fetchJson(buildSectionUrl(dashboardEndpoint, filters));
                        if (requestId !== activeRequestId) {
                            return;
                        }

                        applyDashboardPayload(bundlePayload?.data || {});
                        hideLoaderOnFirstPaint();
                    } catch (bundleError) {
                        console.error('AI churn dashboard bundle load failed:', bundleError);
                        throw bundleError;
                    }
                })(),
                loadSection(requestId, null, snapshotMetaEndpoint, filters, (data) => {
                    setSnapshotMeta(data);
                    hideLoaderOnFirstPaint();
                }),
                loadSection(requestId, 'ai-churn-section-kpi-cards', kpiCardsEndpoint, filters, (data) => {
                    updateKpiCards(data);
                    hideLoaderOnFirstPaint();
                }),
                loadSection(requestId, 'ai-churn-section-model-registry', modelRegistryEndpoint, filters, (data) => {
                    updateModelRegistry(data);
                    hideLoaderOnFirstPaint();
                }),
                loadSection(requestId, 'ai-churn-section-probability-distribution', probabilityDistributionEndpoint, filters, (data) => {
                    updateProbabilityDistribution(data);
                    hideLoaderOnFirstPaint();
                }),
                loadSection(requestId, 'ai-churn-section-pipeline-metrics', pipelineMetricsEndpoint, filters, (data) => {
                    updatePipelineMetrics(data);
                    hideLoaderOnFirstPaint();
                }),
                loadSection(requestId, 'ai-churn-section-expiry-risk', subscriptionExpiryRiskEndpoint, filters, (data) => {
                    updateSubscriptionExpiryRisk(data);
                    hideLoaderOnFirstPaint();
                }),
                loadSection(requestId, 'ai-churn-section-win-back-intelligence', winBackIntelligenceEndpoint, filters, (data) => {
                    updateWinBackIntelligence(data);
                    hideLoaderOnFirstPaint();
                }),
                loadSection(requestId, 'ai-churn-section-win-back-score', winBackScoreEndpoint, filters, (data) => {
                    updateWinBackScore(data);
                    hideLoaderOnFirstPaint();
                }),
                loadSection(requestId, 'ai-churn-section-reactivation-window', reactivationWindowEndpoint, filters, (data) => {
                    updateReactivationWindow(data);
                    hideLoaderOnFirstPaint();
                }),
            ];

            const results = await Promise.allSettled(tasks);
            if (requestId !== activeRequestId) {
                return;
            }

            const failed = results.find((result) => result.status === 'rejected');
            if (failed?.status === 'rejected') {
                setPageStatus(failed.reason?.message || 'Some AI churn sections failed to load.');
                console.error('AI churn section load failed:', failed.reason);
            }
        } finally {
            if (requestId !== activeRequestId) {
                return;
            }
            hideAjaxLoader();
            setAllSectionsLoading(false);
            setFilterButtonsLoading(false);
        }
    }

    function normalizeOptionEntries(optionsMap, fallbackLabel) {
        if (!optionsMap || typeof optionsMap !== 'object') {
            return [['all', fallbackLabel]];
        }

        const entries = Object.entries(optionsMap);
        return entries.length > 0 ? entries : [['all', fallbackLabel]];
    }

    function populateOptions(selectEl, optionsMap, selectedValue, fallbackLabel) {
        if (!selectEl) {
            return selectedValue;
        }

        const entries = normalizeOptionEntries(optionsMap, fallbackLabel);
        selectEl.innerHTML = '';

        entries.forEach(([value, label]) => {
            const option = document.createElement('option');
            const normalizedValue = String(value ?? '').trim() || 'all';
            const normalizedLabel = String(label ?? '').trim() || fallbackLabel;
            const labelLines = normalizedLabel.split(/\r\n|\r|\n/, 2);
            option.value = normalizedValue;
            option.textContent = normalizedLabel;
            option.dataset.packageLabel = String(labelLines[0] || normalizedLabel).trim();
            option.dataset.packageMeta = String(labelLines[1] || '').trim();
            selectEl.appendChild(option);
        });

        const finalValue = entries.some(([value]) => String(value) === String(selectedValue))
            ? String(selectedValue)
            : 'all';

        selectEl.value = finalValue;
        return finalValue;
    }

    async function refreshFilterOptions(packageModeValue, keepSelectedPackage = true) {
        const selectedPackageBefore = keepSelectedPackage
            ? String(packageFilter?.value || currentFilters.product_plan || 'all')
            : 'all';

        const modeToApply = String(packageModeValue || 'all').trim() || 'all';
        const url = `${filtersEndpoint}?package_mode=${encodeURIComponent(modeToApply)}`;
        const payload = await fetchJson(url, { cacheMode: 'default' });
        const data = payload?.data || {};

        const selectedMode = populateOptions(
            packageModeFilter,
            data.package_modes || {},
            modeToApply,
            'All Mode'
        );
        const selectedPackage = populateOptions(
            packageFilter,
            data.packages || {},
            selectedPackageBefore,
            'All Packages'
        );

        currentFilters.package_mode = selectedMode;
        currentFilters.product_plan = selectedPackage;
        scheduleAiChurnPackageSelectInit();
    }

    const openBtnRisk = document.getElementById('ai-churn-send-campaign-btn');
    const openBtnWinBack = document.getElementById('ai-churn-winback-send-campaign-btn');
    const modal = document.getElementById('ai-churn-send-modal');
    const closeBtn = document.getElementById('ai-churn-send-modal-close');
    const cancelBtn = document.getElementById('ai-churn-cancel-btn');
    const sendBtn = document.getElementById('ai-churn-send-btn');
    const exportBtn = document.getElementById('ai-churn-export-btn');
    const recipientNote = document.getElementById('ai-churn-modal-recipient-note');
    const providerSelect = document.getElementById('ai-churn-provider-select');
    const templateSelect = document.getElementById('ai-churn-template-select');
    const segmentGroup = document.getElementById('ai-churn-segment-group');
    const segmentSelect = document.getElementById('ai-churn-segment-select');
    const periodSelect = document.getElementById('ai-churn-period-select');
    const statusBox = document.getElementById('ai-churn-campaign-status');
    const previewBtn = document.getElementById('ai-churn-template-preview-btn');
    const previewBox = document.getElementById('ai-churn-template-preview');
    const previewTitle = document.getElementById('ai-churn-template-preview-title');
    const previewSubject = document.getElementById('ai-churn-template-preview-subject');
    const previewBody = document.getElementById('ai-churn-template-preview-body');
    const previewCloseBtn = document.getElementById('ai-churn-template-preview-close');

    if ((!openBtnRisk && !openBtnWinBack) || !modal || !sendBtn || !templateSelect || !segmentSelect || !statusBox) return;

    let emailProvider = null;
    let optionsLoaded = false;
    let mailchimpTemplateError = '';
    let campaignMode = 'risk';
    const recipientCache = {};
    const templatePreviewCache = {};
    const templatePreviewEndpointBase = "{{ route('campaign.segment.template.preview', ['templateId' => '__ID__'], false) }}";
    const aiChurnRecipientsEndpoint = "{{ route('campaign.segment.ai-churn.recipients', [], false) }}";
    const aiChurnWinBackRecipientsEndpoint = "{{ route('campaign.segment.ai-churn.win-back.recipients', [], false) }}";
    const aiChurnRecipientsExportEndpoint = "{{ route('campaign.segment.ai-churn.recipients.export', [], false) }}";

    function configureModalForMode(mode) {
        campaignMode = mode === 'winback' ? 'winback' : 'risk';
        if (segmentGroup) {
            segmentGroup.style.display = campaignMode === 'winback' ? 'none' : 'block';
        }
    }

    function setStatus(message, type = 'info') {
        statusBox.className = `campaign-status ${type}`;
        statusBox.textContent = message;
        statusBox.style.display = 'block';
    }

    function setModalVisible(visible) {
        modal.style.display = visible ? 'flex' : 'none';
        if (!visible) {
            statusBox.style.display = 'none';
            hideTemplatePreview(true);
        }
    }

    function hideTemplatePreview(reset = false) {
        if (previewBox) {
            previewBox.style.display = 'none';
        }
        if (!reset) return;
        if (previewTitle) previewTitle.textContent = 'Template Preview';
        if (previewSubject) {
            previewSubject.style.display = 'none';
            previewSubject.textContent = '';
        }
        if (previewBody) {
            previewBody.classList.remove('is-loading', 'is-plain-text');
            previewBody.innerHTML = '';
        }
    }

    function updateTemplatePreviewButtonState() {
        if (!previewBtn) return;
        previewBtn.disabled = String(templateSelect?.value || '').trim() === '';
    }

    function renderTemplatePreview(previewData) {
        if (!previewBox || !previewBody) return;
        const title = String(previewData?.name || 'Template Preview').trim();
        const subject = String(previewData?.subject || '').trim();
        const content = String(previewData?.content || '').trim();

        if (previewTitle) {
            previewTitle.textContent = title || 'Template Preview';
        }

        if (previewSubject) {
            if (subject !== '') {
                previewSubject.style.display = 'block';
                previewSubject.textContent = `Subject: ${subject}`;
            } else {
                previewSubject.style.display = 'none';
                previewSubject.textContent = '';
            }
        }

        previewBody.classList.remove('is-loading', 'is-plain-text');
        previewBody.innerHTML = content || 'No template content available.';
        previewBox.style.display = 'flex';
    }

    async function previewSelectedTemplate() {
        if (mailchimpTemplateError) {
            setStatus(mailchimpTemplateError, 'error');
            return;
        }

        const templateId = String(templateSelect?.value || '').trim();
        if (templateId === '') {
            setStatus('Please choose a template first.', 'error');
            return;
        }

        if (previewBox) previewBox.style.display = 'flex';
        if (previewBody) {
            previewBody.classList.remove('is-plain-text');
            previewBody.classList.add('is-loading');
            previewBody.textContent = 'Loading preview...';
        }
        if (previewSubject) {
            previewSubject.style.display = 'none';
            previewSubject.textContent = '';
        }

        const cacheKey = `email:${templateId}`;
        if (templatePreviewCache[cacheKey]) {
            renderTemplatePreview(templatePreviewCache[cacheKey]);
            return;
        }

        try {
            const providerId = Number(emailProvider?.id || 0);
            const params = new URLSearchParams({ channel: 'email' });
            if (providerId > 0) {
                params.set('provider_id', String(providerId));
            }
            const url = `${templatePreviewEndpointBase.replace('__ID__', encodeURIComponent(templateId))}?${params.toString()}`;
            const response = await fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
            const payload = await response.json().catch(() => ({}));
            if (!response.ok || !payload?.success) {
                throw new Error(payload?.message || 'Failed to load template preview.');
            }

            const previewData = payload?.data || {};
            templatePreviewCache[cacheKey] = previewData;
            renderTemplatePreview(previewData);
        } catch (error) {
            hideTemplatePreview(true);
            setStatus(error?.message || 'Failed to load template preview.', 'error');
        }
    }

    async function fetchRecipientsByFilter(segment, period) {
        const modeKey = campaignMode === 'winback' ? 'winback' : 'risk';
        const key = String(segment || 'high').toLowerCase();
        const periodKey = String(period || 'last_6_months').toLowerCase();
        const cacheKey = `${modeKey}:${key}:${periodKey}`;
        if (recipientCache[cacheKey]) {
            return recipientCache[cacheKey];
        }

        const recipientUrl = modeKey === 'winback'
            ? `${aiChurnWinBackRecipientsEndpoint}?period=${encodeURIComponent(periodKey)}`
            : `${aiChurnRecipientsEndpoint}?segment=${encodeURIComponent(key)}&period=${encodeURIComponent(periodKey)}`;

        const response = await fetch(recipientUrl, {
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
        });
        const payload = await response.json().catch(() => ({}));
        if (!response.ok || !payload?.success) {
            throw new Error(payload?.message || 'Failed to load recipients.');
        }

        const emails = Array.isArray(payload?.data?.emails) ? payload.data.emails : [];
        const entry = {
            emails: emails,
            count: Number(payload?.data?.count || emails.length),
        };
        recipientCache[cacheKey] = entry;
        return entry;
    }

    function buildRecipientsExportUrl() {
        const modeKey = campaignMode === 'winback' ? 'winback' : 'risk';
        const segment = String(segmentSelect?.value || 'high').toLowerCase();
        const period = String(periodSelect?.value || 'last_6_months').toLowerCase();
        const params = new URLSearchParams({
            mode: modeKey,
            period: period,
        });

        if (modeKey !== 'winback') {
            params.set('segment', segment);
        }

        return `${aiChurnRecipientsExportEndpoint}?${params.toString()}`;
    }

    async function updateRecipientNote() {
        if (!recipientNote) return;
        const segment = campaignMode === 'winback'
            ? 'high'
            : String(segmentSelect?.value || 'high').toLowerCase();
        const period = String(periodSelect?.value || 'last_6_months').toLowerCase();
        recipientNote.textContent = 'Recipients: Loading...';
        if (exportBtn) {
            exportBtn.disabled = true;
        }
        try {
            const recipients = await fetchRecipientsByFilter(segment, period);
            const count = Number(recipients.count || 0);
            recipientNote.textContent = `Recipients: ${count}`;
            if (exportBtn) {
                exportBtn.disabled = count <= 0;
            }
        } catch (error) {
            recipientNote.textContent = 'Recipients: 0';
            if (exportBtn) {
                exportBtn.disabled = true;
            }
            setStatus(error?.message || 'Failed to load recipients.', 'error');
        }
    }

    async function loadMailchimpOptions() {
        if (optionsLoaded) return true;

        const response = await fetch("{{ route('campaign.segment.send.options', [], false) }}", {
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
        });
        const payload = await response.json().catch(() => ({}));
        if (!response.ok || !payload?.success) {
            throw new Error(payload?.message || 'Failed to load campaign send options.');
        }

        const templates = Array.isArray(payload?.data?.templates?.email) ? payload.data.templates.email : [];
        const providers = Array.isArray(payload?.data?.providers?.email) ? payload.data.providers.email : [];
        mailchimpTemplateError = String(payload?.mailchimp_error || '').trim();
        emailProvider = providers.find((row) => String(row?.name || '').toLowerCase().includes('mailchimp'))
            || providers.find((row) => Number(row?.id || 0) > 0)
            || null;
        if (providerSelect) {
            providerSelect.innerHTML = '';
            const opt = document.createElement('option');
            opt.value = String(emailProvider?.id || '');
            opt.textContent = String(emailProvider?.name || 'Mailchimp');
            providerSelect.appendChild(opt);
        }

        templateSelect.innerHTML = '<option value="">Select template</option>';
        templateSelect.disabled = false;

        if (mailchimpTemplateError) {
            templateSelect.innerHTML = '';
            const errorOption = document.createElement('option');
            errorOption.value = '';
            errorOption.textContent = `Mailchimp setup invalid - ${mailchimpTemplateError}`;
            errorOption.selected = true;
            errorOption.disabled = true;
            templateSelect.appendChild(errorOption);
            templateSelect.disabled = true;
            updateTemplatePreviewButtonState();
            optionsLoaded = true;
            return true;
        }

        templates.forEach((tpl) => {
            const id = Number(tpl?.id || 0);
            const name = String(tpl?.name || '').trim();
            if (id <= 0 || name === '') return;
            const opt = document.createElement('option');
            opt.value = String(id);
            opt.textContent = name;
            templateSelect.appendChild(opt);
        });
        updateTemplatePreviewButtonState();

        optionsLoaded = true;
        return true;
    }

    async function queueCampaign() {
        if (mailchimpTemplateError) {
            setStatus(mailchimpTemplateError, 'error');
            return;
        }

        const templateId = Number(templateSelect.value || 0);
        const segment = campaignMode === 'winback' ? 'high' : String(segmentSelect.value || 'high');
        const period = String(periodSelect?.value || 'last_6_months');
        if (!emailProvider || Number(emailProvider.id || 0) <= 0) {
            setStatus('Mailchimp provider is not configured.', 'error');
            return;
        }
        if (templateId <= 0) {
            setStatus('Please select a template.', 'error');
            return;
        }

        sendBtn.disabled = true;
        sendBtn.textContent = 'Queuing...';
        setStatus('Fetching recipients...', 'info');

        try {
            const recipientData = await fetchRecipientsByFilter(segment, period);
            const emails = Array.isArray(recipientData?.emails) ? recipientData.emails : [];
            if (emails.length === 0) {
                const message = campaignMode === 'winback'
                    ? 'No valid recipients found for selected period.'
                    : 'No valid recipients found for selected segment.';
                throw new Error(message);
            }

            const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
            const sendResponse = await fetch("{{ route('campaign.send.data', [], false) }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    ...(csrf ? { 'X-CSRF-TOKEN': csrf } : {}),
                },
                body: JSON.stringify({
                    channel: 'email',
                    template_id: templateId,
                    provider_id: Number(emailProvider.id || 0),
                    provider_name: String(emailProvider.name || 'Mailchimp'),
                    emails: emails,
                    sms_cust_ids: [],
                }),
            });

            const sendPayload = await sendResponse.json().catch(() => ({}));
            if (!sendResponse.ok || sendPayload?.success === false) {
                throw new Error(sendPayload?.message || 'Failed to queue campaign.');
            }

            setStatus(`${sendPayload?.message || 'Campaign queued successfully.'} Recipients: ${emails.length}`, 'success');
            setTimeout(() => setModalVisible(false), 1200);
        } catch (error) {
            setStatus(error?.message || 'Failed to queue campaign.', 'error');
        } finally {
            sendBtn.disabled = false;
            sendBtn.textContent = 'Queue Campaign';
        }
    }

    async function openSendCampaignModal(mode) {
        configureModalForMode(mode);
        setModalVisible(true);
        setStatus('Loading Mailchimp options...', 'info');
        try {
            await loadMailchimpOptions();
            await updateRecipientNote();
            setStatus('Ready to queue campaign.', 'info');
        } catch (error) {
            setStatus(error?.message || 'Unable to load options.', 'error');
        }
    }

    openBtnRisk?.addEventListener('click', async function () {
        await openSendCampaignModal('risk');
    });
    openBtnWinBack?.addEventListener('click', async function () {
        await openSendCampaignModal('winback');
    });

    sendBtn.addEventListener('click', queueCampaign);
    segmentSelect.addEventListener('change', function () {
        hideTemplatePreview(true);
        updateRecipientNote();
    });
    periodSelect?.addEventListener('change', function () {
        hideTemplatePreview(true);
        updateRecipientNote();
    });
    exportBtn?.addEventListener('click', function () {
        const exportUrl = buildRecipientsExportUrl();
        window.open(exportUrl, '_blank', 'noopener');
    });
    templateSelect.addEventListener('change', function () {
        hideTemplatePreview(true);
        updateTemplatePreviewButtonState();
    });
    previewBtn?.addEventListener('click', previewSelectedTemplate);
    previewCloseBtn?.addEventListener('click', function () {
        hideTemplatePreview(false);
    });
    closeBtn?.addEventListener('click', () => setModalVisible(false));
    cancelBtn?.addEventListener('click', () => setModalVisible(false));
    modal.addEventListener('click', function (event) {
        if (event.target === modal) setModalVisible(false);
    });

    configureModalForMode('risk');
    hideTemplatePreview(true);
    updateTemplatePreviewButtonState();

    packageModeFilter?.addEventListener('change', async function () {
        const selectedMode = String(packageModeFilter.value || 'all').trim() || 'all';
        currentFilters.package_mode = selectedMode;

        try {
            await refreshFilterOptions(selectedMode, true);
        } catch (error) {
            setPageStatus(error?.message || 'Failed to refresh filter options.');
        }
    });

    searchButton?.addEventListener('click', async function () {
        currentFilters = readFiltersFromUi();
        await loadAiChurnData(currentFilters, { searchLoading: true });
    });

    resetButton?.addEventListener('click', async function () {
        currentFilters = { ...defaultFilters };
        if (dateRangeFilter) {
            dateRangeFilter.value = defaultFilters.date_range;
        }

        try {
            await refreshFilterOptions(defaultFilters.package_mode, false);
            if (packageModeFilter) {
                packageModeFilter.value = defaultFilters.package_mode;
            }
            if (autoRenewFilter) {
                autoRenewFilter.value = defaultFilters.auto_renew;
            }
            if (packageFilter) {
                packageFilter.value = defaultFilters.product_plan;
            }
        } catch (error) {
            setPageStatus(error?.message || 'Failed to reset filter options.');
        }

        currentFilters = readFiltersFromUi();
        await loadAiChurnData(currentFilters);
    });

    async function initializeAiChurnDashboard() {
        if (dateRangeFilter) {
            dateRangeFilter.value = defaultFilters.date_range;
        }

        try {
            await refreshFilterOptions(defaultFilters.package_mode, false);
        } catch (error) {
            setPageStatus(error?.message || 'Failed to load AI churn filters.');
        }

        currentFilters = readFiltersFromUi();
        await loadAiChurnData(currentFilters);
    }

    initializeAiChurnDashboard();
});
</script>
@endpush
</x-filament-panels::page>