@extends('layouts.app')

@section('title', $stream->title)

@section('content')

{{-- ============================================
     BREADCRUMB
     ============================================ --}}
<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb mb-0" style="font-size: 0.85rem;">
        <li class="breadcrumb-item"><a href="/" class="text-muted"><i class="bi bi-house-door me-1"></i>Beranda</a></li>
        @if($stream->league)
        <li class="breadcrumb-item"><a href="/" class="text-muted">{{ $stream->league }}</a></li>
        @endif
        <li class="breadcrumb-item text-light active" aria-current="page">{{ $stream->title }}</li>
    </ol>
</nav>

{{-- ============================================
     HEADER AD SLOT
     ============================================ --}}
@include('partials.ad-slot', ['position' => 'header'])

{{-- ============================================
     MAIN CONTENT GRID (2 columns desktop, 1 mobile)
     ============================================ --}}
<div class="main-grid">
    <div class="main-grid__content">

        {{-- ==============================
             VIDEO PLAYER
             ============================== --}}
        <div class="card card-dark mb-4">
            <div class="card-body p-0">
                {{-- LIVE Badge --}}
                @if($stream->is_live)
                <div class="position-relative">
                    <span class="badge badge-live position-absolute top-0 start-0 m-3 z-2">
                        <span class="live-dot"></span> LIVE NOW
                    </span>
                </div>
                @endif

                {{-- Video Player Area --}}
                <div class="video-player-container">
                    @if($stream->stream_type === 'm3u8')
                        <video
                            id="watchPlayer"
                            class="video-player w-100"
                            poster="{{ $stream->poster_url ?? asset('images/default-poster.jpg') }}"
                            controls
                            playsinline
                        ></video>
                    @elseif($stream->stream_type === 'embed')
                        <div class="embed-responsive embed-responsive-16by9 w-100">
                            <iframe
                                src="{{ $stream->embedUrl }}"
                                class="embed-responsive-item w-100 h-100"
                                allowfullscreen
                                allow="autoplay; encrypted-media"
                                frameborder="0"
                            ></iframe>
                        </div>
                    @else
                        <div class="d-flex align-items-center justify-content-center w-100 bg-dark text-light" style="aspect-ratio: 16/9;">
                            <div class="text-center">
                                <i class="bi bi-broadcast-pin display-1 mb-2"></i>
                                <p class="mb-0">Tipe streaming tidak didukung</p>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- ==============================
             MATCH DETAILS CARD
             ============================== --}}
        <div class="card card-dark mb-4">
            <div class="card-body">
                {{-- Teams & Scores --}}
                <div class="d-flex align-items-center justify-content-center mb-3">
                    <div class="text-center me-3">
                        <img src="{{ $stream->home_team_logo ?? asset('images/team-default.png') }}" alt="{{ $stream->home_team }}" class="team-logo mb-1" onerror="this.src='{{ asset('images/team-default.png') }}'">
                        <div class="fw-bold text-light">{{ $stream->home_team }}</div>
                    </div>
                    <div class="match-score mx-3">
                        <span class="score-home fs-2 fw-bold text-light">{{ $stream->home_score ?? 0 }}</span>
                        <span class="score-separator mx-2 text-secondary">-</span>
                        <span class="score-away fs-2 fw-bold text-light">{{ $stream->away_score ?? 0 }}</span>
                    </div>
                    <div class="text-center ms-3">
                        <img src="{{ $stream->away_team_logo ?? asset('images/team-default.png') }}" alt="{{ $stream->away_team }}" class="team-logo mb-1" onerror="this.src='{{ asset('images/team-default.png') }}'">
                        <div class="fw-bold text-light">{{ $stream->away_team }}</div>
                    </div>
                </div>

                {{-- League Badge --}}
                @if($stream->league)
                <div class="text-center mb-2">
                    <span class="badge bg-secondary bg-opacity-25 text-light border border-secondary">
                        <i class="bi bi-trophy me-1"></i>{{ $stream->league }}
                    </span>
                </div>
                @endif

                {{-- Channel & Time --}}
                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
                    <div class="d-flex align-items-center text-muted">
                        @if($stream->channel_logo)
                        <img src="{{ $stream->channel_logo }}" alt="{{ $stream->channel_name }}" class="channel-logo me-2" onerror="this.style.display='none'">
                        @endif
                        <span class="text-light">{{ $stream->channel_name ?? '' }}</span>
                    </div>
                    <div class="text-muted small">
                        <i class="bi bi-clock me-1"></i>{{ $stream->match_time ?? '' }}
                    </div>
                </div>

                {{-- Description --}}
                @if($stream->description)
                <div class="border-top border-secondary border-opacity-25 pt-3">
                    <h6 class="text-light mb-2"><i class="bi bi-info-circle me-1"></i>Informasi Pertandingan</h6>
                    <p class="text-muted mb-0" style="font-size: 0.9rem;">{{ $stream->description }}</p>
                </div>
                @endif
            </div>
        </div>

        {{-- ==============================
             BELOW PLAYER AD SLOT
             ============================== --}}
        @include('partials.ad-slot', ['position' => 'below_player'])

    </div>{{-- /.main-grid__content --}}

    {{-- ============================================
         RIGHT COLUMN (SIDEBAR)
         ============================================ --}}
    <div class="main-grid__sidebar">

        {{-- ==============================
             SIDEBAR AD SLOT
             ============================== --}}
        @include('partials.ad-slot', ['position' => 'sidebar'])

        {{-- ==============================
             RELATED STREAMS LIST
             ============================== --}}
        @if($relatedStreams && $relatedStreams->isNotEmpty())
        <div class="card card-dark mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-collection-play me-2"></i>Siaran Lainnya</h5>
            </div>
            <div class="card-body p-0">
                <div class="list-group list-group-flush">
                    @foreach($relatedStreams as $related)
                    <a href="{{ route('watch', ['id' => $related->id]) }}" class="list-group-item list-group-item-action bg-transparent border-secondary border-opacity-25 px-3 py-3">
                        <div class="d-flex justify-content-between align-items-start mb-1">
                            @if($related->is_live)
                                <span class="badge badge-live" style="font-size: 0.65rem;">
                                    <span class="live-dot"></span> LIVE
                                </span>
                            @else
                                <span class="badge badge-scheduled" style="font-size: 0.65rem;">JADWAL</span>
                            @endif
                            <span class="text-muted" style="font-size: 0.75rem;">
                                {{ $related->match_time ? \Carbon\Carbon::parse($related->match_time)->format('H:i') : '' }}
                            </span>
                        </div>
                        <h6 class="text-light mb-1" style="font-size: 0.85rem;">{{ $related->title }}</h6>
                        <div class="d-flex align-items-center" style="font-size: 0.8rem;">
                            <span class="text-light me-1">{{ $related->home_team }}</span>
                            @if($related->is_live)
                                <span class="text-secondary mx-1">{{ $related->home_score ?? 0 }} - {{ $related->away_score ?? 0 }}</span>
                            @else
                                <span class="text-secondary mx-1">vs</span>
                            @endif
                            <span class="text-light ms-1">{{ $related->away_team }}</span>
                        </div>
                        @if($related->channel_name)
                        <div class="mt-1 text-muted" style="font-size: 0.7rem;">
                            <i class="bi bi-tv me-1"></i>{{ $related->channel_name }}
                        </div>
                        @endif
                    </a>
                    @endforeach
                </div>
            </div>
        </div>
        @endif

        {{-- ==============================
             SIDEBAR 2 AD SLOT
             ============================== --}}
        @include('partials.ad-slot', ['position' => 'sidebar_2'])

    </div>{{-- /.main-grid__sidebar --}}

