@extends('layouts.app')

@section('title', $user->name . "'s Channel | TAKEONE")

@section('extra_styles')
    <style>
        .channel-header {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 32px;
            margin-bottom: 24px;
        }

        .channel-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--border-color);
        }

        .channel-name {
            font-size: 24px;
            font-weight: 500;
            margin: 16px 0 4px;
        }

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

        .channel-stats {
            display: flex;
            gap: 24px;
            margin-top: 16px;
        }

        .channel-stat-value {
            font-weight: 600;
        }

        /* Video Grid */
        .yt-video-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }

        .yt-video-card {
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .yt-video-card:active {
            transform: scale(0.98);
        }

        .yt-video-thumb {
            position: relative;
            aspect-ratio: 16/9;
            border-radius: 12px;
            overflow: hidden;
            background: #1a1a1a;
        }

        .yt-video-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
        }

        .yt-video-thumb video {
            width: 100%;
            height: 100%;
            object-fit: contain;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 0.3s ease;
            background: #000;
        }

        .yt-video-thumb video.active {
            opacity: 1;
        }

        .yt-video-duration {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 3px 6px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }

        .yt-video-info {
            display: flex;
            margin-top: 12px;
            gap: 12px;
        }

        .yt-channel-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #555;
            flex-shrink: 0;
        }

        .yt-video-details {
            flex: 1;
            min-width: 0;
        }

        .yt-video-title {
            font-size: 16px;
            font-weight: 500;
            color: var(--text-primary);
            margin: 0 0 4px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.3;
        }

        .yt-video-title a {
            color: inherit;
            text-decoration: none;
        }

        .yt-channel-name,
        .yt-video-meta {
            color: var(--text-secondary);
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* More button */
        .yt-more-btn {
            background: transparent;
            border: none;
            color: var(--text-primary);
            cursor: pointer;
            padding: 4px;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }

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

        .yt-more-btn:active {
            background: var(--border-color);
        }

        .yt-more-dropdown {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 8px 0;
            min-width: 200px;
        }

        .yt-more-dropdown-item {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 10px 16px;
            color: var(--text-primary);
            text-decoration: none;
            cursor: pointer;
            background: transparent;
            border: none;
            width: 100%;
            text-align: left;
            font-size: 14px;
        }

        .yt-more-dropdown-item:hover {
            background: var(--border-color);
        }

        /* Empty State */
        .yt-empty {
            text-align: center;
            padding: 80px 20px;
        }

        .yt-empty-icon {
            font-size: 80px;
            color: var(--text-secondary);
        }

        .yt-empty-title {
            font-size: 24px;
            margin: 20px 0 8px;
        }

        .yt-empty-text {
            color: var(--text-secondary);
            margin-bottom: 20px;
        }

        .yt-upload-btn {
            background: var(--brand-red);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            text-decoration: none;
            transition: transform 0.2s, background 0.2s;
        }

        .yt-upload-btn:hover {
            background: #cc1a1a;
        }

        .yt-upload-btn:active {
            transform: scale(0.95);
        }

        /* Channel action buttons container */
        .channel-actions {
            display: flex;
            gap: 8px;
            margin-top: 16px;
            flex-wrap: wrap;
        }

        /* ============================================
                   MOBILE RESPONSIVE STYLES
                   ============================================ */

        @media (max-width: 768px) {
            .channel-header {
                padding: 20px;
                margin-bottom: 16px;
            }

            .channel-avatar {
                width: 90px;
                height: 90px;
            }

            .channel-name {
                font-size: 20px;
                margin: 12px 0 4px;
            }

            .channel-meta {
                font-size: 13px;
            }

            .channel-stats {
                gap: 16px;
                margin-top: 12px;
            }

            .yt-video-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 16px;
            }

            .yt-video-title {
                font-size: 14px;
            }

            .yt-channel-icon {
                width: 32px;
                height: 32px;
            }

            .yt-channel-name,
            .yt-video-meta {
                font-size: 12px;
            }

            .yt-more-btn {
                width: 28px;
                height: 28px;
            }

            .channel-actions {
                flex-direction: column;
                width: 100%;
            }

            .channel-actions .yt-upload-btn {
                width: 100%;
                justify-content: center;
            }
        }

        @media (max-width: 480px) {
            .channel-header {
                padding: 16px;
                border-radius: 8px;
            }

            .channel-header .d-flex {
                flex-direction: column;
                align-items: flex-start !important;
                gap: 16px !important;
            }

            .channel-avatar {
                width: 80px;
                height: 80px;
            }

            .channel-name {
                font-size: 18px;
                margin: 8px 0 4px;
            }

            .channel-meta {
                font-size: 12px;
            }

            .channel-stats {
                flex-wrap: wrap;
                gap: 12px;
            }

            .channel-stat-value {
                font-size: 14px;
            }

            .yt-video-grid {
                gap: 12px;
                grid-template-columns: 1fr;
            }

            .yt-video-thumb {
                border-radius: 8px;
            }

            .yt-video-info {
                gap: 8px;
                margin-top: 8px;
            }

            .yt-channel-icon {
                width: 28px;
                height: 28px;
            }

            .yt-video-details {
                padding-right: 4px;
            }

            .yt-video-title {
                font-size: 13px;
                -webkit-line-clamp: 2;
            }

            .yt-empty {
                padding: 40px 16px;
            }

            .yt-empty-icon {
                font-size: 60px;
            }

            .yt-empty-title {
                font-size: 20px;
            }
        }

        /* Very small screens */
        @media (max-width: 360px) {
            .channel-avatar {
                width: 64px;
                height: 64px;
            }

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

            .channel-stats {
                flex-direction: column;
                gap: 4px;
            }

            .yt-video-info {
                padding-right: 0;
            }

            .yt-video-details {
                max-width: calc(100% - 36px);
            }
        }

        /* Landscape mobile */
        @media (max-height: 500px) and (orientation: landscape) {
            .channel-header {
                padding: 12px;
            }

            .channel-avatar {
                width: 60px;
                height: 60px;
            }

            .channel-name {
                font-size: 16px;
                margin: 8px 0 2px;
            }

            .channel-meta {
                font-size: 11px;
            }

            .channel-stats {
                margin-top: 8px;
            }

            .yt-video-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }
        }

        /* Pagination improvements */
        .pagination {
            margin-top: 24px;
        }

        .pagination .page-link {
            background: var(--bg-secondary);
            border-color: var(--border-color);
            color: var(--text-primary);
            padding: 8px 12px;
        }

        .pagination .page-link:hover {
            background: var(--border-color);
            border-color: var(--border-color);
            color: var(--text-primary);
        }

        .pagination .page-item.active .page-link {
            background: var(--brand-red);
            border-color: var(--brand-red);
        }

        .pagination .page-item.disabled .page-link {
            background: var(--bg-secondary);
            border-color: var(--border-color);
            color: var(--text-secondary);
        }

        @media (max-width: 480px) {
            .pagination {
                margin-top: 16px;
            }

            .pagination .page-link {
                padding: 6px 10px;
                font-size: 14px;
            }

            .pagination .page-item:not(.active):not(.disabled) .page-link {
                min-width: 36px;
            }
        }

        /* Smooth scroll behavior */
        html {
            scroll-behavior: smooth;
        }

        /* Video card skeleton loading */
        .skeleton {
            background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border-color) 50%, var(--bg-secondary) 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
            border-radius: 8px;
        }

        @keyframes shimmer {
            0% {
                background-position: 200% 0;
            }

            100% {
                background-position: -200% 0;
            }
        }

        /* Mobile touch optimizations */
        @media (hover: none) {
            .yt-video-card:hover .yt-video-thumb video {
                opacity: 0;
            }

            .yt-video-card.playing .yt-video-thumb video {
                opacity: 1;
            }
        }
    </style>
