{% extends 'base.html.twig' %}

{% block title %}Playground AI Dashboard - Admin{% endblock %}

{% block stylesheets %}
{{ parent() }}
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.5/tinymce.min.js"></script>
<style>
:root {
    --dash-primary: #6366f1;
    --dash-primary-light: #818cf8;
    --dash-primary-dark: #4f46e5;
    --dash-success: #10b981;
    --dash-warning: #f59e0b;
    --dash-danger: #ef4444;
    --dash-info: #3b82f6;
    --dash-bg: #f1f5f9;
    --dash-card: #ffffff;
    --dash-text: #1e293b;
    --dash-text-muted: #64748b;
    --dash-border: #e2e8f0;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--dash-bg);
}

.dash-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 24px;
}

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

.dash-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--dash-text);
}

.dash-subtitle {
    color: var(--dash-text-muted);
    font-size: 0.9rem;
}

.refresh-btn {
    padding: 10px 20px;
    background: var(--dash-primary);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.refresh-btn:hover {
    background: var(--dash-primary-dark);
}

/* Budget Alerts */
.budget-alerts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.budget-card {
    background: var(--dash-card);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--dash-border);
}

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

.budget-label {
    font-size: 0.85rem;
    color: var(--dash-text-muted);
    font-weight: 500;
}

.budget-percentage {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}

.budget-percentage.safe { background: #dcfce7; color: #166534; }
.budget-percentage.warning { background: #fef3c7; color: #92400e; }
.budget-percentage.danger { background: #fee2e2; color: #991b1b; }

.budget-bar {
    height: 8px;
    background: var(--dash-border);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.budget-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.budget-fill.safe { background: var(--dash-success); }
.budget-fill.warning { background: var(--dash-warning); }
.budget-fill.danger { background: var(--dash-danger); }

.budget-values {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
}

.budget-used {
    font-weight: 600;
    color: var(--dash-text);
}

.budget-limit {
    color: var(--dash-text-muted);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--dash-card);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--dash-border);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 12px;
}

.stat-icon.requests { background: #dbeafe; color: #2563eb; }
.stat-icon.tokens { background: #fae8ff; color: #a855f7; }
.stat-icon.cost { background: #dcfce7; color: #16a34a; }
.stat-icon.users { background: #ffedd5; color: #ea580c; }
.stat-icon.latency { background: #e0e7ff; color: #4f46e5; }
.stat-icon.errors { background: #fee2e2; color: #dc2626; }
.stat-icon.mrr { background: #d1fae5; color: #059669; }

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--dash-text);
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--dash-text-muted);
}

.stat-change {
    font-size: 0.8rem;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat-change.up { color: var(--dash-success); }
.stat-change.down { color: var(--dash-danger); }

/* Charts */
.charts-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.chart-card {
    background: var(--dash-card);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--dash-border);
}

.chart-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dash-text);
    margin-bottom: 16px;
}

.chart-container {
    position: relative;
    height: 300px;
}

/* Tables */
.table-card {
    background: var(--dash-card);
    border-radius: 12px;
    border: 1px solid var(--dash-border);
    overflow: hidden;
    margin-bottom: 24px;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--dash-border);
}

.table-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dash-text);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--dash-border);
}

