<?php
// Start output buffering
ob_start();

// Start session
session_start();

// Include database connection
require 'includes/db.php';

// Disable error display in production, log errors instead
ini_set('display_errors', 0);
ini_set('log_errors', 1);

// Validate and sanitize ID
if (!isset($_GET['id']) || !filter_var($_GET['id'], FILTER_VALIDATE_INT) || $_GET['id'] <= 0) {
    ob_end_clean();
    header('Location: /updates.php');
    exit;
}

$id = (int)$_GET['id'];

// Set page title
$page_title = 'Update Details - Sameki Limited';

// Fetch update details
try {
    $stmt = $pdo->prepare("SELECT * FROM updates WHERE id = ?");
    $stmt->execute([$id]);
    $update = $stmt->fetch(PDO::FETCH_ASSOC);

    if (!$update) {
        ob_end_clean();
        header('Location: /updates.php');
        exit;
    }
} catch (PDOException $e) {
    error_log('Database error in fetch update: ' . $e->getMessage());
    ob_end_clean();
    header('Location: /updates.php?error=Database error occurred');
    exit;
}

// Prevent caching
header('Cache-Control: no-cache, no-store, must-revalidate');
header('Pragma: no-cache');
header('Expires: 0');

// Include header
include 'includes/header.php';
?>

<!-- Main Content Section -->
<main class="py-3 py-md-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-10 col-xl-8">
                <!-- Article Card -->
                <article class="card border-0 shadow-sm overflow-hidden mb-4 mb-md-5">
                    <div class="card-body p-3 p-md-5">
                        <?php if (!empty($update['poster'])): ?>
                        <div class="ratio ratio-16x9 mb-3 mb-md-4 rounded overflow-hidden">
                            <img src="/uploads/<?php echo htmlspecialchars($update['poster'], ENT_QUOTES, 'UTF-8'); ?>" 
                                 srcset="/uploads/<?php echo htmlspecialchars($update['poster'], ENT_QUOTES, 'UTF-8'); ?> 1x, 
                                         /uploads/<?php echo htmlspecialchars($update['poster'], ENT_QUOTES, 'UTF-8'); ?>?w=800 2x"
                                 sizes="(max-width: 576px) 100vw, 800px"
                                 class="img-fluid w-100 h-100 object-fit-cover"
                                 alt="<?php echo htmlspecialchars($update['title'], ENT_QUOTES, 'UTF-8'); ?>"
                                 loading="lazy">
                        </div>
                        <?php endif; ?>
                
                        <!-- Article Header -->
                        <header class="mb-3 mb-md-4">
                            <div class="text-muted small">
                                <i class="far fa-calendar-alt me-2"></i>
                                <?php echo date('F j, Y \a\t g:i A', strtotime($update['created_at'])); ?>
                            </div>
                        </header>
                
                        <!-- Article Title -->
                        <h2 class="mb-3 mb-md-4 fw-bold h3"><?php echo htmlspecialchars($update['title'], ENT_QUOTES, 'UTF-8'); ?></h2>
                
                        <!-- Article Content -->
                        <div class="article-content fs-5 lh-base text-dark">
                            <?php echo nl2br(htmlspecialchars($update['content'], ENT_QUOTES, 'UTF-8')); ?>
                        </div>
                
                        <!-- Back Button -->
                        <footer class="mt-4 mt-md-5 pt-3 text-center">
                            <a href="/updates.php" class="btn btn-primary px-4 py-2 py-md-3 rounded-pill" aria-label="Back to updates">
                                <i class="fas fa-arrow-left me-2"></i> Back to Updates
                            </a>
                        </footer>
                    </div>
                </article>

            </div>
        </div>
    </div>
</main>

<!-- Custom Styles -->
<style>

/* Article Image */
.ratio-16x9 {
    margin-top: 1rem;
    border-radius: 0.5rem;
    overflow: hidden;
    max-height: 400px;
}
.ratio-16x9 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0.5rem;
}

/* Typography */
.h2 { font-size: clamp(1.5rem, 4.5vw, 2rem); }
.h3 { font-size: clamp(1.25rem, 3.5vw, 1.75rem); }
.h4 { font-size: clamp(1rem, 3vw, 1.25rem); }

.article-content {
    line-height: 1.8;
    color: #333;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
}

/* Header Styles */
header {
    contain: layout;
    min-height: 2rem;
    margin-bottom: 1.5rem;
}

/* Card Styles */
.card {
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card.transition-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* Buttons */
.btn-primary {
    background-color: #0077be;
    border-color: #0077be;
    padding: 0.5rem 1.5rem;
    font-size: clamp(0.85rem, 2.5vw, 0.95rem);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-primary:hover {
    background-color: #005f99;
    border-color: #005f99;
    transform: translateY(-2px);
}

.btn-outline-primary {
    border-color: #0077be;
    color: #0077be;
    padding: 0.5rem 1.25rem;
    font-size: clamp(0.8rem, 2.5vw, 0.9rem);
}

.btn-outline-primary:hover {
    background-color: #0077be;
    color: #fff;
}

/* Mobile-Specific Styles */
@media (max-width: 575.98px) {
    main { 
        padding: 0.5rem 0; 
    }
    .container { 
        padding-left: 0.75rem; 
        padding-right: 0.75rem; 
    }
    .card-body { 
        padding: 1rem; 
    }
    .ratio-16x9 {
        max-height: 180px;
        margin-top: 1.5rem;
    }
    .article-content { 
        font-size: 0.85rem; 
        line-height: 1.6;
    }
    header {
        min-height: 1.5rem;
        margin-bottom: 1rem;
        padding-bottom: 0.25rem;
    }
    .text-muted {
        font-size: 0.8rem;
    }
    .h3 {
        font-size: 1.1rem;
    }
    footer {
        margin-top: 2rem;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .ratio-16x9 {
        max-height: 220px;
        margin-top: 1rem;
    }
    header {
        min-height: 2rem;
        margin-bottom: 1.25rem;
    }
}
</style>

<?php
include 'includes/footer.php';
ob_end_flush();
?>
