@extends('layouts.app')

@section('title', 'Live Streaming Olahraga')

@section('content')

{{-- ============================================
     FLASH MESSAGES
     ============================================ --}}
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <div class="d-flex align-items-center">
        <i class="bi bi-check-circle-fill me-2"></i>
        <span>{{ session('success') }}</span>
    </div>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Tutup"></button>
</div>
@endif

@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <div class="d-flex align-items-center">
        <i class="bi bi-exclamation-triangle-fill me-2"></i>
        <span>{{ session('error') }}</span>
    </div>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Tutup"></button>
</div>
@endif

{{-- ============================================
     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">

        {{-- ==============================
             FEATURED STREAM PLAYER
             ============================== --}}
        @if(isset($featuredStream))
        <div class="card card-dark mb-4 featured-stream-card">
            <div class="card-body p-0">
                {{-- LIVE Badge --}}
                @if($featuredStream->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($featuredStream->stream_type === 'm3u8')
                        <video
                            id="mainPlayer"
                            class="video-player w-100"
                            poster="{{ $featuredStream->poster_url ?? asset('images/default-poster.jpg') }}"
                            controls
                            playsinline
                        ></video>
                    @elseif($featuredStream->stream_type === 'embed')
                        <div class="embed-responsive embed-responsive-16by9 w-100">
                            <iframe
                                src="{{ $featuredStream->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>

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

                    {{-- League --}}
                    @if(isset($featuredStream->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>{{ $featuredStream->league }}
                        </span>
                    </div>
                    @endif

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

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

        {{-- ==============================
             STATS SECTION
             ============================== --}}
        <div class="row g-3 mb-4">
            <div class="col-md-4 col-6">
                <div class="card card-dark text-center stat-card h-100">
                    <div class="card-body py-3">
                        <div class="stat-icon mb-2">
                            <i class="bi bi-broadcast text-danger"></i>
                        </div>
                        <div class="stat-number fs-3 fw-bold text-light">{{ isset($liveStreams) ? count($liveStreams) : 0 }}</div>
                        <div class="stat-label text-muted small">Sedang Tayang</div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-6">
                <div class="card card-dark text-center stat-card h-100">
                    <div class="card-body py-3">
                        <div class="stat-icon mb-2">
                            <i class="bi bi-calendar-event text-primary"></i>
                        </div>
                        <div class="stat-number fs-3 fw-bold text-light">{{ isset($scheduledStreams) ? count($scheduledStreams) : 0 }}</div>
                        <div class="stat-label text-muted small">Total Pertandingan</div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-12">
                <div class="card card-dark text-center stat-card h-100">
                    <div class="card-body py-3">
                        <div class="stat-icon mb-2">
                            <i class="bi bi-tv text-success"></i>
                        </div>
                        <div class="stat-number fs-3 fw-bold text-light">{{ $channels ?? 0 }}</div>
                        <div class="stat-label text-muted small">Saluran</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ==============================
             LIVE STREAMS GRID
             ============================== --}}
        @if(isset($liveStreams) && $liveStreams->isNotEmpty())
        <div class="mb-4">
            <h5 class="text-light mb-3">
                <i class="bi bi-broadcast text-danger me-2"></i>Siaran Langsung
            </h5>
            <div class="row g-3">
                @foreach($liveStreams as $stream)
                <div class="col-lg-6 col-md-6">
                    <a href="{{ route('watch', ['id' => $stream->id]) }}" class="text-decoration-none">
                        <div class="card card-dark stream-card h-100">
                            <div class="card-body p-3">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <span class="badge badge-live">
                                        <span class="live-dot"></span> LIVE
                                    </span>
                                    <span class="text-muted small">
                                        <i class="bi bi-clock me-1"></i>{{ $stream->match_time }}
                                    </span>
                                </div>
                                <h6 class="card-title text-light mb-2">{{ $stream->title }}</h6>
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-center">
                                        <span class="text-light me-1 fw-semibold">{{ $stream->home_team }}</span>
                                        <span class="text-secondary mx-1">{{ $stream->home_score ?? 0 }} - {{ $stream->away_score ?? 0 }}</span>
                                        <span class="text-light ms-1 fw-semibold">{{ $stream->away_team }}</span>
                                    </div>
                                </div>
                                <div class="mt-2 text-muted small">
                                    <i class="bi bi-tv me-1"></i>{{ $stream->channel_name }}
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                @endforeach
            </div>
        </div>
        @endif

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

        {{-- ==============================
             SCHEDULED MATCHES
             ============================== --}}
        @if(isset($scheduledStreams) && $scheduledStreams->isNotEmpty())
        <div class="mb-4">
            <h5 class="text-light mb-3">
                <i class="bi bi-calendar-event text-primary me-2"></i>Jadwal Pertandingan
            </h5>
            <div class="card card-dark">
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        @foreach($scheduledStreams as $stream)
                        <div class="list-group-item bg-transparent border-secondary border-opacity-25 px-3 py-3">
                            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                                <div class="d-flex align-items-center">
                                    <div class="scheduled-time text-center me-3" style="min-width: 60px;">
                                        <div class="text-warning fw-bold small">{{ \Carbon\Carbon::parse($stream->match_time)->format('H:i') }}</div>
                                        <div class="text-muted" style="font-size: 0.7rem;">{{ \Carbon\Carbon::parse($stream->match_time)->format('d M') }}</div>
                                    </div>
                                    <div>
                                        <div class="text-light fw-semibold">{{ $stream->home_team }} <span class="text-secondary mx-1">vs</span> {{ $stream->away_team }}</div>
                                        @if(isset($stream->league))
                                        <div class="text-muted small"><i class="bi bi-trophy me-1"></i>{{ $stream->league }}</div>
                                        @endif
                                    </div>
                                </div>
                                @if(isset($stream->channel_name))
                                <div class="text-muted small">
                                    <i class="bi bi-tv me-1"></i>{{ $stream->channel_name }}
                                </div>
                                @endif
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        @endif

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

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

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

        {{-- ==============================
             LIVE MATCH LIST (Partial)
             ============================== --}}
        @include('partials.match-list', ['streams' => $liveStreams ?? collect(), 'scheduled' => $scheduledStreams ?? collect()])

        {{-- ==============================
             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(isset($featuredStream) && $featuredStream->stream_type === 'm3u8')
    (function initHlsPlayer() {
        var video = document.getElementById('mainPlayer');
        if (!video) return;

        var streamUrl = '{{ $featuredStream->stream_url }}';
        var isLive = {{ $featuredStream->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