.data-table th {
    background: var(--dash-bg);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table td {
    font-size: 0.9rem;
    color: var(--dash-text);
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table tr:hover td {
    background: var(--dash-bg);
}

/* Tier Badge */
.tier-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.tier-badge.trial { background: #d1fae5; color: #065f46; }
.tier-badge.starter { background: #e0e7ff; color: #4338ca; }
.tier-badge.researcher { background: #dbeafe; color: #1d4ed8; }
.tier-badge.professional { background: #fae8ff; color: #9333ea; }
.tier-badge.institution { background: #fef3c7; color: #b45309; }

/* Trial Stats */
.trial-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.trial-stat-card {
    background: var(--dash-card);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--dash-border);
    text-align: center;
}

.trial-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dash-text);
    margin-bottom: 4px;
}

.trial-stat-label {
    font-size: 0.85rem;
    color: var(--dash-text-muted);
}

.trial-status-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.trial-status-badge.active { background: #dcfce7; color: #166534; }
.trial-status-badge.expired { background: #fee2e2; color: #991b1b; }
.trial-status-badge.inactive { background: #f1f5f9; color: #64748b; }

.trial-usage-bar {
    height: 6px;
    background: var(--dash-border);
    border-radius: 3px;
    overflow: hidden;
    width: 100px;
    display: inline-block;
    margin-right: 8px;
}

.trial-usage-fill {
    height: 100%;
    border-radius: 3px;
}

.trial-conversion-card {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    border: 2px solid #8b5cf6;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

.trial-conversion-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: #5b21b6;
}

.trial-conversion-label {
    font-size: 0.9rem;
    color: #6d28d9;
    font-weight: 500;
}

.trial-conversion-detail {
    font-size: 0.8rem;
    color: #7c3aed;
    margin-top: 4px;
}

@media (max-width: 1200px) {
    .trial-summary-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .trial-summary-grid { grid-template-columns: 1fr; }
}

/* Pricing Cards */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.pricing-card {
    background: var(--dash-card);
    border-radius: 12px;
    padding: 24px;
    border: 2px solid var(--dash-border);
    text-align: center;
}

.pricing-card.recommended {
    border-color: var(--dash-primary);
    position: relative;
}

.pricing-card.recommended::before {
    content: 'Popular';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dash-primary);
    color: white;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.pricing-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dash-text);
    margin-bottom: 8px;
}

.pricing-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dash-primary);
    margin-bottom: 4px;
}

.pricing-price span {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--dash-text-muted);
}

.pricing-credits {
    font-size: 0.9rem;
    color: var(--dash-text-muted);
    margin-bottom: 16px;
}

.pricing-features {
    text-align: left;
    font-size: 0.85rem;
    color: var(--dash-text-muted);
}

.pricing-features li {
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pricing-features li::before {
    content: '✓';
    color: var(--dash-success);
    font-weight: bold;
}

/* Emergency Mode Banner */
.emergency-banner {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border: 2px solid #ef4444;
    border-radius: 12px;
    padding: 16px 24px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.emergency-icon {
    width: 48px;
    height: 48px;
    background: #ef4444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.emergency-text h3 {
    color: #991b1b;
    margin: 0 0 4px 0;
}

.emergency-text p {
    color: #b91c1c;
    margin: 0;
    font-size: 0.9rem;
}

/* Tabs */
.tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 24px;
    background: var(--dash-card);
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--dash-border);
    flex-wrap: wrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.tabs::-webkit-scrollbar {
    height: 4px;
}
.tabs::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

/* Tab groups */
.tab-group {
    display: contents;
}

.tab-group-label {
    display: none;
}

@media (max-width: 1100px) {
    .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 4px;
        padding: 6px;
    }
    .tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 8px 12px;
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .tabs {
        display: none;
    }
    .tabs-mobile-wrapper {
        display: block;
        margin-bottom: 24px;
    }
    .tabs-mobile-select {
        width: 100%;
        padding: 12px 16px;
        font-size: 15px;
        border-radius: 10px;
        border: 1px solid var(--dash-border);
        background: var(--dash-card);
        color: var(--dash-text);
        font-weight: 500;
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
    }
}

@media (min-width: 769px) {
    .tabs-mobile-wrapper {
        display: none;
    }
}

.tab-btn {
    padding: 8px 14px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    color: var(--dash-text-muted);
    transition: all 0.2s;
    font-size: 13px;
}

.tab-btn:hover {
    background: var(--dash-bg);
}

.tab-btn.active {
    background: var(--dash-primary);
    color: white;
}

/* Responsive */
@media (max-width: 1200px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .charts-row { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .budget-alerts { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; }
    .engagement-segments { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════ Engagement Tab ═══════════ */

/* ═══════════ Welcome Email Tab ═══════════ */
.welcome-email-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.welcome-email-editor {
    background: var(--dash-card);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--dash-border);
}
.welcome-email-preview {
    background: var(--dash-card);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--dash-border);
}
.we-form-group {
    margin-bottom: 16px;
}
.we-form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--dash-text);
    margin-bottom: 6px;
}
.we-form-group input[type="text"],
.we-form-group input[type="email"],
.we-form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--dash-border);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--dash-bg);
    color: var(--dash-text);
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.we-form-group input:focus,
.we-form-group textarea:focus {
    outline: none;
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
.we-form-group textarea {
    min-height: 320px;
    resize: vertical;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    direction: ltr;
    text-align: left;
}
.we-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 16px;
}
.we-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}
.we-btn-save {
    background: var(--dash-primary);
    color: white;
}
.we-btn-save:hover { background: #4f46e5; }
.we-btn-preview {
    background: #10b981;
    color: white;
}
.we-btn-preview:hover { background: #059669; }
.we-btn-test {
    background: #f59e0b;
    color: white;
}
.we-btn-test:hover { background: #d97706; }
.we-status {
    font-size: 0.85rem;
    color: var(--dash-text-muted);
    margin-left: 12px;
}
.we-status.success { color: var(--dash-success); }
.we-status.error { color: var(--dash-danger); }
.we-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px 16px;
    background: var(--dash-bg);
    border-radius: 10px;
    border: 1px solid var(--dash-border);
}
.we-toggle {
    position: relative;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}
.we-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.we-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #cbd5e1;
    border-radius: 26px;
    transition: 0.3s;
}
.we-toggle-slider::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}
.we-toggle input:checked + .we-toggle-slider {
    background: var(--dash-success);
}
.we-toggle input:checked + .we-toggle-slider::before {
    transform: translateX(22px);
}
.we-placeholder-help {
    background: var(--dash-bg);
    border: 1px solid var(--dash-border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.we-placeholder-help h4 {
    margin: 0 0 8px;
    font-size: 0.9rem;
    color: var(--dash-text);
}
.we-placeholder-help code {
    display: inline-block;
    background: rgba(99,102,241,0.1);
    color: var(--dash-primary);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    margin: 2px 4px 2px 0;
}
.we-preview-frame {
    width: 100%;
    min-height: 500px;
    border: 1px solid var(--dash-border);
    border-radius: 8px;
    background: white;
}
.we-test-row {
    display: flex;
    gap: 10px;
    align-items: end;
    margin-top: 16px;
    padding: 16px;
    background: var(--dash-bg);
    border-radius: 10px;
    border: 1px solid var(--dash-border);
}
.we-test-row .we-form-group {
    margin-bottom: 0;
    flex: 1;
}
.we-updated-info {
    font-size: 0.8rem;
    color: var(--dash-text-muted);
}
@media (max-width: 1200px) {
    .welcome-email-container { grid-template-columns: 1fr; }
}

.engagement-health {
    background: var(--dash-card);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
    text-align: center;
    border: 1px solid var(--dash-border);
}
.health-ring-wrapper {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto 16px;
}
.health-ring-wrapper svg {
    transform: rotate(-90deg);
}
.health-ring-bg { stroke: #e2e8f0; fill: none; stroke-width: 12; }
.health-ring-fg { fill: none; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 1s ease, stroke 0.5s; }
.health-ring-text {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 2.2rem; font-weight: 700; color: var(--dash-text);
}
.health-ring-text span { font-size: 1rem; font-weight: 400; color: var(--dash-text-muted); }
.health-label { font-size: 1.1rem; font-weight: 600; color: var(--dash-text); margin-bottom: 4px; }
.health-sublabel { font-size: 0.85rem; color: var(--dash-text-muted); }

.engagement-segments {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.segment-card {
    background: var(--dash-card);
    border-radius: 12px;
    padding: 20px;
    border: 2px solid var(--dash-border);
    text-align: center;
    transition: transform 0.2s, border-color 0.2s;
    cursor: default;
}
.segment-card:hover { transform: translateY(-2px); }
.segment-card.dormant { border-color: #ef4444; }
.segment-card.at_risk { border-color: #f59e0b; }
.segment-card.engaged { border-color: #10b981; }
.segment-card.power { border-color: #6366f1; }
.segment-icon { font-size: 2rem; margin-bottom: 8px; }
.segment-count { font-size: 2rem; font-weight: 700; }
.segment-card.dormant .segment-count { color: #ef4444; }
.segment-card.at_risk .segment-count { color: #f59e0b; }
.segment-card.engaged .segment-count { color: #10b981; }
.segment-card.power .segment-count { color: #6366f1; }
.segment-label { font-size: 0.85rem; color: var(--dash-text-muted); margin-top: 4px; }
.segment-desc { font-size: 0.75rem; color: var(--dash-text-muted); margin-top: 6px; font-style: italic; }

/* Retention Alerts */
.retention-alerts {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
}
.retention-alerts.critical {
    background: linear-gradient(135deg, #fef2f2, #fecaca);
    border-color: #ef4444;
}
.retention-alert-header {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.05rem; font-weight: 600; margin-bottom: 12px;
}
.retention-alerts.critical .retention-alert-header { color: #991b1b; }
.retention-alert-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    font-size: 0.9rem;
}
.retention-alert-item:last-child { border-bottom: none; }
.retention-alert-user { font-weight: 600; color: var(--dash-text); }
.retention-alert-detail { color: var(--dash-text-muted); font-size: 0.8rem; }

/* Subscriber Engagement Table */
.risk-badge {
    padding: 4px 10px; border-radius: 20px; font-size: 0.75rem;
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
    display: inline-block;
}
.risk-badge.dormant  { background: #fef2f2; color: #dc2626; }
.risk-badge.at_risk  { background: #fffbeb; color: #d97706; }
.risk-badge.engaged  { background: #ecfdf5; color: #059669; }
.risk-badge.power    { background: #eef2ff; color: #4f46e5; }

.utilization-mini {
    display: flex; align-items: center; gap: 8px;
}
.util-bar {
    width: 60px; height: 6px; background: #e2e8f0;
    border-radius: 3px; overflow: hidden;
}
.util-fill { height: 100%; border-radius: 3px; transition: width 0.5s; }

.engagement-suggestion {
    background: var(--dash-card);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid var(--dash-border);
}
.suggestion-header {
    font-size: 1.1rem; font-weight: 600; margin-bottom: 16px; color: var(--dash-text);
    display: flex; align-items: center; gap: 8px;
}
.suggestion-list { list-style: none; padding: 0; }
.suggestion-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--dash-border);
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 0.9rem; color: var(--dash-text);
}
.suggestion-list li:last-child { border-bottom: none; }
.suggestion-icon { flex-shrink: 0; font-size: 1.1rem; line-height: 1.4; }

/* ═══════════ OCR Tab ═══════════ */
.ocr-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.ocr-summary-card {
    background: var(--dash-card);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--dash-border);
    text-align: center;
}
.ocr-summary-card .ocr-val {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--dash-text);
}
.ocr-summary-card .ocr-lbl {
    font-size: 0.85rem;
    color: var(--dash-text-muted);
    margin-top: 4px;
}
.ocr-period-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.ocr-period-card {
    background: var(--dash-card);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--dash-border);
}
.ocr-period-card h4 {
    margin: 0 0 12px;
    font-size: 0.95rem;
    color: var(--dash-primary);
}
.ocr-period-card .ocr-period-row-inner {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 0.9rem;
}
.ocr-period-card .ocr-period-row-inner span:first-child {
    color: var(--dash-text-muted);
}
.ocr-period-card .ocr-period-row-inner span:last-child {
    font-weight: 600;
    color: var(--dash-text);
}
.ocr-finance-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
.ocr-finance-card {
    background: var(--dash-card);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--dash-border);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ocr-finance-card .ocr-money {
    font-size: 2rem;
    font-weight: 700;
}
.ocr-finance-card .ocr-money.cost { color: #ef4444; }
.ocr-finance-card .ocr-money.revenue { color: #10b981; }
.ocr-finance-card .ocr-money-lbl {
    font-size: 0.85rem;
    color: var(--dash-text-muted);
    margin-top: 4px;
}
@media (max-width: 1200px) {
    .ocr-summary-grid { grid-template-columns: repeat(2, 1fr); }
    .ocr-period-row { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .ocr-summary-grid { grid-template-columns: 1fr; }
    .ocr-finance-row { grid-template-columns: 1fr; }
}
</style>
{% endblock %}

{% block body %}
<div class="dash-container">
    <!-- Header -->
    <div class="dash-header">
        <div>
            <h1 class="dash-title">🤖 Playground AI Dashboard</h1>
            <p class="dash-subtitle">Monitor usage, costs, and performance in real-time</p>
        </div>
        <div style="display:flex;align-items:center;gap:12px;">
            <a href="/jim19ud83/newsletters" style="display:inline-flex;align-items:center;gap:6px;padding:10px 18px;background:#7c3aed;color:white;border-radius:10px;text-decoration:none;font-size:14px;font-weight:500;transition:background 0.2s;" onmouseover="this.style.background='#6d28d9'" onmouseout="this.style.background='#7c3aed'">
                📧 Newsletter Dashboard
            </a>
            <button class="refresh-btn" onclick="refreshData()">
                <i class="fa fa-refresh"></i> Refresh
            </button>
        </div>
    </div>

    {% if stats.emergency_mode %}
    <!-- Emergency Mode Banner -->
    <div class="emergency-banner">
        <div class="emergency-icon">⚠️</div>
        <div class="emergency-text">
            <h3>Emergency Mode Active</h3>
            <p>Daily budget exceeded. Starter tier users are temporarily restricted.</p>
        </div>
    </div>
    {% endif %}

    <!-- Budget Alerts -->
    <div class="budget-alerts">
        <div class="budget-card">
            <div class="budget-header">
                <span class="budget-label">Daily Budget</span>
                <span class="budget-percentage {{ stats.budgets.daily.percentage < 70 ? 'safe' : (stats.budgets.daily.percentage < 90 ? 'warning' : 'danger') }}">
                    {{ stats.budgets.daily.percentage|round(1) }}%
                </span>
            </div>
            <div class="budget-bar">
                <div class="budget-fill {{ stats.budgets.daily.percentage < 70 ? 'safe' : (stats.budgets.daily.percentage < 90 ? 'warning' : 'danger') }}" 
                     style="width: {{ min(stats.budgets.daily.percentage, 100) }}%"></div>
            </div>
            <div class="budget-values">
                <span class="budget-used">${{ stats.budgets.daily.used|number_format(2) }}</span>
                <span class="budget-limit">of ${{ stats.budgets.daily.limit|number_format(2) }}</span>
            </div>
        </div>

        <div class="budget-card">
            <div class="budget-header">
                <span class="budget-label">Weekly Budget</span>
                <span class="budget-percentage {{ stats.budgets.weekly.percentage < 70 ? 'safe' : (stats.budgets.weekly.percentage < 90 ? 'warning' : 'danger') }}">
                    {{ stats.budgets.weekly.percentage|round(1) }}%
                </span>
            </div>
            <div class="budget-bar">
                <div class="budget-fill {{ stats.budgets.weekly.percentage < 70 ? 'safe' : (stats.budgets.weekly.percentage < 90 ? 'warning' : 'danger') }}" 
                     style="width: {{ min(stats.budgets.weekly.percentage, 100) }}%"></div>
            </div>
            <div class="budget-values">
                <span class="budget-used">${{ stats.budgets.weekly.used|number_format(2) }}</span>
                <span class="budget-limit">of ${{ stats.budgets.weekly.limit|number_format(2) }}</span>
            </div>
        </div>

        <div class="budget-card">
            <div class="budget-header">
                <span class="budget-label">Monthly Budget</span>
                <span class="budget-percentage {{ stats.budgets.monthly.percentage < 70 ? 'safe' : (stats.budgets.monthly.percentage < 90 ? 'warning' : 'danger') }}">
                    {{ stats.budgets.monthly.percentage|round(1) }}%
                </span>
            </div>
            <div class="budget-bar">
                <div class="budget-fill {{ stats.budgets.monthly.percentage < 70 ? 'safe' : (stats.budgets.monthly.percentage < 90 ? 'warning' : 'danger') }}" 
                     style="width: {{ min(stats.budgets.monthly.percentage, 100) }}%"></div>
            </div>
            <div class="budget-values">
                <span class="budget-used">${{ stats.budgets.monthly.used|number_format(2) }}</span>
                <span class="budget-limit">of ${{ stats.budgets.monthly.limit|number_format(2) }}</span>
            </div>
        </div>
    </div>

    <!-- Mobile Tab Dropdown -->
    <div class="tabs-mobile-wrapper">
        <select class="tabs-mobile-select" id="tabsMobileSelect" onchange="switchTabMobile(this.value)">
            <optgroup label="📊 Analytics">
                <option value="overview">Overview</option>
                <option value="usage">Usage Details</option>
                <option value="engagement">Engagement</option>
                <option value="search-ctr">🔍 Search CTR</option>
            </optgroup>
            <optgroup label="👥 Users & Subscriptions">
                <option value="users">Top Users</option>
                <option value="trial">Trial Users</option>
                <option value="registered-users">👥 All Users</option>
                <option value="pricing">Pricing & Tiers</option>
                <option value="subscriptions">💳 Manage Subscriptions</option>
            </optgroup>
            <optgroup label="🤖 AI Services">
                <option value="ocr">OCR</option>
                <option value="ai-detection">AI Detection</option>
            </optgroup>
            <optgroup label="📧 Communications">
                <option value="welcome">Welcome Email</option>
                <option value="welcome-chat">💬 Welcome Chat</option>
                <option value="notifications">🔔 Notifications</option>
                <option value="follow-emails">📬 Follow Emails</option>
                <option value="csat">⭐ CSAT</option>
                <option value="research-chat-dsat">👎 Research Chat DSAT</option>
            </optgroup>
            <optgroup label="⚙️ System">
                <option value="settings">Settings</option>
                <option value="errors">Errors</option>
            </optgroup>
        </select>
    </div>

    <!-- Desktop Tabs -->
    <div class="tabs">
        <button class="tab-btn active" data-tab="overview">📊 Overview</button>
        <button class="tab-btn" data-tab="usage">Usage</button>
        <button class="tab-btn" data-tab="engagement">Engagement</button>
        <span style="border-left:1px solid #e2e8f0; margin:0 4px;"></span>
        <button class="tab-btn" data-tab="users">Top Users</button>
        <button class="tab-btn" data-tab="trial">Trial</button>
        <button class="tab-btn" data-tab="registered-users" style="background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe;">👥 Users</button>
        <button class="tab-btn" data-tab="pricing">Pricing</button>
        <button class="tab-btn" data-tab="subscriptions" style="background:#dcfce7; color:#166534; border:1px solid #86efac;">💳 Subs</button>
        <span style="border-left:1px solid #e2e8f0; margin:0 4px;"></span>
        <button class="tab-btn" data-tab="ocr">OCR</button>
        <button class="tab-btn" data-tab="ai-detection">AI</button>
        <span style="border-left:1px solid #e2e8f0; margin:0 4px;"></span>
        <button class="tab-btn" data-tab="welcome">Email</button>
        <button class="tab-btn" data-tab="welcome-chat" style="background:#d1fae5; color:#065f46; border:1px solid #6ee7b7;">💬 Chat</button>
        <button class="tab-btn" data-tab="search-ctr" style="background:#fef3c7; color:#92400e; border:1px solid #fcd34d;">🔍 CTR</button>
        <button class="tab-btn" data-tab="notifications" style="background:#fef3c7; color:#7c3aed; border:1px solid #c4b5fd;">🔔</button>
        <button class="tab-btn" data-tab="csat" style="background:#fef9c3; color:#854d0e; border:1px solid #fde047;">⭐</button>
        <button class="tab-btn" data-tab="research-chat-dsat" style="background:#fee2e2; color:#dc2626; border:1px solid #fca5a5;">👎 DSAT</button>
        <button class="tab-btn" data-tab="follow-emails" style="background:#ede9fe; color:#6d28d9; border:1px solid #c4b5fd;">📬</button>
        <span style="border-left:1px solid #e2e8f0; margin:0 4px;"></span>
        <button class="tab-btn" data-tab="settings">⚙️</button>
        <button class="tab-btn" data-tab="errors">⚠️</button>
        <a href="{{ path('admin_newsletters') }}" class="tab-btn" style="text-decoration:none; background:#fdf2f8; color:#9333ea; border:1px solid #d8b4fe;">📧</a>
        <a href="{{ path('admin_blog_index') }}" class="tab-btn" style="text-decoration:none; background:#f0fdf4; color:#065f46; border:1px solid #bbf7d0;">📝</a>
    </div>

    <!-- Overview Tab -->
    <div class="tab-content" id="tab-overview">
        <!-- Stats Grid -->
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-icon requests"><i class="fa fa-bolt"></i></div>
                <div class="stat-value" id="stat-requests-today">{{ stats.today.total_requests|default(0)|number_format }}</div>
                <div class="stat-label">Requests Today</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon tokens"><i class="fa fa-code"></i></div>
                <div class="stat-value" id="stat-tokens-today">{{ ((stats.today.total_tokens|default(0)) / 1000)|number_format(1) }}K</div>
                <div class="stat-label">Tokens Today</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon cost"><i class="fa fa-dollar"></i></div>
                <div class="stat-value" id="stat-cost-today">${{ stats.today.total_cost|default(0)|number_format(2) }}</div>
                <div class="stat-label">Cost Today</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon users"><i class="fa fa-users"></i></div>
                <div class="stat-value" id="stat-users-today">{{ stats.today.unique_users|default(0)|number_format }}</div>
                <div class="stat-label">Active Users Today</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon latency"><i class="fa fa-clock-o"></i></div>
                <div class="stat-value" id="stat-latency">{{ (stats.today.avg_latency|default(0) / 1000)|number_format(2) }}s</div>
                <div class="stat-label">Avg Latency</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon errors"><i class="fa fa-exclamation-triangle"></i></div>
                <div class="stat-value" id="stat-errors">{{ stats.today.error_count|default(0)|number_format }}</div>
                <div class="stat-label">Errors Today</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon mrr"><i class="fa fa-line-chart"></i></div>
                <div class="stat-value" id="stat-mrr">${{ stats.mrr.total_mrr|default(0)|number_format(0) }}</div>
                <div class="stat-label">Monthly Revenue (MRR)</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon cost"><i class="fa fa-calculator"></i></div>
                <div class="stat-value" id="stat-profit">
                    {% set profit = (stats.mrr.total_mrr|default(0)) - (stats.month.total_cost|default(0)) %}
                    ${{ profit|number_format(0) }}
                </div>
                <div class="stat-label">Est. Monthly Profit</div>
            </div>
        </div>

        <!-- Charts -->
        <div class="charts-row">
            <div class="chart-card">
                <h3 class="chart-title">Usage Trend (Last 30 Days)</h3>
                <div class="chart-container">
                    <canvas id="trendChart"></canvas>
                </div>
            </div>
            <div class="chart-card">
                <h3 class="chart-title">Cost by Model</h3>
                <div class="chart-container">
                    <canvas id="modelChart"></canvas>
                </div>
            </div>
        </div>

        <div class="charts-row">
            <div class="chart-card">
                <h3 class="chart-title">Today's Usage by Hour</h3>
                <div class="chart-container">
                    <canvas id="hourlyChart"></canvas>
                </div>
            </div>
            <div class="chart-card">
                <h3 class="chart-title">Operations Breakdown</h3>
                <div class="chart-container">
                    <canvas id="operationsChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Usage Details Tab -->
    <div class="tab-content" id="tab-usage" style="display: none;">
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-icon requests"><i class="fa fa-calendar"></i></div>
                <div class="stat-value">{{ stats.month.total_requests|default(0)|number_format }}</div>
                <div class="stat-label">Requests This Month</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon tokens"><i class="fa fa-code"></i></div>
                <div class="stat-value">{{ ((stats.month.total_tokens|default(0)) / 1000000)|number_format(2) }}M</div>
                <div class="stat-label">Tokens This Month</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon cost"><i class="fa fa-dollar"></i></div>
                <div class="stat-value">${{ stats.month.total_cost|default(0)|number_format(2) }}</div>
                <div class="stat-label">Cost This Month</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon users"><i class="fa fa-user"></i></div>
                <div class="stat-value">{{ stats.month.unique_users|default(0)|number_format }}</div>
                <div class="stat-label">Unique Users This Month</div>
            </div>
        </div>

        <!-- Operations Table -->
        <div class="table-card">
            <div class="table-header">
                <h3 class="table-title">Operations Breakdown (This Month)</h3>
            </div>
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Operation</th>
                        <th>Count</th>
                        <th>Tokens</th>
                        <th>Cost</th>
                        <th>Avg Latency</th>
                    </tr>
                </thead>
                <tbody>
                    {% for op in stats.by_operation %}
                    <tr>
                        <td><strong>{{ op.operation_type }}</strong></td>
                        <td>{{ op.count|number_format }}</td>
                        <td>{{ (op.tokens / 1000)|number_format(1) }}K</td>
                        <td>${{ op.cost|number_format(4) }}</td>
                        <td>{{ (op.avg_latency / 1000)|number_format(2) }}s</td>
                    </tr>
                    {% else %}
                    <tr><td colspan="5" style="text-align: center; color: var(--dash-text-muted);">No data yet</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Models Table -->
        <div class="table-card">
            <div class="table-header">
                <h3 class="table-title">Model Usage (This Month)</h3>
            </div>
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Model</th>
                        <th>Requests</th>
                        <th>Input Tokens</th>
                        <th>Output Tokens</th>
                        <th>Cost</th>
                        <th>Avg Latency</th>
                    </tr>
                </thead>
                <tbody>
                    {% for model in stats.by_model %}
                    <tr>
                        <td><strong>{{ model.model_used }}</strong></td>
                        <td>{{ model.count|number_format }}</td>
                        <td>{{ (model.tokens_input / 1000)|number_format(1) }}K</td>
                        <td>{{ (model.tokens_output / 1000)|number_format(1) }}K</td>
                        <td>${{ model.cost|number_format(4) }}</td>
                        <td>{{ (model.avg_latency / 1000)|number_format(2) }}s</td>
                    </tr>
                    {% else %}
                    <tr><td colspan="6" style="text-align: center; color: var(--dash-text-muted);">No data yet</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Top Users Tab -->
    <div class="tab-content" id="tab-users" style="display: none;">
        <div class="table-card">
            <div class="table-header">
                <h3 class="table-title">Top Users by Cost (This Month)</h3>
            </div>
            <table class="data-table">
                <thead>
                    <tr>
                        <th>User</th>
                        <th>Email</th>
                        <th>Requests</th>
                        <th>Tokens</th>
                        <th>Cost</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in stats.top_users %}
                    <tr>
                        <td><strong>{{ user.username }}</strong></td>
                        <td>{{ user.email }}</td>
                        <td>{{ user.request_count|number_format }}</td>
                        <td>{{ (user.total_tokens / 1000)|number_format(1) }}K</td>
                        <td>${{ user.total_cost|number_format(4) }}</td>
                    </tr>
                    {% else %}
                    <tr><td colspan="5" style="text-align: center; color: var(--dash-text-muted);">No data yet</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Subscription Stats -->
        <div class="table-card">
            <div class="table-header">
                <h3 class="table-title">Subscription Statistics</h3>
            </div>
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Tier</th>
                        <th>Users</th>
                        <th>Avg Credits Used</th>
                        <th>Total Credits Used</th>
                    </tr>
                </thead>
                <tbody>
                    {% for tier in stats.subscription_stats %}
                    <tr>
                        <td><span class="tier-badge {{ tier.tier }}">{{ tier.tier|capitalize }}</span></td>
                        <td>{{ tier.user_count|number_format }}</td>
                        <td>{{ tier.avg_used_credits|number_format(0) }}</td>
                        <td>{{ tier.total_used_credits|number_format }}</td>
                    </tr>
                    {% else %}
                    <tr><td colspan="4" style="text-align: center; color: var(--dash-text-muted);">No subscriptions yet</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Trial Users Tab -->
    <div class="tab-content" id="tab-trial" style="display: none;">
        {% set trial = stats.trial_stats %}

        <!-- Trial Aggregation Cards -->
        <div class="trial-summary-grid">
            <div class="trial-stat-card">
                <div class="trial-stat-value" style="color: var(--dash-primary);">{{ trial.total_trials|default(0)|number_format }}</div>
                <div class="trial-stat-label">Total Trial Activations</div>
            </div>
            <div class="trial-stat-card">
                <div class="trial-stat-value" style="color: var(--dash-success);">{{ trial.active_trials|default(0)|number_format }}</div>
                <div class="trial-stat-label">Currently Active</div>
            </div>
            <div class="trial-stat-card">
                <div class="trial-stat-value" style="color: var(--dash-danger);">{{ trial.expired_trials|default(0)|number_format }}</div>
                <div class="trial-stat-label">Expired</div>
            </div>
            <div class="trial-stat-card">
                <div class="trial-stat-value" style="color: var(--dash-info);">{{ trial.total_credits_used|default(0)|number_format }}</div>
                <div class="trial-stat-label">Total Credits Consumed</div>
            </div>
        </div>

        <!-- Conversion Rate Card -->
        <div class="trial-conversion-card">
            <div>
                <div class="trial-conversion-value">{{ trial.conversion_rate|default(0) }}%</div>
                <div class="trial-conversion-label">Trial → Paid Conversion Rate</div>
            </div>
            <div>
                <div class="trial-conversion-detail">
                    <strong>{{ trial.converted_users|default(0) }}</strong> out of <strong>{{ trial.total_trials|default(0) }}</strong> trial users upgraded to a paid plan
                </div>
                <div class="trial-conversion-detail" style="margin-top: 8px;">
                    Avg credits used per trial: <strong>{{ trial.avg_credits_used|default(0)|number_format(1) }}</strong> / 100 &nbsp;|&nbsp;
                    Avg remaining: <strong>{{ trial.avg_credits_remaining|default(0)|number_format(1) }}</strong>
                </div>
            </div>
        </div>

        <!-- Trial Usage Summary -->
        <div class="stats-grid" style="grid-template-columns: repeat(3, 1fr);">
            <div class="stat-card">
                <div class="stat-icon users"><i class="fa fa-user-plus"></i></div>
                <div class="stat-value">{{ trial.avg_credits_used|default(0)|number_format(1) }}</div>
                <div class="stat-label">Avg Credits Used (of 100)</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon cost"><i class="fa fa-dollar"></i></div>
                <div class="stat-value">${{ (trial.total_credits_used|default(0) * 0.003)|number_format(2) }}</div>
                <div class="stat-label">Est. Total Trial Cost</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon mrr"><i class="fa fa-exchange"></i></div>
                <div class="stat-value">{{ trial.conversion_rate|default(0) }}%</div>
                <div class="stat-label">Conversion Rate</div>
            </div>
        </div>

        <!-- Trial Activations Trend Chart -->
        <div class="chart-card" style="margin-bottom: 24px;">
            <h3 class="chart-title">📈 Trial Activations (Last 30 Days)</h3>
            <div class="chart-container">
                <canvas id="trialTrendChart"></canvas>
            </div>
        </div>

        <!-- Trial Users List -->
        <div class="table-card">
            <div class="table-header">
                <h3 class="table-title">🧪 Trial Users List</h3>
                <span style="font-size: 0.85rem; color: var(--dash-text-muted);" id="trial-users-count">Loading...</span>
            </div>
            <table class="data-table" id="trial-users-table">
                <thead>
                    <tr>
                        <th>User</th>
                        <th>Email</th>
                        <th>Status</th>
                        <th>Credits Used</th>
                        <th>Usage</th>
                        <th>Requests</th>
                        <th>Cost</th>
                        <th>Activated</th>
                        <th>Expires</th>
                        <th>Last Active</th>
                    </tr>
                </thead>
                <tbody id="trial-users-body">
                    <tr><td colspan="10" style="text-align: center; color: var(--dash-text-muted);">Loading trial users...</td></tr>
                </tbody>
            </table>
        </div>

        <!-- Trial Operation Breakdown -->
        <div class="table-card">
            <div class="table-header">
                <h3 class="table-title">Trial Users — Operations Breakdown</h3>
            </div>
            <table class="data-table" id="trial-ops-table">
                <thead>
                    <tr>
                        <th>Operation</th>
                        <th>Count</th>
                        <th>Tokens</th>
                        <th>Cost</th>
                    </tr>
                </thead>
                <tbody id="trial-ops-body">
                    <tr><td colspan="4" style="text-align: center; color: var(--dash-text-muted);">Loading...</td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- ═══════════ Engagement Tab ═══════════ -->
    <div class="tab-content" id="tab-engagement" style="display: none;">

        <!-- Health Score Ring -->
        <div class="engagement-health">
            <div class="health-ring-wrapper">
                <svg width="160" height="160" viewBox="0 0 160 160">
                    <circle class="health-ring-bg" cx="80" cy="80" r="68"/>
                    <circle class="health-ring-fg" id="healthRing" cx="80" cy="80" r="68"
                            stroke-dasharray="427.3" stroke-dashoffset="427.3"/>
                </svg>
                <div class="health-ring-text" id="healthScoreText">—<span>%</span></div>
            </div>
            <div class="health-label">Subscriber Health Score</div>
            <div class="health-sublabel">% of active subscribers who are Engaged or Power users</div>
        </div>

        <!-- Segment Cards -->
        <div class="engagement-segments">
            <div class="segment-card dormant" id="seg-dormant">
                <div class="segment-icon">💤</div>
                <div class="segment-count" id="seg-dormant-n">—</div>
                <div class="segment-label">Dormant</div>
                <div class="segment-desc">Signed up 24 h+ ago, zero usage</div>
            </div>
            <div class="segment-card at_risk" id="seg-at_risk">
                <div class="segment-icon">⚠️</div>
                <div class="segment-count" id="seg-at_risk-n">—</div>
                <div class="segment-label">At Risk</div>
                <div class="segment-desc">&lt; 10 % credits used or 7+ days inactive</div>
            </div>
            <div class="segment-card engaged" id="seg-engaged">
                <div class="segment-icon">✅</div>
                <div class="segment-count" id="seg-engaged-n">—</div>
                <div class="segment-label">Engaged</div>
                <div class="segment-desc">10–60 % credits used, active in 7 days</div>
            </div>
            <div class="segment-card power" id="seg-power">
                <div class="segment-icon">🚀</div>
                <div class="segment-count" id="seg-power-n">—</div>
                <div class="segment-label">Power Users</div>
                <div class="segment-desc">&gt; 60 % credits used, active in 3 days</div>
            </div>
        </div>

        <!-- Retention Alerts (populated by JS) -->
        <div id="retention-alerts-container"></div>

        <!-- Engagement Suggestions (always visible) -->
        <div class="engagement-suggestion">
            <div class="suggestion-header">💡 Retention Strategies</div>
            <ul class="suggestion-list" id="engagement-suggestions">
                <li>
                    <span class="suggestion-icon">📧</span>
                    <div><strong>Welcome email sequence</strong> — Send a "Getting Started" guide with sample operations 24 h after sign-up if usage is still zero. This is the #1 lever for dormant users.</div>
                </li>
                <li>
                    <span class="suggestion-icon">🎁</span>
                    <div><strong>Bonus credits nudge</strong> — Award 20 bonus credits to dormant users with a personal message: "We noticed you haven't tried the playground yet — here are 20 extra credits on us!"</div>
                </li>
                <li>
                    <span class="suggestion-icon">🔔</span>
                    <div><strong>In-app prompt</strong> — Show a dismissible "Try it now" tooltip on the playground page for users with zero usage, highlighting the easiest operation (Ask AI).</div>
                </li>
                <li>
                    <span class="suggestion-icon">📊</span>
                    <div><strong>Weekly digest</strong> — Send at-risk users a usage report: "You used 5 of 500 credits this month. Here's what others are doing…" — social proof drives activation.</div>
                </li>
                <li>
                    <span class="suggestion-icon">⏰</span>
                    <div><strong>Expiry reminder</strong> — For trial users, send a "3 days left" reminder with their unused credit count to create urgency.</div>
                </li>
            </ul>
        </div>

        <!-- Subscriber Engagement Table -->
        <div class="table-card">
            <div class="table-header">
                <h3 class="table-title">📋 All Subscribers — Engagement Details</h3>
                <span style="font-size: 0.85rem; color: var(--dash-text-muted);" id="engagement-count">Loading...</span>
            </div>
            <table class="data-table" id="engagement-table">
                <thead>
                    <tr>
                        <th>User</th>
                        <th>Tier</th>
                        <th>Risk</th>
                        <th>Credits Used</th>
                        <th>Utilization</th>
                        <th>Requests</th>
                        <th>Operations</th>
                        <th>Days Since Signup</th>
                        <th>Days Inactive</th>
                        <th>Last Activity</th>
                    </tr>
                </thead>
                <tbody id="engagement-body">
                    <tr><td colspan="10" style="text-align: center; color: var(--dash-text-muted);">Loading engagement data...</td></tr>
                </tbody>
            </table>
        </div>

        <!-- Per-Tier Breakdown -->
        <div class="table-card">
            <div class="table-header">
                <h3 class="table-title">Engagement by Tier</h3>
            </div>
            <table class="data-table" id="tier-engagement-table">
                <thead>
                    <tr>
                        <th>Tier</th>
                        <th>Total</th>
                        <th>💤 Dormant</th>
                        <th>⚠️ At Risk</th>
                        <th>✅ Engaged</th>
                        <th>🚀 Power</th>
                    </tr>
                </thead>
                <tbody id="tier-engagement-body">
                    <tr><td colspan="6" style="text-align: center; color: var(--dash-text-muted);">Loading...</td></tr>
                </tbody>
            </table>
        </div>
    </div>

                </thead>
                <tbody id="tier-engagement-body">
                    <tr><td colspan="6" style="text-align: center; color: var(--dash-text-muted);">Loading...</td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Welcome Email Tab -->
    <div class="tab-content" id="tab-welcome" style="display: none;">

        <!-- Toggle & Status -->
        <div class="we-toggle-row">
            <label class="we-toggle">
                <input type="checkbox" id="we-active-toggle" {{ welcome_template and welcome_template.isActive ? 'checked' : '' }}>
                <span class="we-toggle-slider"></span>
            </label>
            <div>
                <strong>Auto-send on registration</strong>
                <div class="we-updated-info" id="we-updated-info">
                    {% if welcome_template and welcome_template.updatedAt %}
                        Last updated: {{ welcome_template.updatedAt|date('Y-m-d H:i') }}
                    {% else %}
                        Not yet configured
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="welcome-email-container">
            <!-- Editor Column -->
            <div class="welcome-email-editor">
                <h3 style="margin:0 0 16px;font-size:1.1rem;color:var(--dash-text);">📧 Template Editor</h3>

                <div class="we-placeholder-help">
                    <h4>Available Placeholders</h4>
                    <code>{{ '{{firstName}}' }}</code>
                    <code>{{ '{{lastName}}' }}</code>
                    <code>{{ '{{playgroundUrl}}' }}</code>
                </div>

                <div class="we-form-group">
                    <label for="we-subject">Subject Line</label>
                    <input type="text" id="we-subject" dir="rtl" 
                           value=""
                           placeholder="مرحباً - اكتشف أدوات الذكاء الاصطناعي">
                </div>

                <div class="we-form-group">
                    <label for="we-body">Email Body (Visual Editor)</label>
                    <textarea id="we-body" placeholder="<h2>مرحباً ...</h2>"></textarea>
                </div>

                <div class="we-actions">
                    <button class="we-btn we-btn-save" onclick="saveWelcomeTemplate()">
                        <i class="fa fa-save"></i> Save Template
                    </button>
                    <button class="we-btn we-btn-preview" onclick="previewWelcomeEmail()">
                        <i class="fa fa-eye"></i> Preview
                    </button>
                    <span class="we-status" id="we-save-status"></span>
                </div>

                <!-- Test Send -->
                <div class="we-test-row">
                    <div class="we-form-group">
                        <label for="we-test-email">Test Email</label>
                        <input type="email" id="we-test-email" placeholder="test@example.com">
                    </div>
                    <div class="we-form-group" style="max-width:140px;">
                        <label for="we-test-fname">First Name</label>
                        <input type="text" id="we-test-fname" value="أحمد" dir="rtl">
                    </div>
                    <div class="we-form-group" style="max-width:140px;">
                        <label for="we-test-lname">Last Name</label>
                        <input type="text" id="we-test-lname" value="محمد" dir="rtl">
                    </div>
                    <button class="we-btn we-btn-test" onclick="sendTestWelcomeEmail()" style="height:40px;white-space:nowrap;">
                        <i class="fa fa-paper-plane"></i> Send Test
                    </button>
                </div>
                <span class="we-status" id="we-test-status" style="display:block;margin-top:8px;"></span>
            </div>

            <!-- Preview Column -->
            <div class="welcome-email-preview">
                <h3 style="margin:0 0 16px;font-size:1.1rem;color:var(--dash-text);">👁️ Live Preview</h3>
                <iframe id="we-preview-frame" class="we-preview-frame" sandbox="allow-same-origin"></iframe>
            </div>
        </div>

        <!-- ═══════════ Email Engagement Stats ═══════════ -->
        <div style="margin-top:32px;">
            <h3 style="margin:0 0 20px;font-size:1.2rem;color:var(--dash-text);">📊 Email Engagement Analytics</h3>

            <!-- Period selector -->
            <div style="margin-bottom:16px;">
                <select id="email-stats-days" onchange="loadEmailStats()" style="padding:8px 12px;border-radius:8px;border:1px solid var(--dash-border);background:var(--dash-bg);color:var(--dash-text);font-size:0.9rem;">
                    <option value="7">Last 7 days</option>
                    <option value="30" selected>Last 30 days</option>
                    <option value="90">Last 90 days</option>
                    <option value="365">Last year</option>
                </select>
            </div>

            <!-- Stat Cards -->
            <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;" id="email-stat-cards">
                <div class="stat-card" style="text-align:center;padding:20px;">
                    <div style="font-size:2rem;font-weight:700;color:var(--dash-accent);" id="es-total-sent">—</div>
                    <div style="font-size:0.85rem;color:var(--dash-muted);">Emails Sent</div>
                </div>
                <div class="stat-card" style="text-align:center;padding:20px;">
                    <div style="font-size:2rem;font-weight:700;color:#10b981;" id="es-open-rate">—</div>
                    <div style="font-size:0.85rem;color:var(--dash-muted);">Open Rate</div>
                </div>
                <div class="stat-card" style="text-align:center;padding:20px;">
                    <div style="font-size:2rem;font-weight:700;color:#3b82f6;" id="es-click-rate">—</div>
                    <div style="font-size:0.85rem;color:var(--dash-muted);">Click Rate</div>
                </div>
                <div class="stat-card" style="text-align:center;padding:20px;">
                    <div style="font-size:2rem;font-weight:700;color:#f59e0b;" id="es-cto-rate">—</div>
                    <div style="font-size:0.85rem;color:var(--dash-muted);">Click-to-Open</div>
                </div>
            </div>

            <!-- Daily Trend Chart -->
            <div class="chart-card" style="margin-bottom:24px;position:relative;height:280px;">
                <h4 style="margin:0 0 12px;color:var(--dash-text);">📈 Daily Trend</h4>
                <div style="position:relative;height:240px;">
                    <canvas id="email-trend-chart"></canvas>
                </div>
            </div>

            <!-- Recent Sends Table -->
            <div class="chart-card">
                <h4 style="margin:0 0 12px;color:var(--dash-text);">📬 Recent Sends</h4>
                <div style="overflow-x:auto;">
                    <table class="data-table" id="email-recent-table">
                        <thead>
                            <tr>
                                <th>Recipient</th>
                                <th>User</th>
                                <th>Sent</th>
                                <th>Opened</th>
                                <th>Opens</th>
                                <th>Clicks</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody id="email-recent-tbody">
                            <tr><td colspan="7" style="text-align:center;color:var(--dash-muted);">Loading...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Pricing Tab -->
    <div class="tab-content" id="tab-pricing" style="display: none;">
        <div class="pricing-grid">
            {% for tier in tier_configs %}
            <div class="pricing-card {{ tier.tier_name == 'researcher' ? 'recommended' : '' }}">
                <div class="pricing-name">{{ tier.display_name }}</div>
                <div class="pricing-price">${{ tier.price_monthly_usd|number_format(0) }} <span>/mo</span></div>
                <div class="pricing-credits">{{ tier.monthly_credits|default(0)|number_format }} credits/month</div>
                <ul class="pricing-features">
                    <li>{{ tier.daily_request_limit|default(50) }} requests/day</li>
                    <li>{{ tier.max_storage_mb|default(100) }} MB storage</li>
                    <li>{{ tier.max_projects|default(5) == -1 ? 'Unlimited' : tier.max_projects|default(5) }} projects</li>
                    {% if tier.features is defined and tier.features %}
                        {% set features = tier.features is iterable ? tier.features : {} %}
                        {% if features.export_docx is defined and features.export_docx %}
                        <li>DOCX Export</li>
                        {% endif %}
                        {% if features.priority_support is defined and features.priority_support %}
                        <li>Priority Support</li>
                        {% endif %}
                    {% endif %}
                </ul>
            </div>
            {% endfor %}
        </div>

        <!-- Profitability Analysis -->
        <div class="chart-card">
            <h3 class="chart-title">💰 Profitability Analysis</h3>
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Tier</th>
                        <th>Price</th>
                        <th>Credits</th>
                        <th>Est. Azure Cost*</th>
                        <th>Gross Margin</th>
                    </tr>
                </thead>
                <tbody>
                    {% for tier in tier_configs %}
                    {% set est_cost = tier.monthly_credits * 0.003 %}
                    {% set margin = tier.price_monthly_usd - est_cost %}
                    {% set margin_pct = tier.price_monthly_usd > 0 ? (margin / tier.price_monthly_usd * 100) : 0 %}
                    <tr>
                        <td><span class="tier-badge {{ tier.tier_name }}">{{ tier.display_name }}</span></td>
                        <td>${{ tier.price_monthly_usd|number_format(2) }}</td>
                        <td>{{ tier.monthly_credits|number_format }}</td>
                        <td>${{ est_cost|number_format(2) }}</td>
                        <td style="color: {{ margin_pct > 50 ? 'var(--dash-success)' : 'var(--dash-warning)' }}">
                            ${{ margin|number_format(2) }} ({{ margin_pct|number_format(0) }}%)
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            <p style="font-size: 0.8rem; color: var(--dash-text-muted); margin-top: 12px;">
                * Estimated cost assumes average 1.5 credits = 1 API call, using GPT-4o-mini pricing ($0.002/call avg)
            </p>
        </div>
    </div>

    <!-- Subscriptions Management Tab -->
    <div class="tab-content" id="tab-subscriptions" style="display: none;">
        <!-- Grant Subscription Form -->
        <div class="chart-card" style="margin-bottom: 24px;">
            <h3 class="chart-title">💳 Grant Subscription to User</h3>
            <div style="display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 16px; align-items: end;">
                <div>
                    <label style="display: block; font-size: 0.85rem; color: var(--dash-text-muted); margin-bottom: 6px;">Search User (email or username)</label>
                    <input type="text" id="sub-user-search" placeholder="Enter email or username..." 
                           style="width: 100%; padding: 10px 14px; border: 1px solid var(--dash-border); border-radius: 8px; font-size: 0.9rem;">
                    <div id="sub-user-results" style="position: absolute; background: white; border: 1px solid var(--dash-border); border-radius: 8px; max-height: 200px; overflow-y: auto; z-index: 100; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.1);"></div>
                    <input type="hidden" id="sub-user-id">
                    <div id="sub-selected-user" style="margin-top: 8px; font-size: 0.85rem; color: var(--dash-text-muted);"></div>
                </div>
                <div>
                    <label style="display: block; font-size: 0.85rem; color: var(--dash-text-muted); margin-bottom: 6px;">Subscription Tier</label>
                    <select id="sub-tier" style="width: 100%; padding: 10px 14px; border: 1px solid var(--dash-border); border-radius: 8px; font-size: 0.9rem;">
                        <option value="trial">Trial (100 credits) - Free</option>
                        <option value="starter" selected>Starter (500 credits) - $9/mo</option>
                        <option value="researcher">Researcher (1,500 credits) - $19/mo</option>
                        <option value="professional">Professional (4,000 credits) - $39/mo</option>
                        <option value="institution">Institution (15,000 credits) - $99/mo</option>
                    </select>
                </div>
                <div>
                    <label style="display: block; font-size: 0.85rem; color: var(--dash-text-muted); margin-bottom: 6px;">Duration (months)</label>
                    <input type="number" id="sub-months" value="1" min="1" max="24" 
                           style="width: 100%; padding: 10px 14px; border: 1px solid var(--dash-border); border-radius: 8px; font-size: 0.9rem;">
                </div>
                <div>
                    <button id="sub-grant-btn" onclick="grantSubscription()" 
                            style="padding: 10px 24px; background: var(--dash-success); color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; white-space: nowrap;">
                        Grant Subscription
                    </button>
                </div>
            </div>
            <div style="margin-top: 12px; display: flex; gap: 24px;">
                <label style="display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--dash-text-muted); cursor: pointer;">
                    <input type="checkbox" id="sub-reset-credits" checked style="width: 16px; height: 16px;">
                    Reset used credits to 0
                </label>
                <label style="display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--dash-text-muted); cursor: pointer;">
                    <input type="checkbox" id="sub-send-email" checked style="width: 16px; height: 16px;">
                    📧 Send confirmation email to user
                </label>
            </div>
            <div id="sub-message" style="margin-top: 12px; padding: 10px 14px; border-radius: 8px; display: none;"></div>
        </div>

        <!-- Test Email Section -->
        <div class="chart-card" style="margin-bottom: 24px; background: #fffbeb; border: 1px solid #fcd34d;">
            <h3 class="chart-title">📧 Test Subscription Email</h3>
            <div style="display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: end;">
                <div>
                    <label style="display: block; font-size: 0.85rem; color: var(--dash-text-muted); margin-bottom: 6px;">Send test email to</label>
                    <input type="email" id="test-email-address" value="propatrio@gmail.com" 
                           style="width: 100%; padding: 10px 14px; border: 1px solid var(--dash-border); border-radius: 8px; font-size: 0.9rem;">
                </div>
                <div>
                    <label style="display: block; font-size: 0.85rem; color: var(--dash-text-muted); margin-bottom: 6px;">Preview tier</label>
                    <select id="test-email-tier" style="width: 100%; padding: 10px 14px; border: 1px solid var(--dash-border); border-radius: 8px; font-size: 0.9rem;">
                        <option value="starter" selected>Starter</option>
                        <option value="researcher">Researcher</option>
                        <option value="professional">Professional</option>
                        <option value="institution">Institution</option>
                    </select>
                </div>
                <div>
                    <button onclick="sendTestSubscriptionEmail()" 
                            style="padding: 10px 24px; background: #f59e0b; color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; white-space: nowrap;">
                        Send Test Email
                    </button>
                </div>
            </div>
            <div id="test-email-message" style="margin-top: 12px; padding: 10px 14px; border-radius: 8px; display: none;"></div>
        </div>

        <!-- Subscriptions List -->
        <div class="table-card">
            <div class="table-header" style="display: flex; justify-content: space-between; align-items: center;">
                <h3 class="table-title">All Subscriptions</h3>
                <div style="display: flex; gap: 8px;">
                    <select id="sub-filter" onchange="loadSubscriptionsList()" style="padding: 8px 12px; border: 1px solid var(--dash-border); border-radius: 6px; font-size: 0.85rem;">
                        <option value="all">All</option>
                        <option value="active">Active</option>
                        <option value="expired">Expired</option>
                        <option value="paid">Paid Only</option>
                        <option value="trial">Trial Only</option>
                    </select>
                    <button onclick="loadSubscriptionsList()" style="padding: 8px 14px; background: var(--dash-primary); color: white; border: none; border-radius: 6px; cursor: pointer;">
                        <i class="fa fa-refresh"></i>
                    </button>
                </div>
            </div>
            <div id="sub-list-loading" style="text-align: center; padding: 40px; color: var(--dash-text-muted);">
                <i class="fa fa-spinner fa-spin"></i> Loading subscriptions...
            </div>
            <table class="data-table" id="sub-list-table" style="display: none;">
                <thead>
                    <tr>
                        <th>User</th>
                        <th>Tier</th>
                        <th>Credits</th>
                        <th>Status</th>
                        <th>Valid Until</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="sub-list-body"></tbody>
            </table>
            <div id="sub-pagination" style="padding: 16px; text-align: center; display: none;"></div>
        </div>
    </div>

    <!-- OCR Tab -->
    <div class="tab-content" id="tab-ocr" style="display: none;">
        <div id="ocr-loading" style="text-align:center;padding:40px;color:var(--dash-text-muted);"><i class="fa fa-spinner fa-spin"></i> Loading OCR stats...</div>

        <div id="ocr-content" style="display:none;">
            <!-- Summary Cards -->
            <div class="ocr-summary-grid">
                <div class="ocr-summary-card">
                    <div class="ocr-val" id="ocr-total-jobs">—</div>
                    <div class="ocr-lbl">Total Jobs</div>
                </div>
                <div class="ocr-summary-card">
                    <div class="ocr-val" id="ocr-completed" style="color:#10b981;">—</div>
                    <div class="ocr-lbl">Completed</div>
                </div>
                <div class="ocr-summary-card">
                    <div class="ocr-val" id="ocr-failed" style="color:#ef4444;">—</div>
                    <div class="ocr-lbl">Failed</div>
                </div>
                <div class="ocr-summary-card">
                    <div class="ocr-val" id="ocr-active" style="color:#f59e0b;">—</div>
                    <div class="ocr-lbl">Active (Pending/Processing)</div>
                </div>
                <div class="ocr-summary-card">
                    <div class="ocr-val" id="ocr-total-pages">—</div>
                    <div class="ocr-lbl">Total Pages Processed</div>
                </div>
                <div class="ocr-summary-card">
                    <div class="ocr-val" id="ocr-total-credits">—</div>
                    <div class="ocr-lbl">Total Credits Charged</div>
                </div>
                <div class="ocr-summary-card">
                    <div class="ocr-val" id="ocr-avg-time">—</div>
                    <div class="ocr-lbl">Avg Processing Time</div>
                </div>
                <div class="ocr-summary-card">
                    <div class="ocr-val" id="ocr-error-rate" style="color:#ef4444;">—</div>
                    <div class="ocr-lbl">Error Rate</div>
                </div>
            </div>

            <!-- Period Breakdown -->
            <div class="ocr-period-row">
                <div class="ocr-period-card">
                    <h4><i class="fa fa-calendar-check-o"></i> Today</h4>
                    <div class="ocr-period-row-inner"><span>Jobs</span><span id="ocr-today-jobs">—</span></div>
                    <div class="ocr-period-row-inner"><span>Pages</span><span id="ocr-today-pages">—</span></div>
                    <div class="ocr-period-row-inner"><span>Credits</span><span id="ocr-today-credits">—</span></div>
                </div>
                <div class="ocr-period-card">
                    <h4><i class="fa fa-calendar"></i> This Week</h4>
                    <div class="ocr-period-row-inner"><span>Jobs</span><span id="ocr-week-jobs">—</span></div>
                    <div class="ocr-period-row-inner"><span>Pages</span><span id="ocr-week-pages">—</span></div>
                    <div class="ocr-period-row-inner"><span>Credits</span><span id="ocr-week-credits">—</span></div>
                </div>
                <div class="ocr-period-card">
                    <h4><i class="fa fa-calendar-o"></i> This Month</h4>
                    <div class="ocr-period-row-inner"><span>Jobs</span><span id="ocr-month-jobs">—</span></div>
                    <div class="ocr-period-row-inner"><span>Pages</span><span id="ocr-month-pages">—</span></div>
                    <div class="ocr-period-row-inner"><span>Credits</span><span id="ocr-month-credits">—</span></div>
                </div>
            </div>

            <!-- Finance -->
            <div class="ocr-finance-row">
                <div class="ocr-finance-card">
                    <div class="ocr-money cost" id="ocr-mistral-cost">$—</div>
                    <div class="ocr-money-lbl">Estimated Mistral API Cost (completed jobs)</div>
                </div>
                <div class="ocr-finance-card">
                    <div class="ocr-money revenue" id="ocr-credit-revenue">—</div>
                    <div class="ocr-money-lbl">Credits Earned (≈ revenue equivalent)</div>
                </div>
            </div>

            <!-- Daily Trend Chart -->
            <div class="table-card" style="margin-bottom:24px;">
                <div class="table-header"><h3 class="table-title">Daily OCR Trend (30 days)</h3></div>
                <div style="padding:20px;">
                    <canvas id="ocrTrendChart" height="80"></canvas>
                </div>
            </div>

            <!-- Top OCR Users -->
            <div class="table-card">
                <div class="table-header"><h3 class="table-title">Top OCR Users (30 days)</h3></div>
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>User</th>
                            <th>Jobs</th>
                            <th>Pages</th>
                            <th>Credits</th>
                        </tr>
                    </thead>
                    <tbody id="ocr-top-users-body">
                        <tr><td colspan="4" style="text-align:center;color:var(--dash-text-muted);">Loading...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- AI Detection Tab -->
    <div class="tab-content" id="tab-ai-detection" style="display: none;">
        <div id="aid-loading" style="text-align:center; padding:40px; color:var(--dash-text-muted);">
            <i class="fa fa-spinner fa-spin"></i> Loading AI Detection analytics...
        </div>
        <div id="aid-content" style="display:none;">

            <!-- Summary Cards -->
            <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:16px; margin-bottom:24px;">
                <div class="stat-card">
                    <div class="stat-icon" style="background:linear-gradient(135deg,#6366f1,#818cf8);"><i class="fa fa-eye"></i></div>
                    <div class="stat-value" id="aid-total-visits">0</div>
                    <div class="stat-label">Total Page Visits</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon" style="background:linear-gradient(135deg,#8b5cf6,#a78bfa);"><i class="fa fa-users"></i></div>
                    <div class="stat-value" id="aid-unique-visitors">0</div>
                    <div class="stat-label">Unique Visitors</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon" style="background:linear-gradient(135deg,#10b981,#34d399);"><i class="fa fa-shield"></i></div>
                    <div class="stat-value" id="aid-total-detections">0</div>
                    <div class="stat-label">Total Detections</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon" style="background:linear-gradient(135deg,#f59e0b,#fbbf24);"><i class="fa fa-bolt"></i></div>
                    <div class="stat-value" id="aid-visits-today">0</div>
                    <div class="stat-label">Visits Today</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon" style="background:linear-gradient(135deg,#3b82f6,#60a5fa);"><i class="fa fa-check-circle"></i></div>
                    <div class="stat-value" id="aid-detections-today">0</div>
                    <div class="stat-label">Detections Today</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon" style="background:linear-gradient(135deg,#ec4899,#f472b6);"><i class="fa fa-percent"></i></div>
                    <div class="stat-value" id="aid-conversion">0%</div>
                    <div class="stat-label">Conversion Rate</div>
                </div>
            </div>

            <!-- Token + Cost Summary Row -->
            <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:16px; margin-bottom:24px;">
                <div class="table-card" style="padding:20px; text-align:center;">
                    <div style="font-size:0.85rem; color:var(--dash-text-muted); margin-bottom:6px;">Total Input Tokens</div>
                    <div id="aid-total-input" style="font-size:1.5rem; font-weight:700; color:#6366f1;">0</div>
                </div>
                <div class="table-card" style="padding:20px; text-align:center;">
                    <div style="font-size:0.85rem; color:var(--dash-text-muted); margin-bottom:6px;">Total Output Tokens</div>
                    <div id="aid-total-output" style="font-size:1.5rem; font-weight:700; color:#10b981;">0</div>
                </div>
                <div class="table-card" style="padding:20px; text-align:center;">
                    <div style="font-size:0.85rem; color:var(--dash-text-muted); margin-bottom:6px;">Total Cost</div>
                    <div id="aid-total-cost" style="font-size:1.5rem; font-weight:700; color:#ef4444;">$0.00</div>
                </div>
                <div class="table-card" style="padding:20px; text-align:center;">
                    <div style="font-size:0.85rem; color:var(--dash-text-muted); margin-bottom:6px;">Avg Latency</div>
                    <div id="aid-avg-latency" style="font-size:1.5rem; font-weight:700; color:#f59e0b;">0ms</div>
                </div>
            </div>

            <!-- Period Selector -->
            <div style="display:flex; justify-content:flex-end; margin-bottom:12px; gap:8px;">
                <button class="tab-btn aid-period-btn active" data-aid-days="7" style="font-size:0.8rem; padding:4px 12px;">7d</button>
                <button class="tab-btn aid-period-btn" data-aid-days="14" style="font-size:0.8rem; padding:4px 12px;">14d</button>
                <button class="tab-btn aid-period-btn" data-aid-days="30" style="font-size:0.8rem; padding:4px 12px;">30d</button>
                <button class="tab-btn aid-period-btn" data-aid-days="90" style="font-size:0.8rem; padding:4px 12px;">90d</button>
            </div>

            <!-- Charts Row -->
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px;">
                <div class="table-card" style="padding:20px;">
                    <h3 class="table-title" style="margin:0 0 12px;">📈 User Engagement (Daily)</h3>
                    <div style="height:300px; position:relative;">
                        <canvas id="aidEngagementChart"></canvas>
                    </div>
                </div>
                <div class="table-card" style="padding:20px;">
                    <h3 class="table-title" style="margin:0 0 12px;">🔢 Token Usage (Daily)</h3>
                    <div style="height:300px; position:relative;">
                        <canvas id="aidTokenChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- Top Users Table -->
            <div class="table-card">
                <div class="table-header">
                    <h3 class="table-title">🏆 Top Detection Users</h3>
                </div>
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>User</th>
                            <th>Detections</th>
                            <th>Tokens</th>
                            <th>Cost</th>
                            <th>Last Detection</th>
                        </tr>
                    </thead>
                    <tbody id="aid-top-users-body">
                        <tr><td colspan="5" style="text-align:center;color:var(--dash-text-muted);">Loading...</td></tr>
                    </tbody>
                </table>
            </div>

            <!-- ── Feedback / CSAT Section ── -->
            <div style="margin-top:28px;">
                <h3 style="font-size:1.15rem; font-weight:700; margin:0 0 16px; color:var(--dash-text);">💬 Customer Feedback (CSAT)</h3>

                <!-- Feedback Summary Cards -->
                <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:14px; margin-bottom:20px;">
                    <div class="stat-card">
                        <div class="stat-icon" style="background:linear-gradient(135deg,#6366f1,#818cf8);"><i class="fa fa-comments"></i></div>
                        <div class="stat-value" id="aid-fb-total">0</div>
                        <div class="stat-label">Total Responses</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon" style="background:linear-gradient(135deg,#f59e0b,#fbbf24);"><i class="fa fa-star"></i></div>
                        <div class="stat-value" id="aid-fb-avg-rating">—</div>
                        <div class="stat-label">Avg Rating (1-5)</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon" style="background:linear-gradient(135deg,#10b981,#34d399);"><i class="fa fa-trophy"></i></div>
                        <div class="stat-value" id="aid-fb-csat">—</div>
                        <div class="stat-label">CSAT Score</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon" style="background:linear-gradient(135deg,#3b82f6,#60a5fa);"><i class="fa fa-heart"></i></div>
                        <div class="stat-value" id="aid-fb-nps">—</div>
                        <div class="stat-label">NPS Score</div>
                    </div>
                </div>

                <!-- NPS breakdown bar -->
                <div class="table-card" style="padding:16px; margin-bottom:20px;">
                    <div style="display:flex; align-items:center; gap:12px; margin-bottom:8px;">
                        <span style="font-size:0.85rem; font-weight:600;">NPS Breakdown:</span>
                        <span style="font-size:0.8rem; color:#10b981;">● Promoters (9-10): <strong id="aid-fb-promoters">0</strong></span>
                        <span style="font-size:0.8rem; color:#f59e0b;">● Passives (7-8): <strong id="aid-fb-passives">0</strong></span>
                        <span style="font-size:0.8rem; color:#ef4444;">● Detractors (1-6): <strong id="aid-fb-detractors">0</strong></span>
                    </div>
                    <div style="height:12px; border-radius:6px; overflow:hidden; background:#f1f5f9; display:flex;">
                        <div id="aid-fb-bar-promoters" style="background:#10b981; height:100%; transition:width 0.4s;"></div>
                        <div id="aid-fb-bar-passives" style="background:#fbbf24; height:100%; transition:width 0.4s;"></div>
                        <div id="aid-fb-bar-detractors" style="background:#ef4444; height:100%; transition:width 0.4s;"></div>
                    </div>
                </div>

                <!-- CSAT Trend Chart -->
                <div class="table-card" style="padding:20px; margin-bottom:20px;">
                    <h3 class="table-title" style="margin:0 0 12px;">📈 CSAT Trend Over Time</h3>
                    <div style="height:260px; position:relative;">
                        <canvas id="aidCsatChart"></canvas>
                    </div>
                </div>

                <!-- Recent Feedback Table -->
                <div class="table-card">
                    <div class="table-header">
                        <h3 class="table-title">📝 Recent Feedback</h3>
                    </div>
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>User</th>
                                <th>Rating</th>
                                <th>NPS</th>
                                <th>Comment</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody id="aid-fb-entries-body">
                            <tr><td colspan="5" style="text-align:center;color:var(--dash-text-muted);">Loading...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>

    <!-- Settings Tab -->
    <div class="tab-content" id="tab-settings" style="display: none;">
        <div class="table-card" style="padding: 28px;">
            <h3 style="margin: 0 0 8px; font-size: 1.2rem; color: var(--dash-text);">⚙️ Feature Settings</h3>
            <p style="color: var(--dash-text-muted); margin-bottom: 24px; font-size: 0.9rem;">
                Toggle feature access for non-subscribed logged-in users. Subscribed users always have access.
            </p>

            <!-- AI Detection Toggle -->
            <div class="we-toggle-row" id="fs-ai-detection-row">
                <label class="we-toggle">
                    <input type="checkbox" id="fs-ai-detection-toggle" {{ feature_settings.ai_detection_free_access|default(false) ? 'checked' : '' }}>
                    <span class="we-toggle-slider"></span>
                </label>
                <div>
                    <strong>🛡️ AI Detection — Free Access</strong>
                    <div style="color: var(--dash-text-muted); font-size: 0.85rem; margin-top: 4px;">
                        When enabled, all logged-in users can use Arabic AI Detection without a subscription.
                        <br>When disabled, only subscribed users (all tiers) can use it.
                    </div>
                    <div id="fs-ai-detection-status" style="color: var(--dash-success); font-size: 0.8rem; margin-top: 6px;"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Errors Tab -->
    <div class="tab-content" id="tab-errors" style="display: none;">
        <div class="table-card">
            <div class="table-header">
                <h3 class="table-title">Recent Errors</h3>
            </div>
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Time</th>
                        <th>User</th>
                        <th>Operation</th>
                        <th>Model</th>
                        <th>Error</th>
                    </tr>
                </thead>
                <tbody>
                    {% for error in stats.recent_errors %}
                    <tr>
                        <td>{{ error.created_at|date('M d, H:i') }}</td>
                        <td>{{ error.username }}</td>
                        <td>{{ error.operation_type }}</td>
                        <td>{{ error.model_used }}</td>
                        <td style="max-width: 300px; overflow: hidden; text-overflow: ellipsis;">{{ error.error_message|slice(0, 100) }}...</td>
                    </tr>
                    {% else %}
                    <tr><td colspan="5" style="text-align: center; color: var(--dash-text-muted);">No errors! 🎉</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Registered Users Tab -->
    <div class="tab-content" id="tab-registered-users" style="display: none;">
        <div id="ru-loading" style="text-align:center; padding:60px 20px; color:var(--dash-text-muted);">
            <i class="fa fa-spinner fa-spin fa-2x"></i>
            <p style="margin-top:12px;">Loading user statistics...</p>
        </div>
        <div id="ru-content" style="display:none;">
            <!-- Overview cards -->
            <div class="stats-grid" style="margin-bottom:24px;">
                <div class="stat-card">
                    <div class="stat-icon" style="background:#eff6ff; color:#2563eb;"><i class="fa fa-users"></i></div>
                    <div class="stat-value" id="ru-total">0</div>
                    <div class="stat-label">Total Users</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon" style="background:#dcfce7; color:#16a34a;"><i class="fa fa-check-circle"></i></div>
                    <div class="stat-value" id="ru-verified">0</div>
                    <div class="stat-label">Verified</div>
                    <div class="stat-sub" id="ru-verified-pct"></div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon" style="background:#fef2f2; color:#dc2626;"><i class="fa fa-times-circle"></i></div>
                    <div class="stat-value" id="ru-unverified">0</div>
                    <div class="stat-label">Unverified</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon" style="background:#fef3c7; color:#d97706;"><i class="fa fa-user-plus"></i></div>
                    <div class="stat-value" id="ru-new30">0</div>
                    <div class="stat-label">New (30d)</div>
                    <div class="stat-sub" id="ru-new7"></div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon" style="background:#f0fdf4; color:#15803d;"><i class="fa fa-sign-in"></i></div>
                    <div class="stat-value" id="ru-active30">0</div>
                    <div class="stat-label">Active (30d)</div>
                    <div class="stat-sub" id="ru-active7"></div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon" style="background:#faf5ff; color:#7c3aed;"><i class="fa fa-envelope"></i></div>
                    <div class="stat-value" id="ru-newsletter">0</div>
                    <div class="stat-label">Newsletter Enabled</div>
                    <div class="stat-sub" id="ru-newsletter-disabled"></div>
                </div>
            </div>

            <!-- Charts Row -->
            <div style="display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-bottom:24px;">
                <div class="table-card" style="padding:20px;">
                    <h3 class="table-title" style="margin-bottom:16px;">📈 Registration Trend (12 months)</h3>
                    <div style="position:relative; height:260px;">
                        <canvas id="ruRegChart"></canvas>
                    </div>
                </div>
                <div class="table-card" style="padding:20px;">
                    <h3 class="table-title" style="margin-bottom:16px;">🔑 Login Activity (30d)</h3>
                    <div style="position:relative; height:260px;">
                        <canvas id="ruLoginChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- Breakdowns Row -->
            <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; margin-bottom:24px;">
                <!-- Countries -->
                <div class="table-card" style="padding:20px;">
                    <h3 class="table-title" style="margin-bottom:12px;">🌍 Top Countries</h3>
                    <div id="ru-countries" style="max-height:320px; overflow-y:auto;"></div>
                </div>
                <!-- Locales -->
                <div class="table-card" style="padding:20px;">
                    <h3 class="table-title" style="margin-bottom:12px;">🌐 Locale</h3>
                    <div id="ru-locales"></div>
                </div>
                <!-- Degrees -->
                <div class="table-card" style="padding:20px;">
                    <h3 class="table-title" style="margin-bottom:12px;">🎓 Study Degree</h3>
                    <div id="ru-degrees" style="max-height:320px; overflow-y:auto;"></div>
                </div>
                <!-- Gender -->
                <div class="table-card" style="padding:20px;">
                    <h3 class="table-title" style="margin-bottom:12px;">👤 Gender</h3>
                    <div id="ru-genders"></div>
                </div>
            </div>

            <!-- Playground Tiers -->
            <div class="table-card" style="padding:20px; margin-bottom:24px;">
                <h3 class="table-title" style="margin-bottom:12px;">🎮 Playground Subscription Tiers</h3>
                <div id="ru-playground-tiers"></div>
            </div>

            <!-- Profile Completion Section -->
            <div class="table-card" style="padding:20px; margin-bottom:24px;">
                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:12px;">
                    <h3 class="table-title" style="margin:0;">📊 Profile Completion</h3>
                    <button onclick="loadProfileCompletionData()" style="padding:6px 14px; border-radius:6px; border:1px solid #d1d5db; background:#f9fafb; cursor:pointer; font-size:13px;">↻ Refresh</button>
                </div>
                
                <!-- Distribution Cards -->
                <div id="pc-loading" style="text-align:center; padding:40px; color:var(--dash-text-muted);">
                    <i class="fa fa-spinner fa-spin"></i> Loading profile data...
                </div>
                <div id="pc-content" style="display:none;">
                    <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px; margin-bottom:20px;">
                        <div style="padding:14px; border-radius:10px; background:#fee2e2; border:1px solid #fecaca; text-align:center;">
                            <div style="font-size:24px; font-weight:700; color:#dc2626;" id="pc-beginner">0</div>
                            <div style="font-size:12px; color:#991b1b;">👶 Beginner (0-25%)</div>
                        </div>
                        <div style="padding:14px; border-radius:10px; background:#fef3c7; border:1px solid #fcd34d; text-align:center;">
                            <div style="font-size:24px; font-weight:700; color:#d97706;" id="pc-developing">0</div>
                            <div style="font-size:12px; color:#92400e;">🌱 Developing (26-50%)</div>
                        </div>
                        <div style="padding:14px; border-radius:10px; background:#dbeafe; border:1px solid #93c5fd; text-align:center;">
                            <div style="font-size:24px; font-weight:700; color:#2563eb;" id="pc-researcher">0</div>
                            <div style="font-size:12px; color:#1e40af;">📖 Researcher (51-75%)</div>
                        </div>
                        <div style="padding:14px; border-radius:10px; background:#d1fae5; border:1px solid #6ee7b7; text-align:center;">
                            <div style="font-size:24px; font-weight:700; color:#059669;" id="pc-scholar">0</div>
                            <div style="font-size:12px; color:#065f46;">📚 Scholar (76-99%)</div>
                        </div>
                        <div style="padding:14px; border-radius:10px; background:linear-gradient(135deg, #fef3c7, #d1fae5); border:1px solid #fbbf24; text-align:center;">
                            <div style="font-size:24px; font-weight:700; color:#78350f;" id="pc-scientist">0</div>
                            <div style="font-size:12px; color:#065f46;">🎓 Scientist (100%)</div>
                        </div>
                    </div>
                    
                    <!-- Average Score -->
                    <div style="background:#f8fafc; padding:16px; border-radius:10px; margin-bottom:20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;">
                        <div style="min-width:140px;">
                            <div style="font-size:11px; text-transform:uppercase; color:#64748b; letter-spacing:0.5px;">Average Score</div>
                            <div style="font-size:28px; font-weight:700; color:#1e40af;" id="pc-avg-score">0%</div>
                        </div>
                        <div style="flex:1; min-width:200px;">
                            <div style="font-size:11px; text-transform:uppercase; color:#64748b; letter-spacing:0.5px; margin-bottom:6px;">Score Distribution</div>
                            <div style="height:20px; background:#e2e8f0; border-radius:10px; overflow:hidden; display:flex;">
                                <div id="pc-bar-beginner" style="height:100%; background:#fca5a5;" title="Beginner"></div>
                                <div id="pc-bar-developing" style="height:100%; background:#fcd34d;" title="Developing"></div>
                                <div id="pc-bar-researcher" style="height:100%; background:#60a5fa;" title="Researcher"></div>
                                <div id="pc-bar-scholar" style="height:100%; background:#34d399;" title="Scholar"></div>
                                <div id="pc-bar-scientist" style="height:100%; background:#fbbf24;" title="Scientist"></div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Field Completion Rates -->
                    <div style="margin-bottom:20px;">
                        <div style="font-size:13px; font-weight:600; color:#334155; margin-bottom:10px;">Field Completion Rates</div>
                        <div id="pc-field-rates" style="display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:8px;"></div>
                    </div>
                    
                    <!-- Users with >50% completion -->
                    <div>
                        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
                            <div style="font-size:13px; font-weight:600; color:#334155;">
                                👥 Users with &gt;50% Profile (<span id="pc-users-count">0</span>)
                            </div>
                            <div style="display:flex; gap:8px;">
                                <button onclick="loadProfileCompletionUsers(1)" id="pc-prev-btn" disabled style="padding:4px 10px; border-radius:4px; border:1px solid #d1d5db; background:#f9fafb; cursor:pointer; font-size:12px;">← Prev</button>
                                <span style="padding:4px 8px; font-size:12px; color:#64748b;" id="pc-page-info">Page 1</span>
                                <button onclick="loadProfileCompletionUsers(2)" id="pc-next-btn" style="padding:4px 10px; border-radius:4px; border:1px solid #d1d5db; background:#f9fafb; cursor:pointer; font-size:12px;">Next →</button>
                            </div>
                        </div>
                        <div style="max-height:400px; overflow-y:auto; border:1px solid #e5e7eb; border-radius:8px;">
                            <table class="data-table" style="margin:0;">
                                <thead>
                                    <tr>
                                        <th style="padding:10px 12px;">User</th>
                                        <th style="padding:10px 12px;">Score</th>
                                        <th style="padding:10px 12px;">Tier</th>
                                        <th style="padding:10px 12px;">Joined</th>
                                        <th style="padding:10px 12px;">Last Login</th>
                                        <th style="padding:10px 12px;">Profile</th>
                                    </tr>
                                </thead>
                                <tbody id="pc-users-tbody"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Registrations -->
            <div class="table-card">
                <div class="table-header">
                    <h3 class="table-title">🆕 Recent Registrations</h3>
                </div>
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Username</th>
                            <th>Email</th>
                            <th>Name</th>
                            <th>Country</th>
                            <th>Locale</th>
                            <th>Verified</th>
                            <th>Registered</th>
                            <th>Last Login</th>
                        </tr>
                    </thead>
                    <tbody id="ru-recent-tbody"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Search CTR Tab -->
<div class="tab-content" id="tab-search-ctr" style="display: none;">
    <div style="margin-bottom: 20px; display: flex; align-items: center; gap: 15px; flex-wrap: wrap;">
        <h2 style="margin: 0;">🔍 Search CTR Analytics</h2>
        <select id="sctr-period" style="padding: 6px 12px; border-radius: 6px; border: 1px solid #d1d5db; font-size: 14px;">
            <option value="7">Last 7 days</option>
            <option value="30" selected>Last 30 days</option>
            <option value="90">Last 90 days</option>
        </select>
        <button onclick="loadSearchCtrData()" style="padding: 6px 16px; border-radius: 6px; border: 1px solid #d1d5db; background: #f9fafb; cursor: pointer; font-size: 14px;">↻ Refresh</button>
    </div>

    <!-- Stats Cards -->
    <div class="stats-grid" id="sctr-stats-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px;">
        <div class="stat-card" style="padding: 16px; border-radius: 12px; background: #f0f9ff; border: 1px solid #bae6fd;">
            <div style="font-size: 28px; font-weight: 700; color: #0284c7;" id="sctr-total-queries">-</div>
            <div style="font-size: 13px; color: #64748b;">Total Searches</div>
        </div>
        <div class="stat-card" style="padding: 16px; border-radius: 12px; background: #f0fdf4; border: 1px solid #bbf7d0;">
            <div style="font-size: 28px; font-weight: 700; color: #16a34a;" id="sctr-ctr">-</div>
            <div style="font-size: 13px; color: #64748b;">CTR (%)</div>
        </div>
        <div class="stat-card" style="padding: 16px; border-radius: 12px; background: #eff6ff; border: 1px solid #bfdbfe;">
            <div style="font-size: 28px; font-weight: 700; color: #2563eb;" id="sctr-total-clicks">-</div>
            <div style="font-size: 13px; color: #64748b;">Total Clicks</div>
        </div>
        <div class="stat-card" style="padding: 16px; border-radius: 12px; background: #fef3c7; border: 1px solid #fcd34d;">
            <div style="font-size: 28px; font-weight: 700; color: #d97706;" id="sctr-no-clicks">-</div>
            <div style="font-size: 13px; color: #64748b;">No Clicks</div>
        </div>
        <div class="stat-card" style="padding: 16px; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca;">
            <div style="font-size: 28px; font-weight: 700; color: #dc2626;" id="sctr-zero-results">-</div>
            <div style="font-size: 13px; color: #64748b;">Zero Results</div>
        </div>
        <div class="stat-card" style="padding: 16px; border-radius: 12px; background: #f5f3ff; border: 1px solid #ddd6fe;">
            <div style="font-size: 28px; font-weight: 700; color: #7c3aed;" id="sctr-avg-position">-</div>
            <div style="font-size: 13px; color: #64748b;">Avg Click Position</div>
        </div>
    </div>

    <!-- Trend Chart -->
    <div style="background: white; padding: 20px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 24px;">
        <h3 style="margin: 0 0 16px 0; font-size: 16px;">Daily Search & Click Trend</h3>
        <canvas id="sctr-trend-chart" height="80"></canvas>
    </div>

    <!-- Click Position Distribution -->
    <div style="background: white; padding: 20px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 24px;">
        <h3 style="margin: 0 0 16px 0; font-size: 16px;">Click Position Distribution</h3>
        <canvas id="sctr-position-chart" height="60"></canvas>
    </div>

    <!-- Sub-tabs for query tables -->
    <div style="margin-bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap;">
        <button class="sctr-subtab active" data-subtab="top-queries" onclick="switchSctrSubtab(this)" style="padding: 8px 16px; border-radius: 20px; border: 1px solid #d1d5db; background: #111827; color: white; cursor: pointer; font-size: 13px;">Top Queries</button>
        <button class="sctr-subtab" data-subtab="no-clicks" onclick="switchSctrSubtab(this)" style="padding: 8px 16px; border-radius: 20px; border: 1px solid #d1d5db; background: #f9fafb; cursor: pointer; font-size: 13px;">Without Clicks</button>
        <button class="sctr-subtab" data-subtab="zero-results" onclick="switchSctrSubtab(this)" style="padding: 8px 16px; border-radius: 20px; border: 1px solid #d1d5db; background: #f9fafb; cursor: pointer; font-size: 13px;">Zero Results</button>
    </div>

    <!-- Top Queries Table -->
    <div id="sctr-panel-top-queries" style="background: white; padding: 20px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 24px;">
        <h3 style="margin: 0 0 16px 0; font-size: 16px;">Top Search Queries</h3>
        <div style="overflow-x: auto;">
            <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
                <thead>
                    <tr style="background: #f9fafb; border-bottom: 2px solid #e5e7eb;">
                        <th style="padding: 10px 12px; text-align: left;">#</th>
                        <th style="padding: 10px 12px; text-align: left;">Query</th>
                        <th style="padding: 10px 12px; text-align: right;">Searches</th>
                        <th style="padding: 10px 12px; text-align: right;">Avg Results</th>
                        <th style="padding: 10px 12px; text-align: right;">Clicks</th>
                        <th style="padding: 10px 12px; text-align: right;">CTR</th>
                    </tr>
                </thead>
                <tbody id="sctr-top-queries-tbody"></tbody>
            </table>
        </div>
    </div>

    <!-- Without Clicks Table -->
    <div id="sctr-panel-no-clicks" style="display: none; background: white; padding: 20px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 24px;">
        <h3 style="margin: 0 0 16px 0; font-size: 16px;">Queries Without Any Clicks <span id="sctr-no-clicks-total" style="font-size: 13px; color: #6b7280; font-weight: normal;"></span></h3>
        <div style="overflow-x: auto;">
            <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
                <thead>
                    <tr style="background: #fef3c7; border-bottom: 2px solid #fcd34d;">
                        <th style="padding: 10px 12px; text-align: left;">#</th>
                        <th style="padding: 10px 12px; text-align: left;">Query</th>
                        <th style="padding: 10px 12px; text-align: right;">Searches</th>
                        <th style="padding: 10px 12px; text-align: right;">Avg Results</th>
                        <th style="padding: 10px 12px; text-align: right;">Last Searched</th>
                    </tr>
                </thead>
                <tbody id="sctr-no-clicks-tbody"></tbody>
            </table>
        </div>
        <div style="margin-top: 12px; text-align: center;">
            <button id="sctr-no-clicks-load-more" onclick="loadMoreNoClicks()" style="padding: 8px 24px; border-radius: 6px; border: 1px solid #d1d5db; background: #f9fafb; cursor: pointer; font-size: 13px;">Load More</button>
        </div>
    </div>

    <!-- Zero Results Table -->
    <div id="sctr-panel-zero-results" style="display: none; background: white; padding: 20px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 24px;">
        <h3 style="margin: 0 0 16px 0; font-size: 16px;">Queries With Zero Results</h3>
        <div style="overflow-x: auto;">
            <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
                <thead>
                    <tr style="background: #fef2f2; border-bottom: 2px solid #fecaca;">
                        <th style="padding: 10px 12px; text-align: left;">#</th>
                        <th style="padding: 10px 12px; text-align: left;">Query</th>
                        <th style="padding: 10px 12px; text-align: right;">Searches</th>
                        <th style="padding: 10px 12px; text-align: right;">Last Searched</th>
                    </tr>
                </thead>
                <tbody id="sctr-zero-results-tbody"></tbody>
            </table>
        </div>
    </div>
</div>

<!-- Notifications Tab -->
<div class="tab-content" id="tab-notifications" style="display: none;">
    <div id="notif-loading" style="text-align: center; padding: 40px; color: #999;"><i class="fa fa-spinner fa-spin"></i> Loading notification stats...</div>
    <div id="notif-loaded" style="display: none;">
        <!-- Overview Cards -->
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px;">
            <div style="background: white; padding: 20px; border-radius: 12px; border: 1px solid #e5e7eb; text-align: center;">
                <div style="font-size: 28px; font-weight: 700; color: #7c3aed;" id="notif-total">-</div>
                <div style="font-size: 13px; color: #6b7280; margin-top: 4px;">Total Notifications</div>
            </div>
            <div style="background: white; padding: 20px; border-radius: 12px; border: 1px solid #e5e7eb; text-align: center;">
                <div style="font-size: 28px; font-weight: 700; color: #2563eb;" id="notif-users-with">-</div>
                <div style="font-size: 13px; color: #6b7280; margin-top: 4px;">Users With Notifications</div>
            </div>
            <div style="background: white; padding: 20px; border-radius: 12px; border: 1px solid #e5e7eb; text-align: center;">
                <div style="font-size: 28px; font-weight: 700; color: #059669;" id="notif-seen-rate">-</div>
                <div style="font-size: 13px; color: #6b7280; margin-top: 4px;">Seen Rate</div>
            </div>
            <div style="background: white; padding: 20px; border-radius: 12px; border: 1px solid #e5e7eb; text-align: center;">
                <div style="font-size: 28px; font-weight: 700; color: #d97706;" id="notif-click-rate">-</div>
                <div style="font-size: 13px; color: #6b7280; margin-top: 4px;">Click Rate</div>
            </div>
            <div style="background: white; padding: 20px; border-radius: 12px; border: 1px solid #e5e7eb; text-align: center;">
                <div style="font-size: 28px; font-weight: 700; color: #dc2626;" id="notif-unseen">-</div>
                <div style="font-size: 13px; color: #6b7280; margin-top: 4px;">Unseen</div>
            </div>
            <div style="background: white; padding: 20px; border-radius: 12px; border: 1px solid #e5e7eb; text-align: center;">
                <div style="font-size: 28px; font-weight: 700; color: #0891b2;" id="notif-push-devices">-</div>
                <div style="font-size: 13px; color: #6b7280; margin-top: 4px;">Push Devices (Firebase)</div>
            </div>
        </div>

        <!-- Coverage bar -->
        <div style="background: white; padding: 20px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 24px;">
            <h3 style="margin: 0 0 12px 0; font-size: 16px;">Notification Coverage</h3>
            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">
                <span style="font-size: 13px; color: #6b7280; min-width: 180px;">Users who received notifications</span>
                <div style="flex: 1; background: #f3f4f6; border-radius: 8px; height: 24px; overflow: hidden;">
                    <div id="notif-coverage-bar" style="height: 100%; background: linear-gradient(90deg, #7c3aed, #a78bfa); border-radius: 8px; transition: width 0.5s ease; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; font-weight: 600;"></div>
                </div>
            </div>
            <div style="display: flex; align-items: center; gap: 12px;">
                <span style="font-size: 13px; color: #6b7280; min-width: 180px;">Users with push devices</span>
                <div style="flex: 1; background: #f3f4f6; border-radius: 8px; height: 24px; overflow: hidden;">
                    <div id="notif-push-bar" style="height: 100%; background: linear-gradient(90deg, #0891b2, #67e8f9); border-radius: 8px; transition: width 0.5s ease; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; font-weight: 600;"></div>
                </div>
            </div>
        </div>

        <!-- Daily Trend Chart -->
        <div style="background: white; padding: 20px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 24px;">
            <h3 style="margin: 0 0 16px 0; font-size: 16px;">Notifications Per Day (Last 30 Days)</h3>
            <canvas id="notifTrendChart" height="120"></canvas>
        </div>

        <!-- Top Users Table -->
        <div style="background: white; padding: 20px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 24px;">
            <h3 style="margin: 0 0 16px 0; font-size: 16px;">Top 10 Users by Notifications</h3>
            <div style="overflow-x: auto;">
                <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
                    <thead>
                        <tr style="background: #f5f3ff; border-bottom: 2px solid #c4b5fd;">
                            <th style="padding: 10px 12px; text-align: left;">#</th>
                            <th style="padding: 10px 12px; text-align: left;">User</th>
                            <th style="padding: 10px 12px; text-align: right;">Total</th>
                            <th style="padding: 10px 12px; text-align: right;">Seen</th>
                            <th style="padding: 10px 12px; text-align: right;">Clicked</th>
                            <th style="padding: 10px 12px; text-align: right;">Last Notification</th>
                        </tr>
                    </thead>
                    <tbody id="notif-top-users-tbody"></tbody>
                </table>
            </div>
        </div>

        <!-- Recent Notifications -->
        <div style="background: white; padding: 20px; border-radius: 12px; border: 1px solid #e5e7eb;">
            <h3 style="margin: 0 0 16px 0; font-size: 16px;">Recent Notifications (Last 20)</h3>
            <div style="overflow-x: auto;">
                <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
                    <thead>
                        <tr style="background: #f5f3ff; border-bottom: 2px solid #c4b5fd;">
                            <th style="padding: 10px 12px; text-align: left;">User</th>
                            <th style="padding: 10px 12px; text-align: left;">Message</th>
                            <th style="padding: 10px 12px; text-align: center;">Seen</th>
                            <th style="padding: 10px 12px; text-align: center;">Clicked</th>
                            <th style="padding: 10px 12px; text-align: right;">Time</th>
                        </tr>
                    </thead>
                    <tbody id="notif-recent-tbody"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- CSAT Tab -->
<div class="tab-content" id="tab-csat" style="display: none;">
    <h2 style="margin-bottom: 20px;">⭐ CSAT Feedback Dashboard</h2>

    <!-- Period selector -->
    <div style="margin-bottom: 16px; display: flex; gap: 8px; align-items: center;">
        <label><strong>Period:</strong></label>
        <select id="csat-days" style="padding: 6px 12px; border-radius: 6px; border: 1px solid #d1d5db;">
            <option value="7">Last 7 days</option>
            <option value="30" selected>Last 30 days</option>
            <option value="90">Last 90 days</option>
        </select>
        <label style="margin-left: 12px;"><strong>Context:</strong></label>
        <select id="csat-context-filter" style="padding: 6px 12px; border-radius: 6px; border: 1px solid #d1d5db;">
            <option value="">All</option>
            <option value="search">Search</option>
            <option value="playground_rephrase">Rephrase</option>
            <option value="playground_proofread">Proofread</option>
            <option value="playground_write">Write with AI</option>
            <option value="playground_criticize">Criticize</option>
            <option value="playground_ask">Ask AI</option>
            <option value="playground_translate">Translate</option>
            <option value="playground_summarize">Summarize</option>
            <option value="playground_citation">Citation</option>
            <option value="playground_tashkeel">Tashkeel</option>
            <option value="playground_keywords">Keywords</option>
            <option value="ocr">OCR</option>
            <option value="ai_detection">AI Detection</option>
            <option value="chatbot">ChatBot</option>
        </select>
        <button onclick="loadCsatData()" style="padding: 6px 16px; background: #00a55a; color: white; border: none; border-radius: 6px; cursor: pointer;">Refresh</button>
    </div>

    <!-- Overview Cards -->
    <div class="stats-grid" style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 24px;">
        <div class="stat-card" style="background: #f0fdf4; border-radius: 12px; padding: 20px; text-align: center;">
            <div style="font-size: 13px; color: #6b7280;">Total Responses</div>
            <div id="csat-total" style="font-size: 28px; font-weight: 700; color: #059669;">—</div>
        </div>
        <div class="stat-card" style="background: #fef9c3; border-radius: 12px; padding: 20px; text-align: center;">
            <div style="font-size: 13px; color: #6b7280;">Avg Rating</div>
            <div id="csat-avg-rating" style="font-size: 28px; font-weight: 700; color: #ca8a04;">—</div>
        </div>
        <div class="stat-card" style="background: #ede9fe; border-radius: 12px; padding: 20px; text-align: center;">
            <div style="font-size: 13px; color: #6b7280;">CSAT Score</div>
            <div id="csat-score" style="font-size: 28px; font-weight: 700; color: #7c3aed;">—</div>
        </div>
        <div class="stat-card" style="background: #dbeafe; border-radius: 12px; padding: 20px; text-align: center;">
            <div style="font-size: 13px; color: #6b7280;">NPS</div>
            <div id="csat-nps" style="font-size: 28px; font-weight: 700; color: #2563eb;">—</div>
        </div>
        <div class="stat-card" style="background: #fce7f3; border-radius: 12px; padding: 20px; text-align: center;">
            <div style="font-size: 13px; color: #6b7280;">Low Ratings (1-2)</div>
            <div id="csat-low-count" style="font-size: 28px; font-weight: 700; color: #db2777;">—</div>
        </div>
    </div>

    <!-- CSAT by Context -->
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px;">
        <div style="background: #fff; border-radius: 12px; padding: 20px; border: 1px solid #e5e7eb;">
            <h3 style="margin-bottom: 12px;">CSAT by Feature</h3>
            <table style="width: 100%; border-collapse: collapse; font-size: 13px;">
                <thead>
                    <tr style="border-bottom: 2px solid #e5e7eb;">
                        <th style="text-align: left; padding: 8px;">Context</th>
                        <th style="text-align: center; padding: 8px;">Responses</th>
                        <th style="text-align: center; padding: 8px;">Avg Rating</th>
                        <th style="text-align: center; padding: 8px;">CSAT %</th>
                    </tr>
                </thead>
                <tbody id="csat-by-context-tbody"></tbody>
            </table>
        </div>

        <div style="background: #fff; border-radius: 12px; padding: 20px; border: 1px solid #e5e7eb;">
            <h3 style="margin-bottom: 12px;">CSAT Trend</h3>
            <canvas id="csatTrendChart" height="200"></canvas>
        </div>
    </div>

    <!-- Search Correlation -->
    <div style="background: #fff; border-radius: 12px; padding: 20px; border: 1px solid #e5e7eb; margin-bottom: 24px;">
        <h3 style="margin-bottom: 12px;">Search CSAT vs Results Count</h3>
        <table style="width: 100%; border-collapse: collapse; font-size: 13px;">
            <thead>
                <tr style="border-bottom: 2px solid #e5e7eb;">
                    <th style="text-align: left; padding: 8px;">Result Bucket</th>
                    <th style="text-align: center; padding: 8px;">Responses</th>
                    <th style="text-align: center; padding: 8px;">Avg Rating</th>
                    <th style="text-align: center; padding: 8px;">CSAT %</th>
                </tr>
            </thead>
            <tbody id="csat-search-corr-tbody"></tbody>
        </table>
    </div>

    <!-- Recent Feedback & Low Rated -->
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px;">
        <div style="background: #fff; border-radius: 12px; padding: 20px; border: 1px solid #e5e7eb;">
            <h3 style="margin-bottom: 12px;">Recent Feedback</h3>
            <div style="max-height: 400px; overflow-y: auto;">
                <table style="width: 100%; border-collapse: collapse; font-size: 12px;">
                    <thead>
                        <tr style="border-bottom: 2px solid #e5e7eb;">
                            <th style="text-align: left; padding: 6px;">User</th>
                            <th style="text-align: center; padding: 6px;">Context</th>
                            <th style="text-align: center; padding: 6px;">Rating</th>
                            <th style="text-align: left; padding: 6px;">Comment</th>
                            <th style="text-align: right; padding: 6px;">Date</th>
                        </tr>
                    </thead>
                    <tbody id="csat-entries-tbody"></tbody>
                </table>
            </div>
        </div>
        <div style="background: #fff; border-radius: 12px; padding: 20px; border: 1px solid #fca5a5;">
            <h3 style="margin-bottom: 12px; color: #dc2626;">⚠ Low-Rated Feedback (1-2 stars)</h3>
            <div style="max-height: 400px; overflow-y: auto;">
                <table style="width: 100%; border-collapse: collapse; font-size: 12px;">
                    <thead>
                        <tr style="border-bottom: 2px solid #fca5a5;">
                            <th style="text-align: left; padding: 6px;">User</th>
                            <th style="text-align: center; padding: 6px;">Context</th>
                            <th style="text-align: center; padding: 6px;">Rating</th>
                            <th style="text-align: left; padding: 6px;">Comment</th>
                            <th style="text-align: right; padding: 6px;">Date</th>
                        </tr>
                    </thead>
                    <tbody id="csat-low-tbody"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Research Chat DSAT Tab -->
<div class="tab-content" id="tab-research-chat-dsat" style="display: none;">
    <h2 style="margin-bottom: 20px;">👎 Research Chat Feedback (DSAT)</h2>
    
    <!-- Period selector -->
    <div style="margin-bottom: 16px; display: flex; gap: 8px; align-items: center;">
        <label><strong>Period:</strong></label>
        <select id="dsat-days" style="padding: 6px 12px; border-radius: 6px; border: 1px solid #d1d5db;">
            <option value="7">Last 7 days</option>
            <option value="30" selected>Last 30 days</option>
            <option value="90">Last 90 days</option>
        </select>
        <button onclick="loadDsatData()" style="padding: 6px 16px; background: #dc2626; color: white; border: none; border-radius: 6px; cursor: pointer;">Refresh</button>
    </div>

    <!-- Overview Cards -->
    <div style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 24px;">
        <div style="background: #f0fdf4; border-radius: 12px; padding: 20px; text-align: center; border: 1px solid #bbf7d0;">
            <div style="font-size: 13px; color: #6b7280;">Total Feedback</div>
            <div id="dsat-total" style="font-size: 28px; font-weight: 700; color: #059669;">—</div>
        </div>
        <div style="background: #dcfce7; border-radius: 12px; padding: 20px; text-align: center; border: 1px solid #86efac;">
            <div style="font-size: 13px; color: #6b7280;">👍 Likes</div>
            <div id="dsat-likes" style="font-size: 28px; font-weight: 700; color: #16a34a;">—</div>
        </div>
        <div style="background: #fee2e2; border-radius: 12px; padding: 20px; text-align: center; border: 1px solid #fca5a5;">
            <div style="font-size: 13px; color: #6b7280;">👎 Dislikes</div>
            <div id="dsat-dislikes" style="font-size: 28px; font-weight: 700; color: #dc2626;">—</div>
        </div>
        <div style="background: #ede9fe; border-radius: 12px; padding: 20px; text-align: center; border: 1px solid #c4b5fd;">
            <div style="font-size: 13px; color: #6b7280;">Satisfaction %</div>
            <div id="dsat-satisfaction" style="font-size: 28px; font-weight: 700; color: #7c3aed;">—</div>
        </div>
        <div style="background: #fef9c3; border-radius: 12px; padding: 20px; text-align: center; border: 1px solid #fde047;">
            <div style="font-size: 13px; color: #6b7280;">With Comments</div>
            <div id="dsat-with-comments" style="font-size: 28px; font-weight: 700; color: #ca8a04;">—</div>
        </div>
    </div>

    <!-- Charts Row -->
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px;">
        <div style="background: #fff; border-radius: 12px; padding: 20px; border: 1px solid #e5e7eb;">
            <h3 style="margin-bottom: 12px;">Feedback Trend</h3>
            <canvas id="dsatTrendChart" height="200"></canvas>
        </div>
        <div style="background: #fff; border-radius: 12px; padding: 20px; border: 1px solid #e5e7eb;">
            <h3 style="margin-bottom: 12px;">Like/Dislike Distribution</h3>
            <canvas id="dsatDistChart" height="200"></canvas>
        </div>
    </div>

    <!-- Disliked Responses Table -->
    <div style="background: #fff; border-radius: 12px; padding: 20px; border: 1px solid #fca5a5; margin-bottom: 24px;">
        <h3 style="margin-bottom: 12px; color: #dc2626;">👎 Disliked Responses</h3>
        <div style="max-height: 500px; overflow-y: auto;">
            <table style="width: 100%; border-collapse: collapse; font-size: 12px;">
                <thead>
                    <tr style="border-bottom: 2px solid #fca5a5; position: sticky; top: 0; background: #fff;">
                        <th style="text-align: left; padding: 8px; width: 120px;">User</th>
                        <th style="text-align: left; padding: 8px; width: 180px;">Question</th>
                        <th style="text-align: left; padding: 8px;">Comment</th>
                        <th style="text-align: right; padding: 8px; width: 100px;">Date</th>
                    </tr>
                </thead>
                <tbody id="dsat-disliked-tbody"></tbody>
            </table>
        </div>
    </div>

    <!-- Recent All Feedback -->
    <div style="background: #fff; border-radius: 12px; padding: 20px; border: 1px solid #e5e7eb;">
        <h3 style="margin-bottom: 12px;">Recent All Feedback</h3>
        <div style="max-height: 400px; overflow-y: auto;">
            <table style="width: 100%; border-collapse: collapse; font-size: 12px;">
                <thead>
                    <tr style="border-bottom: 2px solid #e5e7eb; position: sticky; top: 0; background: #fff;">
                        <th style="text-align: left; padding: 8px;">User</th>
                        <th style="text-align: left; padding: 8px;">Question</th>
                        <th style="text-align: center; padding: 8px;">Feedback</th>
                        <th style="text-align: left; padding: 8px;">Comment</th>
                        <th style="text-align: right; padding: 8px;">Date</th>
                    </tr>
                </thead>
                <tbody id="dsat-all-tbody"></tbody>
            </table>
        </div>
    </div>
</div>

<!-- Follow Emails Tab -->
<div class="tab-content" id="tab-follow-emails" style="display: none;">
    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;">
        <h2 style="margin:0; font-size:1.3rem; color:#6d28d9;">📬 Follow Email Notifications</h2>
        <div style="display:flex; gap:8px; align-items:center;">
            <select id="fem-period" style="padding:5px 10px; border-radius:6px; border:1px solid #d1d5db; font-size:13px;">
                <option value="7">Last 7 days</option>
                <option value="30" selected>Last 30 days</option>
                <option value="90">Last 90 days</option>
                <option value="365">Last year</option>
            </select>
            <button onclick="loadFollowEmailData()" style="padding:5px 12px; border-radius:6px; border:1px solid #c4b5fd; background:#ede9fe; color:#6d28d9; cursor:pointer; font-size:13px;">↻ Refresh</button>
        </div>
    </div>

    <!-- Stats Cards -->
    <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; margin-bottom:20px;">
        <div style="background:#fff; border-radius:10px; padding:16px; border:1px solid #e5e7eb; text-align:center;">
            <div style="font-size:24px; font-weight:700; color:#6d28d9;" id="fem-total-sent">-</div>
            <div style="font-size:12px; color:#6b7280; margin-top:4px;">Emails Sent</div>
        </div>
        <div style="background:#fff; border-radius:10px; padding:16px; border:1px solid #e5e7eb; text-align:center;">
            <div style="font-size:24px; font-weight:700; color:#059669;" id="fem-open-rate">-</div>
            <div style="font-size:12px; color:#6b7280; margin-top:4px;">Open Rate</div>
        </div>
        <div style="background:#fff; border-radius:10px; padding:16px; border:1px solid #e5e7eb; text-align:center;">
            <div style="font-size:24px; font-weight:700; color:#2563eb;" id="fem-click-rate">-</div>
            <div style="font-size:12px; color:#6b7280; margin-top:4px;">Click Rate</div>
        </div>
        <div style="background:#fff; border-radius:10px; padding:16px; border:1px solid #e5e7eb; text-align:center;">
            <div style="font-size:24px; font-weight:700; color:#f59e0b;" id="fem-ctor">-</div>
            <div style="font-size:12px; color:#6b7280; margin-top:4px;">Click-to-Open</div>
        </div>
        <div style="background:#fff; border-radius:10px; padding:16px; border:1px solid #e5e7eb; text-align:center;">
            <div style="font-size:24px; font-weight:700; color:#6b7280;" id="fem-unique-recipients">-</div>
            <div style="font-size:12px; color:#6b7280; margin-top:4px;">Unique Recipients</div>
        </div>
        <div style="background:#fff; border-radius:10px; padding:16px; border:1px solid #e5e7eb; text-align:center;">
            <div style="font-size:24px; font-weight:700; color:#ef4444;" id="fem-opted-out">-</div>
            <div style="font-size:12px; color:#6b7280; margin-top:4px;">Opted Out</div>
        </div>
        <div style="background:#fff; border-radius:10px; padding:16px; border:1px solid #e5e7eb; text-align:center;">
            <div style="font-size:24px; font-weight:700; color:#10b981;" id="fem-opt-in-rate">-</div>
            <div style="font-size:12px; color:#6b7280; margin-top:4px;">Opt-in Rate</div>
        </div>
        <div style="background:#fff; border-radius:10px; padding:16px; border:1px solid #e5e7eb; text-align:center;">
            <div style="font-size:24px; font-weight:700; color:#8b5cf6;" id="fem-all-time">-</div>
            <div style="font-size:12px; color:#6b7280; margin-top:4px;">All Time Sent</div>
        </div>
    </div>

    <!-- Charts Row -->
    <div style="display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-bottom:20px;">
        <!-- Trend Chart -->
        <div style="background:#fff; border-radius:10px; padding:16px; border:1px solid #e5e7eb;">
            <h3 style="margin:0 0 12px 0; font-size:14px; color:#374151;">📈 Daily Trend</h3>
            <canvas id="fem-trend-chart" height="80"></canvas>
        </div>
        <!-- Engagement Funnel -->
        <div style="background:#fff; border-radius:10px; padding:16px; border:1px solid #e5e7eb;">
            <h3 style="margin:0 0 12px 0; font-size:14px; color:#374151;">🔽 Engagement Funnel</h3>
            <div id="fem-funnel" style="display:flex; flex-direction:column; gap:8px; padding-top:10px;">
                <div style="text-align:center;">
                    <div style="background:#ede9fe; border-radius:8px; padding:12px; margin:0 auto; max-width:280px;">
                        <div style="font-size:20px; font-weight:700; color:#6d28d9;" id="fem-funnel-sent">-</div>
                        <div style="font-size:11px; color:#6b7280;">Sent</div>
                    </div>
                </div>
                <div style="text-align:center; font-size:16px; color:#c4b5fd;">▼</div>
                <div style="text-align:center;">
                    <div style="background:#d1fae5; border-radius:8px; padding:12px; margin:0 auto; max-width:220px;">
                        <div style="font-size:20px; font-weight:700; color:#059669;" id="fem-funnel-opened">-</div>
                        <div style="font-size:11px; color:#6b7280;">Opened</div>
                    </div>
                </div>
                <div style="text-align:center; font-size:16px; color:#a7f3d0;">▼</div>
                <div style="text-align:center;">
                    <div style="background:#dbeafe; border-radius:8px; padding:12px; margin:0 auto; max-width:160px;">
                        <div style="font-size:20px; font-weight:700; color:#2563eb;" id="fem-funnel-clicked">-</div>
                        <div style="font-size:11px; color:#6b7280;">Clicked</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tables Row -->
    <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px;">
        <!-- Top Recipients -->
        <div style="background:#fff; border-radius:10px; padding:16px; border:1px solid #e5e7eb;">
            <h3 style="margin:0 0 12px 0; font-size:14px; color:#374151;">🏆 Top Recipients</h3>
            <div style="overflow-x:auto; max-height:350px; overflow-y:auto;">
                <table style="width:100%; border-collapse:collapse; font-size:12px;">
                    <thead>
                        <tr style="border-bottom:2px solid #e5e7eb; background:#f9fafb;">
                            <th style="text-align:left; padding:6px;">User</th>
                            <th style="text-align:right; padding:6px;">Emails</th>
                            <th style="text-align:right; padding:6px;">Opened</th>
                            <th style="text-align:right; padding:6px;">Clicked</th>
                        </tr>
                    </thead>
                    <tbody id="fem-top-tbody"></tbody>
                </table>
            </div>
        </div>
        <!-- Hourly Distribution -->
        <div style="background:#fff; border-radius:10px; padding:16px; border:1px solid #e5e7eb;">
            <h3 style="margin:0 0 12px 0; font-size:14px; color:#374151;">🕒 Hourly Distribution (Sends)</h3>
            <canvas id="fem-hourly-chart" height="160"></canvas>
        </div>
    </div>

    <!-- Recent Emails Table -->
    <div style="background:#fff; border-radius:10px; padding:16px; border:1px solid #e5e7eb;">
        <h3 style="margin:0 0 12px 0; font-size:14px; color:#374151;">📋 Recent Emails (Last 50)</h3>
        <div style="overflow-x:auto; max-height:400px; overflow-y:auto;">
            <table style="width:100%; border-collapse:collapse; font-size:12px;">
                <thead>
                    <tr style="border-bottom:2px solid #e5e7eb; background:#f9fafb;">
                        <th style="text-align:left; padding:6px;">Recipient</th>
                        <th style="text-align:left; padding:6px;">Follower</th>
                        <th style="text-align:center; padding:6px;">📬 Opened</th>
                        <th style="text-align:center; padding:6px;">🖱️ Clicked</th>
                        <th style="text-align:right; padding:6px;">Sent At</th>
                    </tr>
                </thead>
                <tbody id="fem-recent-tbody"></tbody>
            </table>
        </div>
    </div>
</div>

<!-- Welcome Chat Tab -->
<div class="tab-content" id="tab-welcome-chat" style="display: none;">
    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;">
        <h2 style="margin:0; font-size:1.3rem; color:#065f46;">💬 Welcome Chat Messages</h2>
        <div style="display:flex; gap:8px; align-items:center;">
            <label style="display:flex; align-items:center; gap:6px; cursor:pointer; font-size:13px;">
                <input type="checkbox" id="wc-enabled-toggle" style="width:16px; height:16px;">
                <span>Enabled</span>
            </label>
            <button onclick="saveWelcomeChatSettings()" style="padding:5px 12px; border-radius:6px; border:1px solid #6ee7b7; background:#d1fae5; color:#065f46; cursor:pointer; font-size:13px; font-weight:600;">💾 Save</button>
        </div>
    </div>

    <p style="color:#6b7280; font-size:13px; margin-bottom:16px;">
        New users will receive a personalized chat message after registration.<br>
        Use <code style="background:#f3f4f6; padding:2px 4px; border-radius:3px;">{{ '{{' }}firstName}}</code> as placeholder for the user's first name.
    </p>

    <!-- Sender Username -->
    <div style="background:#fff; border-radius:10px; padding:16px; border:1px solid #e5e7eb; margin-bottom:16px;">
        <label style="font-size:13px; font-weight:600; color:#374151; display:block; margin-bottom:8px;">Sender Username</label>
        <input type="text" id="wc-sender-username" placeholder="shadi" 
               style="width:200px; padding:8px 12px; border:1px solid #d1d5db; border-radius:6px; font-size:13px;">
        <p style="color:#9ca3af; font-size:11px; margin-top:4px;">The user who will appear as the sender of the welcome chat.</p>
    </div>

    <!-- Arabic Message -->
    <div style="background:#fff; border-radius:10px; padding:16px; border:1px solid #e5e7eb; margin-bottom:16px;">
        <label style="font-size:13px; font-weight:600; color:#374151; display:block; margin-bottom:8px;">🇸🇦 رسالة الترحيب (العربية)</label>
        <textarea id="wc-message-ar" rows="10" dir="rtl" placeholder="أدخل رسالة الترحيب بالعربية..."
                  style="width:100%; padding:12px; border:1px solid #d1d5db; border-radius:6px; font-size:14px; font-family:inherit; line-height:1.6; resize:vertical;"></textarea>
    </div>

    <!-- English Message -->
    <div style="background:#fff; border-radius:10px; padding:16px; border:1px solid #e5e7eb; margin-bottom:16px;">
        <label style="font-size:13px; font-weight:600; color:#374151; display:block; margin-bottom:8px;">🇺🇸 Welcome Message (English)</label>
        <textarea id="wc-message-en" rows="10" placeholder="Enter the English welcome message..."
                  style="width:100%; padding:12px; border:1px solid #d1d5db; border-radius:6px; font-size:14px; font-family:inherit; line-height:1.6; resize:vertical;"></textarea>
    </div>

    <div id="wc-save-status" style="padding:8px 12px; border-radius:6px; display:none; margin-top:12px;"></div>
</div>


<script>
// Tab switching with mobile dropdown sync
function switchTab(tabId) {
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.tab-content').forEach(c => c.style.display = 'none');
    
    var tabBtn = document.querySelector('.tab-btn[data-tab="' + tabId + '"]');
    if (tabBtn) tabBtn.classList.add('active');
    
    var tabContent = document.getElementById('tab-' + tabId);
    if (tabContent) tabContent.style.display = 'block';
    
    // Sync mobile dropdown
    var mobileSelect = document.getElementById('tabsMobileSelect');
    if (mobileSelect) mobileSelect.value = tabId;
}

function switchTabMobile(tabId) {
    switchTab(tabId);
    // Trigger any lazy-load handlers
    var tabBtn = document.querySelector('.tab-btn[data-tab="' + tabId + '"]');
    if (tabBtn) tabBtn.click();
}

document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        switchTab(btn.dataset.tab);
    });
});

// Charts
const trendData = {{ stats.daily_trend|json_encode|raw }};
const hourlyData = {{ stats.hourly_today|json_encode|raw }};
const operationsData = {{ stats.by_operation|json_encode|raw }};
const modelsData = {{ stats.by_model|json_encode|raw }};

// Trend Chart
if (trendData.length > 0) {
    new Chart(document.getElementById('trendChart'), {
        type: 'line',
        data: {
            labels: trendData.map(d => d.date),
            datasets: [{
                label: 'Requests',
                data: trendData.map(d => d.requests),
                borderColor: '#6366f1',
                backgroundColor: 'rgba(99, 102, 241, 0.1)',
                fill: true,
                tension: 0.3
            }, {
                label: 'Cost ($)',
                data: trendData.map(d => d.cost),
                borderColor: '#10b981',
                backgroundColor: 'transparent',
                yAxisID: 'y1',
                tension: 0.3
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: { beginAtZero: true, position: 'left' },
                y1: { beginAtZero: true, position: 'right', grid: { drawOnChartArea: false } }
            }
        }
    });
}

// Model Chart
if (modelsData.length > 0) {
    new Chart(document.getElementById('modelChart'), {
        type: 'doughnut',
        data: {
            labels: modelsData.map(d => d.model_used),
            datasets: [{
                data: modelsData.map(d => parseFloat(d.cost)),
                backgroundColor: ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6']
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { position: 'bottom' }
            }
        }
    });
}

// Hourly Chart
new Chart(document.getElementById('hourlyChart'), {
    type: 'bar',
    data: {
        labels: Array.from({length: 24}, (_, i) => i + ':00'),
        datasets: [{
            label: 'Requests',
            data: Array.from({length: 24}, (_, i) => {
                const hour = hourlyData.find(h => parseInt(h.hour) === i);
                return hour ? hour.requests : 0;
            }),
            backgroundColor: '#6366f1'
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: { y: { beginAtZero: true } }
    }
});

// Operations Chart
if (operationsData.length > 0) {
    new Chart(document.getElementById('operationsChart'), {
        type: 'pie',
        data: {
            labels: operationsData.map(d => d.operation_type),
            datasets: [{
                data: operationsData.map(d => d.count),
                backgroundColor: ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#3b82f6', '#ec4899', '#14b8a6']
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { position: 'bottom' }
            }
        }
    });
}

// Refresh data
function refreshData() {
    location.reload();
}

// Trial Activations Trend Chart
const trialTrendData = {{ stats.trial_stats.activation_trend|default([])|json_encode|raw }};
if (trialTrendData.length > 0) {
    new Chart(document.getElementById('trialTrendChart'), {
        type: 'bar',
        data: {
            labels: trialTrendData.map(d => d.date),
            datasets: [{
                label: 'Trial Activations',
                data: trialTrendData.map(d => d.activations),
                backgroundColor: '#10b981',
                borderRadius: 6
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } },
            plugins: { legend: { display: false } }
        }
    });
}

// Load trial users data via API when Trial tab is shown
let trialUsersLoaded = false;
document.querySelector('[data-tab="trial"]').addEventListener('click', function() {
    if (trialUsersLoaded) return;
    trialUsersLoaded = true;
    loadTrialUsers();
});

function loadTrialUsers() {
    fetch('{{ path('admin_playground_api_trial_users') }}')
        .then(r => {
            if (!r.ok) throw new Error('HTTP ' + r.status + ': ' + r.statusText);
            return r.json();
        })
        .then(data => {
            if (!data.success) {
                console.error('API error:', data.error || 'Unknown error');
                document.getElementById('trial-users-body').innerHTML = '<tr><td colspan="10" style="text-align:center; color:var(--dash-danger);">Error: ' + (data.error || 'Unknown error') + '</td></tr>';
                document.getElementById('trial-users-count').textContent = 'Error';
                return;
            }

            // Render users table
            const tbody = document.getElementById('trial-users-body');
            const countEl = document.getElementById('trial-users-count');
            const users = data.users || [];
            countEl.textContent = users.length + ' trial user' + (users.length !== 1 ? 's' : '');

            if (users.length === 0) {
                tbody.innerHTML = '<tr><td colspan="10" style="text-align:center; color:var(--dash-text-muted);">No trial users yet</td></tr>';
            } else {
                tbody.innerHTML = users.map(u => {
                    const pct = parseFloat(u.usage_percentage) || 0;
                    const barColor = pct < 50 ? 'var(--dash-success)' : pct < 80 ? 'var(--dash-warning)' : 'var(--dash-danger)';
                    const statusClass = u.status === 'active' ? 'active' : u.status === 'expired' ? 'expired' : 'inactive';
                    return `<tr>
                        <td><strong>${u.username || '—'}</strong></td>
                        <td>${u.email || '—'}</td>
                        <td><span class="trial-status-badge ${statusClass}">${u.status}</span></td>
                        <td>${parseInt(u.used_credits || 0)} / ${parseInt(u.monthly_credits || 100)}</td>
                        <td>
                            <div class="trial-usage-bar"><div class="trial-usage-fill" style="width:${Math.min(pct,100)}%;background:${barColor}"></div></div>
                            <span style="font-size:0.8rem;">${pct}%</span>
                        </td>
                        <td>${parseInt(u.total_requests || 0).toLocaleString()}</td>
                        <td>$${parseFloat(u.total_cost || 0).toFixed(4)}</td>
                        <td>${u.subscription_start ? new Date(u.subscription_start).toLocaleDateString() : '—'}</td>
                        <td>${u.subscription_end ? new Date(u.subscription_end).toLocaleDateString() : '—'}</td>
                        <td>${u.last_activity ? new Date(u.last_activity).toLocaleDateString() : '—'}</td>
                    </tr>`;
                }).join('');
            }

            // Render operations breakdown
            const opsTbody = document.getElementById('trial-ops-body');
            const ops = data.operation_breakdown || [];
            if (ops.length === 0) {
                opsTbody.innerHTML = '<tr><td colspan="4" style="text-align:center; color:var(--dash-text-muted);">No usage data yet</td></tr>';
            } else {
                opsTbody.innerHTML = ops.map(op => `<tr>
                    <td><strong>${op.operation_type}</strong></td>
                    <td>${parseInt(op.count).toLocaleString()}</td>
                    <td>${(parseInt(op.total_tokens || 0) / 1000).toFixed(1)}K</td>
                    <td>$${parseFloat(op.total_cost || 0).toFixed(4)}</td>
                </tr>`).join('');
            }
        })
        .catch(err => {
            console.error('Failed to load trial users:', err);
            document.getElementById('trial-users-body').innerHTML = '<tr><td colspan="10" style="text-align:center; color:var(--dash-danger);">Failed to load data</td></tr>';
        });
}

// ═══════════ Welcome Email Tab ═══════════

// Initialize TinyMCE WYSIWYG editor
let weEditorReady = false;
function initWelcomeEditor() {
    if (weEditorReady) return;
    weEditorReady = true;
    tinymce.init({
        selector: '#we-body',
        height: 450,
        directionality: 'rtl',
        plugins: 'code table link image lists fullscreen preview directionality',
        toolbar: 'undo redo | blocks fontsize | bold italic underline forecolor backcolor | alignleft aligncenter alignright | ltr rtl | bullist numlist | table link image | code fullscreen',
        menubar: 'file edit view insert format table',
        content_style: `
            body { font-family: 'Helvetica', 'Arial', sans-serif; font-size: 15px; line-height: 1.7; direction: rtl; color: #333; padding: 10px; }
            table { width: 100%; border-collapse: collapse; }
            td { padding: 8px; vertical-align: top; }
            a { color: #6d28d9; }
        `,
        table_default_attributes: { border: '0', cellpadding: '0', cellspacing: '0' },
        table_default_styles: { width: '100%' },
        valid_elements: '*[*]',
        valid_children: '+body[style],+div[style]',
        extended_valid_elements: 'style[type],link[rel|href|type],span[*],div[*],td[*],tr[*],table[*],a[*],img[*],strong[*],br',
        entity_encoding: 'raw',
        convert_urls: false,
        branding: false,
        promotion: false,
        setup: function(editor) {
            editor.on('change keyup', function() {
                editor.save();
            });
            // Once editor is ready, load template content into it
            editor.on('init', function() {
                loadWelcomeTemplate();
            });
        }
    });
}

// Helper to get/set editor content
function getWeBody() {
    const editor = tinymce.get('we-body');
    return editor ? editor.getContent() : document.getElementById('we-body').value;
}
function setWeBody(html) {
    const editor = tinymce.get('we-body');
    if (editor) {
        editor.setContent(html || '');
    } else {
        document.getElementById('we-body').value = html || '';
    }
}

function setWeStatus(elId, msg, type) {
    const el = document.getElementById(elId);
    el.textContent = msg;
    el.className = 'we-status ' + (type || '');
    if (type === 'success' || type === 'error') {
        setTimeout(() => { el.textContent = ''; el.className = 'we-status'; }, 5000);
    }
}

function saveWelcomeTemplate() {
    const subject = document.getElementById('we-subject').value;
    const body = getWeBody();
    const isActive = document.getElementById('we-active-toggle').checked;

    setWeStatus('we-save-status', 'Saving...', '');

    fetch('{{ path('admin_playground_api_welcome_email_save') }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ subject, body, is_active: isActive })
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            setWeStatus('we-save-status', '✅ Saved at ' + data.updated_at, 'success');
            document.getElementById('we-updated-info').textContent = 'Last updated: ' + data.updated_at;
        } else {
            setWeStatus('we-save-status', '❌ ' + (data.error || 'Failed'), 'error');
        }
    })
    .catch(err => setWeStatus('we-save-status', '❌ Network error', 'error'));
}

function previewWelcomeEmail() {
    const body = getWeBody();
    const subject = document.getElementById('we-subject').value;

    fetch('{{ path('admin_playground_api_welcome_email_preview') }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ body, subject })
    })
    .then(r => r.text())
    .then(html => {
        const iframe = document.getElementById('we-preview-frame');
        iframe.srcdoc = html;
    })
    .catch(err => console.error('Preview error:', err));
}

function sendTestWelcomeEmail() {
    const email = document.getElementById('we-test-email').value;
    const firstName = document.getElementById('we-test-fname').value;
    const lastName = document.getElementById('we-test-lname').value;

    if (!email) {
        setWeStatus('we-test-status', '❌ Enter an email address', 'error');
        return;
    }

    setWeStatus('we-test-status', 'Sending...', '');

    fetch('{{ path('admin_playground_api_welcome_email_test') }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, first_name: firstName, last_name: lastName })
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            setWeStatus('we-test-status', '✅ ' + data.message, 'success');
        } else {
            setWeStatus('we-test-status', '❌ ' + (data.error || 'Failed'), 'error');
        }
    })
    .catch(err => setWeStatus('we-test-status', '❌ Network error', 'error'));
}

// Toggle auto-send on change
document.getElementById('we-active-toggle').addEventListener('change', function() {
    saveWelcomeTemplate();
});

// Auto-preview on tab click
let welcomeLoaded = false;
document.querySelector('[data-tab="welcome"]').addEventListener('click', function() {
    if (!welcomeLoaded) {
        welcomeLoaded = true;
        initWelcomeEditor();
    } else {
        setTimeout(previewWelcomeEmail, 300);
    }
});

function loadWelcomeTemplate() {
    fetch('{{ path('admin_playground_api_welcome_email') }}')
        .then(r => r.json())
        .then(data => {
            if (data.success && data.template) {
                document.getElementById('we-subject').value = data.template.subject || '';
                setWeBody(data.template.body || '');
                document.getElementById('we-active-toggle').checked = data.template.is_active;
                if (data.template.updated_at) {
                    document.getElementById('we-updated-info').textContent = 'Last updated: ' + data.template.updated_at;
                }
                setTimeout(previewWelcomeEmail, 400);
            }
        })
        .catch(err => console.error('Failed to load welcome template:', err));
}

// ═══════════ Email Stats ═══════════
let emailStatsLoaded = false;
let emailTrendChart = null;

// Load email stats when welcome tab is opened
document.querySelector('[data-tab="welcome"]').addEventListener('click', function() {
    if (!emailStatsLoaded) {
        emailStatsLoaded = true;
        setTimeout(loadEmailStats, 400);
    }
});

function loadEmailStats() {
    const days = document.getElementById('email-stats-days').value || 30;

    fetch('{{ path('admin_playground_api_email_stats') }}?days=' + days + '&template=welcome_email')
        .then(r => r.json())
        .then(data => {
            if (!data.success) {
                console.error('Email stats error:', data.error);
                return;
            }

            // ── Stat Cards ───
            const s = data.stats || {};
            document.getElementById('es-total-sent').textContent = (s.total_sent || 0).toLocaleString();
            document.getElementById('es-open-rate').textContent = (parseFloat(s.open_rate) || 0).toFixed(1) + '%';
            document.getElementById('es-click-rate').textContent = (parseFloat(s.click_rate) || 0).toFixed(1) + '%';
            document.getElementById('es-cto-rate').textContent = (parseFloat(s.click_to_open_rate) || 0).toFixed(1) + '%';

            // ── Daily Trend Chart ───
            const trend = data.trend || [];
            const labels = trend.map(d => d.date);
            const sentData = trend.map(d => parseInt(d.sent) || 0);
            const openedData = trend.map(d => parseInt(d.opened) || 0);
            const clickedData = trend.map(d => parseInt(d.clicked) || 0);

            if (emailTrendChart) emailTrendChart.destroy();

            const ctx = document.getElementById('email-trend-chart');
            if (ctx && typeof Chart !== 'undefined') {
                emailTrendChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [
                            {
                                label: 'Sent',
                                data: sentData,
                                borderColor: '#8b5cf6',
                                backgroundColor: 'rgba(139,92,246,0.1)',
                                fill: true,
                                tension: 0.3,
                                pointRadius: 2,
                            },
                            {
                                label: 'Opened',
                                data: openedData,
                                borderColor: '#10b981',
                                backgroundColor: 'rgba(16,185,129,0.08)',
                                fill: true,
                                tension: 0.3,
                                pointRadius: 2,
                            },
                            {
                                label: 'Clicked',
                                data: clickedData,
                                borderColor: '#3b82f6',
                                backgroundColor: 'rgba(59,130,246,0.08)',
                                fill: true,
                                tension: 0.3,
                                pointRadius: 2,
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        animation: false,
                        plugins: { legend: { position: 'top' } },
                        scales: {
                            y: { beginAtZero: true, ticks: { stepSize: 1 } },
                            x: { ticks: { maxRotation: 45 } }
                        }
                    }
                });
            }

            // ── Recent Sends Table ───
            const tbody = document.getElementById('email-recent-tbody');
            const recent = data.recent || [];
            if (recent.length === 0) {
                tbody.innerHTML = '<tr><td colspan="7" style="text-align:center;color:var(--dash-muted);">No emails sent yet</td></tr>';
            } else {
                tbody.innerHTML = recent.map(r => {
                    const sentDate = new Date(r.sent_at).toLocaleDateString() + ' ' + new Date(r.sent_at).toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'});
                    const openedStr = r.opened_at ? new Date(r.opened_at).toLocaleDateString() : '—';
                    const status = r.click_count > 0 ? '<span style="color:#3b82f6;font-weight:600;">Clicked</span>'
                                 : r.open_count > 0 ? '<span style="color:#10b981;font-weight:600;">Opened</span>'
                                 : '<span style="color:var(--dash-muted);">Delivered</span>';
                    return `<tr>
                        <td style="font-size:0.85rem;">${r.recipient_email}</td>
                        <td>${r.username || '<em style="color:var(--dash-muted);">—</em>'}</td>
                        <td style="font-size:0.85rem;">${sentDate}</td>
                        <td>${openedStr}</td>
                        <td>${r.open_count || 0}</td>
                        <td>${r.click_count || 0}</td>
                        <td>${status}</td>
                    </tr>`;
                }).join('');
            }
        })
        .catch(err => {
            console.error('Email stats load error:', err);
            document.getElementById('email-recent-tbody').innerHTML =
                '<tr><td colspan="7" style="text-align:center;color:var(--dash-danger);">Failed to load</td></tr>';
        });
}

// ═══════════ Engagement Tab ═══════════
let engagementLoaded = false;
document.querySelector('[data-tab="engagement"]').addEventListener('click', function() {
    if (engagementLoaded) return;
    engagementLoaded = true;
    loadEngagement();
});

function loadEngagement() {
    fetch('{{ path('admin_playground_api_engagement') }}')
        .then(r => {
            if (!r.ok) throw new Error('HTTP ' + r.status);
            return r.json();
        })
        .then(data => {
            if (!data.success) {
                document.getElementById('engagement-body').innerHTML =
                    '<tr><td colspan="10" style="text-align:center;color:var(--dash-danger);">Error: ' + (data.error || 'Unknown') + '</td></tr>';
                return;
            }

            // ── Health Score Ring ─────────────────────────────
            const score = data.health_score || 0;
            const circumference = 2 * Math.PI * 68; // r=68
            const offset = circumference - (score / 100) * circumference;
            const ring = document.getElementById('healthRing');
            ring.style.strokeDashoffset = offset;
            ring.style.stroke = score >= 60 ? '#10b981' : score >= 30 ? '#f59e0b' : '#ef4444';
            document.getElementById('healthScoreText').innerHTML = score + '<span>%</span>';

            // ── Segment Cards ────────────────────────────────
            const seg = data.segments || {};
            ['dormant', 'at_risk', 'engaged', 'power'].forEach(k => {
                document.getElementById('seg-' + k + '-n').textContent = seg[k] || 0;
            });

            // ── Retention Alerts ─────────────────────────────
            const subs = data.subscribers || [];
            const dormant = subs.filter(s => s.risk_level === 'dormant');
            const atRisk = subs.filter(s => s.risk_level === 'at_risk');
            const alertContainer = document.getElementById('retention-alerts-container');

            if (dormant.length > 0) {
                let html = '<div class="retention-alerts critical">';
                html += '<div class="retention-alert-header">🚨 Dormant Subscribers — never used the platform</div>';
                dormant.forEach(u => {
                    html += `<div class="retention-alert-item">
                        <div>
                            <span class="retention-alert-user">${u.username}</span>
                            <span class="retention-alert-detail"> (${u.email}) — ${u.tier} tier</span>
                        </div>
                        <div class="retention-alert-detail">
                            Signed up ${u.days_since_signup} day(s) ago · 0 requests · ${u.monthly_credits} credits unused
                        </div>
                    </div>`;
                });
                html += '</div>';
                alertContainer.innerHTML = html;
            }

            if (atRisk.length > 0) {
                let html2 = '<div class="retention-alerts" style="margin-top:16px;">';
                html2 += '<div class="retention-alert-header">⚠️ At-Risk Subscribers — low usage or going inactive</div>';
                atRisk.forEach(u => {
                    const inactive = u.days_inactive !== null ? u.days_inactive + ' days inactive' : 'no activity';
                    html2 += `<div class="retention-alert-item">
                        <div>
                            <span class="retention-alert-user">${u.username}</span>
                            <span class="retention-alert-detail"> (${u.email}) — ${u.tier} tier</span>
                        </div>
                        <div class="retention-alert-detail">
                            ${parseFloat(u.utilization_pct || 0).toFixed(1)}% utilization · ${inactive} · ${parseInt(u.total_requests)} requests
                        </div>
                    </div>`;
                });
                html2 += '</div>';
                alertContainer.innerHTML += html2;
            }

            if (dormant.length === 0 && atRisk.length === 0) {
                alertContainer.innerHTML = '<div class="retention-alerts" style="border-color:var(--dash-success);background:linear-gradient(135deg,#ecfdf5,#d1fae5);">' +
                    '<div class="retention-alert-header" style="color:#065f46;">✅ All subscribers are healthy — no retention alerts</div></div>';
            }

            // ── Engagement Table ─────────────────────────────
            const tbody = document.getElementById('engagement-body');
            const countEl = document.getElementById('engagement-count');
            countEl.textContent = subs.length + ' subscriber' + (subs.length !== 1 ? 's' : '');

            if (subs.length === 0) {
                tbody.innerHTML = '<tr><td colspan="10" style="text-align:center;color:var(--dash-text-muted);">No subscribers yet</td></tr>';
            } else {
                tbody.innerHTML = subs.map(u => {
                    const pct = parseFloat(u.utilization_pct) || 0;
                    const barColor = u.risk_level === 'dormant' ? '#ef4444'
                                   : u.risk_level === 'at_risk' ? '#f59e0b'
                                   : u.risk_level === 'power' ? '#6366f1' : '#10b981';
                    const inactiveTxt = u.days_inactive !== null ? u.days_inactive + 'd' : 'never';
                    return `<tr>
                        <td><strong>${u.username}</strong><br><span style="font-size:0.8rem;color:var(--dash-text-muted);">${u.email}</span></td>
                        <td><span class="tier-badge ${u.tier}">${u.tier}</span></td>
                        <td><span class="risk-badge ${u.risk_level}">${u.risk_level.replace('_', ' ')}</span></td>
                        <td>${parseInt(u.used_credits)} / ${parseInt(u.total_allowance)}</td>
                        <td>
                            <div class="utilization-mini">
                                <div class="util-bar"><div class="util-fill" style="width:${Math.min(pct,100)}%;background:${barColor}"></div></div>
                                <span style="font-size:0.8rem;">${pct}%</span>
                            </div>
                        </td>
                        <td>${parseInt(u.total_requests).toLocaleString()}</td>
                        <td>${parseInt(u.distinct_operations)}</td>
                        <td>${u.days_since_signup}d</td>
                        <td style="color:${u.risk_level==='dormant'?'#ef4444':u.days_inactive>3?'#f59e0b':'var(--dash-text)'}">${inactiveTxt}</td>
                        <td>${u.last_activity ? new Date(u.last_activity).toLocaleDateString() + ' ' + new Date(u.last_activity).toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'}) : '<span style=\"color:var(--dash-danger)\">Never</span>'}</td>
                    </tr>`;
                }).join('');
            }

            // ── Tier Breakdown Table ─────────────────────────
            const tierTbody = document.getElementById('tier-engagement-body');
            const byTier = data.by_tier || {};
            const tierKeys = Object.keys(byTier);
            if (tierKeys.length === 0) {
                tierTbody.innerHTML = '<tr><td colspan="6" style="text-align:center;color:var(--dash-text-muted);">No data</td></tr>';
            } else {
                tierTbody.innerHTML = tierKeys.map(t => {
                    const d = byTier[t];
                    return `<tr>
                        <td><span class="tier-badge ${t}">${t}</span></td>
                        <td><strong>${d.total}</strong></td>
                        <td style="color:#ef4444;">${d.dormant}</td>
                        <td style="color:#d97706;">${d.at_risk}</td>
                        <td style="color:#059669;">${d.engaged}</td>
                        <td style="color:#4f46e5;">${d.power}</td>
                    </tr>`;
                }).join('');
            }
        })
        .catch(err => {
            console.error('Engagement load error:', err);
            document.getElementById('engagement-body').innerHTML =
                '<tr><td colspan="10" style="text-align:center;color:var(--dash-danger);">Failed to load engagement data</td></tr>';
        });
}

// Auto-refresh every 5 minutes
setInterval(refreshData, 300000);

// ═══════════ AI Detection Tab ═══════════
let aidLoaded = false;
let aidEngagementChart = null;
let aidTokenChart = null;
let aidCsatChart = null;
let aidCurrentDays = 7;

document.querySelector('[data-tab="ai-detection"]').addEventListener('click', function() {
    if (!aidLoaded) {
        aidLoaded = true;
        loadAiDetectionStats(aidCurrentDays);
    }
});

// Period buttons
document.querySelectorAll('.aid-period-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
        document.querySelectorAll('.aid-period-btn').forEach(function(b) { b.classList.remove('active'); });
        btn.classList.add('active');
        aidCurrentDays = parseInt(btn.dataset.aidDays);
        loadAiDetectionStats(aidCurrentDays);
    });
});

function loadAiDetectionStats(days) {
    fetch('{{ path("admin_playground_api_ai_detection_stats") }}?days=' + days)
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (!data.success) {
                document.getElementById('aid-loading').innerHTML =
                    '<span style="color:var(--dash-danger);">Error: ' + (data.error || 'Unknown') + '</span>';
                return;
            }
            document.getElementById('aid-loading').style.display = 'none';
            document.getElementById('aid-content').style.display = 'block';

            var s = data.summary || {};

            // ── Summary Cards ────────────────
            document.getElementById('aid-total-visits').textContent = parseInt(s.total_visits || 0).toLocaleString();
            document.getElementById('aid-unique-visitors').textContent = parseInt(s.unique_visitors || 0).toLocaleString();
            document.getElementById('aid-total-detections').textContent = parseInt(s.total_detections || 0).toLocaleString();
            document.getElementById('aid-visits-today').textContent = parseInt(s.visits_today || 0).toLocaleString();
            document.getElementById('aid-detections-today').textContent = parseInt(s.detections_today || 0).toLocaleString();

            var totalVisits = parseInt(s.total_visits || 0);
            var totalDetections = parseInt(s.total_detections || 0);
            var conversion = totalVisits > 0 ? ((totalDetections / totalVisits) * 100).toFixed(1) : '0';
            document.getElementById('aid-conversion').textContent = conversion + '%';

            // ── Token & Cost cards ───────────
            document.getElementById('aid-total-input').textContent = formatTokens(parseInt(s.total_tokens_input || 0));
            document.getElementById('aid-total-output').textContent = formatTokens(parseInt(s.total_tokens_output || 0));
            document.getElementById('aid-total-cost').textContent = '$' + parseFloat(s.total_cost || 0).toFixed(4);
            document.getElementById('aid-avg-latency').textContent = (parseInt(s.avg_latency || 0)).toLocaleString() + 'ms';

            // ── Engagement Chart (visitors + detections per day) ──
            var daily = data.daily || [];
            var labels = daily.map(function(d) { return d.date; });
            var visitorsData = daily.map(function(d) { return d.unique_visitors; });
            var detectionsData = daily.map(function(d) { return d.detections; });

            if (aidEngagementChart) aidEngagementChart.destroy();
            var ctx1 = document.getElementById('aidEngagementChart');
            if (ctx1 && typeof Chart !== 'undefined') {
                aidEngagementChart = new Chart(ctx1, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [
                            {
                                label: 'Unique Visitors',
                                data: visitorsData,
                                borderColor: '#6366f1',
                                backgroundColor: 'rgba(99, 102, 241, 0.1)',
                                fill: true,
                                tension: 0.3,
                                pointRadius: 3,
                                pointBackgroundColor: '#6366f1'
                            },
                            {
                                label: 'Detections Run',
                                data: detectionsData,
                                borderColor: '#10b981',
                                backgroundColor: 'rgba(16, 185, 129, 0.1)',
                                fill: true,
                                tension: 0.3,
                                pointRadius: 3,
                                pointBackgroundColor: '#10b981'
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        animation: false,
                        plugins: { legend: { position: 'top' } },
                        scales: {
                            y: { beginAtZero: true, ticks: { precision: 0 } },
                            x: { ticks: { maxRotation: 45 } }
                        }
                    }
                });
            }

            // ── Token Chart (input + output stacked bars) ────
            var inputTokens = daily.map(function(d) { return d.tokens_input; });
            var outputTokens = daily.map(function(d) { return d.tokens_output; });

            if (aidTokenChart) aidTokenChart.destroy();
            var ctx2 = document.getElementById('aidTokenChart');
            if (ctx2 && typeof Chart !== 'undefined') {
                aidTokenChart = new Chart(ctx2, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [
                            {
                                label: 'Input Tokens',
                                data: inputTokens,
                                backgroundColor: 'rgba(99, 102, 241, 0.7)',
                                borderRadius: 4,
                                stack: 'tokens'
                            },
                            {
                                label: 'Output Tokens',
                                data: outputTokens,
                                backgroundColor: 'rgba(16, 185, 129, 0.7)',
                                borderRadius: 4,
                                stack: 'tokens'
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        animation: false,
                        plugins: { legend: { position: 'top' } },
                        scales: {
                            x: { stacked: true, ticks: { maxRotation: 45 }, grid: { display: false } },
                            y: { stacked: true, beginAtZero: true }
                        }
                    }
                });
            }

            // ── Top Users ────────────────────
            var users = data.top_users || [];
            var tbody = document.getElementById('aid-top-users-body');
            if (users.length === 0) {
                tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;color:var(--dash-text-muted);">No detection usage yet</td></tr>';
            } else {
                tbody.innerHTML = users.map(function(u) {
                    return '<tr>' +
                        '<td><strong>' + (u.username || 'User #' + u.user_id) + '</strong><br><span style="font-size:0.8rem;color:var(--dash-text-muted);">' + (u.email || '') + '</span></td>' +
                        '<td>' + parseInt(u.detections).toLocaleString() + '</td>' +
                        '<td>' + formatTokens(parseInt(u.tokens || 0)) + '</td>' +
                        '<td>$' + parseFloat(u.cost || 0).toFixed(4) + '</td>' +
                        '<td style="font-size:0.85rem;">' + (u.last_detection ? new Date(u.last_detection).toLocaleDateString() : '—') + '</td>' +
                    '</tr>';
                }).join('');
            }

            // ── Feedback / CSAT ────────────────
            var fb = data.feedback || {};
            var fbs = fb.summary || {};
            var totalResp = parseInt(fbs.total_responses || 0);
            document.getElementById('aid-fb-total').textContent = totalResp.toLocaleString();
            document.getElementById('aid-fb-avg-rating').textContent = totalResp > 0 ? parseFloat(fbs.avg_rating || 0).toFixed(1) + '/5' : '—';
            document.getElementById('aid-fb-csat').textContent = totalResp > 0 ? parseFloat(fbs.csat_pct || 0).toFixed(0) + '%' : '—';

            var promoters = parseInt(fbs.promoters || 0);
            var passives = parseInt(fbs.passives || 0);
            var detractors = parseInt(fbs.detractors || 0);
            var npsScore = totalResp > 0
                ? Math.round(((promoters - detractors) / totalResp) * 100)
                : 0;
            document.getElementById('aid-fb-nps').textContent = totalResp > 0 ? (npsScore > 0 ? '+' : '') + npsScore : '—';
            document.getElementById('aid-fb-promoters').textContent = promoters;
            document.getElementById('aid-fb-passives').textContent = passives;
            document.getElementById('aid-fb-detractors').textContent = detractors;

            // NPS bar
            if (totalResp > 0) {
                document.getElementById('aid-fb-bar-promoters').style.width = ((promoters / totalResp) * 100) + '%';
                document.getElementById('aid-fb-bar-passives').style.width = ((passives / totalResp) * 100) + '%';
                document.getElementById('aid-fb-bar-detractors').style.width = ((detractors / totalResp) * 100) + '%';
            }

            // CSAT Trend Chart
            var fbDaily = fb.daily || [];
            if (aidCsatChart) aidCsatChart.destroy();
            var ctx3 = document.getElementById('aidCsatChart');
            if (ctx3 && typeof Chart !== 'undefined' && fbDaily.length > 0) {
                aidCsatChart = new Chart(ctx3, {
                    type: 'line',
                    data: {
                        labels: fbDaily.map(function(d) { return d.date; }),
                        datasets: [
                            {
                                label: 'CSAT %',
                                data: fbDaily.map(function(d) { return parseFloat(d.csat_pct); }),
                                borderColor: '#f59e0b',
                                backgroundColor: 'rgba(245, 158, 11, 0.1)',
                                fill: true,
                                tension: 0.3,
                                pointRadius: 4,
                                pointBackgroundColor: '#f59e0b',
                                yAxisID: 'y'
                            },
                            {
                                label: 'Responses',
                                data: fbDaily.map(function(d) { return parseInt(d.responses); }),
                                borderColor: '#6366f1',
                                backgroundColor: 'rgba(99, 102, 241, 0.5)',
                                type: 'bar',
                                borderRadius: 4,
                                yAxisID: 'y1'
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        animation: false,
                        plugins: { legend: { position: 'top' } },
                        scales: {
                            y: { beginAtZero: true, max: 100, position: 'left', title: { display: true, text: 'CSAT %' } },
                            y1: { beginAtZero: true, position: 'right', grid: { drawOnChartArea: false }, title: { display: true, text: 'Responses' }, ticks: { precision: 0 } },
                            x: { ticks: { maxRotation: 45 } }
                        }
                    }
                });
            }

            // Feedback entries table
            var fbEntries = fb.entries || [];
            var fbBody = document.getElementById('aid-fb-entries-body');
            if (fbEntries.length === 0) {
                fbBody.innerHTML = '<tr><td colspan="5" style="text-align:center;color:var(--dash-text-muted);">No feedback yet</td></tr>';
            } else {
                fbBody.innerHTML = fbEntries.map(function(e) {
                    var starsHtml = '';
                    for (var i = 1; i <= 5; i++) {
                        starsHtml += '<i class="fa fa-star" style="color:' + (i <= parseInt(e.rating) ? '#f59e0b' : '#e5e7eb') + ';font-size:0.85rem;"></i>';
                    }
                    var npsColor = parseInt(e.recommend) >= 9 ? '#10b981' : (parseInt(e.recommend) >= 7 ? '#f59e0b' : '#ef4444');
                    var commentText = e.comment ? (e.comment.length > 80 ? e.comment.substring(0, 80) + '…' : e.comment) : '<span style="color:var(--dash-text-muted);">—</span>';
                    return '<tr>' +
                        '<td><strong>' + (e.username || '?') + '</strong><br><span style="font-size:0.78rem;color:var(--dash-text-muted);">' + (e.email || '') + '</span></td>' +
                        '<td>' + starsHtml + '</td>' +
                        '<td><span style="display:inline-block;padding:2px 8px;border-radius:10px;font-weight:700;font-size:0.85rem;color:#fff;background:' + npsColor + ';">' + e.recommend + '</span></td>' +
                        '<td style="font-size:0.85rem;max-width:200px;">' + commentText + '</td>' +
                        '<td style="font-size:0.82rem;">' + (e.created_at ? new Date(e.created_at).toLocaleDateString() : '—') + '</td>' +
                    '</tr>';
                }).join('');
            }
        })
        .catch(function(err) {
            console.error('AI Detection stats error:', err);
            document.getElementById('aid-loading').innerHTML =
                '<span style="color:var(--dash-danger);">Failed to load AI Detection stats</span>';
        });
}

function formatTokens(n) {
    if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
    if (n >= 1000) return (n / 1000).toFixed(1) + 'K';
    return n.toLocaleString();
}

// ═══════════ OCR Tab ═══════════
let ocrLoaded = false;
let ocrTrendChartInstance = null;

document.querySelector('[data-tab="ocr"]').addEventListener('click', function() {
    if (!ocrLoaded) {
        loadOcrStats();
        ocrLoaded = true;
    }
});

function loadOcrStats() {
    fetch('{{ path("admin_playground_api_ocr_stats") }}', { credentials: 'same-origin' })
        .then(r => {
            if (!r.ok) throw new Error('HTTP ' + r.status);
            return r.json();
        })
        .then(data => {
            if (!data.success) {
                document.getElementById('ocr-loading').innerHTML =
                    '<span style="color:var(--dash-danger);">Error loading OCR stats</span>';
                return;
            }
            document.getElementById('ocr-loading').style.display = 'none';
            document.getElementById('ocr-content').style.display = 'block';

            const t = data.data.totals || {};
            const today = data.data.today || {};
            const week = data.data.week || {};
            const month = data.data.month || {};
            const avgSec = data.data.avg_processing_seconds;

            // Summary cards
            document.getElementById('ocr-total-jobs').textContent = parseInt(t.total_jobs || 0).toLocaleString();
            document.getElementById('ocr-completed').textContent = parseInt(t.completed_jobs || 0).toLocaleString();
            document.getElementById('ocr-failed').textContent = parseInt(t.failed_jobs || 0).toLocaleString();
            document.getElementById('ocr-active').textContent = parseInt(t.active_jobs || 0).toLocaleString();
            document.getElementById('ocr-total-pages').textContent = parseInt(t.total_pages || 0).toLocaleString();
            document.getElementById('ocr-total-credits').textContent = parseInt(t.total_credits || 0).toLocaleString();
            document.getElementById('ocr-avg-time').textContent = avgSec ? avgSec + 's' : 'N/A';
            document.getElementById('ocr-error-rate').textContent = data.data.error_rate + '%';

            // Period stats
            document.getElementById('ocr-today-jobs').textContent = parseInt(today.jobs || 0).toLocaleString();
            document.getElementById('ocr-today-pages').textContent = parseInt(today.pages || 0).toLocaleString();
            document.getElementById('ocr-today-credits').textContent = parseInt(today.credits || 0).toLocaleString();
            document.getElementById('ocr-week-jobs').textContent = parseInt(week.jobs || 0).toLocaleString();
            document.getElementById('ocr-week-pages').textContent = parseInt(week.pages || 0).toLocaleString();
            document.getElementById('ocr-week-credits').textContent = parseInt(week.credits || 0).toLocaleString();
            document.getElementById('ocr-month-jobs').textContent = parseInt(month.jobs || 0).toLocaleString();
            document.getElementById('ocr-month-pages').textContent = parseInt(month.pages || 0).toLocaleString();
            document.getElementById('ocr-month-credits').textContent = parseInt(month.credits || 0).toLocaleString();

            // Finance
            document.getElementById('ocr-mistral-cost').textContent = '$' + parseFloat(data.data.mistral_cost_usd || 0).toFixed(2);
            document.getElementById('ocr-credit-revenue').textContent = parseInt(data.data.credit_revenue || 0).toLocaleString() + ' credits';

            // Daily trend chart
            const trend = data.data.daily_trend || [];
            if (trend.length > 0 && typeof Chart !== 'undefined') {
                const ctx = document.getElementById('ocrTrendChart').getContext('2d');
                if (ocrTrendChartInstance) ocrTrendChartInstance.destroy();
                ocrTrendChartInstance = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: trend.map(d => d.day),
                        datasets: [{
                            label: 'Completed',
                            data: trend.map(d => parseInt(d.completed)),
                            backgroundColor: 'rgba(16, 185, 129, 0.7)',
                            borderRadius: 4,
                            stack: 'stack0'
                        }, {
                            label: 'Failed',
                            data: trend.map(d => parseInt(d.failed)),
                            backgroundColor: 'rgba(239, 68, 68, 0.7)',
                            borderRadius: 4,
                            stack: 'stack0'
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: { legend: { position: 'top' } },
                        scales: {
                            x: { stacked: true, grid: { display: false } },
                            y: { stacked: true, beginAtZero: true, ticks: { precision: 0 } }
                        }
                    }
                });
            }

            // Top users table
            const users = data.data.top_users || [];
            const tbody = document.getElementById('ocr-top-users-body');
            if (users.length === 0) {
                tbody.innerHTML = '<tr><td colspan="4" style="text-align:center;color:var(--dash-text-muted);">No OCR usage yet</td></tr>';
            } else {
                tbody.innerHTML = users.map(u => {
                    const name = (u.first_name || '') + ' ' + (u.last_name || '');
                    return `<tr>
                        <td><strong>${name.trim() || 'User #' + u.user_id}</strong><br><span style="font-size:0.8rem;color:var(--dash-text-muted);">${u.email}</span></td>
                        <td>${parseInt(u.jobs).toLocaleString()}</td>
                        <td>${parseInt(u.pages).toLocaleString()}</td>
                        <td>${parseInt(u.credits).toLocaleString()}</td>
                    </tr>`;
                }).join('');
            }
        })
        .catch(err => {
            console.error('OCR stats error:', err);
            document.getElementById('ocr-loading').innerHTML =
                '<span style="color:var(--dash-danger);">Failed to load OCR stats</span>';
        });
}

// ── Feature Settings Toggle ──────────────────────
(function() {
    var toggle = document.getElementById('fs-ai-detection-toggle');
    var status = document.getElementById('fs-ai-detection-status');
    if (!toggle) return;

    toggle.addEventListener('change', function() {
        var val = toggle.checked;
        status.textContent = 'Saving...';
        status.style.color = 'var(--dash-text-muted)';

        fetch('/jim19ud83/playground/api/feature-settings', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ key: 'ai_detection_free_access', value: val })
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.success) {
                status.textContent = '✓ Saved — ' + (val ? 'Free access ON' : 'Subscription required');
                status.style.color = 'var(--dash-success)';
            } else {
                status.textContent = '✗ Error: ' + (data.error || 'Unknown');
                status.style.color = 'var(--dash-danger)';
                toggle.checked = !val;
            }
        })
        .catch(function(err) {
            status.textContent = '✗ Network error';
            status.style.color = 'var(--dash-danger)';
            toggle.checked = !val;
        });
    });
})();

// ═══════════ Registered Users Tab ═══════════
(function() {
    var ruLoaded = false;
    var ruRegChart = null;
    var ruLoginChart = null;

    document.querySelector('[data-tab="registered-users"]').addEventListener('click', function() {
        if (!ruLoaded) {
            ruLoaded = true;
            loadUserStats();
        }
    });

    function loadUserStats() {
        fetch('/jim19ud83/playground/api/user-stats')
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (!data.success) {
                    document.getElementById('ru-loading').innerHTML = '<p style="color:var(--dash-danger)">Error: ' + (data.error || 'Unknown') + '</p>';
                    return;
                }
                document.getElementById('ru-loading').style.display = 'none';
                document.getElementById('ru-content').style.display = 'block';
                renderUserStats(data);
            })
            .catch(function(err) {
                document.getElementById('ru-loading').innerHTML = '<p style="color:var(--dash-danger)">Failed to load: ' + err.message + '</p>';
            });
    }

    function renderUserStats(data) {
        var o = data.overview;
        var total = parseInt(o.total_users) || 0;
        var verified = parseInt(o.verified) || 0;

        document.getElementById('ru-total').textContent = total.toLocaleString();
        document.getElementById('ru-verified').textContent = verified.toLocaleString();
        document.getElementById('ru-verified-pct').textContent = total > 0 ? (verified / total * 100).toFixed(1) + '% of total' : '';
        document.getElementById('ru-unverified').textContent = (parseInt(o.unverified) || 0).toLocaleString();
        document.getElementById('ru-new30').textContent = (parseInt(o.new_30d) || 0).toLocaleString();
        document.getElementById('ru-new7').textContent = (parseInt(o.new_7d) || 0).toLocaleString() + ' in last 7d';
        document.getElementById('ru-active30').textContent = (parseInt(o.active_30d) || 0).toLocaleString();
        document.getElementById('ru-active7').textContent = (parseInt(o.active_7d) || 0).toLocaleString() + ' in last 7d';
        document.getElementById('ru-newsletter').textContent = (parseInt(o.newsletter_enabled) || 0).toLocaleString();
        document.getElementById('ru-newsletter-disabled').textContent = (parseInt(o.newsletter_disabled) || 0).toLocaleString() + ' opted out';

        // Registration trend chart
        if (data.registration_trend && data.registration_trend.length > 0) {
            var labels = data.registration_trend.map(function(d) { return d.month; });
            var counts = data.registration_trend.map(function(d) { return parseInt(d.count); });
            var ctx = document.getElementById('ruRegChart').getContext('2d');
            if (ruRegChart) ruRegChart.destroy();
            ruRegChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'New Registrations',
                        data: counts,
                        backgroundColor: 'rgba(37, 99, 235, 0.6)',
                        borderColor: '#2563eb',
                        borderWidth: 1,
                        borderRadius: 4
                    }]
                },
                options: {
                    responsive: true, maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        x: { grid: { display: false }, ticks: { font: { size: 11 } } },
                        y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { precision: 0 } }
                    }
                }
            });
        }

        // Login activity chart
        if (data.login_trend && data.login_trend.length > 0) {
            var lLabels = data.login_trend.map(function(d) { return d.login_date; });
            var lCounts = data.login_trend.map(function(d) { return parseInt(d.count); });
            var ctx2 = document.getElementById('ruLoginChart').getContext('2d');
            if (ruLoginChart) ruLoginChart.destroy();
            ruLoginChart = new Chart(ctx2, {
                type: 'line',
                data: {
                    labels: lLabels,
                    datasets: [{
                        label: 'Logins',
                        data: lCounts,
                        borderColor: '#10b981',
                        backgroundColor: 'rgba(16, 185, 129, 0.1)',
                        fill: true,
                        tension: 0.3,
                        pointRadius: 2
                    }]
                },
                options: {
                    responsive: true, maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        x: { grid: { display: false }, ticks: { font: { size: 10 }, maxRotation: 45, maxTicksLimit: 15 } },
                        y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { precision: 0 } }
                    }
                }
            });
        }

        // Countries
        renderBarList('ru-countries', data.countries, 'country');
        // Locales
        renderBarList('ru-locales', data.locales, 'locale');
        // Degrees
        renderBarList('ru-degrees', data.degrees, 'degree');
        // Gender
        renderBarList('ru-genders', data.genders, 'gender');

        // Playground tiers
        renderPlaygroundTiers(data.playground_tiers);

        // Recent users table
        renderRecentUsers(data.recent_users);
    }

    function renderBarList(elId, items, labelKey) {
        var el = document.getElementById(elId);
        if (!items || items.length === 0) {
            el.innerHTML = '<p style="color:var(--dash-text-muted); font-size:13px; padding:8px 0;">No data</p>';
            return;
        }
        var max = Math.max.apply(null, items.map(function(d) { return parseInt(d.count); }));
        var html = '';
        items.forEach(function(d) {
            var pct = max > 0 ? (parseInt(d.count) / max * 100) : 0;
            var label = d[labelKey] || 'Unknown';
            html += '<div style="margin-bottom:8px;">' +
                '<div style="display:flex; justify-content:space-between; font-size:13px; margin-bottom:2px;">' +
                '<span style="font-weight:500;">' + label + '</span>' +
                '<span style="color:var(--dash-text-muted);">' + Number(d.count).toLocaleString() + '</span>' +
                '</div>' +
                '<div style="height:6px; background:#f1f5f9; border-radius:3px; overflow:hidden;">' +
                '<div style="height:100%; width:' + pct + '%; background:var(--dash-primary); border-radius:3px; transition:width 0.5s;"></div>' +
                '</div></div>';
        });
        el.innerHTML = html;
    }

    function renderPlaygroundTiers(tiers) {
        var el = document.getElementById('ru-playground-tiers');
        if (!tiers || tiers.length === 0) {
            el.innerHTML = '<p style="color:var(--dash-text-muted); font-size:13px;">No playground subscriptions</p>';
            return;
        }
        var tierColors = { trial: '#f59e0b', starter: '#3b82f6', researcher: '#8b5cf6', professional: '#10b981', institution: '#ef4444' };
        var html = '<div style="display:flex; flex-wrap:wrap; gap:12px;">';
        tiers.forEach(function(t) {
            var color = tierColors[t.tier] || '#64748b';
            html += '<div style="background:' + color + '10; border:1px solid ' + color + '40; border-radius:12px; padding:16px 24px; text-align:center; min-width:140px;">' +
                '<div style="font-size:1.5rem; font-weight:700; color:' + color + ';">' + Number(t.count).toLocaleString() + '</div>' +
                '<div style="font-size:13px; font-weight:600; color:var(--dash-text); text-transform:capitalize; margin-top:4px;">' + t.tier + '</div>' +
                '<div style="font-size:11px; color:var(--dash-text-muted); margin-top:2px;">' + Number(t.active_count).toLocaleString() + ' active</div>' +
                '</div>';
        });
        html += '</div>';
        el.innerHTML = html;
    }

    function renderRecentUsers(users) {
        var tbody = document.getElementById('ru-recent-tbody');
        if (!users || users.length === 0) {
            tbody.innerHTML = '<tr><td colspan="9" style="text-align:center; color:var(--dash-text-muted);">No recent registrations</td></tr>';
            return;
        }
        var html = '';
        users.forEach(function(u) {
            var name = ((u.first_name || '') + ' ' + (u.last_name || '')).trim() || '—';
            var regDate = u.created_at ? new Date(u.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '—';
            var loginDate = u.last_login ? new Date(u.last_login).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : 'Never';
            var verBadge = u.enabled == 1
                ? '<span style="background:#dcfce7; color:#16a34a; padding:2px 8px; border-radius:10px; font-size:11px;">Yes</span>'
                : '<span style="background:#fef2f2; color:#dc2626; padding:2px 8px; border-radius:10px; font-size:11px;">No</span>';
            html += '<tr>' +
                '<td>' + u.id + '</td>' +
                '<td style="font-weight:500;">' + (u.username || '—') + '</td>' +
                '<td style="font-size:12px;">' + (u.email || '—') + '</td>' +
                '<td>' + name + '</td>' +
                '<td>' + (u.country || '—') + '</td>' +
                '<td>' + (u.locale || 'ar') + '</td>' +
                '<td>' + verBadge + '</td>' +
                '<td style="font-size:12px;">' + regDate + '</td>' +
                '<td style="font-size:12px;">' + loginDate + '</td>' +
                '</tr>';
        });
        tbody.innerHTML = html;
    }
})();

