<?php
require __DIR__ . '/includes/functions.php';
ensure_dirs();

$videos = list_videos();      // number => file name (ascending)
$thumbs = list_thumbs();      // number => [index => file name]
$total  = count($videos);

$requested = isset($_GET['page']) ? (int) $_GET['page'] : 1;
list($page, $pages, $offset) = paginate($total, $requested);

// Page 1 = videos 1-12, page 2 = videos 13-24, ...
$visible = array_slice($videos, $offset, PER_PAGE, true);

// "Your video was uploaded" banner (shown after the redirect from upload.php)
$uploaded = isset($_GET['uploaded']) ? (int) $_GET['uploaded'] : 0;
$showBanner = $uploaded > 0 && isset($videos[$uploaded]);

function thumb_src($file)
{
    return THUMB_URL . '/' . rawurlencode($file);
}

function page_url($n)
{
    return $n <= 1 ? 'index.php' : 'index.php?page=' . $n;
}

$pageTitle = 'Video Site' . ($page > 1 ? ' - page ' . $page : '');
$activeTab = 'videos';
include __DIR__ . '/includes/header.php';
?>

<div class="page-head">
    <h1>Videos</h1>
    <?php if ($total > 0): ?>
        <p><?= $total ?> <?= $total === 1 ? 'video' : 'videos' ?> &middot; page <?= $page ?> of <?= $pages ?></p>
    <?php endif; ?>
</div>

<?php if ($showBanner): ?>
    <div class="page-banner">
        <div class="alert alert-ok" role="status">Your video was uploaded and is on this page.</div>
    </div>
<?php endif; ?>

<?php if ($total === 0): ?>

    <div class="empty">
        <h2>No videos yet</h2>
        <p>Be the first to add one.</p>
        <a href="upload.php" class="pink-button no-icon">Upload a video</a>
    </div>

<?php else: ?>

<main class="video-grid">
<?php foreach ($visible as $n => $file):
    $t = isset($thumbs[$n]) ? array_values($thumbs[$n]) : [];
    if (!$t) { continue; }                       // video without thumbnails: skip it
    $hero  = $t[0];
    $side1 = isset($t[1]) ? $t[1] : $t[0];       // fall back to the first thumbnail
    $side2 = isset($t[2]) ? $t[2] : $side1;
?>
    <div class="container">
        <div class="top-part">
            <div class="left-part">
                <img src="<?= e(thumb_src($hero)) ?>" alt="" loading="lazy">
            </div>
            <div class="right-part">
                <img src="<?= e(thumb_src($side1)) ?>" alt="" loading="lazy">
                <img src="<?= e(thumb_src($side2)) ?>" alt="" loading="lazy">
            </div>
        </div>
        <div class="bottom-part">
            <a href="<?= e(VIDEO_URL . '/' . rawurlencode($file)) ?>" target="_blank" rel="noopener" class="pink-button">Play</a>
        </div>
    </div>
<?php endforeach; ?>
</main>

<?php if ($pages > 1): ?>
<nav class="pagination" aria-label="Pages">
    <?php if ($page > 1): ?>
        <a href="<?= page_url($page - 1) ?>" rel="prev">Previous</a>
    <?php else: ?>
        <span class="disabled">Previous</span>
    <?php endif; ?>

    <?php foreach (pagination_items($page, $pages) as $item): ?>
        <?php if ($item === null): ?>
            <span class="gap">&hellip;</span>
        <?php elseif ($item === $page): ?>
            <span class="current" aria-current="page"><?= $item ?></span>
        <?php else: ?>
            <a href="<?= page_url($item) ?>"><?= $item ?></a>
        <?php endif; ?>
    <?php endforeach; ?>

    <?php if ($page < $pages): ?>
        <a href="<?= page_url($page + 1) ?>" rel="next">Next</a>
    <?php else: ?>
        <span class="disabled">Next</span>
    <?php endif; ?>
</nav>
<?php endif; ?>

<?php endif; ?>

<script src="assets/app.js"></script>
<?php include __DIR__ . '/includes/footer.php'; ?>
