@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->total() }}</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>

        <div class="mt-4">{{ $videos->links() }}</div>
    @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>