<?php
require __DIR__ . '/lib/Gallery.php';
$config = require __DIR__ . '/config.php';
$gallery = new Gallery($config);

$albumSlug = $_GET['album'] ?? null;
$album = $albumSlug ? $gallery->loadAlbum($albumSlug) : null;
$view = $album ? 'album' : 'index';
if ($albumSlug && !$album) { http_response_code(404); }
$albums = $gallery->getAlbums();
$total = $gallery->totalPhotoCount();

function h($s) { return htmlspecialchars((string)$s, ENT_QUOTES, 'UTF-8'); }
?><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><?= h($config['site_title']) ?> — <?= $album ? h($album['meta']['title']) : h($config['site_subtitle']) ?></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=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..900,0..100,0..1;1,9..144,300..900,0..100,0..1&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body class="<?= $album ? 'view-album' : 'view-index' ?>" data-album="<?= h($albumSlug ?? '') ?>">

<div class="grain"></div>
<div class="cursor" id="cursor"><span class="cursor-label"></span></div>

<header class="topbar">
  <a href="?" class="topbar__brand">
    <span class="brand-mark">◐</span>
    <span class="brand-name"><?= h($config['site_title']) ?></span>
  </a>
  <div class="topbar__meta">
    <span class="meta-line"><span class="dot dot--rec"></span> REC</span>
    <span class="meta-line" id="clock">--:--:--</span>
    <span class="meta-line"><?= str_pad((string)count($albums), 3, '0', STR_PAD_LEFT) ?> ALBUMS / <?= str_pad((string)$total, 4, '0', STR_PAD_LEFT) ?> FRAMES</span>
  </div>
</header>

<?php if ($view === 'index'): ?>

<main class="index">
  <section class="hero">
    <div class="hero__eyebrow">
      <span>— EST. <?= date('Y') ?></span>
      <span><?= h($config['site_byline']) ?></span>
    </div>
    <h1 class="hero__title">
      <span class="word">The</span>
      <span class="word italic">Archive</span>
      <span class="word">of</span>
      <span class="word">Quiet</span>
      <span class="word italic">Light</span>
    </h1>
    <p class="hero__sub"><?= h($config['site_subtitle']) ?>. Scroll to enter the collection. Frames are arranged not by date but by feeling.</p>
  </section>

  <section class="album-list">
    <header class="album-list__head">
      <span class="label">INDEX</span>
      <span class="label">TITLE</span>
      <span class="label">FRAMES</span>
      <span class="label">LOCATION</span>
    </header>

    <?php foreach ($albums as $i => $a): ?>
      <a class="album-row"
         href="?album=<?= h($a['slug']) ?>"
         data-cover="<?= h($gallery->thumbUrl($a['slug'], $a['cover']['file'], 'sm')) ?>"
         data-cursor="ENTER">
        <span class="album-row__num"><?= str_pad((string)($i+1), 2, '0', STR_PAD_LEFT) ?></span>
        <span class="album-row__title"><?= h($a['meta']['title']) ?></span>
        <span class="album-row__count"><?= str_pad((string)$a['count'], 3, '0', STR_PAD_LEFT) ?></span>
        <span class="album-row__loc"><?= h($a['meta']['location'] ?: '—') ?></span>
        <span class="album-row__arrow">↗</span>
      </a>
    <?php endforeach; ?>

    <?php if (empty($albums)): ?>
      <div class="empty">
        <p>The archive is empty.</p>
        <p class="hint">Drop folders of photos into <code>/photos</code>. Each subfolder becomes an album.</p>
      </div>
    <?php endif; ?>
  </section>

  <div class="hover-preview" id="hoverPreview"><img alt=""></div>

  <section class="manifesto">
    <p class="manifesto__line italic">Photographs are not memories.</p>
    <p class="manifesto__line">They are the residue of attention,</p>
    <p class="manifesto__line italic">small admissions that something was once seen.</p>
  </section>
</main>

<?php else: ?>

