{% extends "base.html" %}

{% block title %}Prompt Analytics - AISBF Dashboard{% endblock %}

{% macro format_tokens(value) %}
{% if value is none or value == 0 %}0{% else %}
{% set val = value | float %}
{% if val >= 1000000000 %}
{{ "%.2f"|format(val / 1000000000) }}B
{% elif val >= 1000000 %}
{{ "%.2f"|format(val / 1000000) }}M
{% elif val >= 1000 %}
{{ "%.2f"|format(val / 1000) }}K
{% else %}
{{ "%.0f"|format(val) }}
{% endif %}
{% endif %}
{% endmacro %}

{% macro pct(part, total) %}
{% if total and total > 0 %}
{{ "%.0f"|format((part / total) * 100) }}%
{% else %}
0%
{% endif %}
{% endmacro %}

{% block content %}
<h2 style="margin-bottom: 12px;">Prompt Analytics</h2>
<p style="margin: 0 0 24px; color: var(--color-muted); max-width: 960px; line-height: 1.6;">
    Native AISBF prompt analysis for prompt-security findings, request composition, blocking posture, and model/provider exposure.
    {% if is_config_admin %}
    This view can compare global traffic with user-scoped runs when filters are applied.
    {% else %}
    This view is limited to your own requests and does not expose global visitor activity.
    {% endif %}
</p>

<div style="background: var(--bg-page); padding: 15px; border-radius: 8px; margin-bottom: 30px;">
    <div style="display: flex; gap: 15px; flex-wrap: wrap;">
        <a href="{{ url_for(request, '/dashboard/analytics') }}" class="btn btn-secondary" style="text-decoration: none;">📊 Analytics</a>
        <a href="{{ url_for(request, '/dashboard/prompt-analytics') }}" class="btn" style="text-decoration: none;">🧠 Prompt Analytics</a>
        {% if is_config_admin %}
        <a href="{{ url_for(request, '/dashboard/traffic-visits') }}" class="btn btn-secondary" style="text-decoration: none;">👣 Traffic &amp; Visits</a>
        {% endif %}
        <a href="{{ url_for(request, '/dashboard/response-cache') }}" class="btn btn-secondary" style="text-decoration: none;">💾 Response Cache</a>
        <a href="{{ url_for(request, '/dashboard/rate-limits') }}" class="btn btn-secondary" style="text-decoration: none;">⏱️ Rate Limits</a>
    </div>
</div>

<div style="background: var(--bg-page); padding: 20px; border-radius: 8px; margin-bottom: 30px;">
    <h3 style="margin-bottom: 15px;">Filter by Date Range</h3>
    <form method="get" action="{{ url_for(request, '/dashboard/prompt-analytics') }}" style="display: flex; flex-wrap: wrap; gap: 15px; align-items: flex-end;">
        <div style="flex: 1; min-width: 200px;">
            <label style="display: block; margin-bottom: 5px; color: var(--color-muted); font-size: 14px;">Time Range</label>
            <select name="time_range" id="timeRangeSelect" style="width: 100%; padding: 10px; border-radius: 4px; background:var(--bg-accent); color: white; border: 1px solid #2a4a7a;">
                <option value="1h" {% if selected_time_range == '1h' %}selected{% endif %}>Last 1 Hour</option>
                <option value="6h" {% if selected_time_range == '6h' %}selected{% endif %}>Last 6 Hours</option>
                <option value="24h" {% if selected_time_range == '24h' %}selected{% endif %}>Last 24 Hours (Default)</option>
                <option value="yesterday" {% if selected_time_range == 'yesterday' %}selected{% endif %}>Yesterday</option>
                <option value="7d" {% if selected_time_range == '7d' %}selected{% endif %}>Last 7 Days</option>
                <option value="30d" {% if selected_time_range == '30d' %}selected{% endif %}>Last 30 Days</option>
                <option value="90d" {% if selected_time_range == '90d' %}selected{% endif %}>Last 90 Days</option>
                <option value="custom" {% if selected_time_range == 'custom' %}selected{% endif %}>Custom Range</option>
            </select>
        </div>
        <div id="customDateRange" style="display: {% if selected_time_range == 'custom' or from_date %}flex{% else %}none{% endif %}; flex-wrap: wrap; gap: 15px; flex: 2;">
            <div style="flex: 1; min-width: 200px;">
                <label style="display: block; margin-bottom: 5px; color: var(--color-muted); font-size: 14px;">From Date &amp; Time</label>
                <input type="datetime-local" name="from_date" value="{{ from_date or '' }}" style="width: 100%; padding: 10px; border-radius: 4px; background:var(--bg-accent); color: white; border: 1px solid #2a4a7a;">
            </div>
            <div style="flex: 1; min-width: 200px;">
                <label style="display: block; margin-bottom: 5px; color: var(--color-muted); font-size: 14px;">To Date &amp; Time</label>
                <input type="datetime-local" name="to_date" value="{{ to_date or '' }}" style="width: 100%; padding: 10px; border-radius: 4px; background:var(--bg-accent); color: white; border: 1px solid #2a4a7a;">
            </div>
        </div>
        <div>
            <button type="submit" style="padding: 10px 20px; background: var(--color-primary); color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold;">Apply Filter</button>
        </div>
    </form>
