@extends('layouts.admin', ['title' => 'Analytics', 'currentPage' => 'dashboard', 'breadcrumbs' => [ ['title' => 'Analytics'] ]])

@section('content')
<div class="max-w-6xl mx-auto p-6">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-white rounded-2xl shadow-lg p-6">
            <h2 class="text-lg font-semibold text-gray-800 mb-2">Surveys</h2>
            <p class="text-sm text-gray-600 mb-4">Response rate over time, per-question distributions, Likert heatmaps.</p>
            <canvas id="surveyChart" height="120"></canvas>
        </div>
        <div class="bg-white rounded-2xl shadow-lg p-6">
            <h2 class="text-lg font-semibold text-gray-800 mb-2">Polls</h2>
            <p class="text-sm text-gray-600 mb-4">Participation trends and option distributions.</p>
            <canvas id="pollsPlaceholder" height="120"></canvas>
        </div>
        <div class="bg-white rounded-2xl shadow-lg p-6">
            <h2 class="text-lg font-semibold text-gray-800 mb-2">Boards</h2>
            <p class="text-sm text-gray-600 mb-4">Posts over time, contributors, reactions.</p>
            <canvas id="boardsPlaceholder" height="120"></canvas>
        </div>
        <div class="bg-white rounded-2xl shadow-lg p-6">
            <h2 class="text-lg font-semibold text-gray-800 mb-2">Forums</h2>
            <p class="text-sm text-gray-600 mb-4">Threads, posts, time-to-first-reply, active users.</p>
            <canvas id="forumThreads" height="120" class="mb-4"></canvas>
            <canvas id="forumPosts" height="120" class="mb-2"></canvas>
            <div id="forumTtfr" class="text-xs text-gray-500"></div>
        </div>
        <div class="bg-white rounded-2xl shadow-lg p-6 md:col-span-2">
            <h2 class="text-lg font-semibold text-gray-800 mb-2">Readings</h2>
            <p class="text-sm text-gray-600 mb-4">Opens/clicks, session coverage, engagement.</p>
            <canvas id="readingsPlaceholder" height="120"></canvas>
        </div>
    </div>
</div>
@endsection

@push('head')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', async function(){
    // Survey responses per day
    const s = await fetch('/admin/api/analytics/survey/responses-per-day').then(r=>r.json());
    if (Array.isArray(s)) renderLine('surveyChart', s.map(i=>i.d), s.map(i=>i.c), 'Responses');
    // Forum activity
    const f = await fetch('/admin/api/analytics/forum/activity').then(r=>r.json());
    if (f && f.threads) renderLine('forumThreads', f.threads.map(i=>i.w), f.threads.map(i=>i.c), 'Threads/week');
    if (f && f.posts) renderLine('forumPosts', f.posts.map(i=>i.w), f.posts.map(i=>i.c), 'Posts/week');
    const m = document.getElementById('forumTtfr');
    if (m) m.textContent = f.median_minutes + ' min median time-to-first-reply';
});
function renderLine(id, labels, data, label){
    const el = document.getElementById(id);
    if(!el) return;
    new Chart(el.getContext('2d'), {
        type: 'line',
        data: { labels, datasets: [{ label, data, borderColor: '#1d4ed8', backgroundColor: 'rgba(29,78,216,.2)', tension:.2 }] },
        options: { scales: { y: { beginAtZero: true } }, plugins: { legend: { display: true } } }
    });
}
</script>
@endpush