@extends('layouts.app')

@section('title', 'Shorts | ' . config('app.name'))

@section('main_class', 'shorts-view-page')

@section('extra_styles')
<style>
    /* ── Make yt-main a scroll-snap container ── */
    .yt-main.shorts-view-page {
        padding: 0 !important;
        scroll-snap-type: y mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .yt-main.shorts-view-page::-webkit-scrollbar { display: none; }

    /* ── Each short occupies the full visible height ── */
    .short-item {
        height: calc(100vh - 56px);   /* desktop: minus header */
        scroll-snap-align: start;
        scroll-snap-stop: always;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        position: relative;
    }

    @media (max-width: 768px) {
        .short-item {
            height: calc(100vh - 112px); /* mobile: minus header + bottom nav */
            gap: 0;
        }
    }

    /* ── Video wrapper — 9:16 centered ── */
    .short-player-wrap {
        position: relative;
        height: 92%;
        max-height: 780px;
        aspect-ratio: 9 / 16;
        border-radius: 14px;
        overflow: hidden;
        background: #000;
        flex-shrink: 0;
        cursor: pointer;
    }

    @media (max-width: 768px) {
        .short-player-wrap {
            height: 100%;
            max-height: unset;
            width: 100%;
            aspect-ratio: unset;
            border-radius: 0;
        }
    }

    .short-player-wrap video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* ── Tap-to-pause icon ── */
    .short-pause-icon {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        opacity: 0;
        transition: opacity .2s;
    }
    .short-pause-icon i {
        font-size: 64px;
        color: rgba(255,255,255,.85);
        filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
    }
    .short-player-wrap.paused .short-pause-icon { opacity: 1; }

    /* ── Info overlay at the bottom ── */
    .short-info-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 48px 14px 16px;
        background: linear-gradient(transparent, rgba(0,0,0,.72));
        pointer-events: none;
    }

    .short-channel-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
    }

    .short-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
        border: 1.5px solid rgba(255,255,255,.6);
        flex-shrink: 0;
    }

    .short-avatar-initial {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #e61e1e;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 700;
        flex-shrink: 0;
    }

    .short-channel-name {
        font-size: 13px;
        font-weight: 600;
        color: #fff;
        text-shadow: 0 1px 3px rgba(0,0,0,.5);
    }

    .short-title {
        font-size: 14px;
        font-weight: 500;
        color: #fff;
        margin: 0;
        text-shadow: 0 1px 3px rgba(0,0,0,.5);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.4;
    }

    .short-views {
        font-size: 12px;
        color: rgba(255,255,255,.75);
        margin-top: 4px;
    }

    /* ── Right-side action buttons ── */
    .short-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        flex-shrink: 0;
    }

    @media (max-width: 768px) {
        .short-actions {
            position: absolute;
            right: 10px;
            bottom: 80px;
            gap: 16px;
        }
    }

    .short-action-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        text-decoration: none;
        color: inherit;
    }

    .short-action-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(255,255,255,.12);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        color: #fff;
        transition: background .2s, transform .15s;
        backdrop-filter: blur(6px);
    }

    @media (min-width: 769px) {
        .short-action-icon {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }
    }

    .short-action-btn:hover .short-action-icon,
    .short-action-btn:active .short-action-icon {
        background: rgba(255,255,255,.25);
        transform: scale(1.08);
    }

    @media (min-width: 769px) {
        .short-action-btn:hover .short-action-icon {
            background: var(--border-color);
        }
    }

    .short-action-label {
        font-size: 12px;
        font-weight: 500;
        color: #fff;
    }

    @media (min-width: 769px) {
        .short-action-label { color: var(--text-secondary); }
    }

    .short-action-btn.liked .short-action-icon { background: rgba(230,30,30,.3); color: #e61e1e; }

    /* ── Up / Down nav arrows (desktop only) ── */
    .short-nav-arrows {
        position: absolute;
        right: calc(50% - 230px - 80px);
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    @media (max-width: 900px) { .short-nav-arrows { display: none; } }

    .short-nav-arrow {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        color: var(--text-primary);
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background .2s;
    }
    .short-nav-arrow:hover { background: var(--border-color); }

    /* ── Progress bar ── */
    .short-progress {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: rgba(255,255,255,.3);
        pointer-events: none;
    }
    .short-progress-fill {
        height: 100%;
        background: #fff;
        width: 0%;
        transition: width .1s linear;
    }

    /* ── Mute button ── */
    .short-mute-btn {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(0,0,0,.45);
        border: none;
        color: #fff;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 2;
        backdrop-filter: blur(4px);
        transition: background .2s;
    }
    .short-mute-btn:hover { background: rgba(0,0,0,.7); }

    /* ── Empty state ── */
    .shorts-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        gap: 16px;
        color: var(--text-secondary);
        text-align: center;
        padding: 32px;
    }
    .shorts-empty i { font-size: 64px; color: #ff0050; }
    .shorts-empty h2 { font-size: 22px; font-weight: 600; color: var(--text-primary); margin: 0; }
    .shorts-empty p  { margin: 0; }
</style>
@endsection

@section('content')

@forelse($videos as $video)
@php
    $src = asset('storage/videos/' . $video->filename);
    $thumb = $video->thumbnail_url;
    $user  = $video->user;
    $index = $loop->index;
@endphp

<div class="short-item" data-id="{{ $video->id }}" data-index="{{ $index }}">

    {{-- Up/Down nav (desktop) --}}
    <div class="short-nav-arrows">
        @if(!$loop->first)
        <button class="short-nav-arrow" onclick="navigateShort(-1, {{ $index }})">
            <i class="bi bi-chevron-up"></i>
        </button>
        @endif
        @if(!$loop->last)
        <button class="short-nav-arrow" onclick="navigateShort(1, {{ $index }})">
            <i class="bi bi-chevron-down"></i>
        </button>
        @endif
    </div>

    {{-- Video player --}}
    <div class="short-player-wrap" id="wrap-{{ $index }}" onclick="toggleShortPlay({{ $index }})">

        <video
            id="sv-{{ $index }}"
            src="{{ $src }}"
            poster="{{ $thumb }}"
            loop
            playsinline
            preload="{{ $loop->first ? 'auto' : 'none' }}"
            style="width:100%;height:100%;object-fit:cover;">
        </video>

        {{-- Pause icon --}}
        <div class="short-pause-icon"><i class="bi bi-pause-fill"></i></div>

        {{-- Info overlay --}}
        <div class="short-info-overlay">
            <div class="short-channel-row">
                @if($user && $user->avatar_url)
                    <img src="{{ $user->avatar_url }}" class="short-avatar" alt="{{ $user->name }}">
                @elseif($user)
                    <div class="short-avatar-initial">{{ substr($user->name, 0, 1) }}</div>
                @endif
                <span class="short-channel-name">{{ $user->name ?? '' }}</span>
            </div>
            <p class="short-title">{{ $video->title }}</p>
            <div class="short-views"><i class="bi bi-play-fill"></i> {{ number_format($video->view_count) }} views</div>
        </div>

        {{-- Mute button --}}
        <button class="short-mute-btn" id="mute-{{ $index }}" onclick="event.stopPropagation(); toggleMute({{ $index }})">
            <i class="bi bi-volume-up-fill" id="mute-icon-{{ $index }}"></i>
        </button>

        {{-- Progress bar --}}
        <div class="short-progress">
            <div class="short-progress-fill" id="prog-{{ $index }}"></div>
        </div>
    </div>

    {{-- Action buttons --}}
    <div class="short-actions">
        {{-- Like --}}
        @php $vKey = $video->getRouteKey(); @endphp
        <button class="short-action-btn" id="like-btn-{{ $vKey }}" onclick="shortLike('{{ $vKey }}')">
            <div class="short-action-icon"><i class="bi bi-heart{{ $video->isLikedBy(auth()->user()) ? '-fill' : '' }}" id="like-icon-{{ $vKey }}"></i></div>
            <span class="short-action-label" id="like-count-{{ $vKey }}">{{ number_format($video->like_count) }}</span>
        </button>

        {{-- Comments — opens the side panel on desktop, bottom sheet on
             mobile (CSS does the breakpoint; the button toggles a shared
             .shorts-comments-pane element populated via fetch). --}}
        <button type="button" class="short-action-btn"
                onclick="shortOpenComments('{{ $video->getRouteKey() }}')">
            <div class="short-action-icon"><i class="bi bi-chat-fill" aria-hidden="true"></i></div>
            <span class="short-action-label">{{ number_format($video->comments()->count()) }}</span>
        </button>

        {{-- Share --}}
        <button class="short-action-btn" onclick="shortShare('{{ $vKey }}', {{ json_encode($video->title) }})">
            <div class="short-action-icon"><i class="bi bi-share-fill"></i></div>
            <span class="short-action-label">Share</span>
        </button>

        {{-- Open full page --}}
        <a class="short-action-btn" href="{{ route('videos.show', $video) }}">
            <div class="short-action-icon"><i class="bi bi-box-arrow-up-right"></i></div>
            <span class="short-action-label">Open</span>
        </a>
    </div>

</div>
@empty

<div class="shorts-empty">
    <i class="bi bi-collection-play"></i>
    <h2>No Shorts yet</h2>
    <p>Shorts are vertical videos under 60 seconds.</p>
    @auth
        <a href="{{ route('videos.create') }}" class="action-btn action-btn-primary">
            <i class="bi bi-plus-lg"></i> <span>Upload Short</span>
        </a>
    @else
        <a href="{{ route('login') }}" class="action-btn action-btn-primary">
            <i class="bi bi-box-arrow-in-right"></i> <span>Login to Upload</span>
        </a>
    @endauth
</div>

@endforelse

{{-- Shared comments pane: side drawer on desktop, bottom sheet on mobile.
     Populated via fetch of the regular watch page's #ytcSection block so
     all the comment features (likes, replies, translate, heart/pin) work
     identically. --}}
<div id="shortsCommentsPane" class="shorts-comments-pane" aria-hidden="true">
    <div class="shorts-comments-head">
        <span>Comments</span>
        <button type="button" class="shorts-comments-close" onclick="shortCloseComments()" aria-label="Close comments">
            <i class="bi bi-x-lg" aria-hidden="true"></i>
        </button>
    </div>
    <div class="shorts-comments-body" id="shortsCommentsBody">
        <div class="shorts-comments-loading">Loading…</div>
    </div>
</div>
<div id="shortsCommentsBackdrop" class="shorts-comments-backdrop" onclick="shortCloseComments()"></div>

<style>
    .shorts-comments-backdrop {
        position: fixed; inset: 0; background: rgba(0,0,0,.45);
        z-index: 59; display: none;
    }
    .shorts-comments-backdrop.visible { display: block; }
    .shorts-comments-pane {
        position: fixed;
        right: 0; top: 56px; bottom: 0; width: 420px;
        background: var(--bg-dark); color: var(--text-primary);
        box-shadow: -4px 0 24px rgba(0,0,0,.4);
        z-index: 60; display: none; flex-direction: column;
        border-left: 1px solid var(--border-color);
    }
    .shorts-comments-pane.visible { display: flex; }
    .shorts-comments-head {
        display: flex; justify-content: space-between; align-items: center;
        padding: 12px 16px; border-bottom: 1px solid var(--border-color);
        font-size: 15px; font-weight: 600;
    }
    .shorts-comments-close {
        background: none; border: none; color: var(--text-primary);
        cursor: pointer; font-size: 16px; padding: 6px;
        border-radius: 6px;
    }
    .shorts-comments-close:hover { background: rgba(255,255,255,.08); }
    .shorts-comments-body {
        flex: 1; overflow-y: auto; padding: 12px 16px;
    }
    .shorts-comments-loading {
        text-align: center; padding: 40px 16px; color: var(--text-secondary);
    }

    /* Mobile: bottom sheet instead of right drawer. */
    @media (max-width: 768px) {
        .shorts-comments-pane {
            left: 0; right: 0; top: auto; bottom: 56px;
            width: 100%; height: 70vh;
            border-left: none; border-top: 1px solid var(--border-color);
            border-radius: 16px 16px 0 0;
            box-shadow: 0 -4px 24px rgba(0,0,0,.4);
        }
    }
</style>

@endsection

@section('scripts')
<script>
(function () {
    const main   = document.getElementById('main');
    // Persist the mute state across sessions. Default to muted so autoplay
    // policies don't silently fail on first load; the user can unmute once
    // and we remember it from then on.
    let muted    = (localStorage.getItem('shortsMuted') ?? '1') === '1';
    let current  = -1;

    // ── Deep-link to /shorts/{id} — scroll the matching item into view
    //    before the observer starts, so autoplay fires on the target short
    //    rather than the first in document order. ────────────────────
    @if($startId)
    (function () {
        const target = document.querySelector('.short-item[data-id="{{ (int) $startId }}"]');
        if (target) target.scrollIntoView({ behavior: 'instant' in window ? 'instant' : 'auto', block: 'start' });
    })();
    @endif

    // ── IntersectionObserver — auto-play visible short ─────────
    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            const item  = entry.target;
            const idx   = parseInt(item.dataset.index);
            const video = document.getElementById('sv-' + idx);
            if (!video) return;

            if (entry.isIntersecting && entry.intersectionRatio >= 0.6) {
                if (current !== -1 && current !== idx) pauseShort(current);
                current = idx;

                // ── Reflect the active short in the URL (no history entry) ──
                // Users can copy-paste the address bar and get back here; the
                // back button still exits the feed instead of walking through
                // every short they viewed.
                try {
                    const vid = item.dataset.id;
                    if (vid) history.replaceState(null, '', '/shorts/' + vid);
                } catch (_) {}

                video.muted  = muted;
                video.volume = 1;
                video.play().catch(() => {
                    // autoplay blocked — fall back to muted
                    video.muted = true;
                    muted = true;
                    localStorage.setItem('shortsMuted', '1');
                    updateMuteIcon(idx);
                    video.play().catch(() => {});
                });
                document.getElementById('wrap-' + idx).classList.remove('paused');
            } else {
                pauseShort(idx);
            }
        });
    }, { root: main, threshold: 0.6 });

    document.querySelectorAll('.short-item').forEach(el => observer.observe(el));

    // ── Play / pause on tap ────────────────────────────────────
    window.toggleShortPlay = function(idx) {
        const video = document.getElementById('sv-' + idx);
        const wrap  = document.getElementById('wrap-' + idx);
        if (!video) return;
        if (video.paused) {
            video.play().catch(() => {});
            wrap.classList.remove('paused');
        } else {
            video.pause();
            wrap.classList.add('paused');
        }
    };

    function pauseShort(idx) {
        const video = document.getElementById('sv-' + idx);
        const wrap  = document.getElementById('wrap-' + idx);
        if (video) { video.pause(); video.currentTime = 0; }
        if (wrap)  wrap.classList.remove('paused');
        const prog = document.getElementById('prog-' + idx);
        if (prog)  prog.style.width = '0%';
    }

    // ── Progress bars ──────────────────────────────────────────
    document.querySelectorAll('.short-item video').forEach(video => {
        const idx  = video.id.replace('sv-', '');
        video.addEventListener('timeupdate', () => {
            if (!video.duration) return;
            const prog = document.getElementById('prog-' + idx);
            if (prog) prog.style.width = ((video.currentTime / video.duration) * 100) + '%';
        });
    });

    // ── Mute toggle ────────────────────────────────────────────
    window.toggleMute = function(idx) {
        muted = !muted;
        localStorage.setItem('shortsMuted', muted ? '1' : '0');
        const video = document.getElementById('sv-' + idx);
        if (video) video.muted = muted;
        updateMuteIcon(idx);
    };

    function updateMuteIcon(idx) {
        const icon = document.getElementById('mute-icon-' + idx);
        if (icon) icon.className = muted ? 'bi bi-volume-mute-fill' : 'bi bi-volume-up-fill';
    }

    // ── Desktop nav arrows ─────────────────────────────────────
    window.navigateShort = function(dir, fromIndex) {
        const target = document.querySelector('.short-item[data-index="' + (fromIndex + dir) + '"]');
        if (target) target.scrollIntoView({ behavior: 'smooth' });
    };

    // ── Keyboard nav ───────────────────────────────────────────
    document.addEventListener('keydown', e => {
        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
            e.preventDefault();
            const dir = e.key === 'ArrowDown' ? 1 : -1;
            if (current !== -1) navigateShort(dir, current);
        }
        if (e.key === 'm' || e.key === 'M') {
            if (current !== -1) toggleMute(current);
        }
    });

    // ── Mouse wheel nav (desktop) ──────────────────────────────
    // One wheel event = one short, debounced so a trackpad flick doesn't
    // skip five shorts at once. The main scroll container's own snap would
    // nearly handle this, but a slow scroll leaves the feed mid-snap on
    // some browsers — this makes the step explicit and symmetrical.
    let wheelLock = false;
    main?.addEventListener('wheel', (e) => {
        if (wheelLock) { e.preventDefault(); return; }
        if (Math.abs(e.deltaY) < 10) return; // ignore tiny jogs
        wheelLock = true;
        setTimeout(() => { wheelLock = false; }, 450);
        e.preventDefault();
        const dir = e.deltaY > 0 ? 1 : -1;
        if (current !== -1) navigateShort(dir, current);
    }, { passive: false });

    // ── Like ───────────────────────────────────────────────────
    window.shortLike = function(videoId) {
        @auth
        fetch('/videos/' + videoId + '/toggle-like', {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' }
        })
        .then(r => r.json())
        .then(data => {
            const btn   = document.getElementById('like-btn-' + videoId);
            const icon  = document.getElementById('like-icon-' + videoId);
            const count = document.getElementById('like-count-' + videoId);
            if (data.liked !== undefined) {
                icon.className = data.liked ? 'bi bi-heart-fill' : 'bi bi-heart';
                btn.classList.toggle('liked', data.liked);
            }
            if (data.like_count !== undefined) count.textContent = Number(data.like_count).toLocaleString();
        })
        .catch(() => {});
        @else
        window.location.href = '{{ route("login") }}';
        @endauth
    };

    // ── Comments pane ──────────────────────────────────────
    window.shortOpenComments = function(videoKey) {
        const pane     = document.getElementById('shortsCommentsPane');
        const backdrop = document.getElementById('shortsCommentsBackdrop');
        const body     = document.getElementById('shortsCommentsBody');
        if (!pane || !body) return;
        body.innerHTML = '<div class="shorts-comments-loading">Loading…</div>';
        pane.classList.add('visible');
        pane.setAttribute('aria-hidden', 'false');
        backdrop?.classList.add('visible');
        fetch('/videos/' + videoKey, {
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            credentials: 'same-origin'
        })
        .then(r => r.text())
        .then(html => {
            const doc = new DOMParser().parseFromString(html, 'text/html');
            const section = doc.getElementById('ytcSection');
            if (section) { body.innerHTML = ''; body.appendChild(section); }
            else         { body.innerHTML = '<div class="shorts-comments-loading">Comments unavailable.</div>'; }
        })
        .catch(() => { body.innerHTML = '<div class="shorts-comments-loading">Could not load comments.</div>'; });
    };
    window.shortCloseComments = function() {
        const pane     = document.getElementById('shortsCommentsPane');
        const backdrop = document.getElementById('shortsCommentsBackdrop');
        pane?.classList.remove('visible');
        pane?.setAttribute('aria-hidden', 'true');
        backdrop?.classList.remove('visible');
    };

    // ── Share ──────────────────────────────────────────────────
    window.shortShare = function(videoKey, title) {
        const url = window.location.origin + '/videos/' + videoKey;
        if (navigator.share) {
            navigator.share({ title: title, url: url }).catch(() => {});
        } else if (typeof openShareModal === 'function') {
            openShareModal(url, title);
        } else {
            navigator.clipboard.writeText(url).then(() => {
                if (typeof showToast === 'function') showToast('Link copied!', 'success');
            }).catch(() => {});
        }
    };
})();
</script>
@endsection