</div>

<div style="background: var(--bg-page); padding: 20px; border-radius: 8px; margin-bottom: 30px;">
    <h3 style="margin-bottom: 15px;">Filter by Provider, Model, Rotation, Autoselect, or User</h3>
    <form method="get" action="{{ url_for(request, '/dashboard/prompt-analytics') }}" style="display: flex; flex-wrap: wrap; gap: 15px; align-items: flex-end;">
        <input type="hidden" name="time_range" value="{{ selected_time_range }}">
        {% if from_date %}<input type="hidden" name="from_date" value="{{ from_date }}">{% endif %}
        {% if to_date %}<input type="hidden" name="to_date" value="{{ to_date }}">{% endif %}
        <div style="flex: 1; min-width: 150px;"><label style="display: block; margin-bottom: 5px; color: var(--color-muted); font-size: 14px;">Provider</label><select name="provider_filter" style="width: 100%; padding: 10px; border-radius: 4px; background:var(--bg-accent); color: white; border: 1px solid #2a4a7a;"><option value="">All Providers</option>{% for provider in available_providers %}<option value="{{ provider }}" {% if selected_provider == provider %}selected{% endif %}>{{ provider }}</option>{% endfor %}</select></div>
        <div style="flex: 1; min-width: 150px;"><label style="display: block; margin-bottom: 5px; color: var(--color-muted); font-size: 14px;">Model</label><select name="model_filter" style="width: 100%; padding: 10px; border-radius: 4px; background:var(--bg-accent); color: white; border: 1px solid #2a4a7a;"><option value="">All Models</option>{% for model in available_models %}<option value="{{ model }}" {% if selected_model == model %}selected{% endif %}>{{ model }}</option>{% endfor %}</select></div>
        <div style="flex: 1; min-width: 150px;"><label style="display: block; margin-bottom: 5px; color: var(--color-muted); font-size: 14px;">Rotation</label><select name="rotation_filter" style="width: 100%; padding: 10px; border-radius: 4px; background:var(--bg-accent); color: white; border: 1px solid #2a4a7a;"><option value="">All Rotations</option>{% for rotation in available_rotations %}<option value="{{ rotation }}" {% if selected_rotation == rotation %}selected{% endif %}>{{ rotation }}</option>{% endfor %}</select></div>
        <div style="flex: 1; min-width: 150px;"><label style="display: block; margin-bottom: 5px; color: var(--color-muted); font-size: 14px;">Autoselect</label><select name="autoselect_filter" style="width: 100%; padding: 10px; border-radius: 4px; background:var(--bg-accent); color: white; border: 1px solid #2a4a7a;"><option value="">All Autoselects</option>{% for autoselect in available_autoselects %}<option value="{{ autoselect }}" {% if selected_autoselect == autoselect %}selected{% endif %}>{{ autoselect }}</option>{% endfor %}</select></div>
        {% if is_admin %}
        <div style="flex: 1; min-width: 150px;"><label style="display: block; margin-bottom: 5px; color: var(--color-muted); font-size: 14px;">User</label><select name="user_filter" style="width: 100%; padding: 10px; border-radius: 4px; background:var(--bg-accent); color: white; border: 1px solid #2a4a7a;"><option value="">All Users</option>{% for user in available_users %}<option value="{{ user.id }}" {% if selected_user == user.id %}selected{% endif %}>{{ user.username }}{% if user.role == 'admin' %} (admin){% endif %}</option>{% endfor %}</select></div>
        <div style="flex: 1; min-width: 150px; display: flex; align-items: center;"><label style="display: flex; align-items: center; color: var(--color-text); cursor: pointer; user-select: none;"><input type="checkbox" name="global_only" value="1" {% if global_only == '1' %}checked{% endif %} style="margin-right: 8px; width: 18px; height: 18px; cursor: pointer;"><span style="font-size: 14px;">Global requests only</span></label></div>
        {% endif %}
        <div><button type="submit" style="padding: 10px 20px; background: var(--color-link); color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold;">Apply Filters</button></div>
    </form>
