@extends('layouts.app')

@section('content')
<style>
    /* Android Style Lesson Experience */
    .video-hero {
        background: #000;
        overflow: hidden;
        aspect-ratio: 16/9;
        margin-bottom: 0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .video-hero iframe { width: 100%; height: 100%; }

    @media (max-width: 991px) {
        .video-hero { 
            position: sticky; 
            top: 0; /* Align with app bar if app bar is sticky, or adjust accordingly */
            z-index: 1020; 
            border-radius: 0;
            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
        }
        .main-content-section { padding: 0 !important; }
        .detailed-content { border-radius: 0 !important; margin-top: 0 !important; }
    }

    .playlist-container {
        max-height: 60vh;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--zoho-border) transparent;
    }
    .playlist-container::-webkit-scrollbar { width: 4px; }
    .playlist-container::-webkit-scrollbar-thumb { background: var(--zoho-border); border-radius: 10px; }

    .lesson-card-item {
        padding: 1rem;
        background: white;
        border-bottom: 1px solid var(--zoho-border);
        display: flex;
        gap: 12px;
        transition: background 0.2s;
        text-decoration: none !important;
    }
    .lesson-card-item:active { background: #f1f5f9; }
    .lesson-card-item.active { background: rgba(249, 115, 22, 0.05); border-left: 4px solid var(--zoho-orange); }
    
    .lesson-thumb-mini {
        width: 80px;
        aspect-ratio: 16/9;
        border-radius: 6px;
        background-size: cover;
        background-position: center;
        flex-shrink: 0;
    }
    
    .detailed-content {
        padding: 1.5rem;
        background: white;
        margin-bottom: 1rem;
    }
</style>

<div class="container-fluid px-0 px-lg-4 py-0 py-lg-4">
    <!-- Navigation Pill Buttons (Hidden on mobile for cleaner look) -->
    <div class="d-none d-lg-flex lms-nav-btns mb-4">
        <a href="{{ route('home') }}" class="lms-nav-btn">
            <i class="bi bi-house-door"></i> Dashboard
        </a>
        <a href="{{ route('student.chapters.index', $chapter->course) }}" class="lms-nav-btn">
            <i class="bi bi-collection"></i> {{ $chapter->course->name }}
        </a>
    </div>

    <!-- Main Content Section -->
    <div class="row g-0 g-lg-4 main-content-section">
        <div class="col-lg-8">
            <div class="lms-unified-panel border-0 shadow-none bg-transparent mb-0">
                <div class="video-hero" style="position: relative;">
                    @if($isPurchased && $videoId)
                        <iframe id="main-player" src="https://www.youtube.com/embed/{{ $videoId }}?rel=0&modestbranding=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
                        <!-- Tracking Status Badge -->
                        <div id="tracking-status" class="position-absolute top-0 end-0 m-3 p-2 rounded-3 bg-dark bg-opacity-75 text-white tiny fw-bold" style="display: none; z-index: 10;">
                            <i class="bi bi-broadcast me-1"></i> Tracking Active
                        </div>
                    @elseif(!$isPurchased)
                        <div class="d-flex align-items-center justify-content-center h-100 text-white p-4 text-center" style="background: linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.9)), url('{{ $chapter->thumbnail_url }}'); background-size: cover; background-position: center;">
                            <div>
                                <i class="bi bi-lock-fill fs-1 mb-3 text-white"></i>
                                <h4 class="fw-bold">Module Locked</h4>
                                <p class="opacity-75 small">Purchase this chapter or the full course to unlock high-fidelity content.</p>
                                <div class="mt-4 d-flex gap-2 justify-content-center">
                                    <form action="{{ route('student.buy') }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="type" value="chapter">
                                        <input type="hidden" name="id" value="{{ $chapter->getRouteKey() }}">
                                        <button type="submit" class="btn btn-primary px-4" style="border-radius: 12px; font-weight: 700;">Buy Chapter</button>
                                    </form>
                                    <form action="{{ route('student.buy') }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="type" value="course">
                                         <input type="hidden" name="id" value="{{ $chapter->course->getRouteKey() }}">
                                        <button type="submit" class="btn btn-navy px-4" style="background: white; color: var(--zoho-navy); border-radius: 12px; font-weight: 700;">Buy Full Course</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="d-flex align-items-center justify-content-center h-100 bg-dark text-white p-4 text-center">
                            <div>
                                <i class="bi bi-play-circle fs-1 mb-3 opacity-50"></i>
                                <p class="mb-0">Video not available</p>
                            </div>
                        </div>
                    @endif
                </div>

                <div class="detailed-content shadow-sm">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <div>
                            <h5 class="fw-bold mb-1" id="current-lesson-title">{{ $currentLesson ? $currentLesson->name : 'Lesson' }}</h5>
                            <p class="text-secondary small mb-0">Module: {{ $chapter->name }}</p>
                        </div>
                        <button onclick="toggleLike(this, 'chapter', '{{ $chapter->getRouteKey() }}')" class="btn btn-sm btn-light border-0 d-flex align-items-center gap-2 px-3 py-2" style="border-radius: 12px; {{ auth()->user()->hasLiked($chapter) ? 'color: #ef4444; background: #fee2e2;' : 'color: #64748b;' }}">
                            <i class="bi {{ auth()->user()->hasLiked($chapter) ? 'bi-heart-fill' : 'bi-heart' }}"></i>
                            <span class="like-count fw-bold">{{ $chapter->likes()->count() }}</span>
                        </button>
                    </div>

                    @if($chapter->description)
                        <div class="description-box bg-light bg-opacity-50 p-3 rounded-4 mb-3 border border-dashed">
                            <h6 class="fw-bold small text-uppercase tracking-wider opacity-50 mb-2" style="font-size: 0.6rem;">Module Overview</h6>
                            <p class="text-secondary mb-0" style="font-size: 0.8rem; line-height: 1.6;">{{ $chapter->description }}</p>
                        </div>
                    @endif

                    <div class="d-flex align-items-center gap-3">
                        @if($isPurchased)
                            <div class="badge bg-light text-success border-0 px-3 py-2" style="border-radius: 12px; font-size: 0.75rem;">
                                <i class="bi bi-patch-check-fill me-1"></i> ACCESS GRANTED
                            </div>
                            <button onclick="updateProgress(false)" class="btn btn-sm btn-outline-secondary rounded-pill px-3 py-2" style="font-size: 0.75rem;">
                                <i class="bi bi-arrow-repeat me-1"></i> Sync My Progress
                            </button>
                            <button class="btn btn-sm btn-outline-primary border-0 px-3 py-2" style="border-radius: 12px;" data-bs-toggle="modal" data-bs-target="#ratingModal">
                                <i class="bi bi-star-fill me-1"></i> Rate this Module
                            </button>
                        @else
                            <div class="badge bg-light text-warning border-0 px-3 py-2" style="border-radius: 12px; font-size: 0.75rem;">
                                <i class="bi bi-lock me-1"></i> VIEWING CURRICULUM
                            </div>
                        @endif
                        <button class="btn btn-sm btn-outline-dark border-0 px-3 py-2 ms-auto" style="border-radius: 12px;">
                            <i class="bi bi-share"></i>
                        </button>
                    </div>
                </div>

                <div class="detailed-content shadow-sm mt-3" style="border-radius: 0 0 24px 24px;">
                    <h6 class="fw-bold mb-3">Student Reviews ({{ $ratings->count() }})</h6>
                    <div class="reviews-list">
                        @forelse($ratings as $rating)
                            <div class="review-item mb-3 pb-3 border-bottom">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <div class="d-flex align-items-center gap-2">
                                        <img src="https://ui-avatars.com/api/?name={{ urlencode($rating->user->name) }}&background=random" class="rounded-circle" width="30" height="30">
                                        <div class="small fw-bold">{{ $rating->user->name }}</div>
                                    </div>
                                    <div class="text-warning tiny">
                                        @for($i=1; $i<=5; $i++)
                                            <i class="bi bi-star{{ $i <= $rating->rating ? '-fill' : '' }}"></i>
                                        @endfor
                                    </div>
                                </div>
                                <p class="text-secondary small mb-0">{{ $rating->comment ?: 'No comment provided.' }}</p>
                                <div class="text-muted" style="font-size: 0.6rem;">{{ $rating->created_at->diffForHumans() }}</div>
                            </div>
                        @empty
                            <p class="text-secondary small">No reviews yet. Be the first to share your experience!</p>
                        @endforelse
                    </div>
                </div>

                <!-- Rating Modal -->
                @if($isPurchased)
                    <div class="modal fade" id="ratingModal" tabindex="-1">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content border-0 shadow-lg" style="border-radius: 24px;">
                                <div class="modal-header border-0 pb-0">
                                    <h5 class="modal-title fw-bold">Rate this Module</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <form action="{{ route('student.social.rate') }}" method="POST">
                                    @csrf
                                    <input type="hidden" name="type" value="chapter">
                                         <input type="hidden" name="id" value="{{ $chapter->getRouteKey() }}">
                                    <div class="modal-body p-4 text-center">
                                        <p class="text-secondary small mb-4">How was your learning experience with this module?</p>
                                        <div class="rating-stars mb-4 d-flex justify-content-center gap-3">
                                            @for($i = 5; $i >= 1; $i--)
                                                <input type="radio" name="rating" value="{{ $i }}" id="star{{ $i }}" class="d-none star-input" required>
                                                <label for="star{{ $i }}" class="bi bi-star-fill fs-2 cursor-pointer star-label" style="color: #e2e8f0; transition: color 0.2s;"></label>
                                            @endfor
                                        </div>
                                        <textarea name="comment" class="form-control border-0 bg-light" rows="3" placeholder="Additional feedback (optional)" style="border-radius: 16px;"></textarea>
                                    </div>
                                    <div class="modal-footer border-0 p-4 pt-0">
                                        <button type="submit" class="btn btn-primary w-100 py-3 fw-bold" style="border-radius: 16px;">Submit Review</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <style>
                        .star-input:checked ~ .star-label,
                        .star-label:hover,
                        .star-label:hover ~ .star-label {
                            color: #f59e0b !important;
                        }
                        .cursor-pointer { cursor: pointer; }
                        .rating-stars { direction: rtl; }
                    </style>
                @endif
            </div>
        </div>

        <div class="col-lg-4">
            <div class="bg-white shadow-sm" style="border-radius: 20px 20px 0 0;">
                <div class="p-3 border-bottom d-flex justify-content-between align-items-center">
                    <span class="fw-bold text-uppercase" style="font-size: 0.7rem; letter-spacing: 1px; color: #64748b;">Playlist ({{ $playlist->count() }})</span>
                </div>
                <div class="playlist-container" id="playlist-scroll">
                    @foreach($playlist as $lesson)
                        <a href="javascript:void(0)" 
                           class="lesson-card-item {{ $currentLesson && $currentLesson->id == $lesson->id ? 'active' : '' }}"
                           data-resume-time="{{ $lesson->userProgress->resume_time ?? 0 }}"
                           onclick="{{ $isPurchased ? "changeVideo('{$lesson->youtube_url}', '{$lesson->name}', this, '{$lesson->id}')" : "alert('Please purchase this module to watch this lesson.')" }}">
                            <div class="lesson-thumb-mini" style="background-image: url('{{ $lesson->thumbnail_url }}'); position: relative;">
                                @if(!$isPurchased)
                                    <div style="position: absolute; inset: 0; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; border-radius: 6px;">
                                        <i class="bi bi-lock-fill text-white" style="font-size: 0.8rem;"></i>
                                    </div>
                                @endif
                            </div>
                            <div class="overflow-hidden">
                                <h6 class="fw-bold text-dark mb-1 text-truncate" style="font-size: 0.8rem;">{{ $lesson->name }}</h6>
                                <span class="text-secondary" style="font-size: 0.65rem;">L{{ $loop->iteration }} • 12:45m</span>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    var player;
    var progressInterval;
    var currentLessonId = {{ $currentLesson ? $currentLesson->id : 'null' }};
    var resumeTime = {{ $resumeTime ?? 0 }};

    console.log('Progress Script Initialized. Lesson ID:', currentLessonId, 'Resume Time:', resumeTime);

    // YouTube API Callback
    window.onYouTubeIframeAPIReady = function() {
        console.log('onYouTubeIframeAPIReady called');
        player = new YT.Player('main-player', {
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    };

    // Load YouTube Iframe API
    if (typeof YT === 'undefined' || typeof YT.Player === 'undefined') {
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    } else {
        window.onYouTubeIframeAPIReady();
    }

    function onPlayerReady(event) {
        console.log('Player Ready');
        if (resumeTime > 0) {
            console.log('Seeking to:', resumeTime);
            event.target.seekTo(resumeTime);
        }
    }

    function onPlayerStateChange(event) {
        console.log('Player State Change:', event.data);
        if (event.data == YT.PlayerState.PLAYING) {
            startProgressTracking();
        } else {
            stopProgressTracking();
        }

        if (event.data == YT.PlayerState.ENDED) {
            console.log('Video Ended');
            updateProgress(true);
        }
    }

    function startProgressTracking() {
        if (!progressInterval) {
            console.log('Starting Heartbeat Interval');
            document.getElementById('tracking-status').style.display = 'block';
            progressInterval = setInterval(function() {
                updateProgress(false);
            }, 5000); 
        }
    }

    function stopProgressTracking() {
        if (progressInterval) {
            console.log('Stopping Heartbeat Interval');
            document.getElementById('tracking-status').style.display = 'none';
            clearInterval(progressInterval);
            progressInterval = null;
        }
    }

    function updateProgress(isCompleted) {
        if (!player || !player.getCurrentTime || !currentLessonId) {
            console.warn('Cannot update progress: Player not ready or no lesson ID');
            return;
        }

        var currentTime = Math.floor(player.getCurrentTime());
        console.log('Updating Progress. Time:', currentTime, 'Completed:', isCompleted);

        if (currentTime === 0 && !isCompleted) return;

        fetch("{{ route('student.progress.update') }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },
            body: JSON.stringify({
                lesson_id: currentLessonId,
                resume_time: currentTime,
                is_completed: isCompleted ? 1 : 0
            })
        })
        .then(res => res.json())
        .then(data => {
            console.log('Server Response:', data);
        })
        .catch(err => console.error('Progress Sync Failed:', err));
    }

    function changeVideo(url, title, element, lessonId) {
        console.log('Changing Video to Lesson ID:', lessonId);
        var videoId = '';
        var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
        var match = url.match(regExp);
        if (match && match[2].length == 11) {
            videoId = match[2];
        }

        if (videoId) {
            currentLessonId = lessonId;
            document.getElementById('current-lesson-title').innerText = title;

            var items = document.getElementsByClassName('lesson-card-item');
            for (var i = 0; i < items.length; i++) {
                items[i].classList.remove('active');
            }
            element.classList.add('active');
            
            var newResumeTime = parseInt(element.getAttribute('data-resume-time')) || 0;
            
            if (player && player.loadVideoById) {
                player.loadVideoById({
                    videoId: videoId,
                    startSeconds: newResumeTime
                });
            } else {
                // Fallback if player not ready
                document.getElementById('main-player').src = "https://www.youtube.com/embed/" + videoId + "?rel=0&modestbranding=1&enablejsapi=1&autoplay=1";
            }
            
            stopProgressTracking();
            startProgressTracking();
            
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
    }
</script>
@endpush
@endsection