{% extends 'superuser/base_superuser.html' %}

{% block title %}Superuser Console | ChatLab{% endblock %}
{% block dashboard_active %}active{% endblock %}

{% block custom_styles %}
/* ---- STAT CARDS ---- */
.su-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
@media (max-width: 900px) {
    .su-stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .su-stat-grid { grid-template-columns: 1fr 1fr; }
}

.su-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s;
}
.su-stat-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.09);
}
.su-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.su-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
}
.su-stat-label {
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 500;
}
.su-stat-sub {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
}
/* ---- CHARTS GRID ---- */
.su-charts-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 800px) {
    .su-charts-grid { grid-template-columns: 1fr; }
}
.su-chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.su-chart-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
}
.su-chart-subtitle {
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 8px;
}
/* ---- TODAY MINI STATS ---- */
.su-today-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
@media (max-width: 600px) {
    .su-today-row { grid-template-columns: 1fr; }
}
.su-today-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.su-today-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
/* ---- SECTION HEADER ---- */
.su-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.su-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
/* ---- TABLE STYLES ---- */
.su-table-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.su-table-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.custom-table th {
    background: #f7f8fa;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* ---- BADGE ---- */
.badge-gemini { background: rgba(49, 162, 76, 0.1); color: var(--success-green); border: 1px solid rgba(49,162,76,0.2); }
.badge-openai { background: rgba(99, 102, 241, 0.1); color: var(--web-indigo); border: 1px solid rgba(99,102,241,0.2); }
{% endblock %}

{% block workspace %}

<!-- Page header (title hidden by JS, button stays) -->
<div class="page-header">
    <div>
        <h2 class="page-title">Platform Dashboard</h2>
        <p class="page-subtitle">ChatLab metrics, tenant companies, and chatbot profiles.</p>
    </div>
    <a href="{% url 'superuser_company_create' %}" class="btn btn-primary">
        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"/></svg>
        New Company
    </a>
</div>

<!-- ── TOP STAT CARDS ── -->
<div class="su-stat-grid">
    <!-- Total Messages -->
    <div class="su-stat-card">
        <div class="su-stat-icon" style="background: rgba(0,132,255,0.1);">
            <svg width="18" height="18" fill="none" stroke="#0084ff" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/></svg>
        </div>
        <div class="su-stat-value">{{ total_messages }}</div>
        <div class="su-stat-label">Total Messages</div>
        <div class="su-stat-sub">+{{ total_today }} today</div>
    </div>
    <!-- Total Companies -->
    <div class="su-stat-card">
        <div class="su-stat-icon" style="background: rgba(99,102,241,0.1);">
            <svg width="18" height="18" fill="none" stroke="#6366f1" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
        </div>
        <div class="su-stat-value">{{ companies|length }}</div>
        <div class="su-stat-label">Tenant Companies</div>
        <div class="su-stat-sub">{{ gemini_count }} Gemini · {{ openai_count }} OpenAI</div>
    </div>
    <!-- Escalations -->
    <div class="su-stat-card">
        <div class="su-stat-icon" style="background: rgba(245,158,11,0.1);">
            <svg width="18" height="18" fill="none" stroke="#f59e0b" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
        </div>
        <div class="su-stat-value">{{ total_escalations }}</div>
        <div class="su-stat-label">Total Escalations</div>
        <div class="su-stat-sub">Require agent attention</div>
    </div>
    <!-- Leads -->
    <div class="su-stat-card">
        <div class="su-stat-icon" style="background: rgba(49,162,76,0.1);">
            <svg width="18" height="18" fill="none" stroke="#31a24c" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
        </div>
        <div class="su-stat-value">{{ total_leads }}</div>
        <div class="su-stat-label">Captured Leads</div>
        <div class="su-stat-sub">From public landing page</div>
    </div>
</div>

<!-- ── TODAY BREAKDOWN ── -->
<div class="su-today-row">
    <div class="su-today-card">
        <div class="su-today-dot" style="background: #0084ff;"></div>
        <div>
            <div style="font-size: 20px; font-weight: 800; color: var(--text-primary);">{{ today_bot }}</div>
            <div style="font-size: 12px; color: var(--text-muted);">Bot Replies Today</div>
        </div>
    </div>
    <div class="su-today-card">
        <div class="su-today-dot" style="background: #6366f1;"></div>
        <div>
            <div style="font-size: 20px; font-weight: 800; color: var(--text-primary);">{{ today_visitor }}</div>
            <div style="font-size: 12px; color: var(--text-muted);">Visitor Messages Today</div>
        </div>
    </div>
    <div class="su-today-card">
        <div class="su-today-dot" style="background: #31a24c;"></div>
        <div>
            <div style="font-size: 20px; font-weight: 800; color: var(--text-primary);">{{ today_agent }}</div>
            <div style="font-size: 12px; color: var(--text-muted);">Agent Replies Today</div>
        </div>
    </div>
</div>

<!-- ── CHARTS ROW ── -->
<div class="su-charts-grid">
    <!-- Line Chart: Daily Messages -->
    <div class="su-chart-card">
        <div class="su-chart-title">
            Daily Message Traffic
            <span class="su-chart-subtitle">Last 14 days</span>
        </div>
        <canvas id="msgLineChart" height="120"></canvas>
    </div>
    <!-- Doughnut: Today's Sender Mix -->
    <div class="su-chart-card" style="display: flex; flex-direction: column; align-items: center;">
        <div class="su-chart-title" style="align-self: flex-start;">Today's Sender Mix</div>
        <canvas id="senderDonut" style="max-height: 200px; max-width: 200px;"></canvas>
        <div style="display: flex; gap: 14px; margin-top: 14px; flex-wrap: wrap; justify-content: center;">
            <div style="display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-muted);">
                <span style="width:10px; height:10px; border-radius:50%; background:#0084ff; display:inline-block;"></span> Bot ({{ today_bot }})
            </div>
            <div style="display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-muted);">
                <span style="width:10px; height:10px; border-radius:50%; background:#6366f1; display:inline-block;"></span> Visitor ({{ today_visitor }})
            </div>
            <div style="display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-muted);">
                <span style="width:10px; height:10px; border-radius:50%; background:#31a24c; display:inline-block;"></span> Agent ({{ today_agent }})
            </div>
        </div>
    </div>
</div>

<!-- ── SECOND CHARTS ROW ── -->
<div class="admin-grid-2col" style="margin-bottom: 20px;">
    <!-- Bar: Messages per Company -->
    <div class="su-chart-card">
        <div class="su-chart-title">Messages per Company <span class="su-chart-subtitle">Top 8 all time</span></div>
        <canvas id="companyBarChart" height="150"></canvas>
    </div>
    <!-- Line: Escalations trend -->
    <div class="su-chart-card">
        <div class="su-chart-title">Escalations Trend <span class="su-chart-subtitle">Last 14 days</span></div>
        <canvas id="escLineChart" height="150"></canvas>
    </div>
</div>

<!-- ── AI MODELS ── -->
<div class="admin-grid-2col" style="margin-bottom: 20px;">
    <div class="su-chart-card">
        <div class="su-chart-title" style="color: var(--success-green);">Google Gemini Models</div>
        {% if gemini_models %}
            <div style="display: flex; flex-direction: column; gap: 8px; margin-top: 4px;">
                {% for model in gemini_models %}
                    <div style="padding: 10px 14px; background: rgba(49,162,76,0.05); border: 1px solid rgba(49,162,76,0.18); border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
                        <div>
                            <div style="font-weight: 600; font-size: 13.5px;">{{ model.display_name }}</div>
                            <div style="font-size: 11px; color: var(--text-muted); font-family: monospace; margin-top: 2px;">{{ model.model_name }}</div>
                        </div>
                        <span style="font-size: 10px; font-weight: 700; padding: 3px 8px; background: rgba(49,162,76,0.1); color: var(--success-green); border-radius: 20px;">GEMINI</span>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div style="text-align:center; padding: 2rem; color: var(--text-muted); font-size: 13px;">No Gemini models configured.</div>
        {% endif %}
    </div>
    <div class="su-chart-card">
        <div class="su-chart-title" style="color: var(--web-indigo);">OpenAI Models</div>
        {% if openai_models %}
            <div style="display: flex; flex-direction: column; gap: 8px; margin-top: 4px;">
                {% for model in openai_models %}
                    <div style="padding: 10px 14px; background: rgba(99,102,241,0.05); border: 1px solid rgba(99,102,241,0.18); border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
                        <div>
                            <div style="font-weight: 600; font-size: 13.5px;">{{ model.display_name }}</div>
                            <div style="font-size: 11px; color: var(--text-muted); font-family: monospace; margin-top: 2px;">{{ model.model_name }}</div>
                        </div>
                        <span style="font-size: 10px; font-weight: 700; padding: 3px 8px; background: rgba(99,102,241,0.1); color: var(--web-indigo); border-radius: 20px;">OPENAI</span>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div style="text-align:center; padding: 2rem; color: var(--text-muted); font-size: 13px;">No OpenAI models configured.</div>
        {% endif %}
    </div>
</div>

<!-- ── TENANT COMPANIES TABLE ── -->
<div class="su-table-wrap">
    <div class="su-table-head">
        <span class="su-section-title">Tenant Chatbots</span>
        <a href="{% url 'superuser_company_create' %}" class="btn btn-primary" style="padding: 7px 14px; font-size: 13px; border-radius: 20px !important;">+ New</a>
    </div>
    {% if companies %}
        <div class="table-container">
            <table class="custom-table">
                <thead>
                    <tr>
                        <th>Company</th>
                        <th>Chatbot</th>
                        <th>Provider</th>
                        <th>Model</th>
                        <th>API Key</th>
                        <th>Admin</th>
                        <th>Created</th>
                        <th style="text-align:right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for company in companies %}
                        <tr>
                            <td style="font-weight:600;">{{ company.name }}</td>
                            <td style="color:var(--text-muted);">{{ company.chatbot_name }}</td>
                            <td>
                                {% if company.ai_provider == 'gemini' %}
                                    <span class="badge badge-gemini">Gemini</span>
                                {% else %}
                                    <span class="badge badge-openai">OpenAI</span>
                                {% endif %}
                            </td>
                            <td style="font-family:monospace; font-size:12px; color:var(--text-muted);">{{ company.model_name }}</td>
                            <td>
                                {% if company.api_key %}
                                    <span style="color:var(--success-green); font-size:12.5px; font-weight:600;">✓ Set</span>
                                {% else %}
                                    <span style="color:var(--warning-orange); font-size:12.5px;">Not set</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if company.users.count %}
                                    <span style="color:var(--success-green); font-size:12.5px;">{{ company.users.count }} user(s)</span>
                                {% else %}
                                    <span style="color:var(--warning-orange); font-size:12.5px;">No admin</span>
                                {% endif %}
                            </td>
                            <td style="font-size:12.5px; color:var(--text-muted);">{{ company.created_at|date:"M d, Y" }}</td>
                            <td style="text-align:right;">
                                <div style="display:inline-flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end;">
                                    <a href="{% url 'superuser_company_test' company.pk %}" class="btn btn-secondary" style="padding:5px 12px; font-size:12px; border-radius:20px !important; color:#0084ff;">Test</a>
                                    <a href="{% url 'superuser_company_edit' company.pk %}" class="btn btn-secondary" style="padding:5px 12px; font-size:12px; border-radius:20px !important;">Edit</a>
                                    <button type="button" onclick="copyWidgetScript({{ company.id }}, this, '{{ company.widget_position }}'{% if company.icon %}, '{{ base_url }}{{ company.icon.url }}'{% else %}, null{% endif %}, {bottomOffset:{{ company.widget_bottom_offset }},sideOffset:{{ company.widget_side_offset }},buttonSize:{{ company.widget_button_size }},panelWidth:{{ company.widget_panel_width }},panelHeight:{{ company.widget_panel_height }}})" class="btn btn-secondary" style="padding:5px 12px; font-size:12px; border-radius:20px !important; color:var(--success-green);">
                                        Copy Script
                                    </button>
                                    <form action="{% url 'superuser_company_delete' company.pk %}" method="post" onsubmit="return confirm('Delete this company? All data will be lost.');" style="display:inline;">
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-secondary" style="padding:5px 12px; font-size:12px; border-radius:20px !important; color:var(--danger-red);">Delete</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <div style="text-align:center; padding:3rem 2rem; color:var(--text-muted);">
            <div style="font-size:2rem; margin-bottom:1rem; opacity:0.4;">📋</div>
            <div style="font-weight:600; margin-bottom:0.5rem; color:var(--text-primary);">No Tenant Companies</div>
            <p style="font-size:13px; margin-bottom:1.5rem;">Get started by creating your first chatbot client.</p>
            <a href="{% url 'superuser_company_create' %}" class="btn btn-primary">Create Company</a>
        </div>
    {% endif %}