</div>

<script>
const analyticsData = {
    promptAnalysisSeries: {{ prompt_analysis_series|default('[]')|safe }}
};

document.getElementById('timeRangeSelect').addEventListener('change', function() {
    const customRange = document.getElementById('customDateRange');
    customRange.style.display = this.value === 'custom' ? 'flex' : 'none';
});
</script>

{% set details = prompt_analysis_details or {} %}
{% set posture = details.posture or {} %}
{% set total_runs = prompt_analysis_overview.total_runs if prompt_analysis_overview else 0 %}

{% if prompt_analysis_overview and prompt_analysis_overview.total_runs > 0 %}
<div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-bottom:24px;">
    <div style="background: linear-gradient(135deg, rgba(37,99,235,0.16), rgba(15,23,42,0.9)); padding: 18px; border-radius: 10px; border: 1px solid rgba(37,99,235,0.30);"><div style="color: #bfdbfe; font-size: 13px;">Analyzed Requests</div><div style="font-size: 30px; font-weight: 700;">{{ prompt_analysis_overview.total_runs }}</div></div>
    <div style="background: linear-gradient(135deg, rgba(220,38,38,0.16), rgba(15,23,42,0.9)); padding: 18px; border-radius: 10px; border: 1px solid rgba(220,38,38,0.30);"><div style="color: #fecaca; font-size: 13px;">Blocked Requests</div><div style="font-size: 30px; font-weight: 700; color:#fca5a5;">{{ prompt_analysis_overview.blocked_runs }}</div><div style="margin-top: 6px; color: var(--color-muted); font-size: 13px;">{{ pct(prompt_analysis_overview.blocked_runs, prompt_analysis_overview.total_runs) }} of analyzed runs</div></div>
    <div style="background: linear-gradient(135deg, rgba(245,158,11,0.16), rgba(15,23,42,0.9)); padding: 18px; border-radius: 10px; border: 1px solid rgba(245,158,11,0.30);"><div style="color: #fde68a; font-size: 13px;">High Risk</div><div style="font-size: 30px; font-weight: 700; color:#fcd34d;">{{ prompt_analysis_overview.high_risk_runs }}</div><div style="margin-top: 6px; color: var(--color-muted); font-size: 13px;">{{ pct(prompt_analysis_overview.high_risk_runs, prompt_analysis_overview.total_runs) }} flagged as high risk</div></div>
    <div style="background: var(--bg-page); padding: 18px; border-radius: 10px; border: 1px solid rgba(148,163,184,0.15);"><div style="color: var(--color-muted); font-size: 13px;">Avg Prompt / Context Tokens</div><div style="font-size: 22px; font-weight: 700;">{{ "%.0f"|format(prompt_analysis_overview.avg_prompt_tokens) }} / {{ "%.0f"|format(prompt_analysis_overview.avg_effective_context) }}</div><div style="margin-top: 6px; color: var(--color-muted); font-size: 13px;">Prompt body versus effective context footprint</div></div>
    <div style="background: var(--bg-page); padding: 18px; border-radius: 10px; border: 1px solid rgba(148,163,184,0.15);"><div style="color: var(--color-muted); font-size: 13px;">Runs With Tools</div><div style="font-size: 28px; font-weight: 700;">{{ posture.runs_with_tools or 0 }}</div><div style="margin-top: 6px; color: var(--color-muted); font-size: 13px;">{{ pct(posture.runs_with_tools or 0, total_runs) }} included tool definitions</div></div>
    <div style="background: var(--bg-page); padding: 18px; border-radius: 10px; border: 1px solid rgba(148,163,184,0.15);"><div style="color: var(--color-muted); font-size: 13px;">Runs With System Prompt</div><div style="font-size: 28px; font-weight: 700;">{{ posture.runs_with_system_prompt or 0 }}</div><div style="margin-top: 6px; color: var(--color-muted); font-size: 13px;">{{ pct(posture.runs_with_system_prompt or 0, total_runs) }} had an explicit system layer</div></div>
    <div style="background: var(--bg-page); padding: 18px; border-radius: 10px; border: 1px solid rgba(148,163,184,0.15);"><div style="color: var(--color-muted); font-size: 13px;">Avg Findings / Avg Risk Score</div><div style="font-size: 22px; font-weight: 700;">{{ "%.1f"|format(posture.avg_findings_count or 0) }} / {{ "%.0f"|format(posture.avg_risk_score or 0) }}</div><div style="margin-top: 6px; color: var(--color-muted); font-size: 13px;">Average detector density per analyzed request</div></div>