// ═══════════ Profile Completion Analytics ═══════════
var pcCurrentPage = 1;
var pcTotalPages = 1;
var pcDataLoaded = false;

function loadProfileCompletionData() {
    document.getElementById('pc-loading').style.display = 'block';
    document.getElementById('pc-content').style.display = 'none';
    
    fetch('/jim19ud83/playground/api/profile-completion')
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (!data.success) {
                document.getElementById('pc-loading').innerHTML = '<span style="color:#dc2626;">Error: ' + (data.error || 'Unknown') + '</span>';
                return;
            }
            document.getElementById('pc-loading').style.display = 'none';
            document.getElementById('pc-content').style.display = 'block';
            renderProfileCompletionStats(data);
            pcDataLoaded = true;
        })
        .catch(function(err) {
            document.getElementById('pc-loading').innerHTML = '<span style="color:#dc2626;">Failed: ' + err.message + '</span>';
        });
}

function renderProfileCompletionStats(data) {
    var dist = data.distribution || {};
    var total = Object.values(dist).reduce(function(a, b) { return a + b; }, 0) || 1;
    
    // Tier counts
    document.getElementById('pc-beginner').textContent = (dist.beginner || 0).toLocaleString();
    document.getElementById('pc-developing').textContent = (dist.developing || 0).toLocaleString();
    document.getElementById('pc-researcher').textContent = (dist.researcher || 0).toLocaleString();
    document.getElementById('pc-scholar').textContent = (dist.scholar || 0).toLocaleString();
    document.getElementById('pc-scientist').textContent = (dist.scientist || 0).toLocaleString();
    
    // Average score
    document.getElementById('pc-avg-score').textContent = (data.average_score || 0).toFixed(1) + '%';
    
    // Distribution bar
    document.getElementById('pc-bar-beginner').style.width = ((dist.beginner || 0) / total * 100) + '%';
    document.getElementById('pc-bar-developing').style.width = ((dist.developing || 0) / total * 100) + '%';
    document.getElementById('pc-bar-researcher').style.width = ((dist.researcher || 0) / total * 100) + '%';
    document.getElementById('pc-bar-scholar').style.width = ((dist.scholar || 0) / total * 100) + '%';
    document.getElementById('pc-bar-scientist').style.width = ((dist.scientist || 0) / total * 100) + '%';
    
    // Field rates
    var fieldRatesEl = document.getElementById('pc-field-rates');
    var fieldHtml = '';
    var fields = data.field_rates || [];
    fields.forEach(function(f) {
        var pct = parseFloat(f.completion_rate) || 0;
        var color = pct >= 70 ? '#16a34a' : (pct >= 40 ? '#d97706' : '#dc2626');
        fieldHtml += '<div style="background:#f8fafc; padding:10px 12px; border-radius:8px; border:1px solid #e2e8f0;">' +
            '<div style="display:flex; justify-content:space-between; font-size:12px; margin-bottom:4px;">' +
            '<span style="font-weight:500; color:#334155;">' + f.field + '</span>' +
            '<span style="color:' + color + '; font-weight:600;">' + pct.toFixed(1) + '%</span>' +
            '</div>' +
            '<div style="height:5px; background:#e2e8f0; border-radius:3px; overflow:hidden;">' +
            '<div style="height:100%; width:' + pct + '%; background:' + color + '; border-radius:3px;"></div>' +
            '</div></div>';
    });
    fieldRatesEl.innerHTML = fieldHtml;
    
    // Users list
    pcTotalPages = data.pages || 1;
    pcCurrentPage = data.page || 1;
    document.getElementById('pc-users-count').textContent = (data.total_above_50 || 0).toLocaleString();
    renderProfileCompletionUsers(data.users || []);
    updatePcPagination();
}

