@extends('layouts.app')

@section('title', $title ?? '')

@push('styles')
 @stack('styles')
@endpush

@section('content')
 <div class="radio-container text-white">
 @if(!$enabled)
 <!-- Radio Disabled State -->
 <div class="min-h-screen flex items-center justify-center p-6">
 <div class="text-center max-w-md">
 <div class="mb-6">
 <svg class="w-24 h-24 mx-auto text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
 </svg>
 </div>
 <h1 class="text-3xl font-bold mb-4">Radio is Offline</h1>
 <p class="text-gray-400 mb-6">De radio is momenteel uitgeschakeld. Kom later terug!</p>
 @if($offlineMessage)
 <div class="bg-gray-800 rounded-lg p-4">
 <p class="text-gray-300">{{ $offlineMessage }}</p>
 </div>
 @endif
 </div>
 </div>
 @else
 <!-- Radio Player Section -->
 <div class="max-w-6xl mx-auto px-4 py-8">
 <!-- Header -->
 <div class="flex items-center justify-between mb-8">
 <div>
 <h1 class="text-3xl font-bold flex items-center gap-3">
 <span class="live-badge inline-flex items-center px-3 py-1 rounded-full text-xs font-bold">
 <span class="w-2 h-2 bg-white rounded-full mr-2"></span>
 LIVE
 </span>
 Radio
 </h1>
 <p class="text-gray-400 mt-1">Luister nu naar de beste muziek</p>
 </div>

 <!-- Stats -->
 <div class="flex gap-6">
 @if($showListeners)
 <div class="stat-card rounded-lg px-4 py-2 flex items-center gap-2">
 <svg class="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
 </svg>
 <span id="listenerCount" class="font-semibold">--</span>
 <span class="text-gray-400 text-sm">luisteraars</span>
 </div>
 @endif
 <a href="{{ route('radio.leaderboard') }}" class="stat-card rounded-lg px-4 py-2 flex items-center gap-2 hover:bg-white/10 transition">
 <svg class="w-5 h-5 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
 </svg>
 <span class="font-semibold">Top 100</span>
 </a>
 </div>
 </div>

 <!-- Main Player -->
 <div class="radio-player rounded-2xl p-6 mb-8">
 <div class="grid md:grid-cols-3 gap-6 items-center">
 <!-- Album Art / DJ Avatar -->
 <div class="flex justify-center">
 <div id="djAvatar" class="w-32 h-32 rounded-full bg-gradient-to-br from-amber-400 to-amber-600 flex items-center justify-center text-4xl">
 @if($currentDJ && $currentDJ->user)
 <img src="{{ $currentDJ->user->avatar_url ?? asset('images/default-avatar.png') }}" alt="{{ $currentDJ->user->username }}" class="w-full h-full rounded-full object-cover">
 @else
 🎵
 @endif
 </div>
 </div>

 <!-- Track Info -->
 <div class="text-center">
 <div id="nowPlayingInfo">
 <p class="text-gray-400 text-sm mb-1">Nu draait</p>
 <h2 id="trackTitle" class="text-xl font-bold mb-2">
 @if($nowPlaying && $nowPlaying['title'])
 {{ $nowPlaying['title'] }}
 @else
 --
 @endif
 </h2>
 @if($nowPlaying && $nowPlaying['artist'])
 <p id="trackArtist" class="text-gray-400">{{ $nowPlaying['artist'] }}</p>
 @endif
 </div>

 <!-- DJ Info -->
 @if($showCurrentDJ && $currentDJ && $currentDJ->user)
 <div class="mt-4 pt-4 border-t border-white/10">
 <p class="text-gray-400 text-sm mb-1">Presentator</p>
 <p class="font-semibold text-amber-400">{{ $currentDJ->user->username }}</p>
 </div>
 @endif
 </div>

 <!-- Player Controls -->
 <div class="flex flex-col items-center gap-4">
 <!-- Audio Player -->
 <audio id="radioPlayer" preload="none">
 <source src="{{ $streamUrl }}" type="audio/mpeg">
 </audio>

 <!-- Play/Pause Button -->
 <button id="playPauseBtn" class="w-20 h-20 rounded-full bg-amber-500 hover:bg-amber-400 flex items-center justify-center transition-all transform hover:scale-105 shadow-lg shadow-amber-500/30">
 <svg id="playIcon" class="w-10 h-10 ml-1" fill="currentColor" viewBox="0 0 24 24">
 <path d="M8 5v14l11-7z"/>
 </svg>
 <svg id="pauseIcon" class="w-10 h-10 hidden" fill="currentColor" viewBox="0 0 24 24">
 <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
 </svg>
 </button>

 <!-- Volume Control -->
 <div class="flex items-center gap-3 w-full max-w-xs">
 <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/>
 </svg>
 <input type="range" id="volumeSlider" min="0" max="100" value="80" class="flex-1 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
 </div>
 </div>
 </div>
 </div>

 <!-- Song History -->
 @if($showHistory && !empty($songHistory))
 <div class="now-playing-card rounded-xl p-6 mb-8">
 <h3 class="text-lg font-semibold mb-4">Recent Gedraaid</h3>
 <div class="space-y-3" id="songHistory">
 @foreach($songHistory as $song)
 <div class="flex items-center justify-between py-2 border-b border-white/5 last:border-0">
 <div>
 <p class="font-medium">{{ $song['title'] }}</p>
 @if($song['artist'])
 <p class="text-sm text-gray-400">{{ $song['artist'] }}</p>
 @endif
 </div>
 <span class="text-sm text-gray-500">{{ $song['time'] }}</span>
 </div>
 @endforeach
 </div>
 </div>
 @endif

 <!-- Schedule Preview -->
 @if($showSchedule && $todaySchedule->isNotEmpty())
 <div class="now-playing-card rounded-xl p-6">
 <h3 class="text-lg font-semibold mb-4">Vandaag op Radio</h3>
 <div class="space-y-3">
 @foreach($todaySchedule as $slot)
 <div class="flex items-center justify-between py-2 border-b border-white/5 last:border-0">
 <div class="flex items-center gap-3">
 <span class="text-amber-400 font-mono">{{ date('H:i', strtotime($slot->start_time)) }}</span>
 <span class="font-medium">{{ $slot->user->username ?? 'Onbekend' }}</span>
 </div>
 <span class="text-gray-400 text-sm">{{ $slot->description ?? $slot->name }}</span>
 </div>
 @endforeach
 </div>
 </div>
 @endif

 <!-- Social Links -->
 @if(!empty($socialLinks))
 <div class="flex justify-center gap-6 mt-8">
 @foreach($socialLinks as $platform => $url)
 @if($url)
 <a href="{{ $url }}" target="_blank" class="w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center transition">
 @switch($platform)
 @case('facebook')
 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
 @break
 @case('twitter')
 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
 @break
 @case('instagram')
 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
 @break
 @case('discord')
 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
 @break
 @case('youtube')
 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
 @break
 @case('twitch')
 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z"/></svg>
 @break
 @endswitch
 </a>
 @endif
 @endforeach
 </div>
 @endif
 </div>
 @endif
 </div>

 @push('scripts')
 <script>
 document.addEventListener('DOMContentLoaded', function() {
 const player = document.getElementById('radioPlayer');
 const playBtn = document.getElementById('playPauseBtn');
 const playIcon = document.getElementById('playIcon');
 const pauseIcon = document.getElementById('pauseIcon');
 const volumeSlider = document.getElementById('volumeSlider');
 const listenerCount = document.getElementById('listenerCount');

 // Play/Pause
 playBtn.addEventListener('click', function() {
 if (player.paused) {
 player.play().catch(function(e) {
 console.log('Autoplay blocked:', e);
 });
 playIcon.classList.add('hidden');
 pauseIcon.classList.remove('hidden');
 } else {
 player.pause();
 playIcon.classList.remove('hidden');
 pauseIcon.classList.add('hidden');
 }
 });

 // Volume
 volumeSlider.addEventListener('input', function() {
 player.volume = this.value / 100;
 });

 // Initial volume
 player.volume = volumeSlider.value / 100;

 // Update listeners count
 function updateListeners() {
 fetch('/api/radio/listeners')
 .then(r => r.json())
 .then(data => {
 if (listenerCount) {
 listenerCount.textContent = data.count.toLocaleString();
 }
 })
 .catch(() => {
 if (listenerCount) listenerCount.textContent = '--';
 });
 }

 // Update now playing
 function updateNowPlaying() {
 fetch('/api/radio/now-playing')
 .then(r => r.json())
 .then(data => {
 const titleEl = document.getElementById('trackTitle');
 const artistEl = document.getElementById('trackArtist');
 if (titleEl && data.title) titleEl.textContent = data.title;
 if (artistEl && data.artist) artistEl.textContent = data.artist;
 })
 .catch(() => {});
 }

 // Auto-update listeners every 30 seconds
 updateListeners();
 setInterval(updateListeners, 30000);

 // Auto-update now playing every 15 seconds
 updateNowPlaying();
 setInterval(updateNowPlaying, 15000);
 });
 </script>
 @endpush
@endsection