</div>

<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 24px; align-items: stretch;">
    <div style="background: var(--bg-page); padding: 20px; border-radius: 8px; min-width: 0;">
        <h4 style="margin-top:0; margin-bottom: 8px;">Prompt Risk Timeline</h4>
        <p style="margin: 0 0 16px; color: var(--color-muted); font-size: 14px;">Run volume, high-risk detections, and blocking decisions over time.</p>
        <canvas id="promptAnalysisChart" height="120"></canvas>
    </div>
    <div style="background: var(--bg-page); padding: 20px; border-radius: 8px;">
        <h4 style="margin-top:0; margin-bottom: 12px;">Scope</h4>
        <div style="display: grid; gap: 12px;">
            <div style="padding: 14px; border-radius: 8px; background: rgba(37,99,235,0.10); border: 1px solid rgba(37,99,235,0.20);">
                <div style="font-size: 12px; color: #bfdbfe; text-transform: uppercase; letter-spacing: 0.04em;">Visible Dataset</div>
                <div style="font-size: 18px; font-weight: 700; margin-top: 4px;">{% if is_config_admin %}{% if global_only == '1' %}Global-only{% elif selected_user %}Selected user{% else %}All visible scopes{% endif %}{% else %}Current user only{% endif %}</div>
            </div>
            <div style="padding: 14px; border-radius: 8px; background: rgba(15,23,42,0.5); border: 1px solid rgba(148,163,184,0.15); color: var(--color-muted); font-size: 14px; line-height: 1.6;">
                {% if is_config_admin %}
                Apply the user filter or enable <strong>Global requests only</strong> to separate user-owned prompt analysis from global admin traffic.
                {% else %}
                Prompt analytics are already scoped to your own requests, with no traffic or visitor telemetry exposed here.
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-bottom: 24px;">
    <div style="background: var(--bg-page); padding: 20px; border-radius: 8px;">
        <h4 style="margin-top:0;">Top Prompt Findings</h4>
        {% if prompt_analysis_overview.findings %}
        <table>
            <tr><th>Category</th><th>Severity</th><th>Count</th></tr>
            {% for finding in prompt_analysis_overview.findings %}
            <tr><td>{{ finding.category }}</td><td>{{ finding.severity }}</td><td>{{ finding.count }}</td></tr>
            {% endfor %}
        </table>
        {% else %}
        <p style="color: var(--color-muted); margin: 0;">No findings were recorded in this range.</p>
        {% endif %}
    </div>

    <div style="background: var(--bg-page); padding: 20px; border-radius: 8px;">
        <h4 style="margin-top:0;">Risk Level Mix</h4>
        {% if details.risk_breakdown %}
        <table>
            <tr><th>Risk</th><th>Runs</th><th>Share</th></tr>
            {% for row in details.risk_breakdown %}
            <tr><td>{{ row.risk_level }}</td><td>{{ row.count }}</td><td>{{ pct(row.count, total_runs) }}</td></tr>
            {% endfor %}
        </table>
        {% else %}
        <p style="color: var(--color-muted); margin: 0;">No risk distribution available.</p>
        {% endif %}
    </div>