</div>

<!-- ── LEADS TABLE ── -->
<div class="su-table-wrap">
    <div class="su-table-head">
        <span class="su-section-title">Captured Leads</span>
        <span style="font-size:12px; color:var(--text-muted);">{{ total_leads }} total</span>
    </div>
    {% if leads %}
        <div class="table-container">
            <table class="custom-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Phone</th>
                        <th>Page URL</th>
                        <th>Submitted</th>
                        <th style="text-align:right;">Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for lead in leads %}
                        <tr>
                            <td style="font-weight:600;">{{ lead.name }}</td>
                            <td>{{ lead.phone }}</td>
                            <td>
                                {% if lead.page_url %}
                                    <a href="{{ lead.page_url }}" target="_blank" style="color:var(--primary-blue); font-size:12px; text-decoration:underline;">{{ lead.page_url|truncatechars:40 }}</a>
                                {% else %}
                                    <span style="color:var(--text-muted); font-style:italic; font-size:12px;">—</span>
                                {% endif %}
                            </td>
                            <td style="font-size:12.5px; color:var(--text-muted);">{{ lead.created_at|date:"M d, Y h:i A" }}</td>
                            <td style="text-align:right;">
                                <form action="{% url 'superuser_delete_lead' lead.pk %}" method="post" onsubmit="return confirm('Delete this lead?');" style="display:inline;">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-secondary" style="padding:5px 12px; font-size:12px; border-radius:20px !important; color:var(--danger-red);">Delete</button>
                                </form>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <div style="text-align:center; padding:2.5rem 2rem; color:var(--text-muted); font-size:13px;">
            No leads captured yet. They will appear here when visitors submit the lead form.
        </div>
    {% endif %}