</div>{{-- /.main-grid --}}

{{-- ============================================
     FOOTER AD SLOT
     ============================================ --}}
@include('partials.ad-slot', ['position' => 'footer'])

@endsection

{{-- ============================================
     PAGE-SPECIFIC SCRIPTS
     ============================================ --}}
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    @if($stream->stream_type === 'm3u8')
    (function initHlsPlayer() {
        var video = document.getElementById('watchPlayer');
        if (!video) return;

        var streamUrl = '{{ $stream->stream_url }}';
        var isLive = {{ $stream->is_live ? 'true' : 'false' }};
        var retries = 0;
        var maxRetries = 5;
        var refreshTimer = null;

        function playStream() {
            if (Hls.isSupported()) {
                var hls = new Hls({
                    enableWorker: true,
                    lowLatencyMode: true,
                    maxBufferLength: 30,
                    maxMaxBufferLength: 60,
                    startLevel: -1
                });

                hls.loadSource(streamUrl);
                hls.attachMedia(video);

                hls.on(Hls.Events.MANIFEST_PARSED, function () {
                    var playPromise = video.play();
                    if (playPromise !== undefined) {
                        playPromise.then(function () {
                            console.log('[HLS] Pemutaran berhasil dimulai');
                        }).catch(function (error) {
                            console.warn('[HLS] Autoplay diblokir, mencoba muted:', error.message);
                            video.muted = true;
                            video.play().catch(function (e) {
                                console.error('[HLS] Gagal memutar bahkan saat muted:', e.message);
                            });
                        });
                    }
                });

                hls.on(Hls.Events.ERROR, function (event, data) {
                    console.error('[HLS] Error:', data.type, data.details);

                    if (data.fatal) {
                        switch (data.type) {
                            case Hls.ErrorTypes.NETWORK_ERROR:
                                console.warn('[HLS] Error jaringan, mencoba pemulihan...');
                                if (retries < maxRetries) {
                                    retries++;
                                    console.log('[HLS] Percobaan ulang ' + retries + '/' + maxRetries);
                                    setTimeout(function () {
                                        hls.startLoad();
                                    }, 3000);
                                } else {
                                    console.error('[HLS] Melebihi batas percobaan ulang');
                                    hls.destroy();
                                }
                                break;
                            case Hls.ErrorTypes.MEDIA_ERROR:
                                console.warn('[HLS] Error media, memulihkan...');
                                hls.recoverMediaError();
                                break;
                            default:
                                console.error('[HLS] Error fatal, menghentikan...');
                                hls.destroy();
                                break;
                        }
                    }
                });

                // Auto-refresh untuk siaran langsung setiap 30 detik
                if (isLive) {
                    refreshTimer = setInterval(function () {
                        if (video.paused && !video.ended) {
                            console.log('[HLS] Memeriksa ulang koneksi stream langsung...');
                            hls.startLoad();
                        }
                    }, 30000);
                }

                // Bersihkan timer saat halaman ditutup
                window.addEventListener('beforeunload', function () {
                    if (refreshTimer) clearInterval(refreshTimer);
                    hls.destroy();
                });

            } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
                // Fallback untuk Safari (native HLS)
                video.src = streamUrl;
                video.addEventListener('loadedmetadata', function () {
                    var playPromise = video.play();
                    if (playPromise !== undefined) {
                        playPromise.catch(function () {
                            video.muted = true;
                            video.play();
                        });
                    }
                });
            } else {
                console.error('[HLS] Browser tidak mendukung HLS');
            }
        }

        playStream();
    })();
    @endif
});
</script>
@endpush