@extends('layouts.app')

@push('head')
    <!-- Open Graph / WhatsApp / Facebook / Twitter / LinkedIn / Telegram Preview -->
    <meta property="og:title" content="{{ $video->title }}">
    <meta property="og:description"
        content="{{ $video->description ? Str::limit($video->description, 200) : 'Watch ' . $video->title . ' on ' . config('app.name') }}">
    <meta property="og:image" content="{{ $video->open_graph_image }}">
    <meta property="og:image:width" content="{{ $video->thumbnail_width }}">
    <meta property="og:image:height" content="{{ $video->thumbnail_height }}">
    <meta property="og:image:alt" content="{{ $video->title }} - Video Thumbnail">
    <meta property="og:url" content="{{ $video->share_url }}">
    <meta property="og:type" content="video.other">
    <meta property="og:site_name" content="{{ config('app.name') }}">
    <meta property="og:locale" content="en_US">
    <meta property="og:author" content="{{ $video->author_name }}">
    <meta property="og:published_time" content="{{ $video->created_at->toIso8601String() }}">

    <!-- Video-specific Open Graph tags -->
    <meta property="video:duration" content="{{ $video->duration }}">
    <meta property="video:release_date" content="{{ $video->created_at->toIso8601String() }}">

    <!-- Alternative video tag for some platforms -->
    <meta property="og:video" content="{{ $video->stream_url }}">
    <meta property="og:video:url" content="{{ $video->stream_url }}">
    <meta property="og:video:secure_url" content="{{ $video->stream_url }}">
    <meta property="og:video:type" content="video/mp4">
    <meta property="og:video:width" content="{{ $video->width ?? 1920 }}">
    <meta property="og:video:height" content="{{ $video->height ?? 1080 }}">

    <!-- Twitter Card - Enhanced for video sharing -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="{{ config('app.name') }}">
    <meta name="twitter:creator" content="{{ $video->author_name }}">
    <meta name="twitter:title" content="{{ $video->title }}">
    <meta name="twitter:description"
        content="{{ $video->description ? Str::limit($video->description, 200) : 'Watch ' . $video->title . ' on ' . config('app.name') }}">
    <meta name="twitter:image" content="{{ $video->open_graph_image }}">
    <meta name="twitter:image:alt" content="{{ $video->title }} - Video Thumbnail">

    <!-- Twitter Player card for video -->
    <meta name="twitter:player" content="{{ $video->share_url }}">
    <meta name="twitter:player:width" content="{{ $video->width ?? 1920 }}">
    <meta name="twitter:player:height" content="{{ $video->height ?? 1080 }}">
    <meta name="twitter:player:stream" content="{{ $video->stream_url }}">

    <!-- LinkedIn specific -->
    <meta property="linkedin:owner" content="{{ $video->author_name }}">

    <!-- Pinterest -->
    <meta name="pinterest-rich-pin" content="true">

    <!-- WhatsApp specific (uses Open Graph) -->
    <!-- No additional meta needed - uses og: tags above -->

    <!-- Schema.org VideoObject for search engines -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "VideoObject",
        "name": "{{ $video->title }}",
        "description": "{{ $video->description ? addslashes($video->description) : 'Watch ' . addslashes($video->title) . ' on ' . config('app.name') }}",
        "thumbnailUrl": "{{ $video->open_graph_image }}",
        "uploadDate": "{{ $video->created_at->toIso8601String() }}",
        "duration": "{{ $video->iso_duration }}",
        "contentUrl": "{{ $video->stream_url }}",
        "embedUrl": "{{ $video->share_url }}",
        "author": {
            "@type": "Person",
            "name": "{{ $video->author_name }}"
        },
        "publisher": {
            "@type": "Organization",
            "name": "{{ config('app.name') }}",
            "logo": {
                "@type": "ImageObject",
                "url": "{{ asset('storage/images/fullLogo.png') }}"
            }
        },
        "interactionStatistic": [
            {
                "@type": "InteractionCounter",
                "interactionType": "https://schema.org/WatchAction",
                "userInteractionCount": {{ $video->view_count }}
            },
            {
                "@type": "InteractionCounter",
                "interactionType": "https://schema.org/LikeAction",
                "userInteractionCount": {{ $video->like_count }}
            }
        ]
    }
    </script>
