<?php
// ================== CONFIG ==================
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
date_default_timezone_set('Asia/Ho_Chi_Minh');

$dataFile  = 'data.json';
$uploadDir = 'uploads/';
if (!file_exists($dataFile)) file_put_contents($dataFile, '[]');

// ================== LOAD & MIGRATE ==================
$posts = json_decode(file_get_contents($dataFile), true);
if (!is_array($posts)) $posts = [];

$changed = false;
$nextId  = 1;
foreach ($posts as &$p) {
    if (!isset($p['id']) || $p['id'] <= 0) {
        $p['id'] = $nextId++; $changed = true;
    } else {
        if ($p['id'] >= $nextId) $nextId = $p['id'] + 1;
    }
    if (!isset($p['category']) || trim((string)$p['category']) === '') {
        $p['category'] = 'Nghị định / Quyết định'; $changed = true;
    }
    if (!isset($p['images']) || !is_array($p['images'])) $p['images'] = [];
    if (!isset($p['timestamp']) || !is_int($p['timestamp'])) $p['timestamp'] = time();
}
unset($p);

// ================== HELPERS ==================
function e($s){ return htmlspecialchars($s, ENT_QUOTES, 'UTF-8'); }
function slugify($str){
  $str = mb_strtolower($str,'UTF-8');
  $map = [
    'a'=>'áàảãạăắằẳẵặâấầẩẫậ','e'=>'éèẻẽẹêếềểễệ','i'=>'íìỉĩị',
    'o'=>'óòỏõọôốồổỗộơớờởỡợ','u'=>'úùủũụưứừửữự','y'=>'ýỳỷỹỵ','d'=>'đ'
  ];
  foreach ($map as $non=>$acc){ $str = preg_replace('/['.$acc.']/u',$non,$str); }
  $str = preg_replace('/[^a-z0-9]+/u','-',$str);
  $str = trim($str,'-');
  return $str ?: 'bai-viet';
}
function firstImageSrc($post){
  $first = isset($post['images'][0]) ? $post['images'][0] : '';
  $isPdf = strtolower(pathinfo($first, PATHINFO_EXTENSION)) === 'pdf';
  return $isPdf ? 'https://hls9.uk/serve.php?img=logo.png' : 'serve.php?img=' . urlencode($first ?: 'default.jpg');
}

// ========== MIGRATE SLUG CHO BÀI CŨ ==========
$slugs = [];
foreach ($posts as $pp) if (!empty($pp['slug'])) $slugs[$pp['slug']] = true;
foreach ($posts as &$p) {
  if (empty($p['slug'])) {
    $base = slugify($p['title'] ?? ('bai-viet-'.$p['id']));
    $s = $base; $i = 1;
    while (isset($slugs[$s])) { $s = $base.'-'.(++$i); }
    $p['slug'] = $s; $slugs[$s] = true; $changed = true;
  }
}
unset($p);
if ($changed) file_put_contents($dataFile, json_encode($posts, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE));

// ================== SORT NEWEST FIRST ==================
usort($posts, function($a,$b){
  $ai = isset($a['id']) ? (int)$a['id'] : 0;
  $bi = isset($b['id']) ? (int)$b['id'] : 0;
  if ($ai === $bi) return 0;
  return ($ai < $bi) ? 1 : -1;
});

// ================== ROUTING ==================
$view   = isset($_GET['view']) ? $_GET['view'] : 'home';
$isEdit = ($view === 'form' && isset($_GET['id']) && ctype_digit($_GET['id']));
$editingPost = null;
if ($isEdit) {
  $editId = (int)$_GET['id'];
  foreach ($posts as $pp) if ((int)$pp['id'] === $editId) { $editingPost = $pp; break; }
}

