<?php
// public/category.php — Category listing with list/grid views + pagination
require_once __DIR__ . '/includes/api.php';

$cat   = trim($_GET['cat']  ?? '');
$page  = max(1, (int)($_GET['page'] ?? 1));
$sort  = in_array($_GET['sort'] ?? '', ['date','views']) ? $_GET['sort'] : 'date';
$limit = 12;

$res      = api_news_paged(['category' => $cat ?: null, 'page' => $page, 'limit' => $limit]);
$articles = $res['data'];
$total    = $res['total'];
$pages    = $res['pages'];

// Category hero = first article
$featArt  = $articles[0] ?? null;

$catLabel   = $cat ? ucfirst(str_replace('-', ' ', $cat)) : 'All News';
$pageTitle  = $catLabel . ' — NewsForge';
$activePage = 'category';
require_once __DIR__ . '/includes/header.php';
?>

<main>
<div class="container" style="padding-top:28px">

  <!-- Category Hero Banner -->
  <?php if ($featArt): ?>
  <div style="position:relative;border-radius:var(--radius);overflow:hidden;margin-bottom:32px;
              min-height:220px;display:flex;align-items:flex-end">
    <img src="<?= h(thumb($featArt, 1200, 320)) ?>"
         style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover"
         onerror="this.style.opacity=0">
    <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,transparent 60%)"></div>
    <div style="position:relative;padding:32px 36px;color:#fff;z-index:1">
      <span class="cat-badge <?= cat_color($cat) ?>" style="margin-bottom:10px;display:inline-block">
        <?= strtoupper(h($catLabel)) ?>
      </span>
      <h1 style="font-size:clamp(18px,3.5vw,36px);font-family:var(--font-heading);
                 max-width:700px;line-height:1.25;margin-bottom:10px">
        <?= h($featArt['title']) ?>
      </h1>
      <div style="font-size:13px;opacity:.85;margin-bottom:14px">
        <?= h($featArt['source_name'] ?? '') ?>
        <?= $featArt['source_name'] ? '•' : '' ?>
        <?= rel_time($featArt['published_at'] ?? $featArt['created_at']) ?>
        • <?= read_time($featArt['content'] ?? $featArt['description'] ?? '') ?> min read
      </div>
      <a href="/public/article.php?id=<?= $featArt['id'] ?>"
         style="display:inline-block;background:var(--primary);color:#fff;
                padding:9px 20px;border-radius:4px;font-size:13px;font-weight:600">
        Read Article →
      </a>
    </div>
  </div>
  <?php endif; ?>

  <div class="content-with-sidebar">
    <div class="main-content">

      <!-- Filter & Sort bar -->
      <div style="display:flex;align-items:center;justify-content:space-between;
                  flex-wrap:wrap;gap:10px;margin-bottom:24px;
                  padding-bottom:16px;border-bottom:1px solid var(--border)">
        <div style="font-size:14px;color:var(--text-muted)">
          <?php if ($cat): ?>
            <strong style="color:var(--text)"><?= h($catLabel) ?></strong> —
            <?= number_format($total) ?> article<?= $total !== 1 ? 's' : '' ?>
          <?php else: ?>
            <strong style="color:var(--text)">All News</strong> —
            <?= number_format($total) ?> articles
          <?php endif; ?>
        </div>
        <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap">
          <!-- Sort links -->
          <?php foreach (['date' => 'Latest', 'views' => 'Most Read'] as $sv => $sl): ?>
          <a href="?cat=<?= urlencode($cat) ?>&sort=<?= $sv ?>"
             style="padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700;
                    text-decoration:none;border:1px solid var(--border);
                    background:<?= $sort===$sv?'var(--primary)':'var(--surface)' ?>;
                    color:<?= $sort===$sv?'#fff':'var(--text)' ?>">
            <?= $sl ?>
          </a>
          <?php endforeach; ?>
          <!-- View toggle -->
          <button id="btnList" onclick="setView('list',this)"
                  style="padding:6px 10px;border:1px solid var(--border);border-radius:4px;
                         background:var(--primary);color:#fff;cursor:pointer;font-size:14px"
                  title="List view">☰</button>
          <button id="btnGrid" onclick="setView('grid',this)"
                  style="padding:6px 10px;border:1px solid var(--border);border-radius:4px;
                         background:var(--surface);color:var(--text);cursor:pointer;font-size:14px"
                  title="Grid view">⊞</button>
        </div>
      </div>

      <!-- ── LIST VIEW ────────────────────────────────────────────────── -->
      <div id="viewList">
        <?php if (!empty($articles)): ?>
          <?php foreach ($articles as $art): ?>
          <div onclick="location.href='/public/article.php?id=<?= $art['id'] ?>'"
               style="cursor:pointer;display:grid;grid-template-columns:220px 1fr;
                      background:var(--surface);border-radius:var(--radius);
                      border-bottom:1px solid var(--border);overflow:hidden;
                      margin-bottom:2px;transition:var(--transition)"
               onmouseover="this.style.boxShadow='var(--shadow-hover)'"
               onmouseout="this.style.boxShadow=''">
            <img src="<?= h(thumb($art, 300, 200)) ?>"
                 style="width:100%;height:170px;object-fit:cover"
                 onerror="this.src='https://picsum.photos/seed/<?= $art['id'] ?>/300/200'"
                 alt="<?= h($art['title']) ?>">
            <div style="padding:18px 22px;display:flex;flex-direction:column;gap:6px;min-width:0">
              <span class="cat-badge <?= cat_color($art['category']) ?>"
                    style="font-size:10px;width:fit-content">
                <?= strtoupper(h($art['category'] ?? 'NEWS')) ?>
              </span>
              <div style="font-size:15px;font-weight:700;line-height:1.4;color:var(--text)">
                <?= h($art['title']) ?>
              </div>
              <div style="font-size:13px;color:var(--text-muted);line-height:1.5">
                <?= h(truncate($art['description'] ?? $art['content'] ?? '', 190)) ?>
              </div>
              <div style="font-size:12px;color:var(--text-light);
                          display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:auto">
                <span><?= h($art['source_name'] ?? 'Staff') ?></span>
                <span>•</span>
                <span><?= rel_time($art['published_at'] ?? $art['created_at']) ?></span>
                <span style="margin-left:auto">
                  <?= read_time($art['content'] ?? $art['description'] ?? '') ?> min read
                </span>
              </div>
            </div>
          </div>
          <?php endforeach; ?>

        <?php else: ?>
          <div style="text-align:center;padding:80px 20px;color:var(--text-muted)">
            <div style="font-size:48px;margin-bottom:16px">📭</div>
            <h3>No articles found<?= $cat ? ' in "' . h($catLabel) . '"' : '' ?></h3>
            <p style="margin-top:8px">
              <a href="/admin/sources.php" style="color:var(--primary)">
                Add more sources in the admin panel →
              </a>
            </p>
          </div>
        <?php endif; ?>
      </div>

      <!-- ── GRID VIEW ─────────────────────────────────────────────────── -->
      <div id="viewGrid"
           style="display:none;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px">
        <?php foreach ($articles as $art): ?>
        <div onclick="location.href='/public/article.php?id=<?= $art['id'] ?>'"
             style="cursor:pointer;background:var(--surface);border-radius:var(--radius);
                    overflow:hidden;box-shadow:var(--shadow);transition:var(--transition)"
             onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='var(--shadow-hover)'"
             onmouseout="this.style.transform='';this.style.boxShadow='var(--shadow)'">
          <img src="<?= h(thumb($art, 400, 220)) ?>"
               style="width:100%;height:175px;object-fit:cover"
               onerror="this.src='https://picsum.photos/seed/<?= $art['id'] ?>/400/220'"
               alt="">
          <div style="padding:14px 16px">
            <span class="cat-badge <?= cat_color($art['category']) ?>" style="font-size:10px">
              <?= strtoupper(h($art['category'] ?? 'NEWS')) ?>
            </span>
            <div style="font-size:14px;font-weight:700;margin-top:8px;line-height:1.4;color:var(--text)">
              <?= h($art['title']) ?>
            </div>
            <div style="font-size:12px;color:var(--text-light);margin-top:6px">
              <?= rel_time($art['published_at'] ?? $art['created_at']) ?>
              • <?= read_time($art['content'] ?? $art['description'] ?? '') ?> min read
            </div>
          </div>
        </div>
        <?php endforeach; ?>
      </div>

      <!-- ── Pagination ─────────────────────────────────────────────── -->
      <?php if ($pages > 1): ?>
      <div style="display:flex;gap:6px;margin-top:32px;align-items:center;flex-wrap:wrap">
        <?php if ($page > 1): ?>
        <a href="?cat=<?= urlencode($cat) ?>&page=<?= $page-1 ?>&sort=<?= $sort ?>"
           style="padding:8px 14px;border:1px solid var(--border);border-radius:4px;
                  background:var(--surface);text-decoration:none;color:var(--text)">← Prev</a>
        <?php endif; ?>

        <?php for ($p = max(1, $page-2); $p <= min($pages, $page+2); $p++): ?>
        <a href="?cat=<?= urlencode($cat) ?>&page=<?= $p ?>&sort=<?= $sort ?>"
           style="padding:8px 14px;border-radius:4px;text-decoration:none;
                  background:<?= $p===$page?'var(--primary)':'var(--surface)' ?>;
                  color:<?= $p===$page?'#fff':'var(--text)' ?>;
                  border:1px solid <?= $p===$page?'var(--primary)':'var(--border)' ?>">
          <?= $p ?>
        </a>
        <?php endfor; ?>

        <?php if ($page < $pages): ?>
        <a href="?cat=<?= urlencode($cat) ?>&page=<?= $page+1 ?>&sort=<?= $sort ?>"
           style="padding:8px 14px;border:1px solid var(--border);border-radius:4px;
                  background:var(--surface);text-decoration:none;color:var(--text)">Next →</a>
        <?php endif; ?>

        <span style="margin-left:auto;font-size:12px;color:var(--text-light)">
          Page <?= $page ?> of <?= $pages ?>
        </span>
      </div>
      <?php endif; ?>

    </div><!-- /.main-content -->

    <?php require_once __DIR__ . '/includes/sidebar.php'; ?>

  </div>
</div>

<script>
function setView(v, btn) {
  const list = document.getElementById('viewList');
  const grid = document.getElementById('viewGrid');
  if (v === 'grid') { list.style.display='none'; grid.style.display='grid'; }
  else              { list.style.display='block'; grid.style.display='none'; }
  ['btnList','btnGrid'].forEach(id => {
    const b = document.getElementById(id);
    if (b) { b.style.background=id==='btn'+v[0].toUpperCase()+v.slice(1)?'var(--primary)':'var(--surface)';
             b.style.color=id==='btn'+v[0].toUpperCase()+v.slice(1)?'#fff':'var(--text)'; }
  });
  localStorage.setItem('nf-view', v);
}
(function(){
  const v = localStorage.getItem('nf-view');
  if (v === 'grid') setView('grid', document.getElementById('btnGrid'));
})();
</script>
</main>

<?php require_once __DIR__ . '/includes/footer.php'; ?>