@endsection

@section('content')
    <div class="channel-header">
        <div class="d-flex align-items-center gap-4 flex-wrap">
            @if ($user->avatar)
                <img src="{{ asset('storage/avatars/' . $user->avatar) }}" alt="{{ $user->name }}" class="channel-avatar">
            @else
                <img src="https://i.pravatar.cc/150?u={{ $user->id }}" alt="{{ $user->name }}" class="channel-avatar">
            @endif

            <div class="channel-info">
                <h1 class="channel-name">{{ $user->name }}</h1>
                <p class="channel-meta">Joined {{ $user->created_at->format('F d, Y') }}</p>

                <div class="channel-stats">
                    <div>
                        <span class="channel-stat-value">{{ $videos->count() }}</span>
                        <span class="channel-meta"> videos</span>
                    </div>
                    <div>
                        <span
                            class="channel-stat-value">{{ \DB::table('video_views')->whereIn('video_id', $user->videos->pluck('id'))->count() }}</span>
                        <span class="channel-meta"> views</span>
                    </div>
                </div>

                @auth
                    @if (Auth::user()->id === $user->id)
                        <div class="channel-actions">
                            <a href="{{ route('videos.create') }}" class="yt-upload-btn">
                                <i class="bi bi-plus-lg"></i> <span>Upload Video</span>
                            </a>
                            <a href="{{ route('profile') }}" class="yt-upload-btn" style="background: var(--bg-dark);">
                                <i class="bi bi-pencil"></i> <span>Edit Channel</span>
                            </a>
                        </div>
                    @endif
                @endauth
            </div>
        </div>
    </div>

    <!-- Playlists Section - Only show for own channel -->
    @auth
        @if (Auth::user()->id === $user->id && $playlists && $playlists->count() > 0)
            <div class="playlists-section" style="margin-bottom: 24px;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
                    <h2 style="font-size: 20px; font-weight: 500;">My Playlists</h2>
                    <a href="{{ route('playlists.index') }}"
                        style="color: var(--text-secondary); text-decoration: none; font-size: 14px;">
                        View all <i class="bi bi-arrow-right"></i>
                    </a>
                </div>
                <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px;">
                    @foreach ($playlists->take(6) as $playlist)
                        <a href="{{ route('playlists.show', $playlist->id) }}" class="playlist-card-mini"
                            style="text-decoration: none; color: inherit;">
                            <div class="playlist-thumb-mini"
                                style="position: relative; aspect-ratio: 16/9; background: var(--bg-secondary); border-radius: 8px; overflow: hidden; margin-bottom: 8px;">
                                @if ($playlist->thumbnail_url)
                                    <img src="{{ $playlist->thumbnail_url }}" alt="{{ $playlist->name }}"
                                        style="width: 100%; height: 100%; object-fit: cover;">
                                @else
                                    <div
                                        style="display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-secondary);">
                                        <i class="bi bi-collection-play" style="font-size: 32px;"></i>
                                    </div>
                                @endif
                                <span class="playlist-count"
                                    style="position: absolute; bottom: 4px; right: 4px; background: rgba(0,0,0,0.8); color: white; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: 500;">
                                    {{ $playlist->video_count }}
                                </span>
                            </div>
                            <div class="playlist-name-mini"
                                style="font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                {{ $playlist->name }}
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        @endif
    @endauth

    @if ($videos->isEmpty())
        <div class="yt-empty">
            <i class="bi bi-camera-video yt-empty-icon"></i>
            <h2 class="yt-empty-title">No videos yet</h2>
            <p class="yt-empty-text">This channel hasn't uploaded any videos.</p>
            @auth
                @if (Auth::user()->id === $user->id)
                    <a href="{{ route('videos.create') }}" class="yt-upload-btn">
                        <i class="bi bi-plus-lg"></i> Upload First Video
                    </a>
                @endif
            @endauth
        </div>
    @else
        <div class="yt-video-grid">
            @foreach ($videos as $video)
                <x-video-card :video="$video" size="small" />
            @endforeach
        </div>

        {{-- Pagination hidden on all screens --}}
    @endif

    @include('layouts.partials.share-modal')