// ================== HANDLE CREATE/UPDATE ==================
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['__form_submit'])) {
  $editId   = isset($_POST['edit_id']) ? (int)$_POST['edit_id'] : 0;
  $title    = trim($_POST['title'] ?? '');
  $category = trim($_POST['category'] ?? '');
  if ($category === '') $category = 'Nghị định / Quyết định';

  // Sanitize content (server-side để không phụ thuộc JS)
  $allowed = '<p><br><strong><b><em><i><u><s><ul><ol><li>'
           . '<h1><h2><h3><h4><h5><h6><blockquote><hr><pre><code>'
           . '<a><img><span><div><table><thead><tbody><tr><td><th>';
  $rawContent = $_POST['content'] ?? '';
  $content = strip_tags($rawContent, $allowed);
  $content = preg_replace('/\s*on\w+\s*=\s*(".*?"|\'.*?\'|\S+)/i', '', $content);
  $content = preg_replace('/(href|src)\s*=\s*([\'"])\s*javascript:[^\'"]*\2/i', '$1=$2#$2', $content);

  // Upload
  $images = [];
  if (!is_dir($uploadDir)) mkdir($uploadDir, 0755, true);
  if (!empty($_FILES['images']['name'][0])) {
    foreach ($_FILES['images']['name'] as $k => $name) {
      $tmp  = $_FILES['images']['tmp_name'][$k] ?? '';
      $type = $_FILES['images']['type'][$k] ?? '';
      if (!$tmp) continue;
      if (strpos($type, 'image') === 0 || $type === 'application/pdf') {
        $ext = strtolower(pathinfo($name, PATHINFO_EXTENSION));
        $filename = time().'_'.uniqid().'.'.$ext;
        $dest = $uploadDir.$filename;
        @move_uploaded_file($tmp, $dest);

        if (in_array($ext, ['jpg','jpeg','png'])) {
          $img = ($ext==='png')?@imagecreatefrompng($dest):@imagecreatefromjpeg($dest);
          if ($img) {
            $text='HLS9.UK'; $fontSize=20; $fontPath=__DIR__.'/Anton.ttf';
            $textColor=imagecolorallocate($img,255,0,0); $shadowCol=imagecolorallocate($img,0,0,0);
            if (file_exists($fontPath)) {
              $w=imagesx($img); $h=imagesy($img);
              $bb=imagettfbbox($fontSize,0,$fontPath,$text); $tw=$bb[2]-$bb[0];
              $x=$w-$tw-20; $y=$h-20;
              imagettftext($img,$fontSize,0,$x+1,$y+1,$shadowCol,$fontPath,$text);
              imagettftext($img,$fontSize,0,$x,$y,$textColor,$fontPath,$text);
              ($ext==='png')?imagepng($img,$dest):imagejpeg($img,$dest,90);
              imagedestroy($img);
            }
          }
        }
        $images[] = $filename;
      }
    }
  }

  // Unique slug
  $slugs = []; foreach ($posts as $pp) if (!empty($pp['slug'])) $slugs[$pp['slug']] = true;
  $baseSlug = slugify($title);

  if ($editId > 0) {
    foreach ($posts as &$pp) {
      if ((int)$pp['id'] === $editId) {
        // cập nhật slug nếu tiêu đề thay đổi
        $target = $baseSlug; $s = $target; $i = 1;
        if (empty($pp['slug']) || slugify($pp['title']) !== $baseSlug) {
          while (isset($slugs[$s]) && $s !== ($pp['slug'] ?? '')) $s = $target.'-'.(++$i);
          $pp['slug'] = $s;
        }
        $pp['title']    = $title;
        $pp['category'] = $category;
        $pp['content']  = $content;
        if ($images) $pp['images'] = array_merge($pp['images'] ?? [], $images);
        $pp['timestamp']= time();
        $newSlug = $pp['slug'];
        break;
      }
    }
    unset($pp);
    file_put_contents($dataFile, json_encode($posts, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE));
    header('Location: '.$_SERVER['PHP_SELF'].'?view=post&slug='.$newSlug);
    exit;
  } else {
    $target = $baseSlug; $s = $target; $i = 1;
    while (isset($slugs[$s])) $s = $target.'-'.(++$i);
    $new = [
      'id'        => $nextId++,
      'slug'      => $s,
      'title'     => $title,
      'content'   => $content,
      'category'  => $category,
      'images'    => $images,
      'timestamp' => time(),
    ];
    $posts[] = $new;
    file_put_contents($dataFile, json_encode($posts, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE));
    header('Location: '.$_SERVER['PHP_SELF'].'?view=post&slug='.$s);
    exit;
  }
}

// ================== SEO META ==================
$scheme  = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https' : 'http';
$currUrl = $scheme.'://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
$seo = [
  'title' => 'Thông tin mới nhất | HLS9.UK',
  'desc'  => 'Cập nhật bài viết mới nhất về luật, chính sách và doanh nghiệp.',
  'image' => '/default.jpg',
];
if (($view ?? '') === 'post') {
  $slugQ = trim($_GET['slug'] ?? '');
  foreach ($posts as $p) {
    if (($p['slug'] ?? '') === $slugQ) {
      $seo['title'] = e($p['title']).' | HLS9.UK';
      $seo['desc']  = mb_substr(strip_tags($p['content']), 0, 150).'...';
      if (!empty($p['images'][0])) $seo['image'] = 'uploads/'.$p['images'][0];
      break;
    }
  }
}

// ================== CATEGORIES ==================
$categoryCounts = [];
foreach ($posts as $p) {
  $cat = trim($p['category'] ?? 'Nghị định / Quyết định');
  if ($cat === '') $cat = 'Nghị định / Quyết định';
  $categoryCounts[$cat] = ($categoryCounts[$cat] ?? 0) + 1;
}
ksort($categoryCounts, SORT_NATURAL | SORT_FLAG_CASE);
$categoryList = array_keys($categoryCounts);
?>
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title><?= $seo['title'] ?></title>
<meta name="description" content="<?= e($seo['desc']) ?>">
<meta property="og:title" content="<?= $seo['title'] ?>" />
<meta property="og:description" content="<?= e($seo['desc']) ?>" />
<meta property="og:image" content="<?= e($seo['image']) ?>" />
<meta property="og:url" content="<?= e($currUrl) ?>" />
<meta property="og:type" content="article" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="<?= $seo['title'] ?>" />
<meta name="twitter:description" content="<?= e($seo['desc']) ?>" />
<meta name="twitter:image" content="<?= e($seo['image']) ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<link rel="icon" href="https://hls9.uk/serve.php?img=logo.png" type="image/png">
<style>
:root{
  --bg:#f6f7fb; --paper:#ffffff; --ink:#111827; --muted:#6b7280;
  --brand:#2563eb; --chip:#e5efff; --line:#e5e7eb;
  --field-bg:#ffffff; --field-bd:#cbd5e1; --field-ph:#9ca3af;
  --card-bg:#ffffff; --shadow:0 10px 22px rgba(37,99,235,.18);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220; --paper:#0f172a; --ink:#e5e7eb; --muted:#94a3b8;
    --brand:#60a5fa; --chip:#0b2446; --line:#24324a;
    --field-bg:#0f172a; --field-bd:#263247; --field-ph:#8ca2c0;
    --card-bg:#0f172a; --shadow:0 10px 22px rgba(96,165,250,.18);
  }
}
*{box-sizing:border-box}
body{margin:0; font-family: Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--ink)}
a{text-decoration:none; color:inherit}
.container{max-width:1200px; margin:0 auto; padding:16px}
header{display:flex; align-items:center; gap:10px; margin:6px 0 18px}
header h1{font-size:22px; margin:0}
header .sp{flex:1}

