@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 --}}
        <a class="short-action-btn" href="{{ route('videos.show', $video) }}#comments">
            <div class="short-action-icon"><i class="bi bi-chat-fill"></i></div>
            <span class="short-action-label">{{ number_format($video->comments()->count()) }}</span>
        </a>

        {{-- 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

@endsection

@section('scripts')
<script>
(function () {
    const main   = document.getElementById('main');
    let muted    = false;
    let current  = -1;

    // ── 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;
                video.muted = muted;
                video.volume = 1;
                video.play().catch(() => {
                    // autoplay blocked — start muted then unmute
                    video.muted = true;
                    muted = true;
                    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;
        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);
        }
    });

    // ── 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
    };

    // ── 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