@extends('layouts.app')

@section('title', $episode->title . ' - Podcast - ' . \App\Models\Setting::get('site_title', 'Hannah Arinaitwe'))

@section('content')

<!-- Custom Podcast Styles -->
<style>
    .text-podcast-primary { color: #692E8A; }
    .bg-podcast-primary { background-color: #692E8A; }
    .border-podcast-primary { border-color: #692E8A; }
    .bg-podcast-secondary { background-color: #CA2791; }
    .text-podcast-secondary { color: #CA2791; }
</style>

<div class="min-h-screen pt-36 md:pt-44 pb-24" style="background: linear-gradient(180deg, #F8F4FC 0%, #F9F9F8 30%);">
    <div class="max-w-7xl mx-auto px-6 md:px-12">
        
        <!-- Back Link -->
        <a href="{{ route('podcast.index') }}" class="text-theme-500 hover:text-podcast-primary font-medium flex items-center gap-2 mb-8 md:mb-12 transition-colors group w-max">
            <svg class="w-5 h-5 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
            Back to All Episodes
        </a>
        
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16">
            
            <!-- Left Main Area (Title, Player & Notes) -->
            <div class="lg:col-span-8">
                
                <!-- Episode Header -->
                <div class="mb-8">
                    <div class="flex flex-wrap items-center gap-3 text-sm text-theme-500 font-semibold uppercase tracking-wider mb-4">
                        <span class="text-podcast-primary">Young & Branded</span>
                        @if($episode->published_at)
                            <span class="text-theme-300">&bull;</span>
                            <span>{{ $episode->published_at->format('M j, Y') }}</span>
                        @endif
                        @if($episode->duration)
                            <span class="text-theme-300">&bull;</span>
                            <span class="flex items-center gap-1">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                {{ $episode->duration }}
                            </span>
                        @endif
                    </div>
                    <h1 class="text-3xl md:text-5xl font-bold font-heading text-theme-900 leading-[1.15]">{{ $episode->title }}</h1>
                </div>

                <!-- Main Player Area (Clean, no background container) -->
                <div class="mb-12">
                    @if($episode->youtube_url)
                        @php
                            $youtubeId = '';
                            preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/\s]{11})%i', $episode->youtube_url, $match);
                            if (isset($match[1])) {
                                $youtubeId = $match[1];
                            }
                        @endphp
                        @if($youtubeId)
                            <div class="w-full rounded-[2rem] overflow-hidden shadow-2xl aspect-video bg-black relative border border-black/10">
                                <iframe 
                                    class="absolute top-0 left-0 w-full h-full"
                                    src="https://www.youtube.com/embed/{{ $youtubeId }}?rel=0" 
                                    title="YouTube video player" 
                                    frameborder="0" 
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                    allowfullscreen>
                                </iframe>
                            </div>
                        @endif
                    @endif

                    @if($episode->embed_code)
                        <div class="w-full mt-8 rounded-[2rem] overflow-hidden shadow-lg border border-purple-50">
                            {!! $episode->embed_code !!}
                        </div>
                    @elseif($episode->audio_url)
                        <div class="w-full mt-8 bg-white rounded-[2rem] p-6 md:p-8 shadow-xl border border-purple-100 flex flex-col items-center">
                            <h3 class="text-sm font-bold text-gray-500 uppercase tracking-widest mb-4">Listen to Audio</h3>
                            <audio controls class="w-full">
                                <source src="{{ $episode->audio_url }}" type="audio/mpeg">
                                Your browser does not support the audio element.
                            </audio>
                        </div>
                    @endif
                </div>

                <!-- Show Notes -->
                <div class="bg-white rounded-[2.5rem] shadow-md border border-purple-100 p-8 md:p-12">
                    <div class="prose prose-lg prose-neutral max-w-none prose-headings:font-heading prose-headings:text-theme-900 prose-a:text-podcast-primary prose-a:font-semibold hover:prose-a:text-podcast-secondary">
                        <h2 class="!mt-0 !mb-6 text-2xl md:text-3xl border-b border-gray-100 pb-4">Show Notes</h2>
                        @if($episode->description)
                            {!! nl2br(e($episode->description)) !!}
                        @else
                            <p class="text-gray-400 italic">No show notes provided for this episode.</p>
                        @endif
                    </div>
                </div>

            </div>
            
            <!-- Right Sidebar (Widgets & Data) -->
            <div class="lg:col-span-4 space-y-8">
                
                <!-- Episode Thumbnail Widget -->
                <div class="bg-white rounded-[2rem] p-4 shadow-md border border-purple-100 relative overflow-hidden group">
                    <div class="absolute inset-0 bg-gradient-to-br from-podcast-secondary/10 to-podcast-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>
                    <div class="w-full aspect-square rounded-[1.5rem] overflow-hidden shadow-inner">
                        @if($episode->featured_image)
                            <img src="{{ asset('storage/' . $episode->featured_image) }}" alt="{{ $episode->title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
                        @elseif($episode->episode_number)
                            <div class="w-full h-full bg-gradient-to-br from-podcast-secondary to-podcast-primary flex items-center justify-center text-white font-bold font-heading text-6xl group-hover:scale-105 transition-transform duration-700">
                                #{{ $episode->episode_number }}
                            </div>
                        @else
                            <div class="w-full h-full bg-gradient-to-br from-podcast-secondary to-podcast-primary flex items-center justify-center text-white group-hover:scale-105 transition-transform duration-700">
                                <svg class="w-24 h-24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"></path></svg>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Listen On Platforms Widget -->
                <div class="bg-white rounded-3xl p-6 md:p-8 shadow-sm border border-purple-50">
                    <h3 class="text-sm font-bold text-gray-900 uppercase tracking-widest mb-6 flex items-center gap-2">
                        <svg class="w-5 h-5 text-podcast-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        Available On
                    </h3>
                    <div class="flex flex-col gap-4">
                        <a href="https://www.instagram.com/brandedyoungug?igsh=bTVhZHNkeGJzcnNx" target="_blank" class="flex items-center justify-between group bg-gray-50 border border-gray-100 p-4 rounded-2xl hover:bg-[#E1306C] hover:border-[#E1306C] transition-all">
                            <span class="flex items-center gap-3 font-semibold text-gray-700 group-hover:text-white transition-colors">
                                <svg class="w-6 h-6 text-[#E1306C] group-hover:text-white transition-colors" 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-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.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.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
                                Instagram
                            </span>
                            <svg class="w-5 h-5 text-gray-400 group-hover:text-white group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                        </a>
                        
                        <a href="https://www.tiktok.com/@young_brandedug?_r=1&_t=ZS-97jGc0jlqYj" target="_blank" class="flex items-center justify-between group bg-gray-50 border border-gray-100 p-4 rounded-2xl hover:bg-black hover:border-black transition-all">
                            <span class="flex items-center gap-3 font-semibold text-gray-700 group-hover:text-white transition-colors">
                                <svg class="w-6 h-6 text-black group-hover:text-white transition-colors" fill="currentColor" viewBox="0 0 24 24"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/></svg>
                                TikTok
                            </span>
                            <svg class="w-5 h-5 text-gray-400 group-hover:text-white group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                        </a>
                    </div>
                </div>

                <!-- Guest Widget -->
                @if($episode->guest_name)
                    <div class="bg-gradient-to-br from-podcast-primary to-podcast-secondary rounded-3xl p-[2px] shadow-lg">
                        <div class="bg-white rounded-[22px] p-6 md:p-8 h-full">
                            <h3 class="text-xs font-bold text-gray-500 uppercase tracking-widest mb-5">Featured Guest</h3>
                            <div class="flex flex-col items-center text-center">
                                <div class="w-20 h-20 rounded-full bg-podcast-primary/10 flex items-center justify-center text-podcast-primary font-bold font-heading text-3xl mb-4 border-4 border-white shadow-sm">
                                    {{ strtoupper(substr($episode->guest_name, 0, 1)) }}
                                </div>
                                <p class="font-bold font-heading text-2xl text-theme-900 mb-1">{{ $episode->guest_name }}</p>
                                @if($episode->guest_credentials)
                                    <p class="text-sm font-medium text-theme-600 mb-4">{{ $episode->guest_credentials }}</p>
                                @endif
                                
                                @if(is_array($episode->guest_socials) && count($episode->guest_socials) > 0)
                                    <div class="flex flex-wrap justify-center gap-3 w-full border-t border-gray-100 pt-4 mt-2">
                                        @foreach($episode->guest_socials as $socialUrl)
                                            <a href="{{ $socialUrl }}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-gray-50 hover:bg-podcast-primary/10 hover:text-podcast-primary rounded-full text-xs font-semibold text-gray-600 transition-colors">
                                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg>
                                                {{ parse_url($socialUrl, PHP_URL_HOST) ?? 'Profile' }}
                                            </a>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif

                <!-- Topic Summary Widget -->
                @if($episode->topic_summary)
                    <div class="bg-white rounded-3xl p-6 md:p-8 shadow-sm border border-purple-50">
                        <h3 class="text-sm font-bold text-gray-900 uppercase tracking-widest mb-4 flex items-center gap-2">
                            <svg class="w-5 h-5 text-podcast-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                            In This Episode
                        </h3>
                        <p class="text-theme-600 leading-relaxed text-[15px]">{{ $episode->topic_summary }}</p>
                    </div>
                @endif

                <!-- Sponsor Tags -->
                @if($episode->sponsor_tags)
                    <div class="bg-white rounded-3xl p-6 md:p-8 shadow-sm border border-purple-50">
                        <h3 class="text-sm font-bold text-gray-900 uppercase tracking-widest mb-5 flex items-center gap-2">
                            <svg class="w-5 h-5 text-podcast-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
                            Sponsored By
                        </h3>
                        <div class="flex flex-wrap gap-2">
                            @foreach(explode(',', $episode->sponsor_tags) as $sponsor)
                                <span class="inline-flex items-center px-4 py-2 bg-purple-50 border border-purple-100 rounded-xl text-sm font-bold text-podcast-primary shadow-sm hover:scale-105 transition-transform cursor-default">
                                    {{ trim($sponsor) }}
                                </span>
                            @endforeach
                        </div>
                    </div>
                @endif

            </div>
            
        </div>
    </div>
</div>
@endsection