function renderProfileCompletionUsers(users) {
    var tbody = document.getElementById('pc-users-tbody');
    if (!users || users.length === 0) {
        tbody.innerHTML = '<tr><td colspan="6" style="text-align:center; color:#64748b; padding:20px;">No users with &gt;50% profile completion</td></tr>';
        return;
    }
    
    var tierColors = {
        researcher: { bg: '#dbeafe', color: '#1e40af', icon: '📖' },
        scholar: { bg: '#d1fae5', color: '#065f46', icon: '📚' },
        scientist: { bg: '#fef3c7', color: '#78350f', icon: '🎓' }
    };
    
    var html = '';
    users.forEach(function(u) {
        var score = parseFloat(u.score) || 0;
        var tier = u.tier || 'researcher';
        var tc = tierColors[tier] || tierColors.researcher;
        var joined = u.created_at ? new Date(u.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '—';
        var lastLogin = u.last_login ? new Date(u.last_login).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : 'Never';
        
        html += '<tr>' +
            '<td style="padding:10px 12px;">' +
                '<div style="display:flex; align-items:center; gap:10px;">' +
                    '<div style="width:32px; height:32px; border-radius:50%; background:#e2e8f0; display:flex; align-items:center; justify-content:center; font-weight:600; color:#475569; font-size:12px;">' +
                        (u.username ? u.username.charAt(0).toUpperCase() : '?') +
                    '</div>' +
                    '<div>' +
                        '<div style="font-weight:500; color:#1e293b;">' + (u.username || '—') + '</div>' +
                        '<div style="font-size:11px; color:#64748b;">' + (u.email || '') + '</div>' +
                    '</div>' +
                '</div>' +
            '</td>' +
            '<td style="padding:10px 12px;">' +
                '<div style="font-weight:600; color:#1e40af;">' + score.toFixed(0) + '%</div>' +
            '</td>' +
            '<td style="padding:10px 12px;">' +
                '<span style="background:' + tc.bg + '; color:' + tc.color + '; padding:3px 10px; border-radius:12px; font-size:12px; font-weight:500;">' +
                    tc.icon + ' ' + tier.charAt(0).toUpperCase() + tier.slice(1) +
                '</span>' +
            '</td>' +
            '<td style="padding:10px 12px; font-size:12px; color:#64748b;">' + joined + '</td>' +
            '<td style="padding:10px 12px; font-size:12px; color:#64748b;">' + lastLogin + '</td>' +
            '<td style="padding:10px 12px;">' +
                '<a href="/users/' + (u.username || u.id) + '" target="_blank" style="color:#2563eb; text-decoration:none; font-size:12px;">View →</a>' +
            '</td>' +
            '</tr>';
    });
    tbody.innerHTML = html;
}

function loadProfileCompletionUsers(page) {
    if (page < 1 || page > pcTotalPages) return;
    
    var tbody = document.getElementById('pc-users-tbody');
    tbody.innerHTML = '<tr><td colspan="5" style="text-align:center; padding:20px;"><i class="fa fa-spinner fa-spin"></i> Loading...</td></tr>';
    
    fetch('/jim19ud83/playground/api/profile-completion?page=' + page)
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.success) {
                pcCurrentPage = data.page || 1;
                pcTotalPages = data.pages || 1;
                renderProfileCompletionUsers(data.users || []);
                updatePcPagination();
            }
        });
}

