<?php
require_once __DIR__ . '/config.php';

$db = getDB();
$dayOfWeek = (int)date('w');

// Load today's champion
$stmt = $db->prepare("SELECT * FROM champions WHERE day_index = ? LIMIT 1");
$stmt->execute([$dayOfWeek]);
$currentChampion = $stmt->fetch();

// Fallback champion if DB missing row
if (!$currentChampion) {
  $currentChampion = [
    'id' => null,
    'name' => 'Unknown',
    'title' => '',
    'role' => '',
    'tagline' => '',
    'description' => '',
    'theme_class' => 'theme-zealer',
    'color' => '#ffd700',
    'emoji' => '⭐',
    'day_index' => $dayOfWeek
  ];
}

// Determine current page for nav active state
$currentPage = basename($_SERVER['PHP_SELF'] ?? 'index.php');

function navActive(string $file, string $currentPage): string {
  return $file === $currentPage ? 'active' : '';
}

function esc($v): string {
  return htmlspecialchars((string)$v, ENT_QUOTES, 'UTF-8');
}

/**
 * Cache-bust CSS:
 * Change this value whenever styles don't update (e.g. '20260317_fix2')
 */
$cssVer = '20260317_fix2';

/**
 * Emoji fallback avatar as inline SVG data URI
 * (never breaks if images missing)
 */
$emoji = $currentChampion['emoji'] ?? '⭐';
$emojiSvg = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'>
<rect width='120' height='120' rx='60' ry='60' fill='%23111111'/>
<text x='50%' y='70%' text-anchor='middle' font-size='68'>{$emoji}</text>
</svg>";
$emojiDataUri = "data:image/svg+xml;charset=utf-8," . rawurlencode($emojiSvg);

// Top-left avatar should be {Name}-avatar.png (per your rules)
$avatarUrl = getChampionImage($currentChampion['name'], 'avatar');
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Champion's Habit RPG</title>

  <link rel="stylesheet" href="<?php echo esc(BASE_URL); ?>/styles/base.css?v=<?php echo esc($cssVer); ?>">
  <link rel="stylesheet" href="<?php echo esc(BASE_URL); ?>/styles/layout.css?v=<?php echo esc($cssVer); ?>">
  <link rel="stylesheet" href="<?php echo esc(BASE_URL); ?>/styles/components.css?v=<?php echo esc($cssVer); ?>">
</head>

<body class="<?php echo esc($currentChampion['theme_class']); ?>">
  <div class="nav-bar">
    <div class="nav-brand">
      <img
        class="nav-champion-img"
        src="<?php echo esc($avatarUrl); ?>"
        alt="<?php echo esc($currentChampion['name']); ?>"
        onerror="this.onerror=null; this.src='<?php echo esc($emojiDataUri); ?>';"
      />
      <div>
        <div style="line-height:1;"><?php echo esc($currentChampion['name']); ?></div>
        <div style="font-size:0.7rem;color:#aaa;letter-spacing:1px;">CHAMPION'S RPG</div>
      </div>
    </div>

    <div class="nav-links">
      <a class="nav-btn <?php echo navActive('index.php', $currentPage); ?>" href="<?php echo esc(BASE_URL); ?>/index.php">Dashboard</a>
      <a class="nav-btn <?php echo navActive('champions.php', $currentPage); ?>" href="<?php echo esc(BASE_URL); ?>/champions.php">Champions</a>
      <a class="nav-btn <?php echo navActive('inventory.php', $currentPage); ?>" href="<?php echo esc(BASE_URL); ?>/inventory.php">Inventory</a>
      <a class="nav-btn <?php echo navActive('calendar.php', $currentPage); ?>" href="<?php echo esc(BASE_URL); ?>/calendar.php">Calendar</a>
      <a class="nav-btn <?php echo navActive('bounties.php', $currentPage); ?>" href="<?php echo esc(BASE_URL); ?>/bounties.php">Bounties</a>
      <a class="nav-btn <?php echo navActive('add.php', $currentPage); ?>" href="<?php echo esc(BASE_URL); ?>/add.php">+ Add</a>
      <a class="nav-btn <?php echo navActive('edit.php', $currentPage); ?>" href="<?php echo esc(BASE_URL); ?>/edit.php">Edit</a>
    </div>
  </div>

  <div class="container">