@extends('front.'.config('app.template', 'tendra').'.master')

@section('body')

<div class="px-[1.5rem] py-[2rem]">
	<div class="max-w-[1000px] w-full mx-auto">
		{{-- Back Link --}}
		<div class="mb-[2rem]">
			<a href="{{ route('stories.index') }}" class="inline-flex items-center text-[#68359A] hover:underline">
				<i class="mr-[.5rem]">←</i>
				{{ __('Back to Stories') }}
			</a>
		</div>

		<div class="grid grid-cols-1 lg:grid-cols-3 gap-[2rem]">
			{{-- Story Info --}}
			<div class="lg:col-span-2">
				<div class="bg-white rounded-[.5rem] shadow-lg overflow-hidden">
					{{-- Cover Image --}}
					@if($story->cover_image)
					<img src="{{ asset('storage/' . $story->cover_image) }}" alt="{{ $story->title }}" class="w-full h-[300px] object-cover">
					@else
					<div class="w-full h-[300px] bg-gray-200 flex items-center justify-center">
						<i class="text-[5rem] text-gray-400">🎧</i>
					</div>
					@endif

					<div class="p-[2rem]">
						<div class="flex items-start justify-between mb-[1rem]">
							<div>
								<h1 class="text-[2rem] font-[700] mb-[.5rem]">{{ $story->title }}</h1>
								<div class="flex items-center gap-[1rem] text-[.9rem] text-gray-600">
									<span>{{ $story->category->name ?? __('Uncategorized') }}</span>
									@if($story->duration)
									<span>• {{ $story->duration }}</span>
									@endif
									<span>• {{ $story->created_at->format('M d, Y') }}</span>
								</div>
							</div>
							
							<div class="text-right">
								@if($story->is_free)
								<span class="bg-green-500 text-white px-[1rem] py-[.5rem] rounded-[.5rem] font-semibold">
									{{ __('Free') }}
								</span>
								@else
								<span class="text-[1.5rem] font-[700] text-[#68359A]">
									{{ config('payments.currency_symbol') }}{{ $story->price }}
								</span>
								@endif
							</div>
						</div>

						{{-- Rating Display --}}
						@if($averageRating)
						<div class="flex items-center gap-[.5rem] mb-[1rem]">
							<div class="flex">
								@for($i = 1; $i <= 5; $i++)
								<span class="text-[1.2rem] {{ $i <= round($averageRating) ? 'text-yellow-400' : 'text-gray-300' }}">⭐</span>
								@endfor
							</div>
							<span class="text-[.9rem] text-gray-600">{{ number_format($averageRating, 1) }} ({{ $totalRatings }} {{ __('ratings') }})</span>
						</div>
						@endif

						<div class="prose max-w-none mb-[2rem]">
							{!! nl2br(e($story->description)) !!}
						</div>

						{{-- Audio Player / Purchase Section --}}
						@if($userHasAccess)
							@if($story->audio_file)
							<div class="bg-gray-100 rounded-[.5rem] p-[1.5rem] mb-[2rem]">
								<h3 class="text-[1.2rem] font-[600] mb-[1rem]">{{ __('Listen to Story') }}</h3>
								<audio controls class="w-full">
									<source src="{{ route('stories.stream', $story->id) }}" type="audio/mpeg">
									{{ __('Your browser does not support the audio element.') }}
								</audio>
							</div>
							@endif
						@else
							<div class="bg-[#68359A] bg-opacity-10 border border-[#68359A] rounded-[.5rem] p-[1.5rem] mb-[2rem] text-center">
								@if(!Auth::check())
								<h3 class="text-[1.2rem] font-[600] mb-[1rem]">{{ __('Sign in to access this story') }}</h3>
								<div class="flex gap-[1rem] justify-center">
									<a href="{{ route('login') }}" class="bg-[#68359A] text-white px-[2rem] py-[.75rem] rounded-[.5rem] hover:bg-[#5a2d85]">
										{{ __('Sign In') }}
									</a>
									<a href="{{ route('register') }}" class="border border-[#68359A] text-[#68359A] px-[2rem] py-[.75rem] rounded-[.5rem] hover:bg-[#68359A] hover:text-white">
										{{ __('Sign Up') }}
									</a>
								</div>
								@elseif(!$story->is_free)
								<h3 class="text-[1.2rem] font-[600] mb-[1rem]">{{ __('Purchase this story to listen') }}</h3>
								<button onclick="purchaseStory({{ $story->id }})" class="bg-[#68359A] text-white px-[2rem] py-[.75rem] rounded-[.5rem] hover:bg-[#5a2d85]">
									{{ __('Add to Cart') }} - {{ config('payments.currency_symbol') }}{{ $story->price }}
								</button>
								@endif
							</div>
						@endif

						{{-- User Rating (if has access) --}}
						@if(Auth::check() && $userHasAccess)
						<div class="border-t pt-[2rem] mb-[2rem]">
							<h3 class="text-[1.2rem] font-[600] mb-[1rem]">{{ __('Rate this Story') }}</h3>
							<div class="flex items-center gap-[.5rem]" id="rating-section">
								@for($i = 1; $i <= 5; $i++)
								<button onclick="rateStory({{ $i }})" class="text-[1.5rem] rating-star {{ $userRating && $i <= $userRating->rating ? 'text-yellow-400' : 'text-gray-300' }} hover:text-yellow-400">
									⭐
								</button>
								@endfor
								@if($userRating)
								<span class="ml-[1rem] text-[.9rem] text-gray-600">{{ __('Your rating') }}: {{ $userRating->rating }}/5</span>
								@endif
							</div>
						</div>
						@endif
					</div>
				</div>
			</div>

			{{-- Sidebar --}}
			<div class="space-y-[2rem]">
				{{-- Comments Section --}}
				@if(Auth::check() && $userHasAccess)
				<div class="bg-white rounded-[.5rem] shadow-lg p-[1.5rem]">
					<h3 class="text-[1.2rem] font-[600] mb-[1rem]">{{ __('Add Comment') }}</h3>
					<form id="comment-form">
						<textarea name="comment" rows="4" class="w-full border border-gray-300 rounded-[.5rem] p-[.75rem] resize-none" placeholder="{{ __('Share your thoughts about this story...') }}"></textarea>
						<button type="submit" class="mt-[.75rem] bg-[#68359A] text-white px-[1.5rem] py-[.5rem] rounded-[.25rem] text-[.9rem] hover:bg-[#5a2d85]">
							{{ __('Post Comment') }}
						</button>
					</form>
				</div>
				@endif

				{{-- Existing Comments --}}
				@if($story->comments->count() > 0)
				<div class="bg-white rounded-[.5rem] shadow-lg p-[1.5rem]">
					<h3 class="text-[1.2rem] font-[600] mb-[1rem]">{{ __('Comments') }} ({{ $story->comments->count() }})</h3>
					<div class="space-y-[1rem]">
						@foreach($story->comments as $comment)
						<div class="border-b border-gray-200 pb-[1rem] last:border-b-0">
							<div class="flex items-start gap-[.75rem]">
								<div class="w-[40px] h-[40px] bg-[#68359A] rounded-full flex items-center justify-center text-white font-[600]">
									{{ substr($comment->user->name, 0, 1) }}
								</div>
								<div class="flex-1">
									<div class="font-[600] text-[.9rem]">{{ $comment->user->name }}</div>
									<div class="text-[.8rem] text-gray-500 mb-[.5rem]">{{ $comment->created_at->diffForHumans() }}</div>
									<div class="text-[.9rem]">{{ $comment->comment }}</div>
								</div>
							</div>
						</div>
						@endforeach
					</div>
				</div>
				@endif

				{{-- Related Stories --}}
				@if($relatedStories->count() > 0)
				<div class="bg-white rounded-[.5rem] shadow-lg p-[1.5rem]">
					<h3 class="text-[1.2rem] font-[600] mb-[1rem]">{{ __('Related Stories') }}</h3>
					<div class="space-y-[1rem]">
						@foreach($relatedStories as $relatedStory)
						<div class="flex gap-[.75rem]">
							@if($relatedStory->cover_image)
							<img src="{{ asset('storage/' . $relatedStory->cover_image) }}" alt="{{ $relatedStory->title }}" class="w-[60px] h-[60px] object-cover rounded-[.25rem]">
							@else
							<div class="w-[60px] h-[60px] bg-gray-200 rounded-[.25rem] flex items-center justify-center">
								🎧
							</div>
							@endif
							<div class="flex-1">
								<a href="{{ route('stories.show', $relatedStory->slug) }}" class="font-[600] text-[.9rem] hover:text-[#68359A] line-clamp-2">
									{{ $relatedStory->title }}
								</a>
								<div class="text-[.8rem] text-gray-600 mt-[.25rem]">
									@if($relatedStory->is_free)
									{{ __('Free') }}
									@else
									{{ config('payments.currency_symbol') }}{{ $relatedStory->price }}
									@endif
								</div>
							</div>
						</div>
						@endforeach
					</div>
				</div>
				@endif
			</div>
		</div>
	</div>
