<?php
session_start();
require_once "config.php";
include "header.php";

// récupérer les articles avec auteur
$stmt = $pdo->query("
    SELECT p.*, u.username, u.profile_picture, u.id AS user_id
    FROM posts p
    JOIN utilisateurs u ON p.user_id = u.id
    ORDER BY p.date_creation DESC
");
$posts = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Accueil - Mini CMS</title>
<style>
body {
    background: #fff4f7;
    font-family: 'Poppins', sans-serif;
    margin: 0;
    color: #222;
}
.container {
    max-width: 900px;
    margin: 40px auto;
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}
h1 {
    text-align: center;
    color: #ff69b4;
}
.article {
    margin-bottom: 35px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f5d1e3;
}
.article-title {
    color: #000;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
}
.article-content {
    color: #222;
    font-size: 16px;
    line-height: 1.6;
}
.article-meta {
    color: #666;
    font-size: 14px;
    margin-top: 10px;
}
.article img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 10px;
    display: block;
}
.article-author {
    display: flex;
    align-items: center;
    gap: 8px;
}
.article-author img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ff91a4;
}
a.read-link {
    color: #ff69b4;
    font-weight: 600;
    text-decoration: none;
}
a.read-link:hover { text-decoration: underline; }
</style>
</head>
<body>
<div class="container">
    <h1>📰 Bienvenue sur le Mini CMS</h1>
    <p style="text-align:center;color:#666;">Partagez vos idées et découvrez celles des autres auteurs 💡</p>

    <?php foreach ($posts as $post): ?>
        <div class="article">
            <!-- 🟢 1. Titre -->
            <h2 class="article-title"><?= htmlspecialchars($post['title']) ?></h2>

            <!-- 🟢 2. Image -->
            <?php if (!empty($post['image_url'])): ?>
                <img src="<?= htmlspecialchars($post['image_url']) ?>" alt="Illustration">
            <?php endif; ?>

            <!-- 🟢 3. Contenu -->
            <p class="article-content">
                <?= nl2br(htmlspecialchars(substr($post['content'], 0, 250))) ?>...
            </p>

            <div class="article-meta">
                <div class="article-author">
                    <?php if (!empty($post['profile_picture'])): ?>
                        <img src="<?= htmlspecialchars($post['profile_picture']) ?>" alt="Auteur">
                    <?php else: ?>
                        <div style="width:35px;height:35px;border-radius:50%;background:#ffe5ec;display:flex;align-items:center;justify-content:center;">👤</div>
                    <?php endif; ?>
                    <a href="profile_view.php?id=<?= (int)$post['user_id'] ?>" style="color:#ff69b4;text-decoration:none;">
                        <?= htmlspecialchars($post['username']) ?>
                    </a>
                </div>
                🕒 <?= htmlspecialchars($post['date_creation']) ?><br>
                <a href="article.php?id=<?= (int)$post['id'] ?>" class="read-link">Lire l'article →</a>
            </div>
        </div>
    <?php endforeach; ?>
</div>
</body>
</html>
<?php include "footer.php"; ?>