function updatePcPagination() {
    document.getElementById('pc-page-info').textContent = 'Page ' + pcCurrentPage + ' of ' + pcTotalPages;
    document.getElementById('pc-prev-btn').disabled = pcCurrentPage <= 1;
    document.getElementById('pc-next-btn').disabled = pcCurrentPage >= pcTotalPages;
    document.getElementById('pc-prev-btn').onclick = function() { loadProfileCompletionUsers(pcCurrentPage - 1); };
    document.getElementById('pc-next-btn').onclick = function() { loadProfileCompletionUsers(pcCurrentPage + 1); };
}

// Auto-load when Users tab is shown
document.querySelector('[data-tab="registered-users"]').addEventListener('click', function() {
    if (!pcDataLoaded) {
        setTimeout(loadProfileCompletionData, 300);
    }
});

// ===========================
// Search CTR Analytics
// ===========================
var sctrTrendChart = null;
var sctrPositionChart = null;
var sctrNoClicksOffset = 0;

function getSctrDays() {
    return parseInt(document.getElementById('sctr-period').value) || 30;
}

function loadSearchCtrData() {
    var days = getSctrDays();
    sctrNoClicksOffset = 0;
    document.getElementById('sctr-no-clicks-tbody').innerHTML = '';

    // Load all data in parallel
    Promise.all([
        fetch('{{ path("admin_playground_api_search_ctr_stats") }}?days=' + days).then(r => r.json()),
        fetch('{{ path("admin_playground_api_search_ctr_trend") }}?days=' + days).then(r => r.json()),
        fetch('{{ path("admin_playground_api_search_ctr_top_queries") }}?days=' + days).then(r => r.json()),
        fetch('{{ path("admin_playground_api_search_ctr_no_clicks") }}?days=' + days + '&limit=100&offset=0').then(r => r.json()),
        fetch('{{ path("admin_playground_api_search_ctr_zero_results") }}?days=' + days).then(r => r.json()),
        fetch('{{ path("admin_playground_api_search_ctr_positions") }}?days=' + days).then(r => r.json()),
    ]).then(function(results) {
        var statsData = results[0];
        var trendData = results[1];
        var topData = results[2];
        var noClickData = results[3];
        var zeroResData = results[4];
        var posData = results[5];

        // Stats cards
        if (statsData.success) {
            var s = statsData.stats;
            document.getElementById('sctr-total-queries').textContent = (s.total_queries || 0).toLocaleString();
            document.getElementById('sctr-ctr').textContent = (s.ctr || 0) + '%';
            document.getElementById('sctr-total-clicks').textContent = (s.total_clicks || 0).toLocaleString();
            document.getElementById('sctr-no-clicks').textContent = (s.queries_without_clicks || 0).toLocaleString();
            document.getElementById('sctr-zero-results').textContent = (s.zero_result_queries || 0).toLocaleString();
            document.getElementById('sctr-avg-position').textContent = s.avg_click_position || '—';
        }

        // Trend chart
        if (trendData.success && trendData.trend) {
            renderSctrTrendChart(trendData.trend);
        }

        // Top queries
        if (topData.success && topData.queries) {
            renderTopQueries(topData.queries);
        }

        // No clicks
        if (noClickData.success) {
            renderNoClicks(noClickData.queries, false);
            sctrNoClicksOffset = noClickData.queries.length;
            var total = noClickData.total || 0;
            document.getElementById('sctr-no-clicks-total').textContent = '(' + total + ' total)';
            document.getElementById('sctr-no-clicks-load-more').style.display = (sctrNoClicksOffset < total) ? 'inline-block' : 'none';
        }

        // Zero results
        if (zeroResData.success && zeroResData.queries) {
            renderZeroResults(zeroResData.queries);
        }

        // Position distribution
        if (posData.success && posData.positions) {
            renderPositionChart(posData.positions);
        }
    }).catch(function(err) {
        console.error('Search CTR load error:', err);
    });
}