<main class="album">
  <header class="album__head">
    <a href="?" class="back-link" data-cursor="BACK">← Index</a>
    <div class="album__title-wrap">
      <span class="album__num">№ <?= str_pad((string)(array_search($album['slug'], array_column($albums, 'slug')) + 1), 2, '0', STR_PAD_LEFT) ?></span>
      <h1 class="album__title"><?= h($album['meta']['title']) ?></h1>
      <?php if ($album['meta']['location'] || $album['meta']['date']): ?>
      <p class="album__sub">
        <?php if ($album['meta']['location']): ?><span><?= h($album['meta']['location']) ?></span><?php endif; ?>
        <?php if ($album['meta']['date']): ?><span><?= h($album['meta']['date']) ?></span><?php endif; ?>
        <span><?= str_pad((string)$album['count'], 3, '0', STR_PAD_LEFT) ?> FRAMES</span>
      </p>
      <?php endif; ?>
      <?php if ($album['meta']['description']): ?>
        <p class="album__desc"><?= h($album['meta']['description']) ?></p>
      <?php endif; ?>
    </div>
  </header>

  <section class="grid" id="grid">
    <?php foreach ($album['photos'] as $i => $p):
      $patterns = ['span-2', 'tall', '', 'wide', '', 'offset', '', 'tall', 'wide', '', '', 'offset'];
      $cls = $patterns[$i % count($patterns)];
      $portrait = $p['ratio'] < 1;
      if ($portrait && strpos($cls, 'wide') !== false) $cls = 'tall';
    ?>
      <figure class="tile <?= h($cls) ?>" data-idx="<?= $i ?>" data-cursor="VIEW">
        <span class="tile__idx"><?= str_pad((string)($i+1), 3, '0', STR_PAD_LEFT) ?></span>
        <img src="<?= h($gallery->thumbUrl($album['slug'], $p['file'], 'md')) ?>"
             alt="<?= h($p['file']) ?>"
             loading="lazy"
             data-full="<?= h($gallery->thumbUrl($album['slug'], $p['file'], 'lg')) ?>"
             data-orig="<?= h($p['url']) ?>"
             data-exif='<?= h(json_encode($p['exif'] ?: new stdClass())) ?>'
             data-meta='<?= h(json_encode([
                'file' => $p['file'],
                'w'    => $p['width'],
                'h'    => $p['height'],
                'size' => Gallery::formatBytes($p['size']),
             ])) ?>'>
        <figcaption class="tile__cap">
          <span><?= h($p['file']) ?></span>
          <span><?= $p['width'] ?>×<?= $p['height'] ?></span>
        </figcaption>
      </figure>
    <?php endforeach; ?>
  </section>

  <nav class="album-nav">
    <?php
      $idx = array_search($album['slug'], array_column($albums, 'slug'));
      $prev = $idx > 0 ? $albums[$idx-1] : null;
      $next = $idx < count($albums)-1 ? $albums[$idx+1] : null;
    ?>
    <?php if ($prev): ?>
      <a href="?album=<?= h($prev['slug']) ?>" class="album-nav__link" data-cursor="PREV">
        <span class="album-nav__label">PREVIOUS</span>
        <span class="album-nav__title">← <?= h($prev['meta']['title']) ?></span>
      </a>
    <?php else: ?><span></span><?php endif; ?>

    <?php if ($next): ?>
      <a href="?album=<?= h($next['slug']) ?>" class="album-nav__link album-nav__link--right" data-cursor="NEXT">
        <span class="album-nav__label">NEXT</span>
        <span class="album-nav__title"><?= h($next['meta']['title']) ?> →</span>
      </a>
    <?php else: ?><span></span><?php endif; ?>
  </nav>
</main>

<div class="lightbox" id="lightbox" hidden>
  <button class="lightbox__close" id="lbClose" data-cursor="CLOSE">×</button>
  <div class="lightbox__stage">
    <button class="lightbox__nav lightbox__nav--prev" id="lbPrev" data-cursor="PREV">←</button>
    <img class="lightbox__img" id="lbImg" alt="">
    <button class="lightbox__nav lightbox__nav--next" id="lbNext" data-cursor="NEXT">→</button>
  </div>
  <aside class="lightbox__panel" id="lbPanel">
    <div class="lb-counter"><span id="lbIdx">001</span> <span class="lb-counter__sep">/</span> <span id="lbTotal">001</span></div>
    <h2 class="lb-album"><?= h($album['meta']['title']) ?></h2>
    <dl class="lb-exif" id="lbExif"></dl>
    <div class="lb-actions">
      <a href="#" id="lbDownload" target="_blank">↓ Download original</a>
    </div>
  </aside>
</div>

<?php endif; ?>

<footer class="footer">
  <span>© <?= date('Y') ?> <?= h($config['site_title']) ?></span>
  <span class="footer__sep">·</span>
  <span>No database. No tracking. Only light.</span>
</footer>

<script src="assets/js/app.js"></script>
</body>
</html>
