@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
    <!-- Artist Header Banner Section -->
    <div class="relative mb-6">
        <!-- Large Artist Cover/Banner Image -->
        <div class="relative h-64 md:h-80 w-full overflow-hidden rounded-xl">
            @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 z-10">
                    <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>
                </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>
    </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">Followings</h2>
        </div>
        <div class="bg-[var(--color-bg-card)] rounded-xl p-3">
            @if ($followingList->isEmpty())
                <p class="text-center text-gray-400 p-5">Belum Follows</p>
            @else
                @php
                    $userService = app(\App\Services\UserServices::class);
                @endphp
                @foreach ($followingList as $following)
                    <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($following, 'sm') }}" class="w-full h-full object-cover"
                                alt="Profile picture">
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="font-medium truncate">
                                {{ $following->name }}
                            </div>
                            <div class="text-sm text-gray-400 truncate">
                            </div>
                        </div>
                        @if (auth()->check() && auth()->user()->id !== $following->id)
                            @php
                                $isCurrentlyFollowing = auth()
                                    ->user()
                                    ->following->contains($following->id);
                            @endphp

                            <button class="text-white text-sm px-4 py-1 rounded-full transition toggle-follow-btn"
                                data-artist-id="{{ $following->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() {
            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
                    }
                });

                // Close dropdown when pressing escape key
                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