<?php
session_start();
require_once 'includes/config.php';

function hien_thi_noi_dung_bai_viet($noi_dung) {
    if ($noi_dung === null) {
        return '';
    }

    $noi_dung = trim((string)$noi_dung);
    if ($noi_dung === '') {
        return '';
    }

    $noi_dung = html_entity_decode($noi_dung, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
    $noi_dung = preg_replace('/\r\n?/', "\n", $noi_dung);
    $noi_dung = strip_tags($noi_dung, '<p><br><strong><em><u><ul><ol><li><a>');
    $noi_dung = preg_replace('/\n{3,}/', "\n\n", $noi_dung);

    return $noi_dung;
}

$id_bai_viet = isset($_GET['id']) ? (int)$_GET['id'] : 0;
$tin_tuc = null;

if ($id_bai_viet > 0) {
    $stmt = $pdo->prepare("SELECT * FROM tin_tuc_su_kien WHERE id = ? LIMIT 1");
    $stmt->execute([$id_bai_viet]);
    $tin_tuc = $stmt->fetch();
}

if (!$tin_tuc) {
    http_response_code(404);
    $tieu_de_trang = 'Không tìm thấy bài viết';
    $noi_dung_hien_thi = '<p>Rất tiếc, bài viết bạn tìm kiếm không tồn tại hoặc đã bị gỡ bỏ.</p>';
} else {
    $tieu_de_trang = htmlspecialchars($tin_tuc['tieu_de'] ?? 'Chi tiết bài viết');
    $noi_dung_hien_thi = hien_thi_noi_dung_bai_viet($tin_tuc['chi_tiet'] ?? $tin_tuc['noi_dung'] ?? $tin_tuc['mo_ta'] ?? '');
    if ($noi_dung_hien_thi === '') {
        $noi_dung_hien_thi = '<p>Hiện bài viết này chưa có nội dung chi tiết.</p>';
    }
}

$loai_bai_viet = ($tin_tuc['loai_tin'] ?? '') === 'su_kien' ? 'Sự kiện' : 'Tin tức';
$anh_bia = !empty($tin_tuc['anh_bia']) ? htmlspecialchars($tin_tuc['anh_bia']) : '';
?>
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $tieu_de_trang; ?> - Cộng đồng Nghệ thuật</title>
    
    <!-- Open Graph Meta Tags cho chia sẻ mạng xã hội -->
    <meta property="og:type" content="article">
    <meta property="og:title" content="<?php echo htmlspecialchars($tieu_de_trang); ?>">
    <meta property="og:description" content="<?php echo htmlspecialchars(mb_strimwidth(strip_tags($noi_dung_hien_thi), 0, 160, '...')); ?>">
    <?php if (!empty($anh_bia)): ?>
        <meta property="og:image" content="<?php echo htmlspecialchars($anh_bia); ?>">
        <meta property="og:image:width" content="1200">
        <meta property="og:image:height" content="630">
    <?php endif; ?>
    <meta property="og:url" content="<?php echo htmlspecialchars((isset($_SERVER['HTTPS']) ? 'https' : 'http') . '://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']); ?>">
    <meta property="og:site_name" content="Cộng đồng Nghệ thuật">
    
    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="<?php echo htmlspecialchars($tieu_de_trang); ?>">
    <meta name="twitter:description" content="<?php echo htmlspecialchars(mb_strimwidth(strip_tags($noi_dung_hien_thi), 0, 160, '...')); ?>">
    <?php if (!empty($anh_bia)): ?>
        <meta name="twitter:image" content="<?php echo htmlspecialchars($anh_bia); ?>">
    <?php endif; ?>
    
    <style>
        body { font-family: 'Segoe UI', Arial, sans-serif; margin: 0; background: #f5f7fb; color: #222; }
        .container { max-width: 900px; margin: 0 auto; padding: 30px 20px 50px; }
        .card { background: #fff; border-radius: 16px; padding: 30px; box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
        .back-link { display: inline-block; margin-bottom: 20px; color: #1864ab; text-decoration: none; font-weight: 600; }
        .back-link:hover { text-decoration: underline; }
        .badge { display: inline-block; background: #e8f4fd; color: #1864ab; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; margin-bottom: 16px; }
        h1 { font-size: 28px; margin: 0 0 12px; color: #0b2b4d; line-height: 1.3; }
        .meta { color: #666; font-size: 14px; margin-bottom: 20px; }
        .banner { width: 100%; border-radius: 12px; margin-bottom: 24px; max-height: 320px; object-fit: cover; background: #f1f3f5; }
        .content { line-height: 1.8; font-size: 16px; color: #333; }
        .content p { margin: 0 0 14px; }
        .content ul, .content ol { padding-left: 20px; }
        .content a { color: #1864ab; }
        .content strong { color: #0b2b4d; }
        .empty { color: #777; font-style: italic; }
        @media (max-width: 768px) {
            .card { padding: 20px; }
            h1 { font-size: 24px; }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <a href="javascript:history.back()" class="back-link">← Quay lại</a>
            <?php if ($tin_tuc): ?>
                <div class="badge"><?php echo htmlspecialchars($loai_bai_viet); ?></div>
                <h1><?php echo htmlspecialchars($tin_tuc['tieu_de'] ?? ''); ?></h1>
                <div class="meta">
                    <?php if (!empty($tin_tuc['ngay_tao'])): ?>
                        <span>Đăng ngày: <?php echo date('d/m/Y', strtotime($tin_tuc['ngay_tao'])); ?></span>
                    <?php endif; ?>
                </div>
                <?php if (!empty($anh_bia)): ?>
                    <img src="<?php echo $anh_bia; ?>" alt="Ảnh bài viết" class="banner">
                <?php endif; ?>
            <?php endif; ?>

            <div class="content">
                <?php if ($tin_tuc): ?>
                    <?php echo $noi_dung_hien_thi; ?>
                <?php else: ?>
                    <p class="empty">Rất tiếc, bài viết này không tồn tại hoặc đã bị xóa khỏi hệ thống.</p>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <?php require_once 'includes/menu-dien-thoai.php'; ?>
</body>
</html>
