@extends('layouts.shell')
@section('title', $video->title)
@section('main-pad', 'px-5 pb-6')

@section('content')
@php
$liked = auth()->check() && $video->likes()->where('user_id', auth()->id())->exists();
$likeCount = $video->likes()->count();
@endphp

{{-- Player --}}
<div class="-mx-5 mb-4 aspect-video bg-black"
     x-data="videoTracker({{ $video->id }})" x-init="init()">
    <iframe src="{{ $video->embedUrl() }}" class="h-full w-full" frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>
</div>

<div class="flex items-start justify-between gap-3">
    <div>
        @if($video->category)<span class="chip mb-1">{{ $video->category->name }}</span>@endif
        <h1 class="text-xl font-extrabold leading-tight">{{ $video->title }}</h1>
        <p class="mt-1 text-xs text-qr-muted">{{ number_format($video->views_count) }}x ditonton</p>
    </div>
    <div class="flex items-center gap-2 shrink-0">
        <form method="POST" action="{{ route('video.like', $video) }}">
            @csrf
            <button class="grid h-11 w-11 place-items-center rounded-full {{ $liked ? 'bg-primary/15 text-primary' : 'bg-ink/5 text-muted' }}" aria-label="Suka">
                <x-icon name="heart" class="w-5 h-5" :fill="$liked"/>
            </button>
        </form>
        <x-bookmark-button type="video" :id="$video->id" :model="$video"/>
    </div>
</div>

@if($video->description)
<p class="mt-3 text-body text-muted leading-relaxed prose-body">{{ $video->description }}</p>
@endif

{{-- Konteks series + episode berikutnya --}}
@if($video->series_id && $video->series)
@php $next = $video->nextEpisode(); @endphp
<div class="card mt-4 flex items-center justify-between gap-3 p-4">
    <a href="{{ route('series.show', $video->series->slug) }}" class="min-w-0">
        <p class="text-caption text-muted">Bagian dari series</p>
        <p class="text-h4 truncate flex items-center gap-1.5"><x-icon name="series" class="w-4 h-4 text-primary"/> {{ $video->series->title }}</p>
        <p class="text-small text-muted">Episode {{ $video->episode_number }}</p>
    </a>
    @if($next)
    <a href="{{ route('video.show', $next->slug) }}" class="btn-filled shrink-0"><x-icon name="next" class="w-5 h-5" :fill="true"/> Episode {{ $next->episode_number }}</a>
    @endif
</div>
@endif

<div class="mt-5">
    <x-share-buttons :url="route('video.show', $video->slug)" :title="$video->title" />
</div>

{{-- Komentar --}}
<section class="mt-6">
    <h2 class="mb-3 text-base font-bold">Komentar ({{ $video->comments()->count() }})</h2>
    <form method="POST" action="{{ route('video.comment', $video) }}" class="mb-4 flex gap-2">
        @csrf
        <input name="body" required maxlength="1000" placeholder="Tulis komentar…" class="field flex-1">
        <button class="btn-accent !px-4">Kirim</button>
    </form>
    <div class="space-y-3">
        @forelse($video->comments()->with('user')->take(20)->get() as $comment)
        <div class="flex gap-3">
            <div class="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-qr-accent/20 text-xs font-bold text-qr-accent-light">
                {{ strtoupper(substr($comment->user->name ?? '?', 0, 1)) }}
            </div>
            <div>
                <p class="text-sm font-semibold">{{ $comment->user->name ?? 'Anonim' }}
                    <span class="ml-1 text-xs font-normal text-qr-muted">{{ $comment->created_at->diffForHumans() }}</span>
                </p>
                <p class="text-sm text-qr-muted">{{ $comment->body }}</p>
            </div>
        </div>
        @empty
        <p class="text-sm text-qr-muted">Belum ada komentar. Jadilah yang pertama.</p>
        @endforelse
    </div>
</section>

@if($related->isNotEmpty())
<div class="mt-8">
    <x-rail title="Tonton Juga">
        @foreach($related as $v)
            <x-poster :href="route('video.show', $v->slug)" :image="$v->thumbnailUrl()"
                :title="$v->title" :subtitle="$v->category?->name" ratio="16x9" />
        @endforeach
    </x-rail>
</div>
@endif

@push('scripts')
<script>
function videoTracker(videoId) {
    return {
        init() {
            // Kirim progress tiap 30 detik (placeholder durasi karena embed pihak ketiga).
            let seconds = 0;
            setInterval(() => {
                seconds += 30;
                fetch(`/video/${videoId}/progress`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    body: JSON.stringify({ seconds, completed: false }),
                }).catch(() => {});
            }, 30000);
        }
    }
}
</script>
@endpush
@endsection