function renderSctrTrendChart(data) {
    var ctx = document.getElementById('sctr-trend-chart').getContext('2d');
    if (sctrTrendChart) sctrTrendChart.destroy();

    var labels = data.map(function(d) { return d.day; });
    var queries = data.map(function(d) { return parseInt(d.queries); });
    var clicks = data.map(function(d) { return parseInt(d.clicks); });
    var ctrArr = data.map(function(d) {
        var q = parseInt(d.queries);
        var c = parseInt(d.queries_with_clicks);
        return q > 0 ? Math.round(c / q * 100 * 100) / 100 : 0;
    });

    sctrTrendChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [
                {
                    label: 'Searches',
                    data: queries,
                    borderColor: '#0284c7',
                    backgroundColor: 'rgba(2,132,199,0.1)',
                    tension: 0.3,
                    fill: true,
                    yAxisID: 'y'
                },
                {
                    label: 'Clicks',
                    data: clicks,
                    borderColor: '#16a34a',
                    backgroundColor: 'rgba(22,163,106,0.1)',
                    tension: 0.3,
                    fill: true,
                    yAxisID: 'y'
                },
                {
                    label: 'CTR %',
                    data: ctrArr,
                    borderColor: '#d97706',
                    borderDash: [5, 5],
                    tension: 0.3,
                    fill: false,
                    yAxisID: 'y1'
                }
            ]
        },
        options: {
            responsive: true,
            interaction: { mode: 'index', intersect: false },
            scales: {
                y: { beginAtZero: true, position: 'left', title: { display: true, text: 'Count' } },
                y1: { beginAtZero: true, position: 'right', min: 0, max: 100, title: { display: true, text: 'CTR %' }, grid: { drawOnChartArea: false } }
            }
        }
    });
}