</div>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; margin-bottom: 24px;">
    <div style="background: var(--bg-page); padding: 20px; border-radius: 8px;">
        <h4 style="margin-top:0;">Providers Under Prompt Pressure</h4>
        {% if details.provider_breakdown %}
        <table>
            <tr><th>Provider</th><th>Runs</th><th>Blocked</th><th>High Risk</th></tr>
            {% for provider in details.provider_breakdown %}
            <tr>
                <td>{{ provider.provider_id }}</td>
                <td>{{ provider.runs }}</td>
                <td>{{ provider.blocked }}</td>
                <td>{{ provider.high_risk }}</td>
            </tr>
            {% endfor %}
        </table>
        {% else %}
        <p style="color: var(--color-muted); margin: 0;">No provider breakdown available.</p>
        {% endif %}
    </div>

    <div style="background: var(--bg-page); padding: 20px; border-radius: 8px;">
        <h4 style="margin-top:0;">Most Analyzed Models</h4>
        {% if details.model_breakdown %}
        <table>
            <tr><th>Model</th><th>Runs</th><th>Blocked</th><th>High Risk</th></tr>
            {% for model in details.model_breakdown %}
            <tr>
                <td>{{ model.model_name }}</td>
                <td>{{ model.runs }}</td>
                <td>{{ model.blocked }}</td>
                <td>{{ model.high_risk }}</td>
            </tr>
            {% endfor %}
        </table>
        {% else %}
        <p style="color: var(--color-muted); margin: 0;">No model breakdown available.</p>
        {% endif %}
    </div>
</div>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-bottom: 24px;">
    <div style="background: var(--bg-page); padding: 20px; border-radius: 8px;">
        <h4 style="margin-top:0;">Dominant Prompt Segment</h4>
        {% if details.segment_breakdown %}
        <table>
            <tr><th>Segment</th><th>Runs</th><th>Share</th></tr>
            {% for row in details.segment_breakdown %}
            <tr><td>{{ row.role }}</td><td>{{ row.count }}</td><td>{{ pct(row.count, total_runs) }}</td></tr>
            {% endfor %}
        </table>
        {% else %}
        <p style="color: var(--color-muted); margin: 0;">No segment mix available.</p>
        {% endif %}
    </div>

    <div style="background: var(--bg-page); padding: 20px; border-radius: 8px;">
        <h4 style="margin-top:0;">Prompt Shapes</h4>
        {% if details.shape_breakdown %}
        <table>
            <tr><th>Shape</th><th>Runs</th><th>Share</th></tr>
            {% for row in details.shape_breakdown %}
            <tr><td>{{ row.prompt_shape }}</td><td>{{ row.count }}</td><td>{{ pct(row.count, total_runs) }}</td></tr>
            {% endfor %}
        </table>
        {% else %}
        <p style="color: var(--color-muted); margin: 0;">No prompt-shape data available.</p>
        {% endif %}
    </div>
</div>

