<?php
require_once 'config.php';

if(!isLoggedIn()) {
    header("Location: login.php");
    exit;
}

$stmt = $pdo->prepare("SELECT h.*, a.title, a.author, a.cover_image, a.duration 
                        FROM listen_history h 
                        JOIN audiobooks a ON h.book_id = a.id 
                        WHERE h.user_id = ? 
                        ORDER BY h.listened_at DESC");
$stmt->execute([$_SESSION['user_id']]);
$history = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>История прослушивания - Аудиокниги Онлайн</title>
    <meta name="description" content="Список прослушанных вами аудиокниг">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', Arial, sans-serif; background: #f3f4f6; }
        header, footer { background: #0f172a; color: #f8fafc; padding: 1rem; text-align: center; }
        nav a { color: #f8fafc; margin: 0 15px; text-decoration: none; }
        nav a:hover { color: #a855f7; }
        main { max-width: 1100px; margin: 30px auto; padding: 20px; background: #fff; border-radius: 20px; min-height: 60vh; }
        .history-list { display: flex; flex-direction: column; gap: 15px; }
        .history-item { display: flex; gap: 20px; padding: 15px; background: #f8fafc; border-radius: 16px; transition: 0.3s; align-items: center; flex-wrap: wrap; }
        .history-item:hover { transform: translateX(5px); background: #f1f5f9; }
        .history-img { width: 70px; height: 70px; object-fit: cover; border-radius: 12px; }
        .history-info { flex: 1; }
        .history-title { font-size: 1.1rem; font-weight: bold; color: #0f172a; }
        .history-author { color: #7c3aed; font-size: 0.85rem; }
        .history-date { color: #64748b; font-size: 0.75rem; margin-top: 5px; }
        .btn { display: inline-block; background: #7c3aed; color: #fff; padding: 8px 20px; text-decoration: none; border-radius: 30px; transition: 0.3s; font-size: 0.85rem; }
        .btn:hover { background: #6d28d9; }
        h1 { margin-bottom: 20px; color: #0f172a; }
        .empty { text-align: center; padding: 50px; }
        @media (max-width: 768px) { .history-item { flex-direction: column; text-align: center; } .history-img { width: 100px; height: 100px; } }
    </style>
</head>
<body>
<header>
    <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
        <h1 style="margin: 0;">🎧 Аудиокниги Онлайн</h1>
        <nav>
            <a href="index.php">📚 Каталог</a>
            <a href="my_history.php">📜 История</a>
            <a href="logout.php">🚪 Выйти (<?= h($_SESSION['username']) ?>)</a>
        </nav>
    </div>
</header>

<main>
    <h1>📜 История прослушивания</h1>
    
    <?php if(count($history) > 0): ?>
        <div class="history-list">
            <?php foreach($history as $item): ?>
                <div class="history-item">
                    <img src="<?= h($item['cover_image'] ?: 'img/placeholder.jpg') ?>" alt="<?= h($item['title']) ?>" class="history-img">
                    <div class="history-info">
                        <div class="history-title"><?= h($item['title']) ?></div>
                        <div class="history-author">✍️ <?= h($item['author']) ?></div>
                        <div class="history-date">🎧 Прослушано: <?= date('d.m.Y H:i', strtotime($item['listened_at'])) ?></div>
                    </div>
                    <a href="book.php?id=<?= $item['book_id'] ?>" class="btn">🎧 Слушать снова</a>
                </div>
            <?php endforeach; ?>
        </div>
    <?php else: ?>
        <div class="empty">
            <p>😕 Вы ещё не слушали ни одной аудиокниги.</p>
            <a href="index.php" class="btn">Перейти в каталог</a>
        </div>
    <?php endif; ?>
    
    <a href="index.php" class="btn" style="margin-top: 20px;">← В каталог</a>
</main>

<footer>
    <p>&copy; 2025 Аудиокниги Онлайн. Слушайте с удовольствием.</p>
</footer>
</body>
</html>