@extends('siswa.layout')

@section('content')

<div x-data="{ sidebarOpen: true }" class="bg-white rounded-2xl shadow overflow-hidden">

    <!-- ================= TOP BAR ================= -->
    <div class="flex items-center justify-between px-6 py-4 border-b">
        <div class="flex items-center gap-3">
            <a href="{{ route('siswa.dashboard') }}"
               class="text-gray-500 hover:text-black text-lg">←</a>

            <h1 class="font-semibold text-lg text-gray-800">
                {{ $lesson->title }}
            </h1>
        </div>

        <button @click="sidebarOpen = !sidebarOpen"
                class="text-gray-600 hover:text-black text-xl">☰</button>
    </div>

    <!-- ================= MAIN ================= -->
    <div class="flex min-h-[75vh]">

        <!-- ================= CONTENT ================= -->
        <section class="flex-1 p-10">

            <!-- ===== JUDUL ===== -->
            <h2 class="text-3xl font-bold mb-4 text-gray-900">
                {{ $lesson->title }}
            </h2>

            {{-- ================= AVAILABLE INFO ================= --}}
            @if($lesson->available_at && now()->lt($lesson->available_at))
                <div class="mb-8 p-4 bg-yellow-50 border border-yellow-300 rounded-xl text-yellow-800">
                    🔒 Materi ini dapat dibuka pada:
                    <strong>
                        {{ $lesson->available_at->translatedFormat('d F Y H:i') }}
                    </strong>
                </div>
            @endif

            {{-- ================= CONTENT ================= --}}
            <div class="mb-10">

                {{-- TEXT --}}
                @if($lesson->content_type === 'text')
                    <div class="text-gray-700 leading-relaxed">
                        {!! nl2br(e($lesson->content)) !!}
                    </div>

                {{-- PDF --}}
                @elseif($lesson->content_type === 'pdf')
                    <iframe
                        src="{{ str_replace('/view', '/preview', $lesson->content_url) }}"
                        class="w-full h-[600px] border rounded-xl">
                    </iframe>

             {{-- VIDEO --}}