</div>

<script>
function rateStory(rating) {
	$.post('{{ route("stories.rate") }}', {
		story_id: {{ $story->id }},
		rating: rating,
		_token: '{{ csrf_token() }}'
	}).done(function(response) {
		if(response.success) {
			// Update rating display
			$('.rating-star').each(function(index) {
				if(index < rating) {
					$(this).removeClass('text-gray-300').addClass('text-yellow-400');
				} else {
					$(this).removeClass('text-yellow-400').addClass('text-gray-300');
				}
			});
			alert(response.message);
		} else {
			alert(response.message);
		}
	});
}

function purchaseStory(storyId) {
	$.post('{{ route("stories.purchase") }}', {
		story_id: storyId,
		_token: '{{ csrf_token() }}'
	}).done(function(response) {
		if(response.success) {
			if(response.redirect_url) {
				window.location.href = response.redirect_url;
			} else {
				alert(response.message);
			}
		} else {
			alert(response.message);
		}
	});
}

$('#comment-form').on('submit', function(e) {
	e.preventDefault();
	
	let comment = $('textarea[name="comment"]').val();
	if(!comment.trim()) {
		alert('{{ __("Please enter a comment") }}');
		return;
	}

	$.post('{{ route("stories.comment") }}', {
		story_id: {{ $story->id }},
		comment: comment,
		_token: '{{ csrf_token() }}'
	}).done(function(response) {
		if(response.success) {
			$('textarea[name="comment"]').val('');
			alert(response.message);
		} else {
			alert(response.message);
		}
	});
});
</script>

@endsection