@endsection

@section('scripts')
    <script>
        let currentPlayingVideo = null;

        function playVideo(card) {
            // Skip on touch devices - handled by touch events
            if ('ontouchstart' in window) return;

            const video = card.querySelector('video');
            if (video) {
                video.currentTime = 0;
                video.volume = 0.10;
                video.play().catch(function(e) {
                    // Auto-play may be blocked, ignore error
                });
                video.classList.add('active');
                currentPlayingVideo = card;
            }
        }

        function stopVideo(card) {
            const video = card.querySelector('video');
            if (video) {
                video.pause();
                video.currentTime = 0;
                video.classList.remove('active');
            }
        }

        // Desktop hover behavior
        document.querySelectorAll('.yt-video-card').forEach(function(card) {
            card.addEventListener('mouseenter', function() {
                playVideo(this);
            });
            card.addEventListener('mouseleave', function() {
                stopVideo(this);
            });
        });

        // Mobile touch support with tap-to-play/pause
        document.addEventListener('touchstart', function(e) {
            const card = e.target.closest('.yt-video-card');
            if (card) {
                // Stop currently playing video if different
                if (currentPlayingVideo && currentPlayingVideo !== card) {
                    stopVideo(currentPlayingVideo);
                }

                const video = card.querySelector('video');
                if (video) {
                    if (card.classList.contains('playing')) {
                        // Pause this video
                        video.pause();
                        card.classList.remove('playing');
                    } else {
                        // Play this video
                        video.currentTime = 0;
                        video.volume = 0.10;
                        video.play().catch(function(e) {});
                        video.classList.add('active');
                        card.classList.add('playing');
                        currentPlayingVideo = card;
                    }
                }
            }
        }, {
            passive: true
        });

        // Stop video when tapping outside
        document.addEventListener('touchstart', function(e) {
            if (!e.target.closest('.yt-video-card')) {
                if (currentPlayingVideo) {
                    stopVideo(currentPlayingVideo);
                    currentPlayingVideo.classList.remove('playing');
                    currentPlayingVideo = null;
                }
            }
        });

        function deleteVideo(videoId, videoTitle) {
            if (confirm('Are you sure you want to delete "' + videoTitle + '"? This action cannot be undone.')) {
                fetch(`/videos/${videoId}`, {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success || data.redirect) {
                            window.location.reload();
                        } else {
                            alert('Failed to delete video. Please try again.');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('Failed to delete video. Please try again.');
                    });
            }
        }

        // Smooth scroll for pagination on mobile
        document.querySelectorAll('.pagination a').forEach(function(link) {
            link.addEventListener('click', function(e) {
                // Add loading indicator
                document.querySelector('.yt-video-grid').style.opacity = '0.5';
            });
        });
    </script>
@endsection


<!-- Extra Mobile Styles -->
<style>
    @media (max-width: 480px) {
        .channel-header {
            padding: 16px;
            text-align: center;
        }

        .channel-avatar {
            width: 80px;
            height: 80px;
        }

        .channel-name {
            font-size: 18px;
        }

        .channel-stats {
            justify-content: center;
            gap: 16px;
        }

        .channel-stat-value {
            font-size: 16px;
        }

        .yt-video-grid {
            gap: 16px;
        }

        .yt-video-thumb {
            border-radius: 8px;
        }

        .yt-video-info {
            margin-top: 8px;
        }

        .yt-channel-icon {
            width: 28px;
            height: 28px;
        }

        .yt-video-title {
            font-size: 13px;
        }
    }
</style>