</div>

<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
<script>
    // ── DATA FROM DJANGO ──
    const dateLabels    = {{ chart_date_labels|safe }};
    const botData       = {{ chart_bot_data|safe }};
    const visitorData   = {{ chart_visitor_data|safe }};
    const escData       = {{ chart_esc_data|safe }};
    const compLabels    = {{ chart_company_labels|safe }};
    const compData      = {{ chart_company_data|safe }};
    const todayBot      = {{ today_bot }};
    const todayVisitor  = {{ today_visitor }};
    const todayAgent    = {{ today_agent }};

    const gridColor = 'rgba(0,0,0,0.05)';
    const tickColor = '#65676b';

    // ── 1. DAILY MESSAGES LINE CHART ──
    new Chart(document.getElementById('msgLineChart'), {
        type: 'line',
        data: {
            labels: dateLabels,
            datasets: [
                {
                    label: 'Bot Replies',
                    data: botData,
                    borderColor: '#0084ff',
                    backgroundColor: 'rgba(0,132,255,0.08)',
                    fill: true,
                    tension: 0.4,
                    pointRadius: 3,
                    pointHoverRadius: 5,
                    borderWidth: 2,
                },
                {
                    label: 'Visitor Messages',
                    data: visitorData,
                    borderColor: '#6366f1',
                    backgroundColor: 'rgba(99,102,241,0.08)',
                    fill: true,
                    tension: 0.4,
                    pointRadius: 3,
                    pointHoverRadius: 5,
                    borderWidth: 2,
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { position: 'top', labels: { font: { size: 12 }, color: tickColor, boxWidth: 10, usePointStyle: true } },
                tooltip: { mode: 'index', intersect: false }
            },
            scales: {
                x: { grid: { color: gridColor }, ticks: { color: tickColor, font: { size: 10 }, maxRotation: 30 } },
                y: { beginAtZero: true, grid: { color: gridColor }, ticks: { color: tickColor, font: { size: 11 }, precision: 0 } }
            }
        }
    });

    // ── 2. TODAY SENDER DOUGHNUT ──
    const donutTotal = todayBot + todayVisitor + todayAgent;
    new Chart(document.getElementById('senderDonut'), {
        type: 'doughnut',
        data: {
            labels: ['Bot', 'Visitor', 'Agent'],
            datasets: [{
                data: donutTotal > 0 ? [todayBot, todayVisitor, todayAgent] : [1, 1, 1],
                backgroundColor: ['#0084ff', '#6366f1', '#31a24c'],
                borderColor: '#ffffff',
                borderWidth: 3,
                hoverOffset: 6,
            }]
        },
        options: {
            responsive: true,
            cutout: '68%',
            plugins: {
                legend: { display: false },
                tooltip: { enabled: donutTotal > 0 }
            }
        }
    });

    // ── 3. COMPANY BAR CHART ──
    new Chart(document.getElementById('companyBarChart'), {
        type: 'bar',
        data: {
            labels: compLabels.length ? compLabels : ['No data'],
            datasets: [{
                label: 'Messages',
                data: compData.length ? compData : [0],
                backgroundColor: [
                    'rgba(0,132,255,0.7)','rgba(99,102,241,0.7)','rgba(49,162,76,0.7)',
                    'rgba(245,158,11,0.7)','rgba(250,56,62,0.7)','rgba(37,211,102,0.7)',
                    'rgba(139,92,246,0.7)','rgba(251,146,60,0.7)'
                ],
                borderRadius: 6,
                borderSkipped: false,
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { display: false },
                tooltip: { callbacks: { label: ctx => ` ${ctx.parsed.y} messages` } }
            },
            scales: {
                x: { grid: { display: false }, ticks: { color: tickColor, font: { size: 10 }, maxRotation: 30 } },
                y: { beginAtZero: true, grid: { color: gridColor }, ticks: { color: tickColor, precision: 0 } }
            }
        }
    });

    // ── 4. ESCALATIONS LINE CHART ──
    new Chart(document.getElementById('escLineChart'), {
        type: 'line',
        data: {
            labels: dateLabels,
            datasets: [{
                label: 'Escalations',
                data: escData,
                borderColor: '#f59e0b',
                backgroundColor: 'rgba(245,158,11,0.1)',
                fill: true,
                tension: 0.4,
                pointRadius: 3,
                borderWidth: 2,
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { display: false },
                tooltip: { mode: 'index', intersect: false }
            },
            scales: {
                x: { grid: { color: gridColor }, ticks: { color: tickColor, font: { size: 10 }, maxRotation: 30 } },
                y: { beginAtZero: true, grid: { color: gridColor }, ticks: { color: tickColor, precision: 0 } }
            }
        }
    });

    // ── WIDGET COPY SCRIPT ──
    const WIDGET_BASE_URL = "{{ base_url }}";
    const WIDGET_JS_PATH  = "{% url 'chatbot_widget_js' %}";

    function getWidgetScript(companyId, position, iconUrl, config) {
        config = config || {};
        let code = `<script \n  src="${WIDGET_BASE_URL}${WIDGET_JS_PATH}" \n  id="chatlab-widget-loader"\n  data-company-id="${companyId}" \n  data-position="${position || 'right'}"\n  data-bottom-offset="${config.bottomOffset || 24}"\n  data-side-offset="${config.sideOffset || 24}"\n  data-button-size="${config.buttonSize || 60}"\n  data-panel-width="${config.panelWidth || 360}"\n  data-panel-height="${config.panelHeight || 480}"`;
        if (iconUrl) code += ` \n  data-icon-url="${iconUrl}"`;
        code += `><\/script>`;
        return code;
    }

    function copyWidgetScript(companyId, btn, position, iconUrl, config) {
        const code = getWidgetScript(companyId, position, iconUrl, config);
        const orig = btn.textContent;
        function onSuccess() {
            btn.textContent = 'Copied!';
            setTimeout(() => { btn.textContent = orig; }, 2000);
        }
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(code).then(onSuccess).catch(() => fallbackCopy(code, onSuccess));
        } else { fallbackCopy(code, onSuccess); }
    }

    function fallbackCopy(text, onSuccess) {
        const ta = document.createElement('textarea');
        ta.value = text; ta.style.position = 'fixed'; ta.style.opacity = '0';
        document.body.appendChild(ta); ta.select();
        document.execCommand('copy'); document.body.removeChild(ta);
        onSuccess();
    }
</script>
{% endblock %}