@extends('layouts.app')

@section('title', $video->title)

@section('content')
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-12">
        <div class="flex flex-col lg:flex-row gap-8">

            {{-- Main Content --}}
            <div class="flex-1 min-w-0">
                {{-- Video Player --}}
                <div class="relative aspect-video rounded-xl overflow-hidden shadow-2xl shadow-red-900/20 ring-1 ring-gray-800/50 bg-black">
                    <iframe
                        src="https://www.youtube-nocookie.com/embed/{{ $video->youtube_id }}"
                        class="absolute inset-0 w-full h-full"
                        frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                        allowfullscreen
                    ></iframe>
                </div>

                {{-- Video Info --}}
                <div class="mt-6">
                    <h1 class="text-2xl md:text-3xl font-bold text-white leading-tight">
                        {{ $video->title }}
                    </h1>

                    <div class="flex flex-wrap items-center gap-3 mt-4">
                        {{-- Duration --}}
                        <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium bg-gray-800 text-gray-300 border border-gray-700">
                            <svg class="w-4 h-4 text-yellow-400" 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"/>
                            </svg>
                            {{ $video->formatted_duration }}
                        </span>
                    </div>
                </div>

                {{-- Action Buttons --}}
                <div class="flex flex-wrap items-center gap-3 mt-6 pt-6 border-t border-gray-700/50">
                    {{-- Download Button --}}
                    <a href="{{ route('videos.download', $video) }}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-red-600 hover:bg-red-700 text-white font-medium rounded-xl transition-all duration-200 hover:shadow-lg hover:shadow-red-900/30 hover:-translate-y-0.5">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                        </svg>
                        Download
                    </a>

                    {{-- Share Button --}}
                    <button
                        onclick="copyShareUrl()"
                        id="share-btn"
                        class="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-800 hover:bg-gray-700 text-gray-300 hover:text-white font-medium rounded-xl border border-gray-700 transition-all duration-200 hover:-translate-y-0.5"
                    >
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/>
                        </svg>
                        <span id="share-text">Share</span>
                    </button>

                    {{-- Watch on YouTube --}}
                    <a href="{{ $video->youtube_url }}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-800 hover:bg-gray-700 text-gray-300 hover:text-white font-medium rounded-xl border border-gray-700 transition-all duration-200 hover:-translate-y-0.5">
                        <svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.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>
                        YouTube
                    </a>

                    {{-- Add to Playlist (Auth only) --}}
                    @auth
                        @if($playlists && $playlists->isNotEmpty())
                            <div class="relative" id="playlist-dropdown-wrapper">
                                <button
                                    onclick="togglePlaylistDropdown()"
                                    class="inline-flex items-center gap-2 px-5 py-2.5 bg-red-600 hover:bg-red-700 text-white font-medium rounded-xl transition-all duration-200 hover:-translate-y-0.5"
                                >
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                    </svg>
                                    Add to Playlist
                                    <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="M19 9l-7 7-7-7"/>
                                    </svg>
                                </button>

                                {{-- Dropdown menu --}}
                                <div id="playlist-dropdown" class="hidden absolute left-0 top-full mt-2 w-64 bg-gray-800 border border-gray-700 rounded-xl shadow-xl shadow-black/30 z-20 overflow-hidden">
                                    <div class="py-2 max-h-60 overflow-y-auto">
                                        @foreach($playlists as $playlist)
                                            <form method="POST" action="{{ route('playlists.addVideo', $playlist) }}">
                                                @csrf
                                                <input type="hidden" name="video_id" value="{{ $video->id }}">
                                                <button type="submit" class="w-full text-left px-4 py-2.5 text-sm text-gray-300 hover:bg-red-600/20 hover:text-white transition-colors flex items-center gap-3">
                                                    <svg class="w-4 h-4 text-yellow-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
                                                    </svg>
                                                    {{ $playlist->name }}
                                                </button>
                                            </form>
                                        @endforeach
                                    </div>
                                    <div class="border-t border-gray-700 p-2">
                                        <a href="{{ route('playlists.create') }}" class="block text-center text-sm text-yellow-400 hover:text-yellow-300 py-2 transition-colors">
                                            + Create New Playlist
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @else
                            <a href="{{ route('playlists.create') }}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-red-600 hover:bg-red-700 text-white font-medium rounded-xl transition-all duration-200 hover:-translate-y-0.5">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                </svg>
                                Create Playlist
                            </a>
                        @endif
                    @endauth
                </div>

                {{-- Description --}}
                @if($video->description)
                    <div class="mt-6 p-5 bg-gray-800/50 rounded-xl border border-gray-700/50">
                        <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">Description</h3>
                        <p class="text-gray-300 text-sm leading-relaxed whitespace-pre-line">{{ $video->description }}</p>
                    </div>
                @endif

                {{-- My Notes & Reflections --}}
                @auth
                    <div class="mt-8 p-6 bg-gray-800/50 rounded-xl border border-gray-700/50" id="notes-section">
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center gap-3">
                                <div class="w-1.5 h-6 bg-yellow-500 rounded-full"></div>
                                <h3 class="text-lg font-bold text-white">My Notes & Reflections</h3>
                            </div>
                            <span class="text-sm text-gray-500">{{ $currentYear }}</span>
                        </div>

                        {{-- Year Tabs (if previous notes exist) --}}
                        @if($previousNotes->isNotEmpty())
                            <div class="flex gap-2 mb-4 overflow-x-auto pb-1">
                                <button onclick="switchNoteYear('current')" id="year-tab-current"
                                    class="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors bg-yellow-500/20 text-yellow-300 border border-yellow-500/30">
                                    {{ $currentYear }}
                                </button>
                                @foreach($previousNotes as $prevNote)
                                    <button onclick="switchNoteYear('{{ $prevNote->year }}')" id="year-tab-{{ $prevNote->year }}"
                                        class="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors bg-gray-700/50 text-gray-400 border border-gray-600/30 hover:text-gray-300">
                                        {{ $prevNote->year }}
                                    </button>
                                @endforeach
                            </div>
                        @endif

                        {{-- Current Year Note (editable) --}}
                        <div id="note-current" class="note-year-panel">
                            <div class="relative">
                                <textarea
                                    id="note-textarea"
                                    rows="6"
                                    maxlength="10000"
                                    placeholder="Write your thoughts, reflections, and insights about this devotional..."
                                    class="w-full bg-gray-900/50 text-gray-200 rounded-xl border border-gray-600/50 p-4 text-sm leading-relaxed resize-y focus:outline-none focus:ring-2 focus:ring-yellow-500/50 focus:border-yellow-500/50 placeholder-gray-500"
                                >{{ $currentNote ? $currentNote->content : '' }}</textarea>
                            </div>

                            <div class="flex items-center justify-between mt-3">
                                <div class="flex items-center gap-3">
                                    <button onclick="saveNote()" id="save-note-btn"
                                        class="inline-flex items-center gap-2 px-5 py-2 bg-yellow-600 hover:bg-yellow-700 text-white font-medium rounded-lg text-sm transition-all duration-200 hover:shadow-lg hover:shadow-yellow-900/30">
                                        <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="M5 13l4 4L19 7"/>
                                        </svg>
                                        <span id="save-note-text">Save Notes</span>
                                    </button>
                                    <span id="save-status" class="text-sm text-gray-500 hidden"></span>
                                </div>
                                <span id="char-count" class="text-xs text-gray-500">
                                    <span id="char-current">{{ $currentNote ? strlen($currentNote->content) : 0 }}</span> / 10,000
                                </span>
                            </div>

                            @if($currentNote)
                                <div class="flex items-center justify-between mt-3 pt-3 border-t border-gray-700/30">
                                    <span class="text-xs text-gray-500">
                                        Last saved {{ $currentNote->updated_at->diffForHumans() }}
                                    </span>
                                    <button onclick="deleteNote({{ $currentNote->id }})" class="text-xs text-red-400 hover:text-red-300 transition-colors">
                                        Delete this note
                                    </button>
                                </div>
                            @endif
                        </div>

                        {{-- Previous Year Notes (read-only) --}}
                        @foreach($previousNotes as $prevNote)
                            <div id="note-{{ $prevNote->year }}" class="note-year-panel hidden">
                                <div class="bg-gray-900/30 rounded-xl border border-gray-700/30 p-4">
                                    <div class="flex items-center justify-between mb-3">
                                        <span class="text-sm font-medium text-gray-400">{{ $prevNote->year }} Reflections</span>
                                        <span class="text-xs text-gray-500">{{ str_word_count($prevNote->content) }} words</span>
                                    </div>
                                    <p class="text-gray-300 text-sm leading-relaxed whitespace-pre-line">{{ $prevNote->content }}</p>
                                    <span class="text-xs text-gray-500 mt-3 block">
                                        Written {{ $prevNote->updated_at->format('F j, Y') }}
                                    </span>
                                </div>
                            </div>
                        @endforeach

                        {{-- Link to Journal --}}
                        <div class="mt-4 pt-4 border-t border-gray-700/30">
                            <a href="{{ route('journal.index') }}" class="text-yellow-400 hover:text-yellow-300 text-sm font-medium transition-colors inline-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 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                                </svg>
                                View My Full Journal
                            </a>
                        </div>
                    </div>
                @else
                    <div class="mt-8 p-6 bg-gray-800/30 rounded-xl border border-gray-700/30 text-center">
                        <svg class="w-10 h-10 text-gray-600 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                        </svg>
                        <p class="text-gray-400 text-sm mb-2">Sign in to save your reflections on this devotional.</p>
                        <a href="{{ route('login') }}" class="text-yellow-400 hover:text-yellow-300 text-sm font-medium transition-colors">
                            Sign In &rarr;
                        </a>
                    </div>
                @endauth
            </div>

            {{-- Related Videos Sidebar --}}
            <div class="lg:w-96 flex-shrink-0">
                <h2 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
                    <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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                    </svg>
                    Related Videos
                </h2>

                @if($relatedVideos->isEmpty())
                    <p class="text-gray-500 text-sm">No related videos available.</p>
                @else
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-3">
                        @foreach($relatedVideos as $related)
                            <a href="{{ route('videos.show', $related) }}" class="group flex gap-3 p-2 rounded-lg hover:bg-gray-800/70 transition-colors">
                                {{-- Thumbnail --}}
                                <div class="relative w-40 flex-shrink-0 aspect-video rounded-lg overflow-hidden">
                                    <img
                                        src="https://img.youtube.com/vi/{{ $related->youtube_id }}/mqdefault.jpg"
                                        alt="{{ $related->title }}"
                                        class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
                                        loading="lazy"
                                    >
                                    {{-- Duration badge --}}
                                    <div class="absolute bottom-1 right-1 bg-black/80 text-white text-xs font-medium px-1.5 py-0.5 rounded">
                                        {{ $related->formatted_duration }}
                                    </div>
                                </div>
                                {{-- Info --}}
                                <div class="flex-1 min-w-0 py-0.5">
                                    <h3 class="text-sm font-medium text-gray-300 group-hover:text-white transition-colors line-clamp-2 leading-snug">
                                        {{ $related->title }}
                                    </h3>
                                    <p class="text-xs text-gray-500 mt-1.5">
                                        {{ $related->formatted_duration }}
                                    </p>
                                </div>
                            </a>
                        @endforeach
                    </div>
                @endif
            </div>

        </div>
    </div>