@elseif($lesson->content_type === 'video')
    @php
        preg_match('/(youtu\.be\/|v=)([^&]+)/', $lesson->content_url, $m);
        $videoId = $m[2] ?? null;
    @endphp

    @if($videoId)

        <div class="relative w-full max-w-5xl mx-auto">

            {{-- PLAYER --}}
            <div id="yt-player"
                 class="w-full h-[450px] rounded-xl overflow-hidden bg-black"></div>

            {{-- OVERLAY TIMELINE (ANTI DRAG) --}}
            <div class="absolute bottom-0 left-0 w-full h-[70px] z-20"
                 style="pointer-events:auto"></div>
        </div>

        {{-- WARNING --}}
        <div id="forward-warning"
             class="hidden fixed bottom-6 left-1/2 -translate-x-1/2
                    bg-black text-white px-4 py-2 rounded-lg text-sm z-50">
            Anda tidak bisa mempercepat video 
        </div>

        {{-- YOUTUBE API --}}
        <script src="https://www.youtube.com/iframe_api"></script>

        <script>
            let player;
            let maxAllowedTime = 0;
            let finished = false;

            function onYouTubeIframeAPIReady() {
                player = new YT.Player('yt-player', {
                    videoId: '{{ $videoId }}',
                    playerVars: {
                        controls: 1,
                        disablekb: 0,
                        rel: 0,
                        modestbranding: 0,
                        fs: 0,
                        playsinline: 0
                    },
                    events: {
                        onReady: onPlayerReady,
                        onPlaybackRateChange: lockPlaybackRate
                    }
                });
            }

            function onPlayerReady() {
                setInterval(() => {
                    if (!player || !player.getCurrentTime) return;

                    const current = player.getCurrentTime();
                    const duration = player.getDuration();

                    // ❌ ANTI SKIP
                    if (current > maxAllowedTime + 1) {
                        player.seekTo(maxAllowedTime, true);
                        showWarning();
                    } else {
                        maxAllowedTime = Math.max(maxAllowedTime, current);
                    }

                    // ✅ VIDEO SELESAI
                    if (!finished && duration && maxAllowedTime >= duration - 1) {
                        finished = true;
                        unlockFinish();
                    }

                }, 500);
            }

            function lockPlaybackRate() {
                if (player.getPlaybackRate() !== 1) {
                    player.setPlaybackRate(1);
                }
            }

            function unlockFinish() {
                const btn = document.getElementById('btn-selesai');
                if (!btn) return;

                btn.disabled = false;
                btn.classList.remove(
                    'bg-gray-300',
                    'text-gray-500',
                    'cursor-not-allowed'
                );
                btn.classList.add('bg-gray-900','text-white');
            }

            function showWarning() {
                const toast = document.getElementById('forward-warning');
                toast.classList.remove('hidden');
                setTimeout(() => toast.classList.add('hidden'), 1500);
            }
        </script>

    @else
        <p class="text-red-600">Video YouTube tidak valid</p>
    @endif




                {{-- LINK --}}
                @elseif($lesson->content_type === 'link')
                    <a href="{{ $lesson->content_url }}"
                       target="_blank"
                       class="inline-flex items-center gap-2 text-blue-600 hover:underline">
                        🔗 Buka Materi
                    </a>
                @endif

            </div>

            {{-- ================= TASK ================= --}}
            @if(isset($task))
                <div id="task-{{ $task->id }}"
                     class="mt-16 p-6 border-2 border-blue-400 rounded-2xl bg-blue-50 scroll-mt-24">

                    <h3 class="text-xl font-semibold mb-2">
                        📌 Tugas
                    </h3>

                    <p class="text-gray-700 mb-4">
                        {{ $task->description }}
                    </p>

                    {{-- AVAILABLE AT --}}
                    @if($task->available_at && now()->lt($task->available_at))
                        <div class="mb-4 p-3 bg-yellow-100 border border-yellow-300 rounded-lg text-yellow-800">
                            🔒 Tugas dapat dikerjakan mulai:
                            <strong>
                                {{ $task->available_at->translatedFormat('d F Y H:i') }}
                            </strong>
                        </div>
                    @endif

                    {{-- DEADLINE --}}
                    @if($task->deadline)
                        <p class="text-sm text-gray-500 mb-6">
                            ⏰ Deadline:
                            <span class="font-semibold">
                                {{ $task->deadline->translatedFormat('d F Y H:i') }}
                            </span>
                        </p>
                    @endif

                    {{-- SUDAH SUBMIT --}}
                    @if($isTaskCompleted)

                        <div class="p-4 rounded-lg bg-green-50 border border-green-200">
                            <p class="text-green-700 font-semibold">
                                ✓ Tugas sudah dikumpulkan
                            </p>

                            <p class="text-sm text-gray-600 mt-2 break-all">
                                🔗 {{ $taskSubmission->submission_link }}
                            </p>

                            @if($task->allow_revision)
                                <p class="text-sm text-yellow-600 mt-2">
                                    Revisi diperbolehkan
                                </p>
                            @endif
                        </div>

                    {{-- BELUM SUBMIT --}}
                    @elseif(!($task->available_at && now()->lt($task->available_at)))

                        <form method="POST"
                              action="{{ route('siswa.task.submit', $task->id) }}"
                              class="space-y-4">
                            @csrf

                            <div>
                                <label class="text-sm font-medium text-gray-700">
                                    Link Tugas
                                </label>
                                <input
                                    type="url"
                                    name="submission_link"
                                    required
                                    placeholder="https://drive.google.com/..."
                                    class="w-full mt-1 px-4 py-2 border rounded-lg focus:ring focus:ring-teal-200">
                            </div>

                            <button
                                type="submit"
                                class="bg-teal-600 text-white px-6 py-2 rounded-lg hover:bg-teal-500">
                                Kirim Tugas
                            </button>
                        </form>

                    @endif
                </div>
            @endif

            {{-- ================= ACTION BAR ================= --}}
{{-- ================= ACTION BAR (SAFE FINAL) ================= --}}
<div class="flex justify-between items-center mt-16">

    <div>
        @if($isCompleted)
            <span class="text-green-600 font-semibold">
                ✓ Materi telah diselesaikan
            </span>
        @endif
    </div>

    <div class="flex gap-4">

        {{-- 1️⃣ BELUM SELESAI --}}
        @if(! $isCompleted)
            <form id="form-selesai"
                  method="POST"
                  action="{{ route('siswa.modul.selesai', $lesson->id) }}">
                @csrf

                @php
                    $lockFinish = $lesson->content_type === 'video';
                @endphp

                <button
                    id="btn-selesai"
                    @if($lockFinish) disabled @endif
                    class="
                        px-6 py-3 rounded-lg transition
                        {{ $lockFinish
                            ? 'bg-gray-300 text-gray-500 cursor-not-allowed'
                            : 'bg-gray-900 text-white hover:bg-gray-700'
                        }}
                    ">
                    Tandai Selesai
                </button>
            </form>

        {{-- 2️⃣ SUDAH SELESAI + ADA MATERI SELANJUTNYA --}}
        @elseif($nextLesson)
            <a href="{{ route('siswa.modul.show', $nextLesson->id) }}"
               class="bg-gray-900 text-white px-6 py-3 rounded-lg
                      hover:bg-gray-700">
                Lanjut ke Materi →
            </a>

        {{-- 3️⃣ SUDAH SELESAI + BENAR-BENAR TERAKHIR --}}
        @else
            <button disabled
                class="bg-gray-300 text-gray-500 px-6 py-3 rounded-lg">
                Materi Terakhir
            </button>
        @endif

    </div>
</div>



        </section>

        {{-- ================= SIDEBAR ================= --}}
        @include('siswa.modul.sidebar')

    </div>
</div>

{{-- ================= DURASI ================= --}}
<script>
document.addEventListener('DOMContentLoaded', () => {

    const REQUIRED = {{ $lesson->duration ?? 0 }};
    const lessonId = {{ $lesson->id }};
    let seconds = 0;
    let lastActivity = Date.now();

    const btn = document.getElementById('btn-selesai');
    const form = document.getElementById('form-selesai');

    const activity = () => lastActivity = Date.now();
    ['mousemove','scroll','click','keydown'].forEach(e =>
        window.addEventListener(e, activity)
    );

    setInterval(() => {
        if (Date.now() - lastActivity < 10000) {
            seconds++;
            if (REQUIRED > 0 && seconds >= REQUIRED) {
                btn?.removeAttribute('disabled');
            }
        }
    }, 1000);

    form?.addEventListener('submit', async (e) => {
        e.preventDefault();

        await fetch(`/siswa/lesson/${lessonId}/duration`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ seconds })
        });

        form.submit();
    });

});
</script>

<script>
function scrollToTask(taskId) {
    const el = document.getElementById('task-' + taskId);
    if (el) {
        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
}
</script>

@endsection