@endpush

@section('title', $video->title . ' | ' . config('app.name'))

@section('extra_styles')
    <style>
        /* Video Section */
        .yt-video-section {
            flex: 1;
            min-width: 0;
        }

        /* Video Player */
        .video-container {
            position: relative;
            aspect-ratio: 16/9;
            background: #000;
            border-radius: 12px;
            overflow: hidden;
            max-height: 70vh;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
        }

        .video-container.portrait,
        .video-container.square,
        .video-container.ultrawide {
            margin: 0 auto;
            width: auto;
        }

        .video-container.portrait {
            aspect-ratio: 9/16;
            max-width: 50vh;
        }

        .video-container.square {
            aspect-ratio: 1/1;
            max-width: 70vh;
        }

        .video-container.ultrawide {
            aspect-ratio: 21/9;
            max-width: 100%;
        }

        .video-container video {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* Video Info */
        .video-title {
            font-size: 20px;
            font-weight: 500;
            margin: 16px 0 8px;
            line-height: 1.3;
        }

        .video-stats-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border-color);
            flex-wrap: wrap;
            gap: 12px;
        }

        .video-stats-left {
            display: flex;
            align-items: center;
            gap: 16px;
            color: var(--text-secondary);
        }

        .video-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .yt-action-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            border-radius: 20px;
            border: none;
            background: var(--bg-secondary);
            color: var(--text-primary);
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
        }

        .yt-action-btn:hover {
            background: var(--border-color);
        }

        .yt-action-btn.liked {
            color: var(--brand-red);
        }

        /* Channel Row */
        .channel-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 0;
        }

        .channel-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .channel-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #555;
        }

        .channel-name {
            font-size: 16px;
            font-weight: 500;
        }

        .channel-subs {
            font-size: 14px;
            color: var(--text-secondary);
        }

        .subscribe-btn {
            background: white;
            color: black;
            border: none;
            padding: 8px 16px;
            border-radius: 18px;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            white-space: nowrap;
        }

        /* Description */
        .video-description {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 16px;
            margin-top: 16px;
        }

        .description-text {
            white-space: pre-wrap;
            font-size: 14px;
            line-height: 1.5;
        }

        /* Sidebar */
        .yt-sidebar-container {
            width: 400px;
            flex-shrink: 0;
        }

        .sidebar-video-card {
            display: flex;
            gap: 8px;
            margin-bottom: 8px;
            cursor: pointer;
        }

        .sidebar-thumb {
            width: 168px;
            aspect-ratio: 16/9;
            border-radius: 8px;
            overflow: hidden;
            background: #1a1a1a;
            flex-shrink: 0;
        }

        .sidebar-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .sidebar-info {
            flex: 1;
            min-width: 0;
        }

        .sidebar-title {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 4px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .sidebar-meta {
            font-size: 12px;
            color: var(--text-secondary);
        }

        /* Responsive */
        @media (max-width: 1300px) {
            .yt-sidebar-container {
                width: 300px;
            }
        }

        @media (max-width: 991px) {
            .yt-main {
                margin-left: 0;
                flex-direction: column;
            }

            .yt-sidebar-container {
                width: 100%;
            }


            .sidebar-video-card {
                flex-direction: column;
            }

            .sidebar-thumb {
                width: 100%;
            }

            /* Video Layout Container - Stack vertically on tablet/mobile */
            .video-layout-container {
                flex-direction: column !important;
            }

            .yt-video-section {
                width: 100% !important;
                flex: none !important;
            }

            .yt-sidebar-container {
                width: 100% !important;
                margin-top: 16px;
            }
        }

        @media (max-width: 576px) {
            .video-stats-row {
                flex-direction: column;
                align-items: flex-start;
            }

            .video-actions {
                width: 100%;
                overflow-x: auto;
                justify-content: flex-start;
            }

            .yt-main {
                padding: 0 !important;
                max-width: 100% !important;
                margin: 0 !important;
            }

            /* Mobile video player fixes - always full width */
            .video-layout-container {
                max-width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
                width: 100% !important;
            }

            .yt-video-section {
                width: 100% !important;
                max-width: 100% !important;
                padding: 0 !important;
                margin: 0 !important;
            }

            .video-container {
                width: 100% !important;
                max-width: 100% !important;
                max-height: 50vh !important;
                margin: 0 !important;
                padding: 0 !important;
                border-radius: 0 !important;
            }

            .video-container video {
                width: 100% !important;
                max-width: 100% !important;
                object-fit: contain !important;
            }

            .video-title {
                font-size: 16px !important;
                margin: 12px 0 6px !important;
            }

            .channel-row {
                flex-direction: column;
                align-items: flex-start !important;
                gap: 12px;
            }

            .channel-info {
                width: 100%;
            }

            .subscribe-btn {
                width: 100%;
            }

            .video-description {
                padding: 12px !important;
            }
        }
    </style>
@endsection

@section('content')

    <!-- Video Layout Container -->
    <div class="video-layout-container" style="display: flex; gap: 24px; max-width: 1800px; margin: 0 auto;">

        <!-- Video Section -->
        <div class="yt-video-section">
            <!-- Video Player -->
            <div class="video-container @if ($video->orientation === 'portrait') portrait @elseif($video->orientation === 'square') square @elseif($video->orientation === 'ultrawide') ultrawide @endif"
                id="videoContainer">
                <video id="videoPlayer" controls playsinline preload="metadata" autoplay>
                    <source src="{{ route('videos.stream', $video->id) }}" type="video/mp4">
                </video>
            </div>

            @php
                $typeIcon = match ($video->type) {
                    'music' => 'bi-music-note',
                    'match' => 'bi-trophy',
                    default => 'bi-film',
                };
            @endphp

            <!-- Video Title with Type Icon -->
            <h1 class="video-title" style="display: flex; align-items: center; gap: 10px;">
                <i class="bi {{ $typeIcon }}" style="color: #ef4444;"></i>
                <span>{{ $video->title }}</span>
            </h1>

            <!-- Stats Row -->
            <div class="video-stats-row">
                <div class="video-stats-left">
                    <span>{{ number_format($video->view_count) }} views</span>
                    <span>•</span>
                    <span>{{ $video->created_at->format('M d, Y') }}</span>
                </div>
                <div class="video-actions">
                    @auth
                        <!-- Like Button -->
                        <form method="POST"
                            action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video->id) : route('videos.like', $video->id) }}"
                            class="d-inline">
                            @csrf
                            <button type="submit" class="yt-action-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}">
                                <i
                                    class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
                                {{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}
                            </button>
                        </form>

                        <!-- Edit Button - Only for video owner -->
                        @if (Auth::id() === $video->user_id)
                            <button class="yt-action-btn" onclick="openEditVideoModal({{ $video->id }})">
                                <i class="bi bi-pencil"></i> Edit
                            </button>
                        @endif
                    @else
                        <a href="{{ route('login') }}" class="yt-action-btn">
                            <i class="bi bi-hand-thumbs-up"></i> Like
                        </a>
                    @endauth
                    @if ($video->isShareable())
                        <button class="yt-action-btn"
                            onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')"><i
                                class="bi bi-share"></i> Share</button>
                    @endif

                    <!-- Save to Playlist Button -->
                    <button class="yt-action-btn" onclick="openAddToPlaylistModal({{ $video->id }})">
                        <i class="bi bi-collection-plus"></i> Save
                    </button>
                    @auth
                        <!-- Quick Watch Later Button -->
                        <form method="POST" action="{{ route('videos.watchLater', $video->id) }}" class="d-inline"
                            style="display: inline;">
                            @csrf
                            <button type="submit" class="yt-action-btn" title="Watch Later">
                                <i class="bi bi-clock"></i>
                            </button>
                        </form>
                    @endauth
                </div>
            </div>

            <!-- Channel Row -->
            <div class="channel-row"
                style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;">
                <div style="display: flex; align-items: center; gap: 12px;">
                    <a href="{{ route('channel', $video->user_id) }}" class="channel-info text-decoration-none"
                        style="color: inherit; display: flex; align-items: center; gap: 12px;">
                        @if ($video->user)
                            <img src="{{ $video->user->avatar_url }}" class="channel-avatar"
                                style="width: 36px; height: 36px;" alt="{{ $video->user->name }}">
                        @else
                            <div class="channel-avatar" style="width: 36px; height: 36px;"></div>
                        @endif
                        <div>
                            <div class="channel-name">{{ $video->user->name ?? 'Unknown' }}</div>
                            <div class="channel-subs">{{ number_format($video->user->subscriber_count ?? 0) }} subscribers
                            </div>
                        </div>
                    </a>

                    {{-- Subscribe Button --}}
                    @auth
                        @if (Auth::id() !== $video->user_id)
                            <button class="subscribe-btn">Subscribe</button>
                        @endif
                    @else
                        <a href="{{ route('login') }}" class="subscribe-btn">Subscribe</a>
                    @endauth
                </div>
            </div>

            <!-- Description -->
            @if ($video->description)
                @php
                    $fullDescription = $video->description;
                    $shortDescription = Str::limit($fullDescription, 200);
                    $needsExpand = strlen($fullDescription) > 200;
                @endphp

                <div class="video-description-box"
                    style="background: var(--bg-secondary); border-radius: 12px; padding: 12px; margin-top: 12px;">
                    <div class="description-stats" style="font-size: 14px; font-weight: 500; margin-bottom: 8px;">
                        <span>{{ number_format($video->view_count) }} views</span>
                        <span>•</span>
                        <span>{{ $video->created_at->format('M d, Y') }}</span>
                    </div>
                    <div style="border-bottom: 1px solid var(--border-color); margin: 8px 0;"></div>
                    <div class="description-content">
                        @if ($needsExpand)
                            <div class="description-short">
                                <span class="description-text">{!! Str::markdown($shortDescription) !!}</span>
                                <span style="color: var(--text-secondary);">... </span>
                            </div>
                            <div class="description-full" style="display: none;">
                                <span class="description-text">{!! Str::markdown($fullDescription) !!}</span>
                            </div>
                            <button onclick="toggleDescription()"
                                style="background: none; border: none; color: var(--text-primary); font-weight: 600; font-size: 14px; cursor: pointer; padding: 0; margin-top: 4px;">Show
                                more</button>
                        @else
                            <span class="description-text">{!! Str::markdown($fullDescription) !!}</span>
                        @endif
                    </div>
                </div>

                <script>
                    function toggleDescription() {
                        const short = document.querySelector('.description-short');
                        const full = document.querySelector('.description-full');
                        const btn = document.querySelector('.video-description-box button');
                        if (short.style.display !== 'none') {
                            short.style.display = 'none';
                            full.style.display = 'block';
                            btn.textContent = 'Show less';
                        } else {
                            short.style.display = 'block';
                            full.style.display = 'none';
                            btn.textContent = 'Show more';
                        }
                    }
                </script>

                <style>
                    .video-description-box .description-text {
                        font-size: 14px;
                        line-height: 1.5;
                        color: var(--text-primary);
                    }

                    .video-description-box .description-text p {
                        margin-bottom: 8px;
                    }

                    .video-description-box .description-text a {
                        color: #3ea6ff;
                    }
                </style>
            @endif

            <!-- Comments Section -->
            <div class="comments-section"
                style="margin-top: 24px; padding-top: 16: 1px solid var(--borderpx; border-top-color);">
                <h3 style="font-size: 18px; font-weight: 600; margin-bottom: 16px;">
                    Comments <span
                        style="color: var(--text-secondary); font-weight: 400;">({{ $video->comment_count }})</span>
                </h3>

                @auth
                    <div class="comment-form" style="display: flex; gap: 12px; margin-bottom: 24px;">
                        <img src="{{ Auth::user()->avatar_url }}" class="channel-avatar" style="width: 40px; height: 40px;"
                            alt="{{ Auth::user()->name }}">
                        <div style="flex: 1;">
                            <textarea id="commentBody" class="form-control" placeholder="Add a comment... Use @ to mention someone"
                                rows="3"
                                style="background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 8px; padding: 12px; width: 100%; resize: none;"></textarea>
                            <div style="display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end;">
                                <button type="button" class="yt-action-btn"
                                    onclick="document.getElementById('commentBody').value = ''">Cancel</button>
                                <button type="button" class="yt-action-btn"
                                    style="background: var(--brand-red); color: white;"
                                    onclick="submitComment({{ $video->id }})">Comment</button>
                            </div>
                        </div>
                    </div>
                @else
                    <div
                        style="margin-bottom: 24px; padding: 16px; background: var(--bg-secondary); border-radius: 8px; text-align: center;">
                        <a href="{{ route('login') }}" style="color: var(--brand-red);">Sign in</a> to comment
                    </div>
                @endauth

                <div id="commentsList">
                    @forelse($video->comments()->whereNull('parent_id')->with('user', 'replies.user')->latest()->get() as $comment)
                        @include('videos.partials.comment', ['comment' => $comment])
                    @empty
                        <p style="color: var(--text-secondary); text-align: center; padding: 20px;">No comments yet. Be the
                            first to comment!</p>
                    @endforelse
                </div>
            </div>

            <script>
                function submitComment(videoId) {
                    const body = document.getElementById('commentBody').value.trim();
                    if (!body) return;
                    fetch(`/videos/${videoId}/comments`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            body: body
                        })
                    }).then(r => r.json()).then(data => {
                        if (data.success) {
                            document.getElementById('commentBody').value = '';
                            location.reload();
                        }
                    });
                }

                function deleteComment(commentId) {
                    if (!confirm('Delete this comment?')) return;
                    fetch(`/comments/${commentId}`, {
                            method: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            }
                        })
                        .then(r => r.json()).then(data => {
                            if (data.success) location.reload();
                        });
                }
                document.addEventListener('DOMContentLoaded', function() {
                    document.querySelectorAll('.comment-body').forEach(text => {
                        text.innerHTML = text.innerHTML.replace(/@(\w+)/g,
                            '<span style="color: #3ea6ff; font-weight: 500;">@$1</span>');
                    });
                });

                function submitReply(videoId, parentId) {
                    const textarea = document.querySelector(`#replyForm${parentId} textarea`);
                    const body = textarea.value.trim();
                    if (!body) return;
                    fetch(`/videos/${videoId}/comments`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            body: body,
                            parent_id: parentId
                        })
                    }).then(r => r.json()).then(data => {
                        if (data.success) location.reload();
                    });
                }
            </script>
        </div>

        <!-- Sidebar - Up Next / Recommendations -->
        <div class="yt-sidebar-container">
            @if ($playlist && $playlistVideos && $playlistVideos->count() > 0)
                <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">
                    <i class="bi bi-collection-play" style="margin-right: 8px;"></i>
                    {{ $playlist->name }}
                    <span
                        style="font-weight: 400; color: var(--text-secondary); font-size: 14px;">({{ $playlistVideos->count() }}
                        videos)</span>
                </h3>
                <div class="recommended-videos-list">
                    @foreach ($playlistVideos as $index => $playlistVideo)
                        @if ($playlistVideo->id !== $video->id)
                            <div class="sidebar-video-card{{ $playlistVideo->id === $video->id ? ' current-video' : '' }}"
                                onclick="window.location.href='{{ route('videos.show', $playlistVideo->id) }}?playlist={{ $playlist->id }}'">
                                <div class="sidebar-thumb" style="position: relative;">
                                    @if ($playlistVideo->thumbnail)
                                        <img src="{{ asset('storage/thumbnails/' . $playlistVideo->thumbnail) }}"
                                            alt="{{ $playlistVideo->title }}">
                                    @else
                                        <img src="https://picsum.photos/seed/{{ $playlistVideo->id }}/320/180"
                                            alt="{{ $playlistVideo->title }}">
                                    @endif
                                    @if ($playlistVideo->duration)
                                        <span
                                            class="yt-video-duration">{{ gmdate('i:s', $playlistVideo->duration) }}</span>
                                    @endif
                                    @if ($playlistVideo->is_shorts)
                                        <span class="yt-shorts-badge"
                                            style="position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 6px;">
                                            <i class="bi bi-collection-play-fill"></i> SHORTS
                                        </span>
                                    @endif
                                    <!-- Playlist position indicator -->
                                    <span
                                        style="position: absolute; bottom: 4px; left: 4px; background: rgba(0,0,0,0.8); color: white; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: 500;">
                                        {{ $index + 1 }}
                                    </span>
                                </div>
                                <div class="sidebar-info">
                                    <div class="sidebar-title">
                                        <i class="bi {{ match ($playlistVideo->type) {'music' => 'bi-music-note','match' => 'bi-trophy',default => 'bi-film'} }}"
                                            style="color: #ef4444; margin-right: 4px; font-size: 12px;"></i>
                                        {{ Str::limit($playlistVideo->title, 60) }}
                                    </div>
                                    <div class="sidebar-meta">
                                        <div>{{ $playlistVideo->user->name ?? 'Unknown' }}</div>
                                        <div>{{ number_format($playlistVideo->view_count) }} views •
                                            {{ $playlistVideo->created_at->diffForHumans() }}</div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
                @if ($playlist->canEdit(Auth::user()))
                    <a href="{{ route('playlists.show', $playlist->id) }}" class="yt-action-btn"
                        style="margin-top: 12px; display: inline-block;">
                        <i class="bi bi-pencil"></i> Edit Playlist
                    </a>
                @endif
            @else
                <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">Up Next</h3>
                @if ($recommendedVideos && $recommendedVideos->count() > 0)
                    <div class="recommended-videos-list">
                        @foreach ($recommendedVideos as $recVideo)
                            <div class="sidebar-video-card"
                                onclick="window.location.href='{{ route('videos.show', $recVideo->id) }}'">
                                <div class="sidebar-thumb">
                                    @if ($recVideo->thumbnail)
                                        <img src="{{ asset('storage/thumbnails/' . $recVideo->thumbnail) }}"
                                            alt="{{ $recVideo->title }}">
                                    @else
                                        <img src="https://picsum.photos/seed/{{ $recVideo->id }}/320/180"
                                            alt="{{ $recVideo->title }}">
                                    @endif
                                    @if ($recVideo->duration)
                                        <span class="yt-video-duration">{{ gmdate('i:s', $recVideo->duration) }}</span>
                                    @endif
                                    @if ($recVideo->is_shorts)
                                        <span class="yt-shorts-badge"
                                            style="position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 6px;">
                                            <i class="bi bi-collection-play-fill"></i> SHORTS
                                        </span>
                                    @endif
                                </div>
                                <div class="sidebar-info">
                                    <div class="sidebar-title">
                                        <i class="bi {{ match ($recVideo->type) {'music' => 'bi-music-note','match' => 'bi-trophy',default => 'bi-film'} }}"
                                            style="color: #ef4444; margin-right: 4px; font-size: 12px;"></i>
                                        {{ Str::limit($recVideo->title, 60) }}
                                    </div>
                                    <div class="sidebar-meta">
                                        <div>{{ $recVideo->user->name ?? 'Unknown' }}</div>
                                        <div>{{ number_format($recVideo->view_count) }} views •
                                            {{ $recVideo->created_at->diffForHumans() }}</div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-secondary">No recommendations available yet. Check back later!</div>
                @endif
            @endif
        </div>

    </div>


    <!-- Mobile Bottom Action Bar -->
    <div class="mobile-bottom-bar">
        @auth
            <form method="POST"
                action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video->id) : route('videos.like', $video->id) }}"
                class="d-inline" style="flex:1;">
                @csrf
                <button type="submit" class="yt-action-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}"
                    style="width:100%;">
                    <i class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
                    <span>{{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}</span>
                </button>
            </form>
        @else
            <a href="{{ route('login') }}" class="yt-action-btn" style="flex:1;text-align:center;">
                <i class="bi bi-hand-thumbs-up"></i><span>Like</span>
            </a>
        @endauth

        @if ($video->isShareable())
            <button class="yt-action-btn"
                onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')" style="flex:1;">
                <i class="bi bi-share"></i><span>Share</span>
            </button>
        @endif

        <button class="yt-action-btn" onclick="openAddToPlaylistModal({{ $video->id }})" style="flex:1;">
            <i class="bi bi-collection-plus"></i><span>Save</span>
        </button>

        @auth
            @if (Auth::id() !== $video->user_id)
                <button class="yt-action-btn" style="flex:1;background:var(--brand-red);color:white;">
                    <i class="bi bi-bell"></i><span>Subscribe</span>
                </button>
            @endif
        @else
            <a href="{{ route('login') }}" class="yt-action-btn"
                style="flex:1;background:var(--brand-red);color:white;text-align:center;">
                <i class="bi bi-bell"></i><span>Subscribe</span>
            </a>
        @endauth
    </div>

    @include('layouts.partials.share-modal')
    @include('layouts.partials.edit-video-modal')
    @include('layouts.partials.add-to-playlist-modal')

    @if (Session::has('openEditModal') && Session::get('openEditModal'))
        @auth
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    openEditVideoModal({{ $video->id }});
                });
            </script>
        @endauth
    @endif

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var videoPlayer = document.getElementById('videoPlayer');
            if (videoPlayer) {
                videoPlayer.volume = 0.5;
                var playPromise = videoPlayer.play();
                if (playPromise !== undefined) {
                    playPromise.then(function() {
                        console.log('Video autoplayed');
                    }).catch(function(error) {
                        console.log('Autoplay blocked');
                    });
                }
            }
        });
    </script>