function renderPositionChart(data) {
    var ctx = document.getElementById('sctr-position-chart').getContext('2d');
    if (sctrPositionChart) sctrPositionChart.destroy();

    var labels = data.map(function(d) { return 'Pos ' + d.position; });
    var clicks = data.map(function(d) { return parseInt(d.clicks); });

    sctrPositionChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: 'Clicks',
                data: clicks,
                backgroundColor: '#818cf8',
                borderRadius: 4,
            }]
        },
        options: {
            responsive: true,
            scales: { y: { beginAtZero: true } },
            plugins: { legend: { display: false } }
        }
    });
}

function renderTopQueries(queries) {
    var tbody = document.getElementById('sctr-top-queries-tbody');
    var html = '';
    queries.forEach(function(q, i) {
        var avgRes = q.avg_results ? parseFloat(q.avg_results).toFixed(1) : '0';
        var ctrColor = parseFloat(q.ctr) > 0 ? '#16a34a' : '#dc2626';
        html += '<tr style="border-bottom: 1px solid #f3f4f6;">' +
            '<td style="padding: 8px 12px; color: #6b7280;">' + (i + 1) + '</td>' +
            '<td style="padding: 8px 12px; font-weight: 500; direction: auto; max-width: 400px; word-break: break-word;">' + escapeHtml(q.query_text) + '</td>' +
            '<td style="padding: 8px 12px; text-align: right;">' + parseInt(q.search_count).toLocaleString() + '</td>' +
            '<td style="padding: 8px 12px; text-align: right;">' + avgRes + '</td>' +
            '<td style="padding: 8px 12px; text-align: right;">' + parseInt(q.click_count).toLocaleString() + '</td>' +
            '<td style="padding: 8px 12px; text-align: right; font-weight: 600; color: ' + ctrColor + ';">' + q.ctr + '%</td>' +
            '</tr>';
    });
    tbody.innerHTML = html || '<tr><td colspan="6" style="padding: 20px; text-align: center; color: #9ca3af;">No data yet</td></tr>';
}

function renderNoClicks(queries, append) {
    var tbody = document.getElementById('sctr-no-clicks-tbody');
    var html = append ? tbody.innerHTML : '';
    var startIdx = append ? tbody.querySelectorAll('tr').length : 0;
    queries.forEach(function(q, i) {
        var avgRes = q.avg_results ? parseFloat(q.avg_results).toFixed(1) : '0';
        var lastDate = q.last_searched ? q.last_searched.substring(0, 16) : '—';
        html += '<tr style="border-bottom: 1px solid #f3f4f6;">' +
            '<td style="padding: 8px 12px; color: #6b7280;">' + (startIdx + i + 1) + '</td>' +
            '<td style="padding: 8px 12px; font-weight: 500; direction: auto; max-width: 400px; word-break: break-word;">' + escapeHtml(q.query_text) + '</td>' +
            '<td style="padding: 8px 12px; text-align: right;">' + parseInt(q.search_count).toLocaleString() + '</td>' +
            '<td style="padding: 8px 12px; text-align: right;">' + avgRes + '</td>' +
            '<td style="padding: 8px 12px; text-align: right; font-size: 12px;">' + lastDate + '</td>' +
            '</tr>';
    });
    tbody.innerHTML = html || '<tr><td colspan="5" style="padding: 20px; text-align: center; color: #9ca3af;">No data yet</td></tr>';
}

function renderZeroResults(queries) {
    var tbody = document.getElementById('sctr-zero-results-tbody');
    var html = '';
    queries.forEach(function(q, i) {
        var lastDate = q.last_searched ? q.last_searched.substring(0, 16) : '—';
        html += '<tr style="border-bottom: 1px solid #f3f4f6;">' +
            '<td style="padding: 8px 12px; color: #6b7280;">' + (i + 1) + '</td>' +
            '<td style="padding: 8px 12px; font-weight: 500; direction: auto; max-width: 400px; word-break: break-word;">' + escapeHtml(q.query_text) + '</td>' +
            '<td style="padding: 8px 12px; text-align: right;">' + parseInt(q.search_count).toLocaleString() + '</td>' +
            '<td style="padding: 8px 12px; text-align: right; font-size: 12px;">' + lastDate + '</td>' +
            '</tr>';
    });
    tbody.innerHTML = html || '<tr><td colspan="4" style="padding: 20px; text-align: center; color: #9ca3af;">No data yet</td></tr>';
}

function loadMoreNoClicks() {
    var days = getSctrDays();
    fetch('{{ path("admin_playground_api_search_ctr_no_clicks") }}?days=' + days + '&limit=100&offset=' + sctrNoClicksOffset)
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.success && data.queries && data.queries.length > 0) {
                renderNoClicks(data.queries, true);
                sctrNoClicksOffset += data.queries.length;
                var total = data.total || 0;
                document.getElementById('sctr-no-clicks-load-more').style.display = (sctrNoClicksOffset < total) ? 'inline-block' : 'none';
            } else {
                document.getElementById('sctr-no-clicks-load-more').style.display = 'none';
            }
        });
}

function switchSctrSubtab(btn) {
    document.querySelectorAll('.sctr-subtab').forEach(function(b) {
        b.style.background = '#f9fafb';
        b.style.color = '#374151';
        b.classList.remove('active');
    });
    btn.style.background = '#111827';
    btn.style.color = 'white';
    btn.classList.add('active');

    var subtab = btn.getAttribute('data-subtab');
    document.getElementById('sctr-panel-top-queries').style.display = (subtab === 'top-queries') ? 'block' : 'none';
    document.getElementById('sctr-panel-no-clicks').style.display = (subtab === 'no-clicks') ? 'block' : 'none';
    document.getElementById('sctr-panel-zero-results').style.display = (subtab === 'zero-results') ? 'block' : 'none';
}

function escapeHtml(text) {
    if (!text) return '';
    var div = document.createElement('div');
    div.appendChild(document.createTextNode(text));
    return div.innerHTML;
}

// Lazy-load search CTR data when tab is activated
var sctrLoaded = false;
var origTabClick = null;
document.querySelectorAll('.tab-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
        if (btn.getAttribute('data-tab') === 'search-ctr' && !sctrLoaded) {
            sctrLoaded = true;
            loadSearchCtrData();
        }
    });
});

document.getElementById('sctr-period').addEventListener('change', function() {
    sctrLoaded = true;
    loadSearchCtrData();
});

// ═══ Notification Stats (lazy-loaded) ═══
var notifLoaded = false;
document.querySelectorAll('.tab-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
        if (btn.getAttribute('data-tab') === 'notifications' && !notifLoaded) {
            notifLoaded = true;
            loadNotificationStats();
        }
    });
});

function loadNotificationStats() {
    fetch('{{ path("admin_playground_api_notification_stats") }}')
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (!data.success) { document.getElementById('notif-loading').textContent = 'Error: ' + (data.error || 'Unknown'); return; }
            var s = data.stats;
            var ov = s.overview;
            var total = parseInt(ov.total_notifications) || 0;
            var seen = parseInt(ov.seen_count) || 0;
            var clicked = parseInt(ov.clicked_count) || 0;
            var unseen = parseInt(ov.unseen_count) || 0;
            var usersWithN = parseInt(ov.users_with_notifications) || 0;
            var totalUsers = s.total_users || 1;
            var pushDev = s.push_devices || {};

            document.getElementById('notif-total').textContent = total.toLocaleString();
            document.getElementById('notif-users-with').textContent = usersWithN.toLocaleString();
            document.getElementById('notif-seen-rate').textContent = total > 0 ? ((seen / total) * 100).toFixed(1) + '%' : '0%';
            document.getElementById('notif-click-rate').textContent = total > 0 ? ((clicked / total) * 100).toFixed(1) + '%' : '0%';
            document.getElementById('notif-unseen').textContent = unseen.toLocaleString();
            document.getElementById('notif-push-devices').textContent = (parseInt(pushDev.total_devices) || 0).toLocaleString();

            // Coverage bars
            var covPct = Math.min(100, (usersWithN / totalUsers) * 100);
            var bar1 = document.getElementById('notif-coverage-bar');
            bar1.style.width = covPct.toFixed(1) + '%';
            bar1.textContent = usersWithN.toLocaleString() + ' / ' + totalUsers.toLocaleString() + ' (' + covPct.toFixed(1) + '%)';

            var pushUsers = parseInt(pushDev.users_with_push) || 0;
            var pushPct = Math.min(100, (pushUsers / totalUsers) * 100);
            var bar2 = document.getElementById('notif-push-bar');
            bar2.style.width = Math.max(pushPct, 0.5).toFixed(1) + '%';
            bar2.textContent = pushUsers.toLocaleString() + ' / ' + totalUsers.toLocaleString() + ' (' + pushPct.toFixed(1) + '%)';

            // Daily Trend Chart
            var trend = s.daily_trend || [];
            if (trend.length > 0 && typeof Chart !== 'undefined') {
                new Chart(document.getElementById('notifTrendChart'), {
                    type: 'bar',
                    data: {
                        labels: trend.map(function(d) { return d.date; }),
                        datasets: [
                            { label: 'Total', data: trend.map(function(d) { return parseInt(d.total); }), backgroundColor: 'rgba(124, 58, 237, 0.6)', borderRadius: 4 },
                            { label: 'Seen', data: trend.map(function(d) { return parseInt(d.seen); }), backgroundColor: 'rgba(5, 150, 105, 0.6)', borderRadius: 4 },
                            { label: 'Clicked', data: trend.map(function(d) { return parseInt(d.clicked); }), backgroundColor: 'rgba(217, 119, 6, 0.6)', borderRadius: 4 }
                        ]
                    },
                    options: { responsive: true, scales: { y: { beginAtZero: true } }, plugins: { legend: { position: 'top' } } }
                });
            }

            // Top Users Table
            var tbody = document.getElementById('notif-top-users-tbody');
            tbody.innerHTML = '';
            (s.top_users || []).forEach(function(u, i) {
                var tr = document.createElement('tr');
                tr.style.borderBottom = '1px solid #f3f4f6';
                tr.innerHTML =
                    '<td style="padding:10px 12px;">' + (i + 1) + '</td>' +
                    '<td style="padding:10px 12px;"><strong>' + escapeHtml(u.username) + '</strong><br><span style="font-size:12px;color:#6b7280;">' + escapeHtml(u.email) + '</span></td>' +
                    '<td style="padding:10px 12px; text-align:right; font-weight:600;">' + parseInt(u.notification_count).toLocaleString() + '</td>' +
                    '<td style="padding:10px 12px; text-align:right;">' + parseInt(u.seen_count).toLocaleString() + '</td>' +
                    '<td style="padding:10px 12px; text-align:right;">' + parseInt(u.clicked_count).toLocaleString() + '</td>' +
                    '<td style="padding:10px 12px; text-align:right; font-size:12px; color:#6b7280;">' + escapeHtml(u.last_notification || '-') + '</td>';
                tbody.appendChild(tr);
            });

            // Recent Notifications Table
            var rtbody = document.getElementById('notif-recent-tbody');
            rtbody.innerHTML = '';
            (s.recent || []).forEach(function(n) {
                var tr = document.createElement('tr');
                tr.style.borderBottom = '1px solid #f3f4f6';
                var msg = escapeHtml(n.message || '');
                if (msg.length > 60) msg = msg.substring(0, 60) + '...';
                tr.innerHTML =
                    '<td style="padding:10px 12px; font-size:13px;">' + escapeHtml(n.username) + '</td>' +
                    '<td style="padding:10px 12px; font-size:13px; direction:rtl; text-align:right;">' + msg + '</td>' +
                    '<td style="padding:10px 12px; text-align:center;">' + (parseInt(n.seen) ? '<span style="color:#059669;">&#x2713;</span>' : '<span style="color:#dc2626;">&#x2717;</span>') + '</td>' +
                    '<td style="padding:10px 12px; text-align:center;">' + (parseInt(n.clicked) ? '<span style="color:#059669;">&#x2713;</span>' : '<span style="color:#dc2626;">&#x2717;</span>') + '</td>' +
                    '<td style="padding:10px 12px; text-align:right; font-size:12px; color:#6b7280; white-space:nowrap;">' + escapeHtml(n.datetime || '-') + '</td>';
                rtbody.appendChild(tr);
            });

            document.getElementById('notif-loading').style.display = 'none';
            document.getElementById('notif-loaded').style.display = 'block';
        })
        .catch(function(err) {
            document.getElementById('notif-loading').textContent = 'Failed to load: ' + err.message;
        });
}

// ────────────────────────────────────────────
// CSAT Tab
// ────────────────────────────────────────────
var csatTrendChart = null;

function loadCsatData() {
    var days = document.getElementById('csat-days').value || 30;
    var context = document.getElementById('csat-context-filter').value || '';
    var url = '{{ path("admin_playground_api_csat_stats") }}?days=' + days;
    if (context) url += '&context=' + encodeURIComponent(context);

    fetch(url)
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (!data.success) return;

            // Overview cards
            var ov = data.overview || {};
            document.getElementById('csat-total').textContent = ov.total_responses || 0;
            document.getElementById('csat-avg-rating').textContent = ov.avg_rating ? (ov.avg_rating + ' / 5') : '—';
            document.getElementById('csat-score').textContent = ov.csat_pct ? (ov.csat_pct + '%') : '—';
            document.getElementById('csat-nps').textContent = ov.nps !== null && ov.nps !== undefined ? ov.nps : '—';
            document.getElementById('csat-low-count').textContent = data.low_rated ? data.low_rated.length : 0;

            // By context table
            var ctxTbody = document.getElementById('csat-by-context-tbody');
            ctxTbody.innerHTML = '';
            (data.by_context || []).forEach(function(row) {
                var tr = document.createElement('tr');
                tr.style.borderBottom = '1px solid #f3f4f6';
                var csatColor = parseFloat(row.csat_pct) >= 70 ? '#059669' : parseFloat(row.csat_pct) >= 50 ? '#ca8a04' : '#dc2626';
                tr.innerHTML = '<td style="padding:8px;">' + row.context + '</td>' +
                    '<td style="text-align:center;padding:8px;">' + row.total_responses + '</td>' +
                    '<td style="text-align:center;padding:8px;">' + (row.avg_rating || '—') + '</td>' +
                    '<td style="text-align:center;padding:8px;font-weight:700;color:' + csatColor + ';">' + (row.csat_pct || 0) + '%</td>';
                ctxTbody.appendChild(tr);
            });

            // Trend chart
            var trendData = data.trend || [];
            var labels = trendData.map(function(d) { return d.date; });
            var csatVals = trendData.map(function(d) { return parseFloat(d.csat_pct) || 0; });
            var responseVals = trendData.map(function(d) { return parseInt(d.responses) || 0; });

            if (csatTrendChart) csatTrendChart.destroy();
            var ctx = document.getElementById('csatTrendChart').getContext('2d');
            csatTrendChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: 'CSAT %',
                            type: 'line',
                            data: csatVals,
                            borderColor: '#7c3aed',
                            backgroundColor: 'rgba(124,58,237,0.1)',
                            yAxisID: 'y',
                            tension: 0.3,
                            fill: true,
                            pointRadius: 3
                        },
                        {
                            label: 'Responses',
                            data: responseVals,
                            backgroundColor: 'rgba(5,150,105,0.3)',
                            borderColor: '#059669',
                            borderWidth: 1,
                            yAxisID: 'y1'
                        }
                    ]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: { position: 'left', min: 0, max: 100, title: { display: true, text: 'CSAT %' } },
                        y1: { position: 'right', min: 0, title: { display: true, text: 'Responses' }, grid: { drawOnChartArea: false } }
                    }
                }
            });

            // Search correlation
            var scTbody = document.getElementById('csat-search-corr-tbody');
            scTbody.innerHTML = '';
            (data.search_correlation || []).forEach(function(row) {
                var tr = document.createElement('tr');
                tr.style.borderBottom = '1px solid #f3f4f6';
                tr.innerHTML = '<td style="padding:8px;">' + (row.result_bucket || '—') + '</td>' +
                    '<td style="text-align:center;padding:8px;">' + (row.responses || 0) + '</td>' +
                    '<td style="text-align:center;padding:8px;">' + (row.avg_rating || '—') + '</td>' +
                    '<td style="text-align:center;padding:8px;">' + (row.csat_pct || 0) + '%</td>';
                scTbody.appendChild(tr);
            });

            // Recent entries
            renderCsatTable('csat-entries-tbody', data.entries || []);
            renderCsatTable('csat-low-tbody', data.low_rated || []);
        })
        .catch(function(err) {
            console.error('CSAT load error:', err);
        });
}