@endsection

@push('scripts')
<script>
    // Copy share URL to clipboard
    function copyShareUrl() {
        const url = '{{ route('videos.show', $video) }}';
        navigator.clipboard.writeText(url).then(function() {
            const shareText = document.getElementById('share-text');
            const originalText = shareText.textContent;
            shareText.textContent = 'Copied!';
            document.getElementById('share-btn').classList.add('ring-2', 'ring-red-500');
            setTimeout(function() {
                shareText.textContent = originalText;
                document.getElementById('share-btn').classList.remove('ring-2', 'ring-red-500');
            }, 2000);
        }).catch(function() {
            // Fallback: select text from a temporary input
            const input = document.createElement('input');
            input.value = url;
            document.body.appendChild(input);
            input.select();
            document.execCommand('copy');
            document.body.removeChild(input);

            const shareText = document.getElementById('share-text');
            shareText.textContent = 'Copied!';
            setTimeout(function() {
                shareText.textContent = 'Share';
            }, 2000);
        });
    }

    // Toggle playlist dropdown
    function togglePlaylistDropdown() {
        const dropdown = document.getElementById('playlist-dropdown');
        if (dropdown) {
            dropdown.classList.toggle('hidden');
        }
    }

    // Close dropdown when clicking outside
    document.addEventListener('click', function(event) {
        const wrapper = document.getElementById('playlist-dropdown-wrapper');
        const dropdown = document.getElementById('playlist-dropdown');
        if (wrapper && dropdown && !wrapper.contains(event.target)) {
            dropdown.classList.add('hidden');
        }
    });

    // --- Devotional Notes ---
    const noteTextarea = document.getElementById('note-textarea');
    if (noteTextarea) {
        // Character count
        noteTextarea.addEventListener('input', function() {
            const count = this.value.length;
            document.getElementById('char-current').textContent = count.toLocaleString();
        });
    }

    // Save note via AJAX
    function saveNote() {
        const textarea = document.getElementById('note-textarea');
        const content = textarea ? textarea.value.trim() : '';
        if (!content) return;

        const btn = document.getElementById('save-note-btn');
        const btnText = document.getElementById('save-note-text');
        const status = document.getElementById('save-status');

        btnText.textContent = 'Saving...';
        btn.disabled = true;

        fetch('{{ route("notes.store", $video) }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            },
            body: JSON.stringify({
                content: content,
                year: {{ $currentYear }},
            }),
        })
        .then(r => r.json())
        .then(data => {
            btnText.textContent = 'Saved!';
            btn.classList.remove('bg-yellow-600', 'hover:bg-yellow-700');
            btn.classList.add('bg-green-600');
            status.textContent = 'Saved just now';
            status.classList.remove('hidden');

            setTimeout(() => {
                btnText.textContent = 'Save Notes';
                btn.classList.remove('bg-green-600');
                btn.classList.add('bg-yellow-600', 'hover:bg-yellow-700');
                btn.disabled = false;
            }, 2000);
        })
        .catch(() => {
            btnText.textContent = 'Error - Try Again';
            btn.classList.remove('bg-yellow-600', 'hover:bg-yellow-700');
            btn.classList.add('bg-red-600');
            setTimeout(() => {
                btnText.textContent = 'Save Notes';
                btn.classList.remove('bg-red-600');
                btn.classList.add('bg-yellow-600', 'hover:bg-yellow-700');
                btn.disabled = false;
            }, 2000);
        });
    }

    // Delete note
    function deleteNote(noteId) {
        if (!confirm('Are you sure you want to delete this note?')) return;

        fetch('{{ url("/videos/" . $video->id . "/notes") }}/' + noteId, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            },
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                document.getElementById('note-textarea').value = '';
                document.getElementById('char-current').textContent = '0';
                location.reload();
            }
        });
    }

    // Switch between year tabs
    function switchNoteYear(year) {
        // Hide all panels
        document.querySelectorAll('.note-year-panel').forEach(p => p.classList.add('hidden'));
        // Deactivate all tabs
        document.querySelectorAll('[id^="year-tab-"]').forEach(t => {
            t.classList.remove('bg-yellow-500/20', 'text-yellow-300', 'border-yellow-500/30');
            t.classList.add('bg-gray-700/50', 'text-gray-400', 'border-gray-600/30');
        });

        // Show selected panel and activate tab
        const panel = document.getElementById('note-' + year);
        const tab = document.getElementById('year-tab-' + year);
        if (panel) panel.classList.remove('hidden');
        if (tab) {
            tab.classList.remove('bg-gray-700/50', 'text-gray-400', 'border-gray-600/30');
            tab.classList.add('bg-yellow-500/20', 'text-yellow-300', 'border-yellow-500/30');
        }
    }
</script>
@endpush