{% extends "base.html" %}
{% block title %}Analytics — Claw-ED{% endblock %}
{% block breadcrumbs %}
<div class="breadcrumbs"><div class="container"><a href="/">Home</a><span class="sep">/</span>Analytics</div></div>
{% endblock %}
{% block content %}
<h1>Analytics</h1>

{# ── Summary Stats ────────────────────────────────────────── #}
<div class="stats-row">
    <div class="stat-card">
        <span class="stat-num">{{ stats.total_lessons }}</span>
        <span class="stat-label">Total Lessons</span>
    </div>
    <div class="stat-card">
        <span class="stat-num">{{ stats.rated_lessons }}</span>
        <span class="stat-label">Rated Lessons</span>
    </div>
    <div class="stat-card">
        <span class="stat-num">{{ stats.total_units }}</span>
        <span class="stat-label">Units</span>
    </div>
    <div class="stat-card">
        <span class="stat-num">{{ "%.1f"|format(stats.overall_avg_rating) }}/5</span>
        <span class="stat-label">Avg Rating</span>
    </div>
    <div class="stat-card">
        <span class="stat-num">{{ stats.streak }}</span>
        <span class="stat-label">Day Streak</span>
    </div>
</div>

{% if stats.total_lessons > 0 %}
{# ── Charts Grid ──────────────────────────────────────────── #}
<div class="chart-grid">

    {# ── Bar Chart: Lessons Generated by Day ──────────────── #}
    <div class="chart-container">
        <h3>Lessons Generated (Last 7 Days)</h3>
        {% if daily_lessons %}
        <div class="bar-chart">
            {% set max_daily = daily_lessons | map(attribute='count') | max %}
            {% for day in daily_lessons %}
            <div class="bar-col">
                <span class="bar-value">{{ day.count }}</span>
                <div class="bar-fill" style="height: {{ (day.count / (max_daily or 1) * 140)|int }}px;"></div>
                <span class="bar-label">{{ day.label }}</span>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state" style="padding: 2rem 0;"><p>No lessons this week.</p></div>
        {% endif %}
    </div>

    {# ── Bar Chart: Student Questions by Day ──────────────── #}
    <div class="chart-container">
        <h3>Student Questions (Last 7 Days)</h3>
        {% if daily_questions %}
        <div class="bar-chart">
            {% set max_questions = daily_questions | map(attribute='count') | max %}
            {% for day in daily_questions %}
            <div class="bar-col">
                <span class="bar-value">{{ day.count }}</span>
                <div class="bar-fill" style="height: {{ (day.count / (max_questions or 1) * 140)|int }}px; background: var(--green);"></div>
                <span class="bar-label">{{ day.label }}</span>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state" style="padding: 2rem 0;"><p>No student questions this week.</p></div>
        {% endif %}
    </div>

    {# ── Horizontal Bar: Top Topics ───────────────────────── #}
    <div class="chart-container">
        <h3>Top Topics Generated</h3>
        {% if topic_frequency %}
        <div class="hbar-chart">
            {% set max_topic_count = topic_frequency | map(attribute='count') | max %}
            {% for item in topic_frequency[:8] %}
            <div class="hbar-row">
                <span class="hbar-label" title="{{ item.topic }}">{{ item.topic | truncate(20) }}</span>
                <div class="hbar-track">
                    <div class="hbar-fill" style="width: {{ (item.count / (max_topic_count or 1) * 100)|int }}%;"></div>
                </div>
                <span class="hbar-value">{{ item.count }}</span>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state" style="padding: 2rem 0;"><p>No topics yet.</p></div>
        {% endif %}
    </div>

    {# ── Rating Trend (canvas line chart) ─────────────────── #}
    <div class="chart-container">
        <h3>Average Lesson Rating Trend</h3>
        {% if quality_trend %}
        <div class="line-chart-wrap">
            <canvas id="rating-trend-canvas"></canvas>
        </div>
        {% else %}
        <div class="empty-state" style="padding: 2rem 0;"><p>Rate lessons to see trends.</p></div>
        {% endif %}
    </div>
</div>

{# ── Rating Distribution + By Subject ────────────────────── #}
{% if stats.rated_lessons > 0 %}
<div class="chart-grid">
    <div class="chart-container">
        <h3>Rating Distribution</h3>
        <div class="rating-distribution">
            {% for star in [5, 4, 3, 2, 1] %}
            {% set count = stats.rating_distribution.get(star, 0) %}
            {% set max_count = stats.rating_distribution.values()|max if stats.rating_distribution.values()|list else 1 %}
            {% set pct = (count / max_count * 100) if max_count else 0 %}
            <div class="dist-row">
                <span class="dist-label">{{ "\u2605" * star }}</span>
                <div class="dist-bar-bg">
                    <div class="dist-bar-fill" style="width: {{ pct }}%"></div>
                </div>
                <span class="dist-count">{{ count }}</span>
            </div>
            {% endfor %}
        </div>
    </div>

    {% if stats.by_subject %}
    <div class="chart-container">
        <h3>Ratings by Subject</h3>
        <table class="data-table">
            <thead><tr><th>Subject</th><th>Avg Rating</th></tr></thead>
            <tbody>
                {% for subject, avg in stats.by_subject.items() %}
                <tr>
                    <td>{{ subject }}</td>
                    <td>
                        <span class="score-badge {% if avg >= 4 %}score-green{% elif avg >= 3 %}score-yellow{% else %}score-red{% endif %}">
                            {{ avg }}/5
                        </span>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}
</div>
{% endif %}

{# ── Top Student Questions ────────────────────────────────── #}
{% if top_questions %}
<div class="chart-container">
    <h3>Top Student Questions This Week</h3>
    <table class="data-table">
        <thead><tr><th>Question</th><th>Times Asked</th></tr></thead>
        <tbody>
            {% for q in top_questions %}
            <tr>
                <td>{{ q.question | truncate(100) }}</td>
                <td><strong>{{ q.count }}</strong></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

{# ── Needs Improvement ────────────────────────────────────── #}
{% if stats.needs_improvement %}
<div class="chart-container">
    <h3>Needs Improvement</h3>
    <p style="color: var(--text-secondary); margin-bottom: 1rem; font-size: 0.85rem;">
        Lessons rated below 3 stars — analyzed in the next improvement cycle.
    </p>
    <table class="data-table">
        <thead><tr><th>Lesson</th><th>Rating</th><th>Date</th></tr></thead>
        <tbody>
            {% for lesson in stats.needs_improvement[:10] %}
            <tr>
                <td>{{ lesson.title or "Untitled" }}</td>
                <td><span class="score-badge score-red">{{ lesson.rating }}/5</span></td>
                <td>{{ (lesson.created_at or "")[:10] }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

{% else %}
<div class="empty-state">
    <p>No lessons generated yet.</p>
    <p><a href="/generate">Generate your first lesson</a> to start seeing analytics.</p>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
{% if quality_trend %}
<script>
// Simple canvas line chart for rating trend — no dependencies
(function() {
    var canvas = document.getElementById('rating-trend-canvas');
    if (!canvas) return;

    var rawData = {{ quality_trend | tojson }};
    if (!rawData || rawData.length < 2) return;

    var ctx = canvas.getContext('2d');
    var dpr = window.devicePixelRatio || 1;
    var rect = canvas.parentElement.getBoundingClientRect();
    canvas.width = rect.width * dpr;
    canvas.height = rect.height * dpr;
    ctx.scale(dpr, dpr);
    var W = rect.width, H = rect.height;

    var labels = rawData.map(function(d) { return d.week_short; });
    var values = rawData.map(function(d) { return d.avg_rating; });
    var minV = 0, maxV = 5;
    var padL = 30, padR = 10, padT = 15, padB = 25;
    var plotW = W - padL - padR;
    var plotH = H - padT - padB;

    function x(i) { return padL + (i / (values.length - 1)) * plotW; }
    function y(v) { return padT + plotH - ((v - minV) / (maxV - minV)) * plotH; }

    var style = getComputedStyle(document.documentElement);
    var lineColor = style.getPropertyValue('--chart-line').trim() || '#059669';
    var textColor = style.getPropertyValue('--text-secondary').trim() || '#6b7280';
    var gridColor = style.getPropertyValue('--border').trim() || '#e5e7eb';

    // Grid
    ctx.strokeStyle = gridColor;
    ctx.lineWidth = 0.5;
    for (var g = 1; g <= 5; g++) {
        ctx.beginPath();
        ctx.moveTo(padL, y(g));
        ctx.lineTo(W - padR, y(g));
        ctx.stroke();
        ctx.fillStyle = textColor;
        ctx.font = '10px -apple-system, sans-serif';
        ctx.textAlign = 'right';
        ctx.fillText(g, padL - 5, y(g) + 3);
    }

    // Line
    ctx.strokeStyle = lineColor;
    ctx.lineWidth = 2;
    ctx.lineJoin = 'round';
    ctx.beginPath();
    for (var i = 0; i < values.length; i++) {
        if (i === 0) ctx.moveTo(x(i), y(values[i]));
        else ctx.lineTo(x(i), y(values[i]));
    }
    ctx.stroke();

    // Dots
    ctx.fillStyle = lineColor;
    for (var j = 0; j < values.length; j++) {
        ctx.beginPath();
        ctx.arc(x(j), y(values[j]), 3, 0, Math.PI * 2);
        ctx.fill();
    }

    // X labels
    ctx.fillStyle = textColor;
    ctx.font = '10px -apple-system, sans-serif';
    ctx.textAlign = 'center';
    var step = Math.max(1, Math.floor(labels.length / 6));
    for (var k = 0; k < labels.length; k += step) {
        ctx.fillText(labels[k], x(k), H - 5);
    }
    if ((labels.length - 1) % step !== 0) {
        ctx.fillText(labels[labels.length - 1], x(labels.length - 1), H - 5);
    }
})();
</script>
{% endif %}
{% endblock %}