<?php
/**
 * صفحة عرض منشور واحد
 */

session_start();
require_once '../includes/product-card.php';
require_once '../config/database.php';

$database = new Database();
$conn = $database->getConnection();

$slug = $_GET['slug'] ?? '';

if (!$slug) {
    header('Location: blog.php');
    exit;
}

// جلب المنشور
$stmt = $conn->prepare("SELECT * FROM posts WHERE slug = ? AND status = 'published'");
$stmt->execute([$slug]);
$post = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$post) {
    header('Location: blog.php');
    exit;
}

// زيادة عدد المشاهدات
$conn->prepare("UPDATE posts SET views_count = views_count + 1 WHERE id = ?")->execute([$post['id']]);

// جلب منشورات ذات صلة
$related = $conn->prepare("SELECT * FROM posts WHERE category = ? AND id != ? AND status = 'published' ORDER BY published_at DESC LIMIT 3");
$related->execute([$post['category'], $post['id']]);
$related_posts = $related->fetchAll(PDO::FETCH_ASSOC);

$site_name = 'Roz Skin';
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo htmlspecialchars($post['title']); ?> - <?php echo $site_name; ?></title>
    <meta name="description" content="<?php echo htmlspecialchars($post['excerpt']); ?>">
    
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../assets/css/pinterest-style.css">
    
    <style>
        * { font-family: 'Tajawal', sans-serif; }
        
        .post-header {
            max-width: 900px;
            margin: 40px auto;
            padding: 0 20px;
        }
        
        .post-category {
            display: inline-block;
            padding: 8px 20px;
            border-radius: 25px;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 20px;
        }
        
        .post-title {
            font-size: 48px;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 20px;
            color: #333;
        }
        
        .post-meta {
            display: flex;
            gap: 30px;
            color: #666;
            font-size: 15px;
            margin-bottom: 30px;
        }
        
        .post-featured-image {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto 40px;
            border-radius: 15px;
            overflow: hidden;
        }
        
        .post-featured-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        .post-content {
            max-width: 800px;
            margin: 0 auto;
            padding: 0 20px;
            font-size: 18px;
            line-height: 1.8;
            color: #333;
        }
        
        .post-content h2 {
            font-size: 32px;
            margin: 40px 0 20px;
            color: #E57393;
        }
        
        .post-content h3 {
            font-size: 24px;
            margin: 30px 0 15px;
        }
        
        .post-content p {
            margin-bottom: 20px;
        }
        
        .post-content ul,
        .post-content ol {
            margin: 20px 0;
            padding-right: 30px;
        }
        
        .post-content li {
            margin-bottom: 10px;
        }
        
        .post-content img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            margin: 30px 0;
        }
        
        .post-tags {
            max-width: 800px;
            margin: 40px auto;
            padding: 0 20px;
        }
        
        .tag {
            display: inline-block;
            padding: 6px 15px;
            background: #f0f0f0;
            border-radius: 20px;
            margin: 5px;
            font-size: 14px;
            color: #666;
        }
        
        .related-posts {
            background: #f8f9fa;
            padding: 60px 20px;
            margin-top: 60px;
        }
        
        .related-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .related-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s;
            cursor: pointer;
        }
        
        .related-card:hover {
            transform: translateY(-5px);
        }
        
        .related-image {
            width: 100%;
            height: 180px;
            object-fit: cover;
        }
        
        .related-content {
            padding: 20px;
        }
        
        @media (max-width: 768px) {
            .post-title {
                font-size: 32px;
            }
            
            .post-content {
                font-size: 16px;
            }
        }
    </style>
    <link rel="stylesheet" href="../assets/css/product-cards.css">
</head>
<body>

    <!-- Navigation -->
    <nav class="nav-pinterest">
        <div class="container-pinterest">
            <div class="nav-content">
                <a href="index.php" class="nav-logo">Roz Skin</a>
                <div class="nav-actions">
                    <a href="index.php" class="nav-icon-btn">الرئيسية</a>
                    <a href="products.php" class="nav-icon-btn">المنتجات</a>
                    <a href="blog.php" class="nav-icon-btn">المدونة</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Post Header -->
    <article class="post-header">
        <span class="post-category" style="background: #E57393; color: white;">
            <?php echo htmlspecialchars($post['category']); ?>
        </span>
        
        <h1 class="post-title"><?php echo htmlspecialchars($post['title']); ?></h1>
        
        <div class="post-meta">
            <span>📅 <?php echo date('d F Y', strtotime($post['published_at'])); ?></span>
            <span>👁️ <?php echo number_format($post['views_count']); ?> مشاهدة</span>
            <?php if ($post['likes_count'] > 0): ?>
                <span>❤️ <?php echo number_format($post['likes_count']); ?> إعجاب</span>
            <?php endif; ?>
        </div>
    </article>

    <!-- Featured Image -->
    <?php if ($post['featured_image']): ?>
        <div class="post-featured-image">
            <img src="../<?php echo $post['featured_image']; ?>" alt="<?php echo htmlspecialchars($post['title']); ?>">
        </div>
    <?php endif; ?>

    <!-- Post Content -->
    <div class="post-content">
        <?php echo $post['content']; ?>
    </div>

    <!-- Tags -->
    <?php if ($post['tags']): ?>
        <div class="post-tags">
            <h3 style="margin-bottom: 15px;">🏷️ الوسوم:</h3>
            <?php foreach (explode(',', $post['tags']) as $tag): ?>
                <span class="tag"><?php echo trim($tag); ?></span>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>

    <!-- Related Posts -->
    <?php if (!empty($related_posts)): ?>
        <section class="related-posts">
            <div class="container-pinterest">
                <h2 style="text-align: center; margin-bottom: 40px; font-size: 32px;">📚 منشورات ذات صلة</h2>
                
                <div class="related-grid">
                    <?php foreach ($related_posts as $related_post): ?>
                        <div class="related-card" onclick="window.location.href='blog-post.php?slug=<?php echo $related_post['slug']; ?>'">
                            <?php if ($related_post['featured_image']): ?>
                                <img src="../<?php echo $related_post['featured_image']; ?>" class="related-image" alt="<?php echo htmlspecialchars($related_post['title']); ?>">
                            <?php else: ?>
                                <div class="related-image" style="background: linear-gradient(135deg, #E57393 0%, #D1537A 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 48px;">
                                    📝
                                </div>
                            <?php endif; ?>
                            
                            <div class="related-content">
                                <h3 style="font-size: 18px; margin-bottom: 10px;"><?php echo htmlspecialchars($related_post['title']); ?></h3>
                                <p style="color: #666; font-size: 14px;"><?php echo htmlspecialchars(substr($related_post['excerpt'], 0, 100)) . '...'; ?></p>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </section>
    <?php endif; ?>

    <!-- Back to Blog -->
    <div style="text-align: center; padding: 40px 20px;">
        <a href="blog.php" class="btn btn-primary" style="display: inline-block; padding: 15px 40px; background: #E57393; color: white; text-decoration: none; border-radius: 50px; font-weight: 600;">
            ← العودة للمدونة
        </a>
    </div>

</body>
</html>
