@extends('layouts.app')

@section('title', $ringtone->seo_title ?: $ringtone->title.' '.$ringtone->content_type_label.' Download')
@section('meta_description', $ringtone->seo_description ?: ('Download '.$ringtone->title.' '.$ringtone->content_type_label.' free with preview and details.'))
@section('meta_keywords', $ringtone->seo_keywords ?: strtolower($ringtone->title.', '.$ringtone->title.' '.$ringtone->content_type_label.', free '.$ringtone->content_type_label))
@section('canonical', route('frontend.content.show', $ringtone->slug))
@section('og_type', 'article')
@if ($ringtone->isImageType() || $ringtone->isVideoType())
    @section('og_image', $ringtone->file_url)
@endif

@section('content')
    <nav class="mb-5 text-sm text-slate-600">
        <a href="{{ route('frontend.home') }}" class="hover:text-sky-600">Home</a>
        @foreach ($breadcrumbs as $crumb)
            / <a href="{{ $crumb->url }}" class="hover:text-sky-600">{{ $crumb->name }}</a>
        @endforeach
        / {{ $ringtone->title }}
    </nav>

    <div class="grid gap-4 lg:grid-cols-3">
        <article class="rounded-2xl border border-slate-200 bg-white shadow-sm lg:col-span-2">
            <div class="content-hero rounded-t-2xl border-b border-slate-200 bg-gradient-to-r from-slate-50 to-sky-50 p-5">
                <p class="content-hero-badge mb-2 inline-flex rounded-full border border-sky-200 bg-white px-3 py-1 text-xs font-medium text-sky-700">
                    {{ $ringtone->content_type_label }}
                </p>
                <h1 class="text-2xl font-bold text-slate-900 sm:text-3xl">{{ $ringtone->title }}</h1>
                @if ($ringtone->description)
                    <p class="mt-3 text-sm leading-6 text-slate-700">{{ $ringtone->description }}</p>
                @endif
            </div>

            <div class="p-5">
                <div class="grid gap-3 sm:grid-cols-2">
                    @if ($ringtone->duration)
                        <div class="rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-700">
                            <p class="text-xs text-slate-500">Duration</p>
                            <p class="font-semibold">{{ gmdate('i:s', $ringtone->duration) }}</p>
                        </div>
                    @endif
                    <div class="rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-700">
                        <p class="text-xs text-slate-500">Size</p>
                        <p class="font-semibold">{{ $ringtone->size ? number_format($ringtone->size / 1024, 1).' KB' : 'N/A' }}</p>
                    </div>
                    <div class="rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-700">
                        <p class="text-xs text-slate-500">Total Downloads</p>
                        <p class="font-semibold">{{ number_format($ringtone->downloads) }}</p>
                    </div>
                    <div class="rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-700">
                        <p class="text-xs text-slate-500">Format</p>
                        <p class="font-semibold">{{ strtoupper(pathinfo($ringtone->download_file_path, PATHINFO_EXTENSION) ?: 'FILE') }}</p>
                    </div>
                    <div class="rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-700">
                        <p class="text-xs text-slate-500">Uploaded By</p>
                        <p class="font-semibold">{{ $ringtone->uploader?->name ?? 'Admin' }}</p>
                    </div>
                </div>

                @if ($ringtone->isAudioType())
                    <div class="mt-5">
                        <div id="wave-player" class="rounded-2xl border border-slate-200 bg-slate-50 p-4" data-audio-url="{{ $ringtone->file_url }}">
                            <div class="flex items-center justify-between gap-3">
                                <button id="wave-play-toggle" type="button" class="btn-primary inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-full" title="Play Preview">
                                    <svg id="wave-icon-play" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M8 5.5v13l10-6.5-10-6.5z"/>
                                    </svg>
                                    <svg id="wave-icon-pause" class="hidden h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M7 5h4v14H7zM13 5h4v14h-4z"/>
                                    </svg>
                                </button>

                                <div class="flex items-center gap-2 text-sm text-slate-600">
                                    <span id="wave-current-time">00:00</span>
                                    <span>/</span>
                                    <span id="wave-total-time">{{ $ringtone->duration ? gmdate('i:s', $ringtone->duration) : '00:00' }}</span>
                                </div>
                            </div>

                            <div id="waveform" class="mt-3"></div>

                            <audio id="native-audio-fallback" controls preload="none" class="mt-3 hidden w-full">
                                <source src="{{ $ringtone->file_url }}" type="audio/mpeg">
                            </audio>
                        </div>
                    </div>
                @elseif ($ringtone->isImageType())
                    <div class="mt-5 rounded-2xl border border-slate-200 bg-slate-50 p-4">
                        <img src="{{ $ringtone->file_url }}" alt="{{ $ringtone->title }}" class="mx-auto max-h-[420px] w-auto rounded-xl object-contain">
                    </div>
                @elseif ($ringtone->isVideoType())
                    <div class="mt-5 rounded-2xl border border-slate-200 bg-slate-50 p-4">
                        <video src="{{ $ringtone->file_url }}" controls playsinline preload="metadata" class="mx-auto max-h-[420px] w-full rounded-xl"></video>
                    </div>
                @endif

                <a href="{{ route('frontend.content.download', $ringtone->slug) }}" class="btn-primary mt-4 inline-flex w-full items-center justify-center rounded-xl px-4 py-3 text-base font-semibold sm:w-auto sm:px-6">
                    Download {{ $ringtone->content_type_label }}
                </a>
                @if ($ringtone->isAudioType() && !empty($hasIphoneFile))
                    <a href="{{ route('frontend.content.download.iphone', $ringtone->slug) }}" class="mt-2 inline-flex w-full items-center justify-center rounded-xl border border-slate-300 bg-white px-4 py-3 text-base font-semibold text-slate-700 hover:border-sky-300 hover:text-sky-700 sm:w-auto sm:px-6">
                        Download for iPhone (.m4r)
                    </a>
                @endif

                <div class="mt-3 flex items-center gap-2">
                    <button
                        type="button"
                        data-detail-share
                        data-ringtone-title="{{ $ringtone->title }}"
                        data-ringtone-url="{{ route('frontend.content.show', $ringtone->slug) }}"
                        title="Share"
                        class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-slate-100 text-slate-600 transition hover:bg-slate-200"
                    >
                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M8 12l8-5m-8 5l8 5M7 12a2 2 0 11-4 0 2 2 0 014 0zm14-5a2 2 0 11-4 0 2 2 0 014 0zm0 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                        </svg>
                    </button>
                    <button
                        type="button"
                        data-detail-like
                        data-ringtone-key="{{ $ringtone->slug }}"
                        title="Like"
                        class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-slate-100 text-slate-600 transition hover:bg-slate-200"
                    >
                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 21s-6.7-4.35-9.33-8.27C.97 10.2 2.1 6.5 5.65 5.35 8.1 4.57 10 5.64 12 7.7c2-2.06 3.9-3.13 6.35-2.35 3.55 1.15 4.68 4.85 2.98 7.38C18.7 16.65 12 21 12 21z"/>
                        </svg>
                    </button>
                </div>

                @if ($ringtone->tags->isNotEmpty())
                    <div class="mt-4 flex flex-wrap gap-2">
                        @foreach ($ringtone->tags as $tag)
                            <a href="{{ route('frontend.search', ['q' => $tag->name]) }}" class="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs text-slate-700 hover:border-sky-200 hover:text-sky-700">
                                #{{ $tag->name }}
                            </a>
                        @endforeach
                    </div>
                @endif
            </div>
        </article>

        <aside class="space-y-4">
            <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
                <h2 class="text-lg font-semibold">Quick Download</h2>
                <p class="mt-2 text-sm text-slate-600">Tap the button below for direct download.</p>
                <a href="{{ route('frontend.content.download', $ringtone->slug) }}" class="btn-primary mt-3 inline-flex w-full items-center justify-center rounded-xl px-4 py-2.5 text-sm font-semibold">
                    Download Now
                </a>
                @if ($ringtone->isAudioType() && !empty($hasIphoneFile))
                    <a href="{{ route('frontend.content.download.iphone', $ringtone->slug) }}" class="mt-2 inline-flex w-full items-center justify-center rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 hover:border-sky-300 hover:text-sky-700">
                        iPhone .m4r Download
                    </a>
                @endif
            </div>

            <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
                <h2 class="text-lg font-semibold">More to Explore</h2>
                <div class="mt-3 space-y-2">
                    @forelse ($sidebarRecommendations as $item)
                        <a href="{{ route('frontend.content.show', $item->slug) }}" class="block rounded-lg border border-slate-200 px-3 py-2 text-sm transition hover:border-sky-200 hover:text-sky-700">
                            <p class="font-medium">{{ $item->title }}</p>
                            <p class="text-xs text-slate-500">{{ $item->content_type_label }} - {{ number_format($item->downloads) }} downloads</p>
                        </a>
                    @empty
                        <p class="text-sm text-slate-500">No extra content found.</p>
                    @endforelse
                </div>
            </div>
        </aside>
    </div>

    <section class="mt-10">
        <div class="mb-4 flex items-center justify-between gap-3">
            <h2 class="text-2xl font-bold">Related {{ $ringtone->content_type_label }}{{ $relatedRingtones->count() !== 1 ? 's' : '' }}</h2>
            <a href="{{ route('frontend.latest.type', $ringtone->content_type) }}" class="text-sm font-medium text-sky-700 hover:text-sky-800">View All</a>
        </div>

        <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
            @forelse ($relatedRingtones as $item)
                @include('frontend.partials.content-card', ['ringtone' => $item])
            @empty
                <p class="rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-600 sm:col-span-2 xl:col-span-4">
                    No related {{ strtolower($ringtone->content_type_label) }} found.
                </p>
            @endforelse
        </div>
    </section>

    @if ($ringtone->isAudioType())
        <script src="https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.min.js"></script>
        <script>
            (function () {
                const wrapper = document.getElementById('wave-player');
                const waveformEl = document.getElementById('waveform');
                const toggleBtn = document.getElementById('wave-play-toggle');
                const playIcon = document.getElementById('wave-icon-play');
                const pauseIcon = document.getElementById('wave-icon-pause');
                const currentTimeEl = document.getElementById('wave-current-time');
                const totalTimeEl = document.getElementById('wave-total-time');
                const fallbackAudio = document.getElementById('native-audio-fallback');

                if (!wrapper || !waveformEl || !toggleBtn) return;
                if (!window.WaveSurfer) {
                    fallbackAudio?.classList.remove('hidden');
                    return;
                }

                const audioUrl = wrapper.getAttribute('data-audio-url');
                if (!audioUrl) return;
                const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--btn-primary-color').trim() || '#dc2626';

                const formatTime = (seconds) => {
                    const s = Math.max(0, Math.floor(seconds || 0));
                    const mm = String(Math.floor(s / 60)).padStart(2, '0');
                    const ss = String(s % 60).padStart(2, '0');
                    return `${mm}:${ss}`;
                };

                const wavesurfer = WaveSurfer.create({
                    container: waveformEl,
                    waveColor: '#cbd5e1',
                    progressColor: primaryColor,
                    cursorColor: '#0f172a',
                    barWidth: 2,
                    barGap: 2,
                    barRadius: 2,
                    height: 90,
                    normalize: true,
                    url: audioUrl,
                });

                const setPlaying = (playing) => {
                    playIcon.classList.toggle('hidden', playing);
                    pauseIcon.classList.toggle('hidden', !playing);
                    toggleBtn.setAttribute('title', playing ? 'Pause Preview' : 'Play Preview');
                };

                toggleBtn.addEventListener('click', () => {
                    wavesurfer.playPause();
                });

                wavesurfer.on('ready', () => {
                    totalTimeEl.textContent = formatTime(wavesurfer.getDuration());
                });

                wavesurfer.on('play', () => setPlaying(true));
                wavesurfer.on('pause', () => setPlaying(false));
                wavesurfer.on('finish', () => setPlaying(false));
                wavesurfer.on('timeupdate', (currentTime) => {
                    currentTimeEl.textContent = formatTime(currentTime);
                });
                wavesurfer.on('error', () => {
                    fallbackAudio?.classList.remove('hidden');
                });
            })();
        </script>
    @endif
@endsection