<?php
session_start();
require 'config.php';

if (!isset($_SESSION['admin_logged_in'])) {
    header("Location: login.php");
    exit;
}

$id = $_GET['id'] ?? null;
if (!$id) {
    exit('No article ID provided');
}

$stmt = $dbh->prepare("SELECT * FROM articles WHERE id = ?");
if (!$stmt) {
    exit('Database error');
}
$stmt->execute([$id]);
$article = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$article || !is_array($article)) {
    exit('Article not found');
}

include "includes/header.php";
include "includes/sidebar.php";
?>

<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* Use admin theme CSS variables from header.php so the dark/light toggle works */
body { background: var(--dark-900, #0b0c0e); font-family: 'Plus Jakarta Sans', sans-serif; color: var(--text-1, #edf0f7); margin: 0; padding: 0; }
.admin-main-content { margin-left: var(--sw, 260px); padding: 100px 40px 40px 40px; transition: all 0.3s ease; }
.article-container { max-width: 1000px; margin: 0 auto; background: var(--dark-700, #121212); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.04); }
.article-hero { position: relative; width: 100%; height: 500px; background: var(--dark-800, #101214); overflow: hidden; }
.article-hero img { width: 100%; height: 100%; object-fit: cover; opacity: 0.98; }
.category-badge { position: absolute; top: 20px; left: 20px; background: var(--yellow, #f5c518); color: var(--dark-900, #0b0c0e); padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; }
.article-body { padding: 40px; }
.article-meta { font-size: 13px; color: var(--text-2, #8a90a6); margin-bottom: 14px; display:flex; gap:12px; align-items:center; }
.article-title { font-family: 'Playfair Display', serif; font-size: 34px; color: var(--text-1, #edf0f7); line-height: 1.15; margin-bottom: 18px; }
.article-text { font-size: 16px; line-height: 1.8; color: var(--text-2, #aab4c4); margin-bottom: 28px; text-align: left; }
.action-bar { display:flex; gap:12px; align-items:center; border-top:1px solid rgba(255,255,255,0.03); padding-top:22px; }
.btn-original { background: var(--yellow, #f5c518); color: var(--dark-900, #0b0c0e); padding: 12px 20px; border-radius: 10px; text-decoration:none; font-weight:700; font-size:14px; display:inline-flex; gap:8px; align-items:center; }
.btn-original:hover { filter:brightness(0.95); transform: translateY(-2px); }
.btn-back { color: var(--text-2, #8a90a6); text-decoration:none; font-weight:600; font-size:14px; }
.btn-back:hover { color: var(--yellow, #f5c518); }
@media (max-width: 1024px) { .admin-main-content { margin-left: 0; padding: 20px; } .article-hero { height: 220px; } .article-body { padding: 20px; } .article-title { font-size: 26px; } .article-text { font-size: 15px; } }
</style>

<div class="admin-main-content">
  <div class="article-container">
    <div class="article-hero">
      <?php if (!empty($article['image_url'])): ?>
        <img src="<?= htmlspecialchars($article['image_url']) ?>" alt="Article Image">
      <?php else: ?>
        <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-2);">No Image</div>
      <?php endif; ?>
      <div class="category-badge"><?= htmlspecialchars($article['category'] ?? 'General') ?></div>
    </div>

    <div class="article-body">
      <div class="article-meta">
        <span><i class="far fa-calendar"></i>&nbsp;<?= date('M d, Y', strtotime($article['published_at'] ?? '')) ?></span>
        <span><i class="far fa-user"></i>&nbsp;Admin</span>
      </div>

      <h1 class="article-title"><?= htmlspecialchars($article['title'] ?? 'Untitled') ?></h1>

      <div class="article-text"><?= nl2br(htmlspecialchars($article['summary'] ?? 'No summary available.')) ?></div>

      <div class="action-bar">
        <?php if (!empty($article['article_url'])): ?>
          <a class="btn-original" href="<?= htmlspecialchars($article['article_url']) ?>" target="_blank" rel="noopener noreferrer">Read Original <i class="fas fa-external-link-alt"></i></a>
        <?php endif; ?>

        <a class="btn-back" href="articles_list.php"><i class="fas fa-arrow-left"></i>&nbsp;Back to Articles</a>
      </div>
    </div>
  </div>
</div>

<?php include "includes/footer.php"; ?>
