@extends('layouts.landing-page')

@section('content')
    <style>
        .following {
            background-color: #4CAF50;
        }
    </style>
    @php
        $bgUrl = app(\App\Services\UserServices::class)->getBgProfile($artist, 'lg');
        $avatarUrl = app(\App\Services\UserServices::class)->getAvatar($artist, 'md');
        $genres = app(\App\Services\UserServices::class)->getAllGenre($artist);
        $roleArray = $artist->getRoleNames();
        $roleContent = '';
        foreach ($roleArray as $role) {
            if ($role == 'Composer') {
                $roleContent =
                    $roleContent .
                    '<span
                    class="bg-red-900/30 text-red-300 px-3 py-1 rounded-full text-sm font-medium border border-red-800">
                    🎵 Composer
                </span>';
            }
            if ($role == 'Artist') {
                $roleContent =
                    $roleContent .
                    '<span
                    class="bg-gray-800 text-gray-300 px-3 py-1 rounded-full text-sm font-medium border border-gray-700">
                    🎤 Artist
                </span>';
            }
            if ($role == 'Cover Creator') {
                $roleContent =
                    $roleContent .
                    '<span
                    class="bg-gray-800 text-gray-300 px-3 py-1 rounded-full text-sm font-medium border border-gray-700">
                    📹 Cover Creator
                </span>';
            }
        }
    @endphp
    <div class="relative mb-6">
        <div class="relative h-64 md:h-80 w-full overflow-hidden rounded-xl">
            {{-- <div class="absolute inset-0 bg-gradient-to-t from-black/90 to-black/30"></div>
            <img src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?q=80&w=1500"
                class="w-full h-full object-cover" alt="Artist banner"> --}}
            @if (isset($banner) && $banner && $banner->picture)
                <div class="absolute inset-0 bg-gradient-to-t from-black/90 to-black/30"></div>
                <img src="{{ asset('storage/' . $banner->picture) }}" class="w-full h-full object-cover"
                    alt="{{ $banner->title ?? 'Featured artist' }}">
            @else
                <div class="absolute inset-0 bg-gradient-to-t from-black/90 to-black/30"></div>
                <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?q=80&w=1200"
                    class="w-full h-full object-cover" alt="Featured artist default">
            @endif
            <!-- Dropdown moved to top right corner -->
            <div class="absolute top-4 right-4 z-20">
                <div class="relative dropdown-container">
                    <button id="dropdownButton"
                        class="w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center transition">
                        <i class="ti ti-dots"></i>
                    </button>
                    <div id="dropdownMenu"
                        class="absolute right-0 mt-2 w-48 bg-[var(--color-bg-card)] rounded-md shadow-lg z-[100] py-1 hidden">
                        {{-- <a href="#" class="block px-4 py-2 text-sm hover:bg-white/10 transition">
                            <i class="ti ti-heart mr-2"></i>Like
                        </a> --}}
                        <a href="#" id="shareButton" class="block px-4 py-2 text-sm hover:bg-white/10 transition">
                            <i class="ti ti-share mr-2"></i>Share
                        </a>
                        <a href="{{ route('artist.followers', ['id' => $artist->id]) }}"
                            class="block px-4 py-2 text-sm hover:bg-white/10 transition">
                            <i class="ti ti-users mr-2"></i>Followers
                        </a>
                        <a href="{{ route('artist.following', ['id' => $artist->id]) }}"
                            class="block px-4 py-2 text-sm hover:bg-white/10 transition">
                            <i class="ti ti-user-check mr-2"></i>Following
                        </a>
                    </div>
                </div>
            </div>

            <!-- Artist Info Overlay -->
            <div class="absolute bottom-0 left-0 p-6 flex flex-col md:flex-row items-start md:items-end gap-5 w-full">
                <!-- Artist Profile Image -->
                <div
                    class="relative w-32 h-32 md:w-40 md:h-40 rounded-full overflow-hidden border-4 border-white shadow-lg bg-white">
                    <img src="{{ $avatarUrl }}" alt="{{ $artist->name }}" class="w-full h-full object-cover">
                    <div
                        class="absolute bottom-1 right-1 md:bottom-2 md:right-2 w-3 h-3 md:w-4 md:h-4 bg-green-500 rounded-full border-2 border-white">
                    </div>
                </div>

                <!-- Artist Details -->
                <div class="flex-1">
                    @if ($artist->hasRole('Artist'))
                        <span class="bg-red-600/90 text-white text-xs px-2 py-1 rounded-full mb-2 inline-block">
                            VERIFIED ARTIST
                        </span>
                    @endif
                    <h1 class="text-3xl md:text-5xl font-bold mb-1">{{ $artist->name }}</h1>
                    <div class="flex items-center gap-3 text-sm text-gray-300 mb-3">
                        <span>{{ $monthlyListeners }} monthly listeners</span>
                        <span>•</span>
                        <span>{{ $totalSongs }} songs</span>
                    </div>
                    <div class="flex items-center gap-3 mt-4">
                        @if (auth()->check() && auth()->user()->id !== $artist->id)
                            @php
                                $isFollowingClass = $isFollowing ? 'following' : '';
                                $iconClass = $isFollowing ? 'ti-check' : 'ti-user-plus';
                                $buttonText = $isFollowing ? 'Following' : 'Follow';
                            @endphp

                            <button id="followButton"
                                class="flex-grow-0 bg-gray-700 hover:bg-gray-600 text-white px-3 lg:px-5 py-2.5 rounded-lg font-semibold transition-colors flex items-center justify-center gap-2 min-w-[110px] {{ $isFollowingClass }}"
                                data-artist-id="{{ $artist->id }}" data-artist-name="{{ $artist->name }}"
                                data-is-following="{{ $isFollowing ? 'true' : 'false' }}">
                                <i id="followIcon" class="ti {{ $iconClass }} text-sm"></i>
                                <span id="followText">{{ $buttonText }}</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Followers Section -->
        <section class="mb-10 mt-10">
            <div class="section-header flex items-center justify-between mb-5">
                <h2 class="section-title text-2xl font-bold">Followers {{ $artist->name }}</h2>
            </div>
            <div class="bg-[var(--color-bg-card)] rounded-xl p-3">
                @if ($followersList->isEmpty())
                    <p class="text-center text-gray-400 p-5">Belum ada followers.</p>
                @else
                    @php
                        $userService = app(\App\Services\UserServices::class);
                    @endphp
                    @foreach ($followersList as $follower)
                        <div class="flex items-center hover:bg-white/5 p-2 rounded-lg group transition-colors">
                            <div
                                class="w-12 h-12 rounded-full overflow-hidden mr-3 relative group-hover:shadow-md transition-all">
                                <img src="{{ $userService->getAvatar($follower, 'sm') }}"
                                    class="w-full h-full object-cover" alt="Profile picture">
                            </div>

                            <div class="flex-1 min-w-0">
                                <div class="font-medium truncate">
                                    {{ $follower->name }}
                                </div>
                                <div class="text-sm text-gray-400 truncate">
                                </div>
                            </div>
                            @if (auth()->check() && auth()->user()->id !== $follower->id)
                                @php
                                    $isCurrentlyFollowing = auth()
                                        ->user()
                                        ->following->contains($follower->id);
                                @endphp

                                <button class="text-white text-sm px-4 py-1 rounded-full transition toggle-follow-btn"
                                    data-artist-id="{{ $follower->id }}"
                                    data-is-following="{{ $isCurrentlyFollowing ? 'true' : 'false' }}"
                                    style="background-color: {{ $isCurrentlyFollowing ? '#ef4444' : '#ffffff1a' }}">
                                    {{ $isCurrentlyFollowing ? 'Unfollow' : 'Follow' }}
                                </button>
                            @endif
                        </div>
                    @endforeach
                @endif
            </div>
        </section>

        <!-- Artist Bio Section -->
        <section class="mb-12">
            <div class="bg-[var(--color-bg-card)] rounded-xl p-6">
                <div class="section-header mb-4">
                    <h2 class="section-title text-2xl font-bold">About</h2>
                </div>

                <div class="flex flex-col md:flex-row gap-6">
                    {{-- Kontainer Biografi --}}
                    <div class="flex-1">
                        {{-- Gunakan ?-> untuk penanganan null yang aman --}}
                        <p class="text-gray-300 mb-4">
                            {{ $artist->profile?->bio ?? 'No biography available.' }}
                        </p>

                        {{-- Kontainer Tombol Media Sosial --}}
                        <div class="flex items-center gap-4 mt-6">
                            @foreach ($socialMedia as $media)
                                <a href="{{ $media['url'] }}"
                                    class="w-10 h-10 bg-gray-800 hover:bg-red-900/30 rounded-full flex items-center justify-center text-gray-400 hover:text-red-400 transition-all duration-200"
                                    target="_blank" rel="noopener noreferrer">
                                    {!! $media['icon'] !!}
                                </a>
                            @endforeach
                            </button>
                        </div>
                    </div>

                    {{-- Kontainer Statistik --}}
                    <div class="md:w-72">
                        <div class="bg-[var(--color-bg-hover)] p-4 rounded-lg">
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <div class="text-3xl font-bold text-red-500">{{ $monthlyListeners }}</div>
                                    <div class="text-sm text-gray-400">Monthly Listeners</div>
                                </div>
                                <div>
                                    <div class="text-3xl font-bold text-red-500">{{ $totalStreams }}</div>
                                    <div class="text-sm text-gray-400">Total Streams</div>
                                </div>
                                <div>
                                    <div class="text-3xl font-bold text-red-500">{{ $totalAlbums }}</div>
                                    <div class="text-sm text-gray-400">Albums</div>
                                </div>
                                <div>
                                    <div class="text-3xl font-bold text-red-500">{{ $totalSongs }}</div>
                                    <div class="text-sm text-gray-400">Songs</div>
                                </div>
                            </div>

                            <div class="mt-4 pt-4 border-t border-gray-700">
                                <div class="flex items-center justify-between mb-2">
                                    <div class="text-sm">From</div>
                                    <div class="font-medium">{{ $artist->region }}</div>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div class="text-sm">Active since</div>
                                    <div class="font-medium">
                                        {{ \Carbon\Carbon::parse($artist->created_at)->translatedFormat('Y') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endsection

    @section('scripts')
        <script>
            function initScrollItems() {
                document.querySelectorAll('.scroll-item').forEach((item, index) => {
                    item.style.setProperty('--index', index);
                });
            }

            function initDragScroll(container) {
                let isDown = false;
                let startX;
                let scrollLeft;

                const onMouseDown = (e) => {
                    isDown = true;
                    container.style.cursor = 'grabbing';
                    startX = e.pageX - container.offsetLeft;
                    scrollLeft = container.scrollLeft;
                };

                const onMouseLeave = () => {
                    isDown = false;
                    container.style.cursor = 'grab';
                };

                const onMouseMove = (e) => {
                    if (!isDown) return;
                    e.preventDefault();
                    const x = e.pageX - container.offsetLeft;
                    const walk = (x - startX) * 2;
                    container.scrollLeft = scrollLeft - walk;
                };

                const onWheel = (e) => {
                    if (e.deltaY !== 0) {
                        e.preventDefault();
                        container.scrollLeft += e.deltaY;
                    }
                };

                container.addEventListener('mousedown', onMouseDown);
                container.addEventListener('mouseleave', onMouseLeave);
                container.addEventListener('mouseup', onMouseLeave);
                container.addEventListener('mousemove', onMouseMove);
                container.addEventListener('wheel', onWheel);
            }

            function initShareModal() {
                //     const shareButton = document.getElementById('shareButton');
                //     const shareModal = document.getElementById('shareModal');
                //     const closeShareModal = document.getElementById('closeShareModal');

                //     if (!shareButton || !shareModal || !closeShareModal) return;

                //     const toggleModal = (show) => {
                //         shareModal.classList.toggle('hidden', !show);
                //         document.body.style.overflow = show ? 'hidden' : 'auto';
                //     };

                //     shareButton.addEventListener('click', () => toggleModal(true));
                //     closeShareModal.addEventListener('click', () => toggleModal(false));

                //     shareModal.addEventListener('click', (event) => {
                //         if (event.target === shareModal) toggleModal(false);
                //     });

                //     document.addEventListener('keydown', (event) => {
                //         if (event.key === 'Escape' && !shareModal.classList.contains('hidden')) {
                //             toggleModal(false);
                //         }
                //     });
                // }

                document.getElementById('shareButton').addEventListener('click', async (event) => {
                    event.preventDefault();

                    const shareData = {
                        title: 'PlayList Music',
                        text: 'Coba aplikasi luar biasa ini!',
                        url: window.location.href
                    };

                    try {
                        if (navigator.share) {
                            await navigator.share(shareData);
                            console.log('Tautan berhasil dibagikan!');
                        } else {

                            alert(
                                'Web Share API tidak didukung di browser ini. Silakan salin tautan secara manual.'
                            );
                        }
                    } catch (err) {
                        console.error('Gagal membagikan tautan:', err);
                    }
                });
            }

            function copyShareLink() {
                const linkInput = document.querySelector('#shareModal input[type="text"]');
                const copyButton = document.querySelector('#shareModal button:last-child');

                if (!linkInput || !copyButton) return;

                linkInput.select();
                document.execCommand('copy');

                const originalText = copyButton.textContent;
                copyButton.textContent = 'Copied!';

                setTimeout(() => {
                    copyButton.textContent = originalText;
                }, 2000);
            }

            function initDropdown() {
                const dropdownButton = document.getElementById('dropdownButton');
                const dropdownMenu = document.getElementById('dropdownMenu');

                if (dropdownButton && dropdownMenu) {
                    // Toggle dropdown when clicking the button
                    dropdownButton.addEventListener('click', function(e) {
                        e.stopPropagation();

                        // Toggle the dropdown visibility
                        const isVisible = !dropdownMenu.classList.contains('hidden');
                        dropdownMenu.classList.toggle('hidden');

                        // Toggle body scroll lock
                        if (!isVisible) {
                            // Opening dropdown - disable scrolling
                            document.body.style.overflow = 'hidden';
                        } else {
                            // Closing dropdown - enable scrolling
                            document.body.style.overflow = '';
                        }
                    });

                    // Close dropdown when clicking outside
                    document.addEventListener('click', function(e) {
                        if (!dropdownButton.contains(e.target) && !dropdownMenu.contains(e.target)) {
                            dropdownMenu.classList.add('hidden');
                            document.body.style.overflow = ''; // Re-enable scrolling
                        }
                    });


                    document.addEventListener('keydown', function(e) {
                        if (e.key === 'Escape' && !dropdownMenu.classList.contains('hidden')) {
                            dropdownMenu.classList.add('hidden');
                            document.body.style.overflow = ''; // Re-enable scrolling
                        }
                    });
                }
            }

            document.addEventListener('DOMContentLoaded', function() {
                initScrollItems();
                document.querySelectorAll('.scroll-container').forEach(initDragScroll);
                initShareModal();
                initDropdown();
            });
        </script>
        <script>
            $(document).ready(function() {
                $('#followButton, .toggle-follow-btn').on('click', function() {
                    const buttonElement = this;
                    const artistId = $(buttonElement).data('artist-id');
                    toggleFollow(buttonElement, artistId);
                });
            });

            function toggleFollow(buttonElement, artistId) {
                let isFollowing = $(buttonElement).data('is-following') === true;
                const csrfToken = $('meta[name="csrf-token"]').attr('content');
                const url = "{{ route('follow.toggle', ['followedId' => ':artistId']) }}".replace(':artistId', artistId);
                $.ajax({
                    url: url,
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    success: function(data) {
                        if (data.status === 'success') {
                            isFollowing = !isFollowing;
                            $(buttonElement).data('is-following', isFollowing);


                            if ($(buttonElement).attr('id') === 'followButton') {

                                const followIcon = $(buttonElement).find('.ti');
                                const followText = $(buttonElement).find('span');
                                if (isFollowing) {
                                    $(buttonElement).addClass('following');
                                    followIcon.removeClass('ti-user-plus').addClass('ti-check');
                                    followText.text('Following');
                                } else {
                                    $(buttonElement).removeClass('following');
                                    followIcon.removeClass('ti-check').addClass('ti-user-plus');
                                    followText.text('Follow');
                                }
                            } else {

                                if (isFollowing) {
                                    $(buttonElement).text('Unfollow');
                                    $(buttonElement).css('background-color', '#ef4444');
                                } else {
                                    $(buttonElement).text('Follow');
                                    $(buttonElement).css('background-color',
                                        '#ffffff1a');
                                }
                            }
                        } else {
                            console.error('Follow/Unfollow Error:', data.message || 'Terjadi kesalahan.');
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 401) {
                            window.location.href = '/login';
                        } else {
                            alert('Terjadi kesalahan. Silakan coba lagi.');
                            console.error('Error:', xhr.responseText);
                        }
                    }
                });
            }
        </script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const elMain = document.getElementById('mainContent');

                elMain.classList.add('w-full');
            });
        </script>
    @endsection