<div style="background: var(--bg-page); padding: 20px; border-radius: 8px; margin-bottom: 24px;">
    <h4 style="margin-top:0; margin-bottom: 12px;">Recent Prompt Analysis Runs</h4>
    {% if details.recent_runs %}
    <div style="overflow-x: auto;">
        <table>
            <tr>
                <th>When</th>
                <th>Provider</th>
                <th>Model</th>
                <th>Risk</th>
                <th>Blocked</th>
                <th>Prompt / Context</th>
                <th>Shape</th>
                <th>Signals</th>
                <th>Findings</th>
            </tr>
            {% for run in details.recent_runs %}
            <tr>
                <td>{{ run.created_at }}</td>
                <td>{{ run.provider_id }}</td>
                <td>
                    <div>{{ run.model_name }}</div>
                    {% if run.rotation_id or run.autoselect_id %}
                    <div style="color: var(--color-muted); font-size: 12px; margin-top: 4px;">
                        {% if run.rotation_id %}Rotation: {{ run.rotation_id }}{% endif %}
                        {% if run.rotation_id and run.autoselect_id %} | {% endif %}
                        {% if run.autoselect_id %}Autoselect: {{ run.autoselect_id }}{% endif %}
                    </div>
                    {% endif %}
                </td>
                <td>
                    <div style="font-weight: 700; {% if run.risk_level == 'high' %}color:#fca5a5;{% elif run.risk_level == 'medium' %}color:#fcd34d;{% elif run.risk_level == 'info' %}color:#93c5fd;{% endif %}">{{ run.risk_level }}</div>
                    <div style="color: var(--color-muted); font-size: 12px;">score {{ run.risk_score }}</div>
                </td>
                <td>{% if run.blocked %}<span style="color:#fca5a5; font-weight:700;">Yes</span>{% else %}<span style="color: var(--color-muted);">No</span>{% endif %}</td>
                <td>{{ format_tokens(run.prompt_tokens) }} / {{ format_tokens(run.effective_context) }}</td>
                <td>
                    <div>{{ run.prompt_shape }}</div>
                    <div style="color: var(--color-muted); font-size: 12px;">largest: {{ run.largest_segment_role }}</div>
                </td>
                <td>
                    {% if run.has_system_prompt %}<span style="display:inline-block; padding:2px 8px; border-radius:999px; background: rgba(37,99,235,0.15); color:#bfdbfe; font-size:12px; margin: 0 6px 6px 0;">system</span>{% endif %}
                    {% if run.has_tools %}<span style="display:inline-block; padding:2px 8px; border-radius:999px; background: rgba(16,185,129,0.15); color:#a7f3d0; font-size:12px; margin: 0 6px 6px 0;">tools</span>{% endif %}
                    {% if not run.has_system_prompt and not run.has_tools %}<span style="color: var(--color-muted); font-size: 12px;">base</span>{% endif %}
                </td>
                <td>
                    <div>{{ run.findings_count }} total</div>
                    <div style="color: var(--color-muted); font-size: 12px; margin-top: 4px;">H {{ run.high_count }} / M {{ run.medium_count }} / I {{ run.info_count }}</div>
                    {% if run.findings %}
                    <div style="margin-top: 6px; color: var(--color-muted); font-size: 12px; line-height: 1.5;">
                        {% for finding in run.findings %}
                        <div>{{ finding.category }} ({{ finding.severity }}) x{{ finding.count }}</div>
                        {% endfor %}
                    </div>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </table>
    </div>
    {% else %}
    <p style="color: var(--color-muted); margin: 0;">No recent prompt-analysis runs matched the current filters.</p>
    {% endif %}
</div>
{% else %}
<p style="color: var(--color-muted);">No prompt analysis data available yet.</p>
{% endif %}

<div style="margin-top: 30px; display: flex; gap: 10px; flex-wrap: wrap;">
    <a href="{{ url_for(request, '/dashboard') }}" class="btn btn-secondary">Back to Dashboard</a>
    <a href="{{ url_for(request, '/dashboard/analytics') }}" class="btn btn-secondary">Analytics</a>
    {% if is_admin %}
    <a href="{{ url_for(request, '/dashboard/rate-limits') }}" class="btn">Rate Limits</a>
    <a href="{{ url_for(request, '/dashboard/response-cache') }}" class="btn">Response Cache</a>
    {% endif %}
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
<script>
if (document.getElementById('promptAnalysisChart') && analyticsData.promptAnalysisSeries.length) {
    new Chart(document.getElementById('promptAnalysisChart'), {
        type: 'line',
        data: {
            datasets: [
                { label: 'Runs', data: analyticsData.promptAnalysisSeries.map(d => ({x: d.bucket, y: d.runs})), borderColor: '#2563eb', backgroundColor: 'rgba(37,99,235,0.10)', fill: true, tension: 0.2 },
                { label: 'High Risk', data: analyticsData.promptAnalysisSeries.map(d => ({x: d.bucket, y: d.high_risk})), borderColor: '#f59e0b', backgroundColor: 'rgba(245,158,11,0.08)', fill: false, tension: 0.2 },
                { label: 'Blocked', data: analyticsData.promptAnalysisSeries.map(d => ({x: d.bucket, y: d.blocked})), borderColor: '#dc2626', backgroundColor: 'rgba(220,38,38,0.08)', fill: false, tension: 0.2 }
            ]
        },
        options: { responsive: true, scales: { x: { type: 'time', time: { unit: 'hour' }, title: { display: true, text: 'Time' } }, y: { beginAtZero: true, title: { display: true, text: 'Count' } } } }
    });
}
</script>
{% endblock %}