@endsection


/* Mobile Bottom Action Bar */
@media (max-width: 576px) {
.mobile-bottom-bar {
display: flex !important;
}
.desktop-actions {
display: none;
}
}

.mobile-bottom-bar {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--bg-primary);
border-top: 1px solid var(--border-color);
padding: 12px 16px;
justify-content: space-around;
z-index: 1000;
gap: 8px;
box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
}

.mobile-bottom-bar .yt-action-btn {
flex: 1;
justify-content: center;
padding: 12px 8px;
font-size: 12px;
min-height: 44px;
}

.mobile-bottom-bar .yt-action-btn i {
font-size: 18px;
}

@media (max-width: 576px) {
.yt-video-section {
padding-bottom: 70px;
}
}


<!-- Extra Mobile Styles -->
<style>
    @media (max-width: 400px) {
        .video-layout-container {
            padding: 0 !important;
        }

        .video-title {
            font-size: 15px !important;
            padding: 0 4px;
        }

        .video-stats-left {
            font-size: 12px;
        }

        .video-description-box {
            margin: 12px 4px;
            padding: 10px !important;
        }

        .comments-section {
            margin-top: 16px;
            padding: 12px 4px;
        }

        .comment-form {
            flex-direction: column;
        }

        .comment-form>img {
            display: none;
        }
    }
</style>