{% extends "base.html" %}

{% block title %}Reading Log - Audiobookshelf Recommendations{% endblock %}

{% block extra_head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
{% endblock %}

{% block content %}
<header>
    <h1>Reading Log</h1>
    <p class="subtitle">Track your listening progress and statistics</p>
</header>

<div id="message" class="message hidden"></div>

<!-- Statistics Summary -->
<section class="section">
    <h2>Reading Statistics</h2>
    <div id="stats-loading" class="loading">Loading statistics...</div>
    <div id="stats-container" class="stats-grid hidden">
        <div class="stat-card">
            <div class="stat-value" id="stat-total-books">-</div>
            <div class="stat-label">Books Finished</div>
        </div>
        <div class="stat-card">
            <div class="stat-value" id="stat-total-hours">-</div>
            <div class="stat-label">Hours Listened</div>
        </div>
        <div class="stat-card">
            <div class="stat-value" id="stat-avg-rating">-</div>
            <div class="stat-label">Average Rating</div>
        </div>
        <div class="stat-card">
            <div class="stat-value" id="stat-streak">-</div>
            <div class="stat-label">Day Streak</div>
        </div>
    </div>
</section>

<!-- Charts -->
<section class="section">
    <div class="charts-container">
        <div class="chart-card">
            <h3>Books Per Month</h3>
            <canvas id="books-per-month-chart"></canvas>
        </div>
        <div class="chart-card">
            <h3>Top Genres</h3>
            <canvas id="genres-chart"></canvas>
        </div>
    </div>
</section>

<!-- Recent Books -->
<section class="section">
    <h2>Recently Finished Books</h2>
    <div id="recent-books-container">
        <div id="books-loading" class="loading">Loading books...</div>
        <div id="books-list" class="books-grid hidden"></div>
        <div id="books-empty" class="empty-state hidden">
            No finished books yet. Start listening and they'll appear here!
        </div>
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script src="/static/js/reading-log.js"></script>
<script>
    // Initialize reading log on page load
    document.addEventListener('DOMContentLoaded', () => {
        loadReadingStats();
    });
</script>
{% endblock %}