function renderCsatTable(tbodyId, entries) {
    var tbody = document.getElementById(tbodyId);
    tbody.innerHTML = '';
    entries.forEach(function(e) {
        var tr = document.createElement('tr');
        tr.style.borderBottom = '1px solid #f3f4f6';
        var stars = '';
        for (var i = 1; i <= 5; i++) {
            stars += '<span style="color:' + (i <= e.rating ? '#f59e0b' : '#d1d5db') + ';">★</span>';
        }
        var comment = e.comment ? (e.comment.length > 80 ? e.comment.substring(0, 80) + '...' : e.comment) : '—';
        var date = e.created_at ? e.created_at.substring(0, 16) : '—';
        tr.innerHTML = '<td style="padding:6px;">' + (e.username || 'Anonymous') + '</td>' +
            '<td style="text-align:center;padding:6px;"><span style="background:#f3f4f6;padding:2px 6px;border-radius:4px;font-size:11px;">' + (e.context || '—') + '</span></td>' +
            '<td style="text-align:center;padding:6px;">' + stars + '</td>' +
            '<td style="padding:6px;max-width:200px;overflow:hidden;text-overflow:ellipsis;" title="' + (e.comment || '') + '">' + comment + '</td>' +
            '<td style="text-align:right;padding:6px;font-size:11px;color:#6b7280;">' + date + '</td>';
        tbody.appendChild(tr);
    });
    if (entries.length === 0) {
        var tr = document.createElement('tr');
        tr.innerHTML = '<td colspan="5" style="padding:16px;text-align:center;color:#9ca3af;">No feedback data yet</td>';
        tbody.appendChild(tr);
    }
}

// Auto-load CSAT when tab is clicked
document.querySelector('[data-tab="csat"]').addEventListener('click', function() {
    loadCsatData();
});

// ── Research Chat DSAT Analytics Tab ─────────────────────────────────
var dsatTrendChart = null;
var dsatDistChart = null;
var dsatLoaded = false;

function loadDsatData() {
    var days = document.getElementById('dsat-days').value || 30;
    var url = '{{ path("admin_playground_api_research_chat_dsat") }}?days=' + days;

    fetch(url)
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (!data.success) return;

            // Overview cards
            var ov = data.overview || {};
            document.getElementById('dsat-total').textContent = ov.total || 0;
            document.getElementById('dsat-likes').textContent = ov.likes || 0;
            document.getElementById('dsat-dislikes').textContent = ov.dislikes || 0;
            document.getElementById('dsat-satisfaction').textContent = ov.satisfaction_pct ? (ov.satisfaction_pct + '%') : '—';
            document.getElementById('dsat-with-comments').textContent = ov.with_comments || 0;

            // Trend chart
            var trendData = data.trend || [];
            var labels = trendData.map(function(d) { return d.date; });
            var likeVals = trendData.map(function(d) { return parseInt(d.likes) || 0; });
            var dislikeVals = trendData.map(function(d) { return parseInt(d.dislikes) || 0; });

            if (dsatTrendChart) dsatTrendChart.destroy();
            var ctx = document.getElementById('dsatTrendChart').getContext('2d');
            dsatTrendChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: 'Likes',
                            data: likeVals,
                            backgroundColor: 'rgba(34, 197, 94, 0.6)',
                            borderColor: '#22c55e',
                            borderWidth: 1
                        },
                        {
                            label: 'Dislikes',
                            data: dislikeVals,
                            backgroundColor: 'rgba(239, 68, 68, 0.6)',
                            borderColor: '#ef4444',
                            borderWidth: 1
                        }
                    ]
                },
                options: {
                    responsive: true,
                    scales: {
                        x: { stacked: false },
                        y: { beginAtZero: true }
                    }
                }
            });

            // Distribution pie chart
            if (dsatDistChart) dsatDistChart.destroy();
            var ctxDist = document.getElementById('dsatDistChart').getContext('2d');
            dsatDistChart = new Chart(ctxDist, {
                type: 'doughnut',
                data: {
                    labels: ['👍 Likes', '👎 Dislikes'],
                    datasets: [{
                        data: [ov.likes || 0, ov.dislikes || 0],
                        backgroundColor: ['#22c55e', '#ef4444'],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: { position: 'bottom' }
                    }
                }
            });

            // Disliked responses table
            var dislikedTbody = document.getElementById('dsat-disliked-tbody');
            dislikedTbody.innerHTML = '';
            (data.disliked || []).forEach(function(e) {
                var tr = document.createElement('tr');
                tr.style.borderBottom = '1px solid #fecaca';
                var question = e.question ? (e.question.length > 60 ? e.question.substring(0, 60) + '...' : e.question) : '—';
                var comment = e.comment ? (e.comment.length > 100 ? e.comment.substring(0, 100) + '...' : e.comment) : '<span style="color:#9ca3af;">No comment</span>';
                var date = e.feedback_at ? e.feedback_at.substring(0, 16) : '—';
                tr.innerHTML = '<td style="padding:8px;">' + (e.username || 'Anonymous') + '</td>' +
                    '<td style="padding:8px;" title="' + (e.question || '') + '">' + question + '</td>' +
                    '<td style="padding:8px;" title="' + (e.comment || '') + '">' + comment + '</td>' +
                    '<td style="text-align:right;padding:8px;font-size:11px;color:#6b7280;">' + date + '</td>';
                dislikedTbody.appendChild(tr);
            });
            if ((data.disliked || []).length === 0) {
                var tr = document.createElement('tr');
                tr.innerHTML = '<td colspan="4" style="padding:16px;text-align:center;color:#9ca3af;">No disliked responses yet 🎉</td>';
                dislikedTbody.appendChild(tr);
            }

            // All feedback table
            var allTbody = document.getElementById('dsat-all-tbody');
            allTbody.innerHTML = '';
            (data.all || []).forEach(function(e) {
                var tr = document.createElement('tr');
                tr.style.borderBottom = '1px solid #f3f4f6';
                var question = e.question ? (e.question.length > 50 ? e.question.substring(0, 50) + '...' : e.question) : '—';
                var feedbackBadge = e.feedback === 'like' 
                    ? '<span style="background:#dcfce7;color:#16a34a;padding:2px 8px;border-radius:4px;font-size:11px;">👍 Like</span>'
                    : '<span style="background:#fee2e2;color:#dc2626;padding:2px 8px;border-radius:4px;font-size:11px;">👎 Dislike</span>';
                var comment = e.comment ? (e.comment.length > 60 ? e.comment.substring(0, 60) + '...' : e.comment) : '—';
                var date = e.feedback_at ? e.feedback_at.substring(0, 16) : '—';
                tr.innerHTML = '<td style="padding:8px;">' + (e.username || 'Anonymous') + '</td>' +
                    '<td style="padding:8px;" title="' + (e.question || '') + '">' + question + '</td>' +
                    '<td style="text-align:center;padding:8px;">' + feedbackBadge + '</td>' +
                    '<td style="padding:8px;" title="' + (e.comment || '') + '">' + comment + '</td>' +
                    '<td style="text-align:right;padding:8px;font-size:11px;color:#6b7280;">' + date + '</td>';
                allTbody.appendChild(tr);
            });
            if ((data.all || []).length === 0) {
                var tr = document.createElement('tr');
                tr.innerHTML = '<td colspan="5" style="padding:16px;text-align:center;color:#9ca3af;">No feedback data yet</td>';
                allTbody.appendChild(tr);
            }
        })
        .catch(function(err) {
            console.error('DSAT load error:', err);
        });
}

// Auto-load DSAT when tab is clicked
document.querySelector('[data-tab="research-chat-dsat"]').addEventListener('click', function() {
    if (!dsatLoaded) {
        dsatLoaded = true;
        loadDsatData();
    }
});

// ── Follow Email Analytics Tab ─────────────────────────────────
var femLoaded = false;
var femTrendChart = null;
var femHourlyChart = null;

document.querySelector('[data-tab="follow-emails"]').addEventListener('click', function() {
    if (!femLoaded) {
        femLoaded = true;
        loadFollowEmailData();
    }
});

function getFemDays() {
    return parseInt(document.getElementById('fem-period').value) || 30;
}

document.getElementById('fem-period').addEventListener('change', function() {
    femLoaded = true;
    loadFollowEmailData();
});

function loadFollowEmailData() {
    var days = getFemDays();
    fetch('{{ path("admin_playground_api_follow_email_stats") }}?days=' + days)
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (!data.success) { console.error(data.error); return; }

            var o = data.overview;
            document.getElementById('fem-total-sent').textContent = o.total_sent.toLocaleString();
            document.getElementById('fem-open-rate').textContent = o.open_rate + '%';
            document.getElementById('fem-click-rate').textContent = o.click_rate + '%';
            document.getElementById('fem-ctor').textContent = o.click_to_open_rate + '%';
            document.getElementById('fem-unique-recipients').textContent = o.unique_recipients.toLocaleString();
            document.getElementById('fem-opted-out').textContent = o.opted_out.toLocaleString();
            document.getElementById('fem-opt-in-rate').textContent = o.opt_in_rate + '%';
            document.getElementById('fem-all-time').textContent = o.total_all_time.toLocaleString();

            // Funnel
            var f = data.funnel;
            document.getElementById('fem-funnel-sent').textContent = f.sent.toLocaleString();
            document.getElementById('fem-funnel-opened').textContent = f.opened.toLocaleString();
            document.getElementById('fem-funnel-clicked').textContent = f.clicked.toLocaleString();

            // Trend chart
            renderFemTrendChart(data.trend);

            // Hourly chart
            renderFemHourlyChart(data.hourly);

            // Top recipients table
            var topTbody = document.getElementById('fem-top-tbody');
            topTbody.innerHTML = '';
            data.top_recipients.forEach(function(r) {
                var tr = document.createElement('tr');
                tr.style.borderBottom = '1px solid #f3f4f6';
                tr.innerHTML =
                    '<td style="padding:6px;">' + escHtml(r.name) + ' <span style="color:#9ca3af;">@' + escHtml(r.username) + '</span></td>' +
                    '<td style="text-align:right;padding:6px;font-weight:600;">' + r.emails_received + '</td>' +
                    '<td style="text-align:right;padding:6px;color:#059669;">' + r.opened + '</td>' +
                    '<td style="text-align:right;padding:6px;color:#2563eb;">' + r.clicked + '</td>';
                topTbody.appendChild(tr);
            });
            if (data.top_recipients.length === 0) {
                topTbody.innerHTML = '<tr><td colspan="4" style="padding:16px;text-align:center;color:#9ca3af;">No data yet</td></tr>';
            }

            // Recent emails table
            var recentTbody = document.getElementById('fem-recent-tbody');
            recentTbody.innerHTML = '';
            data.recent_emails.forEach(function(e) {
                var tr = document.createElement('tr');
                tr.style.borderBottom = '1px solid #f3f4f6';
                var openBadge = e.opened_at
                    ? '<span style="background:#d1fae5;color:#059669;padding:2px 8px;border-radius:10px;font-size:11px;">✓ Opened' + (e.open_count > 1 ? ' ('+e.open_count+'x)' : '') + '</span>'
                    : '<span style="background:#f3f4f6;color:#9ca3af;padding:2px 8px;border-radius:10px;font-size:11px;">—</span>';
                var clickBadge = e.clicked_at
                    ? '<span style="background:#dbeafe;color:#2563eb;padding:2px 8px;border-radius:10px;font-size:11px;">✓ Clicked' + (e.click_count > 1 ? ' ('+e.click_count+'x)' : '') + '</span>'
                    : '<span style="background:#f3f4f6;color:#9ca3af;padding:2px 8px;border-radius:10px;font-size:11px;">—</span>';
                var sentDate = e.sent_at ? e.sent_at.substring(0, 16).replace('T', ' ') : '';
                tr.innerHTML =
                    '<td style="padding:6px;">' + escHtml(e.recipient_name) + '</td>' +
                    '<td style="padding:6px;">' + escHtml(e.follower_name) + '</td>' +
                    '<td style="text-align:center;padding:6px;">' + openBadge + '</td>' +
                    '<td style="text-align:center;padding:6px;">' + clickBadge + '</td>' +
                    '<td style="text-align:right;padding:6px;font-size:11px;color:#6b7280;">' + sentDate + '</td>';
                recentTbody.appendChild(tr);
            });
            if (data.recent_emails.length === 0) {
                recentTbody.innerHTML = '<tr><td colspan="5" style="padding:16px;text-align:center;color:#9ca3af;">No emails sent yet</td></tr>';
            }
        })
        .catch(function(err) { console.error('Follow email stats error:', err); });
}

function escHtml(s) {
    if (!s) return '';
    var d = document.createElement('div');
    d.appendChild(document.createTextNode(s));
    return d.innerHTML;
}

function renderFemTrendChart(trend) {
    if (femTrendChart) { femTrendChart.destroy(); }
    var ctx = document.getElementById('fem-trend-chart');
    if (!ctx || trend.length === 0) return;

    femTrendChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: trend.map(function(d) { return d.day; }),
            datasets: [{
                label: 'Sent',
                data: trend.map(function(d) { return parseInt(d.sent); }),
                borderColor: '#8b5cf6',
                backgroundColor: 'rgba(139,92,246,0.1)',
                fill: true,
                tension: 0.3
            }, {
                label: 'Opened',
                data: trend.map(function(d) { return parseInt(d.opened); }),
                borderColor: '#059669',
                backgroundColor: 'transparent',
                tension: 0.3
            }, {
                label: 'Clicked',
                data: trend.map(function(d) { return parseInt(d.clicked); }),
                borderColor: '#2563eb',
                backgroundColor: 'transparent',
                tension: 0.3
            }]
        },
        options: {
            responsive: true,
            plugins: { legend: { position: 'bottom' } },
            scales: { y: { beginAtZero: true, ticks: { precision: 0 } } }
        }
    });
}

function renderFemHourlyChart(hourly) {
    if (femHourlyChart) { femHourlyChart.destroy(); }
    var ctx = document.getElementById('fem-hourly-chart');
    if (!ctx) return;

    // Fill all 24 hours
    var hours = [];
    var counts = [];
    for (var h = 0; h < 24; h++) {
        hours.push(h + ':00');
        var found = hourly.find(function(x) { return parseInt(x.hour) === h; });
        counts.push(found ? parseInt(found.count) : 0);
    }

    femHourlyChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: hours,
            datasets: [{
                label: 'Emails Sent',
                data: counts,
                backgroundColor: 'rgba(139,92,246,0.6)',
                borderRadius: 4
            }]
        },
        options: {
            responsive: true,
            plugins: { legend: { display: false } },
            scales: { y: { beginAtZero: true, ticks: { precision: 0 } } }
        }
    });
}

// Welcome Chat Settings
function loadWelcomeChatSettings() {
    fetch('{{ path("admin_playground_api_welcome_chat_settings") }}')
        .then(r => r.json())
        .then(data => {
            if (data.success && data.settings) {
                document.getElementById('wc-enabled-toggle').checked = data.settings.welcome_chat_enabled;
                document.getElementById('wc-sender-username').value = data.settings.welcome_chat_sender_username || 'shadi';
                document.getElementById('wc-message-ar').value = data.settings.welcome_chat_ar || '';
                document.getElementById('wc-message-en').value = data.settings.welcome_chat_en || '';
            }
        })
        .catch(err => console.error('Failed to load welcome chat settings:', err));
}

function saveWelcomeChatSettings() {
    const status = document.getElementById('wc-save-status');
    status.style.display = 'block';
    status.style.background = '#fef3c7';
    status.style.color = '#92400e';
    status.textContent = 'Saving...';

    const payload = {
        welcome_chat_enabled: document.getElementById('wc-enabled-toggle').checked,
        welcome_chat_sender_username: document.getElementById('wc-sender-username').value.trim(),
        welcome_chat_ar: document.getElementById('wc-message-ar').value,
        welcome_chat_en: document.getElementById('wc-message-en').value
    };

    fetch('{{ path("admin_playground_api_welcome_chat_settings_save") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
    })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                status.style.background = '#d1fae5';
                status.style.color = '#065f46';
                status.textContent = '✓ Settings saved successfully!';
            } else {
                status.style.background = '#fee2e2';
                status.style.color = '#991b1b';
                status.textContent = '✗ Error: ' + (data.error || 'Unknown error');
            }
            setTimeout(() => { status.style.display = 'none'; }, 3000);
        })
        .catch(err => {
            status.style.background = '#fee2e2';
            status.style.color = '#991b1b';
            status.textContent = '✗ Failed to save: ' + err.message;
            setTimeout(() => { status.style.display = 'none'; }, 3000);
        });
}

// Load welcome chat settings on page load
document.addEventListener('DOMContentLoaded', loadWelcomeChatSettings);

// ═══════════ Subscription Management ═══════════

var subSearchTimeout = null;
var subListPage = 1;

// User search with debounce
document.getElementById('sub-user-search').addEventListener('input', function(e) {
    clearTimeout(subSearchTimeout);
    var query = e.target.value.trim();
    
    if (query.length < 2) {
        document.getElementById('sub-user-results').style.display = 'none';
        return;
    }
    
    subSearchTimeout = setTimeout(function() {
        searchUsersForSubscription(query);
    }, 300);
});

function searchUsersForSubscription(query) {
    fetch('{{ path("admin_playground_api_search_users") }}?q=' + encodeURIComponent(query))
        .then(function(r) { return r.json(); })
        .then(function(data) {
            var resultsDiv = document.getElementById('sub-user-results');
            
            if (!data.success || data.users.length === 0) {
                resultsDiv.innerHTML = '<div style="padding: 12px; color: var(--dash-text-muted);">No users found</div>';
                resultsDiv.style.display = 'block';
                return;
            }
            
            var html = '';
            data.users.forEach(function(user) {
                var tierBadge = user.current_tier 
                    ? '<span class="tier-badge ' + user.current_tier + '">' + user.current_tier + '</span>' 
                    : '<span style="font-size:11px;color:#9ca3af;">No subscription</span>';
                    
                html += '<div class="sub-user-result" data-id="' + user.id + '" data-email="' + escHtml(user.email) + '" data-username="' + escHtml(user.username) + '" data-tier="' + (user.current_tier || '') + '" style="padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--dash-border); display: flex; justify-content: space-between; align-items: center;">' +
                    '<div>' +
                        '<div style="font-weight: 500;">' + escHtml(user.email) + '</div>' +
                        '<div style="font-size: 0.8rem; color: var(--dash-text-muted);">@' + escHtml(user.username) + '</div>' +
                    '</div>' +
                    '<div>' + tierBadge + '</div>' +
                '</div>';
            });
            
            resultsDiv.innerHTML = html;
            resultsDiv.style.display = 'block';
            
            // Add click handlers
            resultsDiv.querySelectorAll('.sub-user-result').forEach(function(el) {
                el.addEventListener('click', function() {
                    selectUserForSubscription(
                        this.dataset.id,
                        this.dataset.email,
                        this.dataset.username,
                        this.dataset.tier
                    );
                });
                el.addEventListener('mouseenter', function() {
                    this.style.background = 'var(--dash-bg)';
                });
                el.addEventListener('mouseleave', function() {
                    this.style.background = 'white';
                });
            });
        })
        .catch(function(err) {
            console.error('User search error:', err);
        });
}

function selectUserForSubscription(userId, email, username, currentTier) {
    document.getElementById('sub-user-id').value = userId;
    document.getElementById('sub-user-search').value = email;
    document.getElementById('sub-user-results').style.display = 'none';
    
    var tierInfo = currentTier ? ' (currently: ' + currentTier + ')' : ' (no subscription)';
    document.getElementById('sub-selected-user').innerHTML = 
        '<strong>Selected:</strong> ' + escHtml(email) + ' (@' + escHtml(username) + ')' + tierInfo;
}

function grantSubscription() {
    var userId = document.getElementById('sub-user-id').value;
    var tier = document.getElementById('sub-tier').value;
    var months = document.getElementById('sub-months').value;
    var resetCredits = document.getElementById('sub-reset-credits').checked;
    var sendEmail = document.getElementById('sub-send-email').checked;
    var msgDiv = document.getElementById('sub-message');
    
    if (!userId) {
        msgDiv.style.display = 'block';
        msgDiv.style.background = '#fee2e2';
        msgDiv.style.color = '#991b1b';
        msgDiv.textContent = 'Please search and select a user first';
        return;
    }
    
    msgDiv.style.display = 'block';
    msgDiv.style.background = '#fef3c7';
    msgDiv.style.color = '#92400e';
    msgDiv.textContent = 'Granting subscription...';
    
    fetch('{{ path("admin_playground_api_grant_subscription") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            user_id: parseInt(userId),
            tier: tier,
            months: parseInt(months),
            reset_credits: resetCredits,
            send_email: sendEmail
        })
    })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.success) {
                msgDiv.style.background = '#d1fae5';
                msgDiv.style.color = '#065f46';
                var emailStatus = data.details.email_sent ? '📧 Email sent!' : '(no email sent)';
                msgDiv.innerHTML = '✓ <strong>Success!</strong> ' + data.message + 
                    '<br><small>User: ' + escHtml(data.details.user) + 
                    ' | Tier: ' + data.details.tier + 
                    ' | Credits: ' + data.details.monthly_credits + 
                    ' | Valid until: ' + data.details.valid_until + 
                    ' | ' + emailStatus + '</small>';
                
                // Clear form
                document.getElementById('sub-user-id').value = '';
                document.getElementById('sub-user-search').value = '';
                document.getElementById('sub-selected-user').innerHTML = '';
                
                // Reload subscriptions list
                loadSubscriptionsList();
            } else {
                msgDiv.style.background = '#fee2e2';
                msgDiv.style.color = '#991b1b';
                msgDiv.textContent = '✗ Error: ' + (data.error || 'Unknown error');
            }
        })
        .catch(function(err) {
            msgDiv.style.background = '#fee2e2';
            msgDiv.style.color = '#991b1b';
            msgDiv.textContent = '✗ Failed: ' + err.message;
        });
}

function sendTestSubscriptionEmail() {
    var email = document.getElementById('test-email-address').value.trim();
    var tier = document.getElementById('test-email-tier').value;
    var msgDiv = document.getElementById('test-email-message');
    
    if (!email) {
        msgDiv.style.display = 'block';
        msgDiv.style.background = '#fee2e2';
        msgDiv.style.color = '#991b1b';
        msgDiv.textContent = 'Please enter an email address';
        return;
    }
    
    msgDiv.style.display = 'block';
    msgDiv.style.background = '#fef3c7';
    msgDiv.style.color = '#92400e';
    msgDiv.textContent = 'Sending test email...';
    
    var tierCredits = { starter: 500, researcher: 1500, professional: 4000, institution: 15000 };
    var validUntil = new Date();
    validUntil.setMonth(validUntil.getMonth() + 1);
    
    fetch('{{ path("admin_playground_api_test_subscription_email") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            email: email,
            tier: tier,
            credits: tierCredits[tier] || 500,
            first_name: 'شادي',
            valid_until: validUntil.toISOString().split('T')[0]
        })
    })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.success) {
                msgDiv.style.background = '#d1fae5';
                msgDiv.style.color = '#065f46';
                msgDiv.textContent = '✓ ' + data.message;
            } else {
                msgDiv.style.background = '#fee2e2';
                msgDiv.style.color = '#991b1b';
                msgDiv.textContent = '✗ Error: ' + (data.error || 'Unknown error');
            }
        })
        .catch(function(err) {
            msgDiv.style.background = '#fee2e2';
            msgDiv.style.color = '#991b1b';
            msgDiv.textContent = '✗ Failed: ' + err.message;
        });
}

function loadSubscriptionsList(page) {
    page = page || 1;
    subListPage = page;
    
    var filter = document.getElementById('sub-filter').value;
    var loading = document.getElementById('sub-list-loading');
    var table = document.getElementById('sub-list-table');
    var tbody = document.getElementById('sub-list-body');
    var pagination = document.getElementById('sub-pagination');
    
    loading.style.display = 'block';
    table.style.display = 'none';
    
    fetch('{{ path("admin_playground_api_subscriptions_list") }}?page=' + page + '&filter=' + filter)
        .then(function(r) { return r.json(); })
        .then(function(data) {
            loading.style.display = 'none';
            
            if (!data.success) {
                tbody.innerHTML = '<tr><td colspan="6" style="text-align:center;padding:20px;color:#ef4444;">Error: ' + (data.error || 'Unknown') + '</td></tr>';
                table.style.display = 'table';
                return;
            }
            
            if (data.subscriptions.length === 0) {
                tbody.innerHTML = '<tr><td colspan="6" style="text-align:center;padding:20px;color:var(--dash-text-muted);">No subscriptions found</td></tr>';
                table.style.display = 'table';
                pagination.style.display = 'none';
                return;
            }
            
            var html = '';
            data.subscriptions.forEach(function(sub) {
                var statusBadge = '';
                if (sub.status === 'active') {
                    statusBadge = '<span class="trial-status-badge active">Active</span>';
                } else if (sub.status === 'expired') {
                    statusBadge = '<span class="trial-status-badge expired">Expired</span>';
                } else {
                    statusBadge = '<span class="trial-status-badge inactive">Inactive</span>';
                }
                
                var remaining = parseInt(sub.remaining_credits) || 0;
                var monthly = parseInt(sub.monthly_credits) || 0;
                var usagePct = monthly > 0 ? Math.round((monthly - remaining) / monthly * 100) : 0;
                
                var endDate = sub.subscription_end ? sub.subscription_end.split(' ')[0] : 'Never';
                
                html += '<tr>' +
                    '<td>' +
                        '<div style="font-weight:500;">' + escHtml(sub.email) + '</div>' +
                        '<div style="font-size:0.8rem;color:var(--dash-text-muted);">@' + escHtml(sub.username) + '</div>' +
                    '</td>' +
                    '<td><span class="tier-badge ' + sub.tier + '">' + sub.tier + '</span></td>' +
                    '<td>' +
                        '<div style="display:flex;align-items:center;gap:8px;">' +
                            '<div class="trial-usage-bar"><div class="trial-usage-fill" style="width:' + usagePct + '%; background:' + (usagePct > 80 ? '#ef4444' : usagePct > 50 ? '#f59e0b' : '#10b981') + ';"></div></div>' +
                            '<span style="font-size:0.85rem;">' + remaining + ' / ' + monthly + '</span>' +
                        '</div>' +
                    '</td>' +
                    '<td>' + statusBadge + '</td>' +
                    '<td style="font-size:0.85rem;">' + endDate + '</td>' +
                    '<td>' +
                        '<button onclick="quickEditSubscription(' + sub.user_id + ', \'' + escHtml(sub.email) + '\', \'' + escHtml(sub.username) + '\', \'' + sub.tier + '\')" style="padding:4px 10px;font-size:0.8rem;border:1px solid var(--dash-border);border-radius:4px;background:white;cursor:pointer;">Edit</button>' +
                    '</td>' +
                '</tr>';
            });
            
            tbody.innerHTML = html;
            table.style.display = 'table';
            
            // Pagination
            if (data.pages > 1) {
                var paginationHtml = '';
                for (var p = 1; p <= data.pages; p++) {
                    var active = p === data.page ? 'background:var(--dash-primary);color:white;' : 'background:white;';
                    paginationHtml += '<button onclick="loadSubscriptionsList(' + p + ')" style="padding:6px 12px;margin:0 2px;border:1px solid var(--dash-border);border-radius:4px;cursor:pointer;' + active + '">' + p + '</button>';
                }
                pagination.innerHTML = paginationHtml;
                pagination.style.display = 'block';
            } else {
                pagination.style.display = 'none';
            }
        })
        .catch(function(err) {
            loading.style.display = 'none';
            tbody.innerHTML = '<tr><td colspan="6" style="text-align:center;padding:20px;color:#ef4444;">Failed to load: ' + err.message + '</td></tr>';
            table.style.display = 'table';
        });
}

function quickEditSubscription(userId, email, username, currentTier) {
    document.getElementById('sub-user-id').value = userId;
    document.getElementById('sub-user-search').value = email;
    document.getElementById('sub-selected-user').innerHTML = 
        '<strong>Selected:</strong> ' + escHtml(email) + ' (@' + escHtml(username) + ') (currently: ' + currentTier + ')';
    
    // Set tier dropdown
    var tierSelect = document.getElementById('sub-tier');
    for (var i = 0; i < tierSelect.options.length; i++) {
        if (tierSelect.options[i].value === currentTier) {
            tierSelect.selectedIndex = i;
            break;
        }
    }
    
    // Scroll to form
    document.querySelector('#tab-subscriptions .chart-card').scrollIntoView({ behavior: 'smooth' });
}

// Load subscriptions when tab is shown
document.querySelectorAll('.tab-btn[data-tab="subscriptions"]').forEach(function(btn) {
    btn.addEventListener('click', function() {
        setTimeout(loadSubscriptionsList, 100);
    });
});
</script>
{% endblock %}