/* Buttons */
.btn{background:var(--brand); color:#fff; border:none; border-radius:12px; padding:9px 14px; cursor:pointer; box-shadow:var(--shadow)}
.btn.secondary{background:var(--paper); color:var(--brand); border:1px solid #345ca8}
.btn:hover{filter:brightness(1.05)}

/* Sidebar + list */
.layout{display:grid; grid-template-columns:260px 1fr; gap:18px}
@media (max-width:1024px){ .layout{grid-template-columns:1fr} }
aside{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:12px; position:sticky; top:12px; height:fit-content}
.side-title{font-weight:700; margin:0 0 10px}
.cat-list{list-style:none; padding:0; margin:0}
.cat-list a{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-radius:12px}
.cat-list a:hover{background:var(--chip); border:1px solid #345ca8}
.badge{background:#dbe7ff; color:#0a2f8f; border:1px solid #8fb0ff; border-radius:999px; padding:2px 8px; font-weight:700; font-size:12px}
@media (prefers-color-scheme: dark){
  .badge{ background:#1b2b55; color:#d7e4ff; border-color:#4470da; }
}

/* Search */
.search{position:relative; margin:4px 0 12px}
.search input{width:100%; padding:12px 44px 12px 14px; background:var(--field-bg); color:var(--ink); border:1px solid var(--field-bd); border-radius:12px; font-size:15px}
.search input::placeholder{color:var(--field-ph)}
.search .clear{position:absolute; right:8px; top:50%; transform:translateY(-50%); cursor:pointer; color:var(--brand)}

/* Hero + grid */
.hero{background:var(--paper); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:grid; grid-template-columns: 1.1fr 1fr}
.hero .media{position:relative; aspect-ratio:16/9; overflow:hidden}
.hero .media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero .body{padding:14px}
.hero .title{font-size:20px; font-weight:800; margin:0 0 8px}
.hero .meta{display:flex; gap:10px; color:var(--muted); font-size:12px; flex-wrap:wrap}
.hero .excerpt{margin-top:8px; opacity:.85; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
@media (max-width:900px){ .hero{grid-template-columns:1fr} }

.grid{display:grid; gap:12px; grid-template-columns: repeat(3, minmax(0,1fr))}
@media (max-width:1024px){ .grid{grid-template-columns: repeat(2, minmax(0,1fr))} }
@media (max-width:640px){ .grid{grid-template-columns: 1fr} }

.card{background:var(--card-bg); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column}
.card .thumb{position:relative; aspect-ratio:16/9; background:#0b0b0b}
.card .thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.card .content{padding:12px; display:flex; flex-direction:column; gap:8px}
.card .title{font-weight:700; margin:0; font-size:16px}
.card .meta{display:flex; gap:10px; color:var(--muted); font-size:12px; flex-wrap:wrap}
.chip{background:#e5efff; color:#0b3ea8; border:1px solid #99b7ff; border-radius:999px; padding:2px 8px; font-weight:700; font-size:12px}
@media (prefers-color-scheme: dark){ .chip{ background:#16325f; color:#cfe0ff; border-color:#3c6bd9 } }

/* Pagination */
.pagination{display:flex; justify-content:center; gap:6px; margin:16px 0}
.page-btn{background:var(--chip); border:1px solid #345ca8; color:#0a2f8f; border-radius:10px; padding:7px 10px}
.page-btn.active{background:var(--brand); color:#fff; border-color:var(--brand)}
@media (prefers-color-scheme: dark){ .page-btn{ color:#d7e4ff } }

/* Article page */
.article-wrap{display:grid; grid-template-columns: 1fr; gap:16px}
.article-header{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:18px}
.article-title{margin:0 0 8px; font-size:26px}
.article-meta{color:var(--muted); font-size:13px; display:flex; gap:12px; flex-wrap:wrap}
.article-hero{background:var(--paper); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.article-hero .box{position:relative; aspect-ratio:16/9; background:#0b0b0b}
.article-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.article-content{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:18px; line-height:1.7; font-size:16px}

/* Editor */
input[type="text"], input[list], textarea, select{background:var(--field-bg); color:var(--ink); border:1px solid var(--field-bd); border-radius:10px; padding:10px 12px; font-size:15px}
input::placeholder, textarea::placeholder{color:var(--field-ph)}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.editor-wrap{background:var(--paper); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.editor-toolbar{display:flex; flex-wrap:wrap; gap:6px; padding:8px; background:color-mix(in srgb, var(--paper) 70%, #bcd 10%); border-bottom:1px solid var(--line)}
.editor-toolbar button,.editor-toolbar select,.editor-toolbar input[type=color]{background:var(--field-bg); color:var(--ink); border:1px solid var(--field-bd); border-radius:10px; padding:6px 10px; cursor:pointer; font-size:14px}
.editor-area{min-height:280px; padding:12px; outline:none; line-height:1.7; font-size:15px; background:var(--field-bg); border-top:1px dashed var(--line)}
.editor-area:empty:before{content:attr(data-placeholder); color:var(--field-ph)}
.countbar{display:flex; justify-content:space-between; font-size:12px; color:var(--muted); padding:6px 10px; border-top:1px dashed var(--line)}

/* Attachments */
.attach-list{display:grid; grid-template-columns:1fr; gap:14px}
.attach-item{background:var(--paper); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.attach-row{display:flex; flex-direction:column; gap:0; cursor:pointer}
.attach-thumb{width:100%; aspect-ratio:16/9; background:#0b0b0b; overflow:hidden}
.attach-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.attach-thumb.portrait{aspect-ratio:9/16}
.attach-meta{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px}
.attach-title{margin:0; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:15px}
.attach-badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted)}

/* Lightbox */
.lb-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:10000}
.lb-wrap{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:8px}
.lb-img{display:block; width:min(98vw,1400px); height:auto; max-height:90vh; border-radius:12px; background:#000}
.lb-close{position:absolute; top:10px; right:12px; font-size:28px; color:#fff; cursor:pointer}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); display:flex; width:100%; justify-content:space-between; padding:0 12px}
.lb-btn{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff; padding:10px 14px; border-radius:10px; cursor:pointer}
.lb-caption{position:absolute; left:0; right:0; bottom:10px; color:#fff; text-align:center; font-size:14px; opacity:.9}

/* PDF modal */
.pdf-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:10000}
.pdf-panel{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(1100px,96vw); height:min(90vh,900px); background:var(--paper); border-radius:12px; overflow:hidden; display:flex; flex-direction:column}
.pdf-bar{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; background:var(--paper); border-bottom:1px solid var(--line)}
.pdf-frame{flex:1; border:0; width:100%}
.pdf-close{font-size:22px; cursor:pointer}
</style>
</head>
<body>
<div class="container">
  <header>
    <h1>📰 HLS9.UK</h1>
    <div class="sp"></div>
    <a class="btn secondary" href="<?= e($_SERVER['PHP_SELF']) ?>">Trang chủ</a>
  </header>

<?php if (($view ?? '') === 'post'): ?>
  <?php
    $slugQ = trim($_GET['slug'] ?? '');
    $post = null;
    foreach ($posts as $p) { if (($p['slug'] ?? '') === $slugQ) { $post = $p; break; } }
    if (!$post) { echo '<p>❌ Không tìm thấy bài viết.</p>'; exit; }
    $others = array_values(array_filter($posts, fn($x)=>$x['slug'] !== $post['slug']));
    shuffle($others); $randoms = array_slice($others, 0, 6);
  ?>
  <article class="article-wrap">
    <div class="article-header">
      <h2 class="article-title"><?= e($post['title']) ?></h2>
      <div class="article-meta">
        <span class="chip"><?= e($post['category']) ?></span>
        <span>🔗 <?= e($post['slug']) ?></span>
        <span>🕒 <?= date('d/m/Y H:i', $post['timestamp']) ?> (VN)</span>
      </div>
      <div style="display:flex; gap:8px; margin-top:8px">
        <button class="btn secondary" onclick="navigator.clipboard.writeText('<?= e($currUrl) ?>').then(()=>alert('Đã sao chép link'))">📤 Chia sẻ</button>
        <a class="btn secondary" href="<?= e($_SERVER['PHP_SELF'].'?view=form&id='.$post['id']) ?>">✏️ Sửa bài</a>
      </div>
    </div>

    <div class="article-hero"><div class="box"><img src="<?= e(firstImageSrc($post)) ?>" alt=""></div></div>
    <div class="article-content"><?= $post['content'] ?></div>

    <?php if (!empty($post['images'])): ?>
      <div class="article-content" style="padding-top:8px">
        <h3 style="margin:0 0 10px; font-size:18px; font-weight:800">Tệp đính kèm</h3>
        <div class="attach-list" id="attachList">
          <?php $imgIndex = 0; foreach ($post['images'] as $file):
              $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
              $isPdf = ($ext === 'pdf');
              $thumb = $isPdf ? 'https://hls9.uk/serve.php?img=logo.png' : 'serve.php?img='.urlencode($file);
              $displayName = $isPdf ? ($post['title'] ?? $file) : (($post['title'] ?? 'Ảnh').' — ảnh '.($imgIndex+1));
          ?>
            <div class="attach-item">
              <div class="attach-row" <?= $isPdf ? "onclick=\"openPdfViewer('".e('uploads/'.$file)."','".e($displayName)."')\"" : "onclick=\"openLightbox($imgIndex)\"" ?>>
                <div class="attach-thumb"><img src="<?= e($thumb) ?>" alt=""></div>
                <div class="attach-meta">
                  <div>
                    <h4 class="attach-title" title="<?= e($displayName) ?>"><?= e($displayName) ?></h4>
                    <div class="attach-badge">
                      <?= $isPdf ? '<span class="chip">PDF</span><span>Nhấn để đọc lớn</span>' : '<span class="chip">Ảnh</span><span>Nhấn để phóng to</span>' ?>
                    </div>
                  </div>
                  <?php if ($isPdf): ?>
                    <a class="btn secondary" href="<?= e('serve.php?img='.$file) ?>" target="_blank" title="Mở tab mới">↗</a>
                  <?php else: $imgIndex++; endif; ?>
                </div>
              </div>
            </div>
          <?php endforeach; ?>
        </div>
      </div>
    <?php endif; ?>

    <?php if ($randoms): ?>
      <div>
        <h3 style="margin:0 0 8px; font-size:18px; font-weight:800">Bài viết ngẫu nhiên</h3>
        <div class="grid">
          <?php foreach ($randoms as $rp): ?>
            <a class="card" href="<?= e($_SERVER['PHP_SELF'].'?view=post&slug='.$rp['slug']) ?>">
              <div class="thumb"><img src="<?= e(firstImageSrc($rp)) ?>" alt=""></div>
              <div class="content">
                <h3 class="title"><?= e($rp['title']) ?></h3>
                <div class="meta"><span class="chip"><?= e($rp['category']) ?></span><span>🔗 <?= e($rp['slug']) ?></span><span>🕒 <?= date('d/m/Y H:i',$rp['timestamp']) ?></span></div>
              </div>
            </a>
          <?php endforeach; ?>
        </div>
      </div>
    <?php endif; ?>
  </article>

  <!-- Lightbox -->
  <div class="lb-overlay" id="lb">
    <div class="lb-wrap">
      <img id="lbImg" class="lb-img" src="" alt="">
      <div class="lb-nav">
        <button class="lb-btn" type="button" onclick="prevImg()">⟨ Trước</button>
        <button class="lb-btn" type="button" onclick="nextImg()">Sau ⟩</button>
      </div>
      <div class="lb-caption" id="lbCap"></div>
      <div class="lb-close" onclick="closeLightbox()">✕</div>
    </div>
  </div>

  <!-- PDF Modal -->
  <div class="pdf-overlay" id="pdfModal">
    <div class="pdf-panel">
      <div class="pdf-bar">
        <div style="display:flex; align-items:center; gap:8px">
          <span class="chip">PDF</span><span id="pdfName" style="font-weight:700"></span>
        </div>
        <div style="display:flex; align-items:center; gap:8px">
          <a class="btn secondary" id="pdfNewTab" href="#" target="_blank">↗ Mở toàn màn hình</a>
          <span class="pdf-close" onclick="closePdf()">✕</span>
        </div>
      </div>
      <iframe id="pdfFrame" class="pdf-frame" src=""></iframe>
    </div>
  </div>

<?php elseif (($view ?? '') === 'form'): ?>
  <?php
    $titleVal = $editingPost['title']    ?? '';
    $catVal   = $editingPost['category'] ?? '';
    $htmlVal  = $editingPost['content']  ?? '';
    $editId   = $editingPost['id']       ?? 0;
  ?>
  <div class="article-wrap">
    <div class="article-header">
      <h2 class="article-title"><?= $editId ? '✏️ Sửa bài #'.$editId : '➕ Đăng bài mới' ?></h2>
      <div class="article-meta">Trình soạn thảo kiểu Blogger — chuyển nhanh giữa <b>Trực quan</b> &amp; <b>Mã HTML</b>.</div>
    </div>

    <form id="createForm" class="article-content" method="POST" enctype="multipart/form-data">
      <input type="hidden" name="__form_submit" value="1">
      <input type="hidden" name="edit_id" value="<?= (int)$editId ?>">

      <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px">
        <input type="text" name="title" id="titleInput" placeholder="Tiêu đề" required value="<?= e($titleVal) ?>">
        <div>
          <input list="categoryOptions" type="text" name="category" id="catInput" placeholder="Danh mục (Nghị định, Thông tư…)" value="<?= e($catVal) ?>">
          <datalist id="categoryOptions">
            <?php foreach ($categoryList as $cat): ?><option value="<?= e($cat) ?>"></option><?php endforeach; ?>
          </datalist>
        </div>
      </div>

      <!-- EDITOR -->
      <div class="editor-wrap">
        <div class="editor-toolbar">
          <select id="fontName"><option value="">Font</option><option>Arial</option><option>Tahoma</option><option>Verdana</option><option>Times New Roman</option><option>Georgia</option><option>Courier New</option></select>
          <select id="fontSize"><option value="">Cỡ</option><option value="2">Nhỏ</option><option value="3">Vừa</option><option value="4">Lớn</option><option value="5">Rất lớn</option><option value="6">XXL</option></select>
          <button type="button" data-cmd="bold"><b>B</b></button><button type="button" data-cmd="italic"><i>I</i></button><button type="button" data-cmd="underline"><u>U</u></button><button type="button" data-cmd="strikeThrough"><s>S</s></button>
          <input type="color" id="foreColor" title="Màu chữ"><input type="color" id="backColor" title="Màu nền">
          <select id="formatBlock" title="Kiểu đoạn"><option value="p">Đoạn văn</option><option value="h2">Tiêu đề H2</option><option value="h3">Tiêu đề H3</option><option value="h4">Tiêu đề H4</option><option value="blockquote">Trích dẫn</option><option value="pre">Mã/Code</option></select>
          <button type="button" data-cmd="justifyLeft">⬅️</button><button type="button" data-cmd="justifyCenter">↔️</button><button type="button" data-cmd="justifyRight">➡️</button><button type="button" data-cmd="justifyFull">🔳</button>
          <button type="button" data-cmd="insertUnorderedList">• List</button><button type="button" data-cmd="insertOrderedList">1. List</button><button type="button" data-cmd="outdent">◁</button><button type="button" data-cmd="indent">▷</button>
          <button type="button" id="linkBtn">🔗 Link</button><button type="button" id="imgBtn">🖼️ Ảnh URL</button><button type="button" data-cmd="insertHorizontalRule">─ HR</button>
          <button type="button" data-cmd="removeFormat">🧹 Xóa</button><button type="button" data-cmd="undo">↩️</button><button type="button" data-cmd="redo">↪️</button>
          <button type="button" id="toggleHtml" class="btn secondary" style="margin-left:auto"><> Mã HTML</button>
        </div>
        <div id="editor" class="editor-area" contenteditable="true" data-placeholder="Soạn thảo nội dung tại đây..."><?= $htmlVal ?></div>
        <textarea id="sourceArea" style="display:none; width:100%; min-height:280px; padding:12px; font-family:monospace"><?= e($htmlVal) ?></textarea>
        <div class="countbar"><span id="countInfo">0 từ • 0 ký tự</span><span id="draftInfo"></span></div>

        <!-- KHÔNG đặt required để tránh chặn submit khi JS điền muộn -->
        <textarea name="content" id="contentField" hidden></textarea>
      </div>

      <div style="margin-top:12px">
        <input type="file" id="fileInput" name="images[]" accept="image/*,.pdf" multiple>
        <div class="preview-grid" id="previewGrid"></div>
        <div style="color:var(--muted); font-size:12px; margin-top:6px">Ảnh tải lên sẽ được đóng dấu “HLS9.UK”.</div>
      </div>

      <div style="display:flex; justify-content:flex-end; gap:8px; margin-top:12px">
        <button type="button" class="btn secondary" onclick="clearDraft()">🗑️ Xóa nháp</button>
        <button type="submit" class="btn" id="submitBtn">💾 Lưu</button>
      </div>
    </form>
  </div>

<?php else: // HOME ?>
  <?php
    $activeCat = trim($_GET['cat'] ?? '');
    $filtered  = ($activeCat !== '')
      ? array_values(array_filter($posts, fn($p)=>strcasecmp((string)($p['category']??''), $activeCat)===0))
      : $posts;

    $perPage     = 9;
    $totalAll    = count($posts);
    $totalPosts  = count($filtered);
    $totalPages  = max(1, (int)ceil($totalPosts / $perPage));
    $page        = isset($_GET['page']) ? max(1, (int)$_GET['page']) : 1;
    $page        = min($page, $totalPages);
    $start       = ($page - 1) * $perPage;
    $pagedPosts  = array_slice($filtered, $start, $perPage);

    $baseQuery = $_GET; unset($baseQuery['page']);
    $baseUrl = $_SERVER['PHP_SELF'].(count($baseQuery)?('?'.http_build_query($baseQuery)):'');
  ?>

  <div class="layout">
    <aside>
      <div class="side-title">📂 Danh mục</div>
      <ul class="cat-list">
        <?php $qAll = $_GET; unset($qAll['cat'], $qAll['page']); $hrefAll = $_SERVER['PHP_SELF'].(count($qAll)?('?'.http_build_query($qAll)):''); ?>
        <li><a href="<?= e($hrefAll) ?>" style="<?= $activeCat===''?'background:var(--chip);border:1px solid #345ca8':'' ?>">Tất cả <span class="badge"><?= (int)$totalAll ?></span></a></li>
        <?php foreach ($categoryCounts as $cat => $count): $q = $_GET; $q['cat'] = $cat; unset($q['page']); $href = $_SERVER['PHP_SELF'].'?'.http_build_query($q); ?>
          <li><a href="<?= e($href) ?>" style="<?= (strcasecmp($activeCat,$cat)===0)?'background:var(--chip);border:1px solid #345ca8':'' ?>"><?= e($cat) ?> <span class="badge"><?= (int)$count ?></span></a></li>
        <?php endforeach; ?>
      </ul>
    </aside>

    <main>
      <div class="search">
        <input id="searchBox" type="text" placeholder="🔎 Tìm bài theo tiêu đề..." oninput="filterPosts()">
        <span class="clear" onclick="document.getElementById('searchBox').value=''; filterPosts()">❌</span>
      </div>

      <?php if (!empty($pagedPosts)):
        $hero = $pagedPosts[0]; ?>
        <a class="hero" href="<?= e($_SERVER['PHP_SELF'].'?view=post&slug='.$hero['slug']) ?>">
          <div class="media"><img src="<?= e(firstImageSrc($hero)) ?>" alt=""></div>
          <div class="body">
            <div class="title"><?= e($hero['title']) ?></div>
            <div class="meta"><span class="chip"><?= e($hero['category']) ?></span><span>🔗 <?= e($hero['slug']) ?></span><span>🕒 <?= date('d/m/Y H:i',$hero['timestamp']) ?> (VN)</span></div>
            <div class="excerpt"><?= e(mb_substr(strip_tags($hero['content']),0,180)) ?>...</div>
          </div>
        </a>
      <?php endif; ?>

      <div class="grid" id="postList">
        <?php foreach ($pagedPosts as $idx => $post): if ($idx===0) continue; ?>
          <a class="card" href="<?= e($_SERVER['PHP_SELF'].'?view=post&slug='.$post['slug']) ?>">
            <div class="thumb"><img src="<?= e(firstImageSrc($post)) ?>" alt=""></div>
            <div class="content">
              <h3 class="title" title="<?= e($post['title']) ?>"><?= e($post['title']) ?></h3>
              <div class="meta"><span class="chip"><?= e($post['category']) ?></span><span>🔗 <?= e($post['slug']) ?></span><span>🕒 <?= date('d/m/Y H:i', $post['timestamp']) ?></span></div>
            </div>
          </a>
        <?php endforeach; ?>
      </div>

      <div class="pagination">
        <?php
          if ($page > 1) {
            echo '<a class="page-btn" href="'.e($baseUrl.'&page=1').'">⏮️</a>';
            echo '<a class="page-btn" href="'.e($baseUrl.'&page='.($page-1)).'">◀️</a>';
          }
          for ($i = max(1,$page-2); $i<=min($totalPages,$page+2); $i++){
            if ($i === $page) echo '<span class="page-btn active">'.$i.'</span>';
            else echo '<a class="page-btn" href="'.e($baseUrl.'&page='.$i).'">'.$i.'</a>';
          }
          if ($page < $totalPages) {
            echo '<a class="page-btn" href="'.e($baseUrl.'&page='.($page+1)).'">▶️</a>';
            echo '<a class="page-btn" href="'.e($baseUrl).'&page='.$totalPages.'">⏭️</a>';
          }
        ?>
      </div>
    </main>
  </div>
<?php endif; ?>
</div>

<script>
// ===== Search (HOME) =====
function filterPosts(){
  var input = document.getElementById('searchBox'); if(!input) return;
  var keyword = (input.value||'').toLowerCase().trim();
  if (keyword === '') { window.location.href = window.location.pathname + window.location.search.replace(/(&?page=\d+)/,''); return; }

  var listEl  = document.getElementById('postList'); if(!listEl) return;
  listEl.innerHTML = '';

  var ALL = <?php echo json_encode($posts, JSON_UNESCAPED_UNICODE); ?>;
  var params = new URLSearchParams(window.location.search);
  var activeCat = params.get('cat');

  var filtered = ALL.filter(function(p){
    var inCat = activeCat ? (String(p.category||'').toLowerCase() === String(activeCat).toLowerCase()) : true;
    return inCat && String(p.title||'').toLowerCase().indexOf(keyword) !== -1;
  });

  if (filtered.length <= 1){
    listEl.innerHTML = '<p style="text-align:center; color:#e11d48;">❌ Không tìm thấy bài viết nào.</p>'; return;
  }

  for (var i=1;i<filtered.length;i++){
    var post = filtered[i];
    var first = (post.images && post.images[0]) ? post.images[0] : 'default.jpg';
    var isPdf = /\.pdf$/i.test(first);
    var src   = isPdf ? 'https://hls9.uk/serve.php?img=logo.png' : 'serve.php?img='+encodeURIComponent(first);
    var a = document.createElement('a');
    a.className = 'card';
    a.href = '<?php echo e($_SERVER['PHP_SELF']); ?>?view=post&slug='+post.slug;
    a.innerHTML =
      '<div class="thumb"><img src="'+src+'" alt=""></div>'
      + '<div class="content">'
        + '<h3 class="title">'+escapeHtml(post.title||'')+'</h3>'
        + '<div class="meta"><span class="chip">'+escapeHtml(post.category||'')+'</span>'
        + '<span>🔗 '+escapeHtml(post.slug||'')+'</span>'
        + '<span>🕒 '+ new Date((post.timestamp||0)*1000).toLocaleString('vi-VN') +'</span></div>'
      + '</div>';
    listEl.appendChild(a);
  }
}
function escapeHtml(s){s=String(s==null?'':s);return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');}

// ===== Editor (FORM) =====
(function(){
  var form = document.getElementById('createForm'); if(!form) return;

  var editor = document.getElementById('editor');
  var source = document.getElementById('sourceArea');
  var contentField = document.getElementById('contentField');
  var countInfo = document.getElementById('countInfo');
  var draftInfo = document.getElementById('draftInfo');
  var editInput = document.querySelector('input[name="edit_id"]');
  var draftKey = 'hls9_editor_v2_' + (editInput ? (editInput.value||'new') : 'new');

  function exec(cmd, val){ document.execCommand(cmd, false, val); editor.focus(); saveDraft(); }
  function setBlock(tag){ document.execCommand('formatBlock', false, tag); editor.focus(); saveDraft(); }

  var tb = document.querySelector('.editor-toolbar');
  tb.querySelectorAll('[data-cmd]').forEach(function(btn){
    btn.addEventListener('click', function(){ exec(this.getAttribute('data-cmd')); });
  });

  document.getElementById('formatBlock').addEventListener('change', function(){ if(this.value){ setBlock(this.value); this.value='p'; }});
  document.getElementById('fontName').addEventListener('change', function(){ if(this.value){ exec('fontName', this.value); this.value=''; }});
  document.getElementById('fontSize').addEventListener('change', function(){ if(this.value){ exec('fontSize', this.value); this.value=''; }});
  document.getElementById('foreColor').addEventListener('change', function(){ exec('foreColor', this.value); });
  document.getElementById('backColor').addEventListener('change', function(){ exec('hiliteColor', this.value); });

  document.getElementById('linkBtn').addEventListener('click', function(){
    var url = prompt('Nhập URL (https://...)'); if(!url) return;
    if (!/^https?:\/\//i.test(url)) url = 'https://' + url; exec('createLink', url);
  });
  document.getElementById('imgBtn').addEventListener('click', function(){
    var url = prompt('Nhập URL ảnh (https://...)'); if(!url) return;
    if (!/^https?:\/\//i.test(url)) url = 'https://' + url; exec('insertImage', url);
  });

  var isHtml = false;
  document.getElementById('toggleHtml').addEventListener('click', function(){
    if (!isHtml) {
      source.value = editor.innerHTML; editor.style.display='none'; source.style.display='block';
      this.textContent = '🖊️ Trực quan'; isHtml = true;
    } else {
      editor.innerHTML = source.value; source.style.display='none'; editor.style.display='block';
      this.textContent = '<> Mã HTML'; isHtml = false; updateCount(); saveDraft();
    }
  });

  function updateCount(){
    var text = (editor.innerText || '').replace(/\s+/g,' ').trim();
    var words = text ? text.split(' ').length : 0;
    countInfo.textContent = words + ' từ • ' + text.length + ' ký tự';
  }
  function saveDraft(){
    var payload = {
      title: document.getElementById('titleInput').value || '',
      cat:   document.getElementById('catInput').value || '',
      html:  editor.innerHTML || ''
    };
    try { localStorage.setItem(draftKey, JSON.stringify(payload)); } catch(_){}
    draftInfo.textContent = 'Đã lưu nháp ' + new Date().toLocaleTimeString('vi-VN');
  }
  window.clearDraft = function(){ try{ localStorage.removeItem(draftKey); }catch(_){ } draftInfo.textContent='Đã xóa nháp'; };

  ['input','keyup','mouseup','paste'].forEach(function(ev){
    editor.addEventListener(ev, function(){ updateCount(); saveDraft(); });
  });
  (function loadDraft(){
    try{
      var raw = localStorage.getItem(draftKey);
      if (raw){
        var data = JSON.parse(raw);
        if (!document.getElementById('titleInput').value && data.title) document.getElementById('titleInput').value = data.title;
        if (!document.getElementById('catInput').value   && data.cat)   document.getElementById('catInput').value   = data.cat;
        if (!editor.innerHTML && data.html) editor.innerHTML = data.html;
      }
    }catch(_){}
    updateCount();
  })();

  // ====== SUBMIT: đảm bảo luôn điền contentField và KHÔNG chặn submit nếu hợp lệ ======
  form.addEventListener('submit', function(e){
    var html = isHtml ? (source.value||'') : (editor.innerHTML||'');
    html = html.replace(/\son\w+\s*=\s*(".*?"|'.*?'|\S+)/gi, '');
    html = html.replace(/(href|src)\s*=\s*(['"])\s*javascript:[^'"]*\2/gi, '$1=$2#$2');
    contentField.value = html;

    // Nếu rỗng hoàn toàn -> nhắc và chặn
    var plain = html.replace(/<[^>]*>/g,'').replace(/\s+/g,'').trim();
    if (!plain.length){
      e.preventDefault();
      alert('Vui lòng nhập nội dung bài viết.');
      return false;
    }
  });

  // preview ảnh
  var fileInput = document.getElementById('fileInput');
  var previewGrid = document.getElementById('previewGrid');
  fileInput.addEventListener('change', function(){
    previewGrid.innerHTML = '';
    Array.prototype.forEach.call(this.files || [], function(f){
      if (!/^image\//i.test(f.type)) return;
      var r = new FileReader();
      r.onload = function(){
        var d = document.createElement('div');
        d.style.width='82px'; d.style.height='62px'; d.style.borderRadius='10px';
        d.style.overflow='hidden'; d.style.border='1px solid #e5e7eb'; d.style.background='#0b0b0b'; d.style.marginRight='6px';
        d.innerHTML = '<img style="width:100%;height:100%;object-fit:cover" src="'+r.result+'">';
        previewGrid.appendChild(d);
      };
      r.readAsDataURL(f);
    });
  });
})();

// ===== Lightbox & PDF =====
var GALLERY = [];
(function buildGallery(){
  var list = <?php
    if (($view ?? '') === 'post') {
      $imgs = []; $n = 1;
      foreach (($post['images'] ?? []) as $f) {
        $ext = strtolower(pathinfo($f, PATHINFO_EXTENSION));
        if ($ext!=='pdf') { $imgs[] = ['src' => 'serve.php?img='.rawurlencode($f), 'name'=> ($post['title'] ?? 'Ảnh').' — ảnh '.$n]; $n++; }
      }
      echo json_encode($imgs, JSON_UNESCAPED_UNICODE);
    } else echo '[]';
  ?>;
  GALLERY = list || [];
})();
var lbEl = document.getElementById('lb'), lbImg = document.getElementById('lbImg'), lbCap = document.getElementById('lbCap'), curIdx = 0;
function openLightbox(idx){ if (!GALLERY.length) return; curIdx = Math.max(0, Math.min(idx, GALLERY.length-1)); setLb(curIdx); lbEl.style.display='block'; document.body.style.overflow='hidden'; }
function setLb(i){
  var item = GALLERY[i];
  lbImg.onload = function(){
    try{ var portrait = lbImg.naturalHeight > lbImg.naturalWidth;
      if (portrait){ lbImg.style.height='90vh'; lbImg.style.width='auto'; }
      else{ lbImg.style.width='96vw'; lbImg.style.height='auto'; }
    }catch(_){}
    lbCap.textContent = (i+1)+' / '+GALLERY.length+' — '+item.name;
  };
  lbImg.src = item.src;
}
function closeLightbox(){ lbEl.style.display='none'; document.body.style.overflow=''; }
function prevImg(){ curIdx = (curIdx-1+GALLERY.length)%GALLERY.length; setLb(curIdx); }
function nextImg(){ curIdx = (curIdx+1)%GALLERY.length; setLb(curIdx); }
lbEl && lbEl.addEventListener('click', function(e){ if (e.target === lbEl) closeLightbox(); });
document.addEventListener('keydown', function(e){ if (lbEl && lbEl.style.display==='block'){ if (e.key==='Escape') closeLightbox(); if (e.key==='ArrowLeft') prevImg(); if (e.key==='ArrowRight') nextImg(); } });

var pdfModal = document.getElementById('pdfModal'), pdfFrame = document.getElementById('pdfFrame'), pdfName  = document.getElementById('pdfName'), pdfNewTab= document.getElementById('pdfNewTab');
function openPdfViewer(url, name){ pdfFrame.src=url; pdfName.textContent=name||'Tệp PDF'; pdfNewTab.href=url; pdfModal.style.display='block'; document.body.style.overflow='hidden'; }
function closePdf(){ pdfModal.style.display='none'; pdfFrame.src=''; document.body.style.overflow=''; }
pdfModal && pdfModal.addEventListener('click', function(e){ if (e.target === pdfModal) closePdf(); });

// Đánh dấu ảnh dọc trong danh sách tệp đính kèm
(function(){
  var imgs = document.querySelectorAll('.attach-thumb img');
  function markPortrait(img){ try{ if (img.naturalHeight > img.naturalWidth) img.parentElement.classList.add('portrait'); }catch(_){} }
  imgs.forEach(function(i){ i.complete ? markPortrait(i) : i.addEventListener('load', function(){ markPortrait(this); }); });
})();
</script>
</body>
</html>
