<?php
// Diagnostic tool to test direct video playback
require_once 'config/database.php';
require_once 'includes/functions.php';

// Collect videos from directories
$videoDirs = ['videos/', 'uploads/videos/'];
$allVideos = [];
foreach ($videoDirs as $dir) {
    if (is_dir($dir)) {
        $videos = glob($dir . '*.{mp4,webm,ogg,avi,mov,wmv}', GLOB_BRACE);
        if ($videos) {
            foreach ($videos as $video) {
                $allVideos[] = [
                    'path' => $video,
                    'dir'  => $dir,
                    'name' => basename($video),
                    'size' => filesize($video),
                ];
            }
        }
    }
}
$totalVideos = count($allVideos);
$totalSize = array_sum(array_column($allVideos, 'size'));

function formatBytes(int $bytes): string {
    if ($bytes >= 1048576) return number_format($bytes / 1048576, 1) . ' MB';
    if ($bytes >= 1024) return number_format($bytes / 1024, 1) . ' KB';
    return $bytes . ' B';
}

$page_title = 'Video Playback Diagnostic';
include 'includes/header.php';
?>

<style>
    :root {
        --primary: #1a365d;
        --primary-light: #2c5282;
        --accent: #d69e2e;
        --accent-light: #ecc94b;
        --bg: #f7fafc;
        --card-bg: #ffffff;
        --text: #2d3748;
        --text-light: #718096;
        --border: #e2e8f0;
        --success: #38a169;
        --warning: #dd6b20;
        --info: #3182ce;
        --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
        --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    }

    .diag-hero { background: linear-gradient(135deg, var(--primary) 0%, #234876 50%, var(--primary-light) 100%); color: white; padding: 60px 24px; text-align: center; position: relative; overflow: hidden; }
    .diag-hero::before { content: ''; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(214,158,46,0.15) 0%, transparent 70%); border-radius: 50%; }
    .diag-hero .hero-content { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; }
    .badge { display: inline-block; background: var(--accent); color: white; padding: 6px 18px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; }
    .diag-hero h1 { font-size: 42px; font-weight: 800; margin-bottom: 16px; line-height: 1.2; letter-spacing: -1px; }
    .diag-hero h1 span { color: var(--accent-light); }
    .hero-sub { font-size: 18px; opacity: 0.9; max-width: 700px; margin: 0 auto; }
    .hero-meta { display: flex; justify-content: center; gap: 30px; margin-top: 24px; flex-wrap: wrap; }
    .hero-meta-item { display: flex; align-items: center; gap: 8px; font-size: 14px; opacity: 0.9; }
    .hero-meta-item svg { width: 18px; height: 18px; opacity: 0.8; }

    .diag-container { max-width: 1400px; margin: 0 auto; padding: 24px; display: grid; grid-template-columns: 280px 1fr; gap: 32px; }
    .diag-sidebar { position: sticky; top: 80px; height: calc(100vh - 100px); overflow-y: auto; padding-right: 8px; }
    .diag-sidebar::-webkit-scrollbar { width: 6px; }
    .diag-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
    .toc-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-light); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--accent); display: inline-block; }
    .toc { list-style: none; }
    .toc li { margin-bottom: 2px; }
    .toc a { display: block; padding: 8px 12px; text-decoration: none; color: var(--text); font-size: 13px; border-radius: 6px; transition: all 0.2s; border-left: 3px solid transparent; }
    .toc a:hover { background: var(--card-bg); border-left-color: var(--accent); color: var(--primary); }
    .toc a.active { background: var(--card-bg); border-left-color: var(--accent); color: var(--primary); font-weight: 600; }
    .toc-chapter { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--primary); margin-top: 16px; margin-bottom: 4px; padding-left: 12px; }
    .video-toc-link { display: flex; align-items: center; gap: 8px; }
    .video-toc-num { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; background: var(--accent); color: white; border-radius: 6px; font-size: 11px; font-weight: 700; flex-shrink: 0; }
    .video-toc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .toc a.video-toc-link.active { background: var(--card-bg); border-left-color: var(--accent); color: var(--primary); font-weight: 600; }
    .toc a.video-toc-link.active .video-toc-num { background: var(--primary); }

    .diag-main { background: var(--card-bg); border-radius: 16px; padding: 40px; box-shadow: var(--shadow); }
    .section { margin-bottom: 48px; }
    .section:last-child { margin-bottom: 0; }
    .diag-main h2 { font-size: 28px; font-weight: 800; color: var(--primary); margin-bottom: 24px; padding-bottom: 12px; border-bottom: 3px solid var(--accent); display: flex; align-items: center; gap: 12px; }
    .diag-main h2 .ch-num { background: var(--accent); color: white; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 16px; flex-shrink: 0; }
    .diag-main h3 { font-size: 20px; font-weight: 700; color: var(--primary-light); margin-top: 32px; margin-bottom: 16px; padding-left: 16px; border-left: 4px solid var(--accent); }
    .diag-main h4 { font-size: 17px; font-weight: 700; color: var(--text); margin-top: 24px; margin-bottom: 12px; }
    .diag-main p { margin-bottom: 14px; text-align: justify; }
    .key-point { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border-left: 4px solid var(--accent); padding: 20px 24px; margin: 24px 0; border-radius: 0 12px 12px 0; position: relative; }
    .key-point::before { content: "📌"; font-size: 20px; position: absolute; top: 16px; right: 16px; opacity: 0.3; }
    .key-point strong { color: var(--warning); font-weight: 700; }
    .key-point p { margin: 0; font-style: italic; color: #744210; }
    .table-wrap { overflow-x: auto; margin: 24px 0; border-radius: 12px; box-shadow: var(--shadow); }
    .diag-main table { width: 100%; border-collapse: collapse; background: var(--card-bg); font-size: 14px; }
    .diag-main thead { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); color: white; }
    .diag-main th { padding: 14px 18px; text-align: left; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; }
    .diag-main td { padding: 14px 18px; border-bottom: 1px solid var(--border); vertical-align: top; }
    .diag-main tbody tr:hover { background: #f7fafc; }
    .diag-main tbody tr:nth-child(even) { background: #fafbfc; }
    .diag-main tbody tr:nth-child(even):hover { background: #f0f4f8; }
    td a.direct-link { color: var(--info); text-decoration: none; font-weight: 500; word-break: break-all; }
    td a.direct-link:hover { text-decoration: underline; color: var(--primary-light); }
    .diag-main ul, .diag-main ol { margin: 16px 0; padding-left: 28px; }
    .diag-main li { margin-bottom: 10px; }
    .diag-main li::marker { color: var(--accent); }
    .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 24px 0; }
    .card { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border: 1px solid var(--border); border-radius: 12px; padding: 24px; transition: all 0.3s; position: relative; overflow: hidden; }
    .card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-light)); }
    .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
    .card-title { font-weight: 700; font-size: 16px; color: var(--primary); margin-bottom: 10px; }
    .card p { font-size: 14px; margin: 0; color: var(--text-light); }
    .def-box { background: linear-gradient(135deg, #ebf8ff 0%, #bee3f8 100%); border-radius: 12px; padding: 24px; margin: 20px 0; border: 1px solid #90cdf4; }
    .def-box dt { font-weight: 700; color: var(--primary); font-size: 16px; margin-bottom: 8px; }
    .def-box dd { margin: 0; color: #2a4365; }
    .lo-badge { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--success) 0%, #2f855a 100%); color: white; padding: 14px 24px; border-radius: 12px; font-weight: 600; margin: 16px 0; box-shadow: var(--shadow); }
    .lo-badge svg { width: 24px; height: 24px; }
    .exam-tip { background: linear-gradient(135deg, #faf5ff 0%, #e9d8fd 100%); border: 1px solid #d6bcfa; border-radius: 12px; padding: 24px; margin: 24px 0; }
    .exam-tip h4 { color: #553c9a; margin-top: 0; display: flex; align-items: center; gap: 10px; }
    .exam-tip ol { margin: 16px 0 0 0; padding-left: 24px; }
    .exam-tip li { margin-bottom: 12px; font-weight: 500; color: #553c9a; }
    .exam-q { background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%); border: 1px solid #9ae6b4; border-radius: 12px; padding: 24px; margin: 24px 0; }
    .exam-q h4 { color: #276749; margin-top: 0; display: flex; align-items: center; gap: 10px; }
    .quick-ref { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin: 24px 0; }
    .quick-ref-item { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
    .quick-ref-item strong { color: var(--primary); font-size: 15px; }
    .quick-ref-item span { color: var(--text-light); font-size: 13px; }
    .chapter-divider { height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary-light)); border-radius: 2px; margin: 48px 0; }
    .video-card { padding: 20px 0 0 0; }
    .video-card .card-title { padding: 0 24px; }
    .video-meta { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 24px; margin: 8px 0 14px; }
    .video-tag { display: inline-flex; align-items: center; gap: 6px; background: #f7fafc; border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 500; color: var(--text-light); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
    .video-tag svg { width: 12px; height: 12px; opacity: 0.7; }
    .video-player-wrap { padding: 0 24px 24px; }
    .video-player { width: 100%; border-radius: 10px; background: #0f172a; box-shadow: var(--shadow); }
    .console-note { display: flex; align-items: flex-start; gap: 10px; background: #fef3c7; border: 1px solid #fde68a; border-radius: 0 0 12px 12px; padding: 14px 24px; font-size: 13px; color: #92400e; margin: 0; }
    .console-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
    .console-note code { background: rgba(146,64,14,0.1); padding: 1px 6px; border-radius: 4px; font-weight: 600; }
    .divider { height: 1px; background: var(--border); margin: 0; }
    .empty-state { text-align: center; padding: 40px 24px; }
    .empty-state-icon { width: 64px; height: 64px; border-radius: 16px; background: #f7fafc; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
    .empty-state-icon svg { width: 28px; height: 28px; color: #cbd5e0; }
    html { scroll-behavior: smooth; }

    @media (max-width: 1024px) {
        .diag-container { grid-template-columns: 1fr; }
        .diag-sidebar { display: none; }
        .diag-hero h1 { font-size: 28px; }
        .diag-main { padding: 24px; }
    }
    @media (max-width: 640px) {
        .hero-meta { flex-direction: column; gap: 10px; }
        .diag-main h2 { font-size: 22px; }
        .diag-main h3 { font-size: 17px; }
        .video-card .card-title, .video-meta, .video-player-wrap { padding-left: 16px; padding-right: 16px; }
        .console-note { padding-left: 16px; padding-right: 16px; }
    }
    @media print {
        .header, .diag-sidebar, .diag-hero { display: none; }
        .diag-main { box-shadow: none; padding: 0; }
    }
</style>

<section class="hero diag-hero">
    <div class="hero-content">
        <div class="badge">Video Playback Diagnostic</div>
        <h1>Video <span>Playback Diagnostic Tool</span></h1>
        <p class="hero-sub">
            Verify direct video playback, file availability, and streaming behaviour
            across the LMS video directories.
        </p>
        <div class="hero-meta">
            <div class="hero-meta-item">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                <?php echo $totalVideos; ?> Video<?php echo $totalVideos !== 1 ? 's' : ''; ?> Found
            </div>
            <div class="hero-meta-item">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                Direct URL Test
            </div>
            <div class="hero-meta-item">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                HTML5 Player
            </div>
        </div>
    </div>
</section>

<div class="diag-container">
    <aside class="diag-sidebar">
        <div class="toc-title">Video Library</div>
        <ul class="toc" id="videoToc">
            <?php if ($totalVideos > 0): ?>
                <?php foreach ($allVideos as $index => $video): ?>
                    <li>
                        <a href="#video-<?php echo $index + 1; ?>" class="video-toc-link" data-video-id="video-<?php echo $index + 1; ?>">
                            <span class="video-toc-num"><?php echo $index + 1; ?></span>
                            <span class="video-toc-name"><?php echo htmlspecialchars($video['name'], ENT_QUOTES, 'UTF-8'); ?></span>
                        </a>
                    </li>
                <?php endforeach; ?>
            <?php else: ?>
                <li><a href="#library">No videos found</a></li>
            <?php endif; ?>
        </ul>
    </aside>

    <div class="diag-main">

        <section class="section" id="library">
            <h2><span class="ch-num">1</span> Video Library</h2>

            <?php if ($totalVideos === 0): ?>
                <div class="empty-state">
                    <div class="empty-state-icon">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                    </div>
                    <h3 style="border: none; padding: 0; margin-bottom: 8px; color: var(--text);">No videos found</h3>
                    <p style="text-align: center; color: var(--text-light);">Add MP4, WebM, OGG, AVI, MOV or WMV files to the <code>videos/</code> or <code>uploads/videos/</code> directories to begin testing.</p>
                </div>
            <?php else: ?>
                <?php foreach ($allVideos as $index => $video): ?>
                    <?php
                        $relPath = str_replace('c:/xampp/htdocs/lms/', '', $video['path']);
                        $absUrl = '/lms/' . $relPath;
                        $ext = strtoupper(pathinfo($video['name'], PATHINFO_EXTENSION));
                        $mime = ($ext === 'MP4') ? 'video/mp4' : (($ext === 'WEBM') ? 'video/webm' : (($ext === 'OGG') ? 'video/ogg' : 'video/mp4'));
                    ?>
                    <div class="card video-card" id="video-<?php echo $index + 1; ?>">
                        <div class="card-title">▶ <?php echo htmlspecialchars($video['name'], ENT_QUOTES, 'UTF-8'); ?></div>
                        <div class="video-meta">
                            <span class="video-tag">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
                                <?php echo $video['dir']; ?>
                            </span>
                            <span class="video-tag">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                <?php echo formatBytes($video['size']); ?>
                            </span>
                            <span class="video-tag">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                <?php echo $ext; ?>
                            </span>
                        </div>
                        <div class="divider"></div>
                        <div class="video-player-wrap">
                            <video controls class="video-player" preload="metadata">
                                <source src="<?php echo htmlspecialchars($absUrl, ENT_QUOTES, 'UTF-8'); ?>" type="<?php echo $mime; ?>">
                                Your browser does not support video.
                            </video>
                        </div>
                        <p class="console-note">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                            Check the <strong>F12 Console / Network tab</strong> while playing — look for 404s, MIME type warnings, or range request failures.
                        </p>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </section>

    </div>
</div>

<script>
(function () {
    'use strict';

    var tocLinks = document.querySelectorAll('.video-toc-link');
    var videoCards = document.querySelectorAll('.video-card');
    if (!tocLinks.length || !videoCards.length) return;

    // Track the currently active link
    var activeLink = null;

    function setActive(link) {
        if (activeLink) {
            activeLink.classList.remove('active');
        }
        activeLink = link;
        if (activeLink) {
            activeLink.classList.add('active');
        }
    }

    // Click handler: highlight the clicked video link and scroll to it
    tocLinks.forEach(function (link) {
        link.addEventListener('click', function (e) {
            e.preventDefault();
            var targetId = link.getAttribute('data-video-id');
            var target = document.getElementById(targetId);
            if (target) {
                target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                setActive(link);
            }
        });
    });

    // Scroll handler: highlight the video currently in view
    function onScroll() {
        var scrollPos = window.scrollY + 120; // offset for fixed header
        var current = null;

        videoCards.forEach(function (card) {
            if (card.offsetTop <= scrollPos) {
                current = card;
            }
        });

        if (current) {
            var currentId = current.getAttribute('id');
            var matchingLink = document.querySelector('.video-toc-link[data-video-id="' + currentId + '"]');
            if (matchingLink && matchingLink !== activeLink) {
                setActive(matchingLink);
            }
        }
    }

    // Set the first video as active on page load
    setActive(tocLinks[0]);

    // Listen for scroll events
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
})();
</script>

<?php include 'includes/footer.php'; ?>