{% if user %}
{% extends "base.html" %}

{% block title %}Dashboard - Dewy Oracle{% endblock %}

{% block content %}
<header>
    <h1>Your Dashboard</h1>
    <p class="subtitle">AI-powered book recommendations based on your listening history</p>
</header>

<div class="actions">
    <button onclick="syncLibrary()" class="btn btn-primary">Sync with Audiobookshelf</button>
    <button onclick="generateRecommendations()" class="btn btn-secondary">Generate New Recommendations</button>
</div>

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

<section class="section">
    <h2>Your Recommendations</h2>
    <div id="recommendations-container">
        {% if recommendations %}
            <div class="recommendations-grid">
                {% for rec in recommendations %}
                <div class="recommendation-card">
                    <h3>{{ rec.title }}</h3>
                    <p class="author">by {{ rec.author }}</p>
                    <p class="description">{{ rec.description }}</p>
                    <div class="reason">
                        <strong>Why this book:</strong>
                        <p>{{ rec.reason }}</p>
                    </div>
                    {% if rec.genres %}
                        <div class="genres">
                            {% for genre in rec.genres %}
                            <span class="genre-tag">{{ genre }}</span>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        {% else %}
            <p class="empty-state">No recommendations yet. Sync your library and generate recommendations!</p>
        {% endif %}
    </div>
</section>

<section class="section">
    <h2>Recent Listening History</h2>
    <div id="history-container">
        {% if books %}
            <div class="history-list">
                {% for item in books %}
                <div class="history-item">
                    <div class="book-info">
                        <h3>{{ item.book.title }}</h3>
                        <p class="author">by {{ item.book.author }}</p>
                    </div>
                    <div class="progress-info">
                        {% if item.session.is_finished %}
                            <span class="status finished">Finished</span>
                        {% else %}
                            <span class="status in-progress">In Progress ({{ (item.session.progress * 100) | round | int }}%)</span>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
        {% else %}
            <p class="empty-state">No listening history found. Click "Sync with Audiobookshelf" to load your data.</p>
        {% endif %}
    </div>
</section>
{% endblock %}

{% else %}
{# Landing page for logged-out users #}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dewy Oracle</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="landing-container">
        <div class="landing-hero">
            <h1>Dewy Oracle</h1>
            <p class="landing-subtitle">
                AI-powered book recommendations based on your Audiobookshelf listening history
            </p>
            <div class="landing-actions">
                <a href="/register" class="btn btn-primary btn-large">Get Started</a>
                <a href="/login" class="btn btn-secondary btn-large">Sign In</a>
            </div>
        </div>

        <div class="landing-features">
            <h2>Features</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <h3>Smart Recommendations</h3>
                    <p>Get personalized book recommendations powered by AI based on your listening history</p>
                </div>
                <div class="feature-card">
                    <h3>Reading Statistics</h3>
                    <p>Track your listening progress with detailed stats and insights</p>
                </div>
                <div class="feature-card">
                    <h3>Audiobookshelf Integration</h3>
                    <p>Seamlessly sync with your Audiobookshelf server</p>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/js/app.js"></script>
</body>
</html>
{% endif %}
