<?php
// layout.php — shared header/sidebar/wrapper
// Expected variables: $pageTitle, $activePage, $activeBookId (optional)
require_once __DIR__ . '/../config/config.php';
require_once __DIR__ . '/../config/database.php';
require_once __DIR__ . '/../auth/auth.php';
require_once __DIR__ . '/functions.php';

$auth = new Auth();
$auth->requireLogin();
$currentUser = $auth->currentUser();
$userId      = $currentUser['id'];

$books    = getAllBooks();
$stats    = getDashboardStats($userId);
$overall  = $stats['progress'];

// Build per-book completion map for sidebar dots
$booksProgress = getBooksWithProgress($userId);
$bookProgressMap = [];
foreach ($booksProgress as $bp) {
    $bookProgressMap[$bp['id']] = [
        'done'  => (int)$bp['chapters_done'],
        'total' => (int)$bp['num_chapters'],
    ];
}

$userInitial = strtoupper(substr($currentUser['username'], 0, 1));
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= htmlspecialchars($pageTitle ?? 'NT Study Guide') ?> — NT Study Guide</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>
<div class="app-wrapper">

  <!-- ── Sidebar ─────────────────────────────────────────────────── -->
  <aside class="sidebar" id="sidebar">
    <div class="sidebar-header">
      <div class="sidebar-logo">
        <div class="logo-icon">✝</div>
        <h1>NT Study Guide</h1>
      </div>
      <div class="sidebar-tagline">King James Version</div>
    </div>

    <nav class="sidebar-nav">
      <a href="/index.php"    class="<?= ($activePage==='dashboard') ? 'active':'' ?>">
        <span class="nav-icon">⊞</span> Dashboard
      </a>
      <a href="/search.php"   class="<?= ($activePage==='search')    ? 'active':'' ?>">
        <span class="nav-icon">⌕</span> Search Verses
      </a>
      <a href="/progress.php" class="<?= ($activePage==='progress')  ? 'active':'' ?>">
        <span class="nav-icon">◎</span> My Progress
      </a>
      <a href="/notes.php"    class="<?= ($activePage==='notes')     ? 'active':'' ?>">
        <span class="nav-icon">✏</span> My Notes
      </a>

      <div class="sidebar-section-divider"></div>

      <a href="/events.php"   class="<?= ($activePage==='events')    ? 'active':'' ?>">
        <span class="nav-icon">⚡</span> Significant Events
      </a>
      <a href="/people.php"   class="<?= ($activePage==='people')    ? 'active':'' ?>">
        <span class="nav-icon">👤</span> Significant People
      </a>
    </nav>

    <!-- Progress mini bar -->
    <div style="padding:0 1.25rem 0.75rem;">
      <div style="display:flex;justify-content:space-between;margin-bottom:0.3rem;">
        <span style="font-family:var(--font-sans);font-size:0.65rem;color:var(--color-muted);text-transform:uppercase;letter-spacing:0.08em;">Reading Progress</span>
        <span style="font-family:var(--font-sans);font-size:0.65rem;color:var(--color-gold);"><?= $overall['percentage'] ?>%</span>
      </div>
      <div class="progress-bar-track" style="height:4px;">
        <div class="progress-bar-fill" style="width:<?= $overall['percentage'] ?>%"></div>
      </div>
    </div>

    <div class="sidebar-section-title">Books of the New Testament</div>

    <div class="sidebar-books">
      <?php foreach ($books as $book):
        $bp   = $bookProgressMap[$book['id']] ?? ['done'=>0,'total'=>$book['num_chapters']];
        $done = $bp['done'];
        $tot  = $bp['total'];
        $dotClass = $done === 0 ? '' : ($done >= $tot ? 'complete' : 'partial');
        $isActive = isset($activeBookId) && $activeBookId == $book['id'];
      ?>
      <a href="/reader.php?book=<?= $book['id'] ?>&chapter=1"
         class="<?= $isActive ? 'active':'' ?>">
