@extends('layouts.landing-page')

@section('content')
    @php
        $bgUrl = app(\App\Services\UserServices::class)->getBgProfile($composer, 'lg');
        $avatarUrl = app(\App\Services\UserServices::class)->getAvatar($composer, 'md');
        $genres = app(\App\Services\UserServices::class)->getAllGenre($composer);
        $firstGenre = null;
        foreach ($composer->contributors as $contributor) {
            if ($contributor->song && $contributor->song->genre) {
                $firstGenre = $contributor->song->genre->name;
                break;
            }
        }
        $roleArray = $composer->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="mb-8">
        @php
            // $composerx = [
            //     'id' => $id,
            //     'name' => 'Composer ' . $id,
            //     'genre' => ['Contemporary Classical', 'Film Score', 'Orchestral', 'Minimalist'][$id % 4],
            //     'bio' =>
            //         'A renowned composer with a unique style, known for creating emotional and powerful compositions that resonate with audiences worldwide.',
            //     'image' => 'https://picsum.photos/seed/composer' . $id . '/400/400',
            //     'banner' => 'https://picsum.photos/seed/comp' . $id . '/1200/400',
            //     'followers' => rand(10, 100) . 'K',
            //     'compositions' => rand(20, 50),
            //     'awards' => rand(3, 15),
            // ];

            $topTracks = [
                ['title' => 'Opus ' . rand(1, 99), 'year' => rand(2010, 2023), 'duration' => '4:' . rand(10, 59)],
                [
                    'title' => 'Symphony No. ' . rand(1, 9),
                    'year' => rand(2010, 2023),
                    'duration' => '6:' . rand(10, 59),
                ],
                [
                    'title' => 'Requiem for a ' . ['Dream', 'Memory', 'Life', 'Soul'][$id % 4],
                    'year' => rand(2010, 2023),
                    'duration' => '5:' . rand(10, 59),
                ],
                [
                    'title' => 'Piano Concerto in ' . ['C Minor', 'D Major', 'G Minor', 'A Major'][$id % 4],
                    'year' => rand(2010, 2023),
                    'duration' => '7:' . rand(10, 59),
                ],
                [
                    'title' => 'The ' . ['Journey', 'Awakening', 'Revelation', 'Discovery'][$id % 4],
                    'year' => rand(2010, 2023),
                    'duration' => '3:' . rand(10, 59),
                ],
            ];

            // $albumsx = [
            //     [
            //         'title' => 'Orchestral Works Vol. ' . rand(1, 3),
            //         'year' => rand(2015, 2023),
            //         'tracks' => rand(8, 12),
            //         'img' => 'https://picsum.photos/seed/comp_album' . $id * 2 . '/300/300',
            //     ],
            //     [
            //         'title' => 'Film Scores Collection',
            //         'year' => rand(2015, 2023),
            //         'tracks' => rand(8, 12),
            //         'img' => 'https://picsum.photos/seed/comp_album' . $id * 3 . '/300/300',
            //     ],
            //     [
            //         'title' => 'Piano Compositions',
            //         'year' => rand(2015, 2023),
            //         'tracks' => rand(8, 12),
            //         'img' => 'https://picsum.photos/seed/comp_album' . $id * 4 . '/300/300',
            //     ],
            //     [
            //         'title' => 'Ambient Soundscapes',
            //         'year' => rand(2015, 2023),
            //         'tracks' => rand(8, 12),
            //         'img' => 'https://picsum.photos/seed/comp_album' . $id * 5 . '/300/300',
            //     ],
            // ];

        @endphp

        <!-- Composer Header Section -->
        <div class="relative mb-8">
            <!-- Banner Image -->
            <div class="h-48 md:h-64 lg:h-80 w-full overflow-hidden">
                <div class="absolute inset-0 bg-gradient-to-t from-black via-black/80 to-transparent z-10"></div>
                <img src="{{ $bgUrl }}" alt="{{ $composer->name }}" class="w-full h-full object-cover">
            </div>

            <!-- Composer Info Overlay -->
            <div class="absolute bottom-0 left-0 right-0 p-6 z-20 flex flex-col md:flex-row items-start md:items-end gap-4">
                <div
                    class="w-24 h-24 md:w-32 md:h-32 rounded-full border-4 border-gray-900 overflow-hidden bg-gray-800 flex-shrink-0">
                    <img src="{{ $avatarUrl }}" alt="{{ $composer->name }}" class="w-full h-full object-cover">
                </div>

                <div class="flex-grow">
                    <h1 class="text-2xl md:text-3xl lg:text-4xl font-bold">{{ $composer->name }}</h1>
                    <p class="text-gray-400 text-sm md:text-base mt-1">{{ $firstGenre }}</p>

                    <div class="flex items-center gap-4 mt-3">
                        <div class="text-sm text-gray-300"><i class="ti ti-users mr-1"></i> {{ $followers }}
                            followers</div>
                        <div class="text-sm text-gray-300"><i class="ti ti-music mr-1"></i> {{ $totalSongs }}
                            compositions</div>
                        {{-- <div class="text-sm text-gray-300"><i class="ti ti-award mr-1"></i> {{ $composerx['awards'] }}
                            awards</div> --}}
                    </div>
                </div>

                <div class="flex gap-2 mt-4 md:mt-0">
                    @php
                        $isFollowingClass = $isFollowing ? 'following' : '';
                        $iconClass = $isFollowing ? 'ti-check' : 'ti-user-plus';
                        $buttonText = $isFollowing ? 'Following' : 'Follow';
                    @endphp

                    <button id="followButton"
                        class="bg-transparent border border-gray-600 hover:border-white transition-colors py-2 px-4 rounded-full flex items-center gap-2 {{ $isFollowingClass }}"
                        data-composer-id="{{ $composer->id }}" data-composer-name="{{ $composer->name }}"
                        data-is-following="{{ $isFollowing ? 'true' : 'false' }}">
                        <i id="followIcon" class="ti {{ $iconClass }}"></i>
                        <span id="followText">{{ $buttonText }}</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- Bio Section -->
        <section class="mb-10">
            <h2 class="text-xl font-bold mb-4">About {{ $composer->name }}</h2>

            @php
                $biography = 'Belum terdapat data mengenai composer ini';
                if ($composer->profile) {
                    $biography = $composer->profile->bio0;
                }
                $maxLength = 255;
                $isLong = strlen($biography) > $maxLength;
                $shortBio = $isLong ? substr($biography, 0, $maxLength) : $biography;
            @endphp

            <div class="text-gray-300 mt-3 aboutContainer">
                <p class="text-gray-300 leading-relaxed" id="biographyText">
                    {{ $shortBio }}@if ($isLong)
                        ...
                    @endif
                </p>

                @if ($isLong)
                    <button id="readMoreBtn"
                        class="mt-3 text-red-400 hover:text-red-300 text-sm font-medium transition-colors duration-200 flex items-center gap-1"
                        onclick="toggleBiography()">
                        <span id="readMoreText">Lihat selengkapnya</span>
                        <i id="readMoreIcon" class="ti ti-chevron-down text-xs"></i>
                    </button>
                @endif

            </div>

        </section>

        <!-- Top Songs Section -->
        <section class="mb-10">
            <h2 class="text-xl font-bold mb-4">Popular Song</h2>

            <div class="bg-gray-800/50 rounded-lg overflow-hidden">
                @php $index = 0; @endphp
                @if ($songComposes->isNotEmpty())
                    @forelse ($songComposes as $row)
                        @if ($row->song)
                            @php $index++; @endphp

                            <div
                                class="flex items-center p-3 hover:bg-gray-700/50 transition-colors {{ $index < count($songComposes) ? 'border-b border-gray-700' : '' }}">
                                <div class="w-8 text-center text-gray-400">{{ $index }}</div>
                                <div class="flex-grow ml-3">
                                    <div class="font-medium">{{ $row->song->title ?? '-' }}</div>
                                    <div class="text-sm text-gray-400">{{ $row->song?->created_at?->format('Y') ?? '-' }}
                                    </div>
                                </div>
                                <div class="text-sm text-gray-400 mr-4">{{ $row->song->duration ?? '' }}</div>
                                <button class="text-gray-400 hover:text-white transition-colors">
                                    <i class="ti ti-player-play"></i>
                                </button>
                            </div>
                        @endif
                    @empty
                    @endforelse
                    @if ($index == 0)
                        <div class="text-sm p-3 w-full">belum terdapat data</div>
                    @endif
                @else
                    <div class="text-sm p-3 w-full">belum terdapat data</div>
                @endif
            </div>

        </section>

        <!-- Albums Section -->
        <section class="mb-10">
            <div class="section-header flex items-center justify-between mb-5">
                <h2 class="section-title text-xl font-bold">Albums & Songs</h2>
            </div>

            <div class="scroll-container">

                @forelse ($albums as $album)
                    @php
                        dd($album);
                        $coverImg = app(\App\Services\AlbumServices::class)->getCoverImageS3($album, 'md');
                        $totalTrack = app(\App\Services\AlbumServices::class)->totalSong($album->id);
                    @endphp
                    <div class="scroll-item music-card-item">
                        <div class="relative group overflow-hidden rounded-xl">
                            <img src="{{ $coverImg }}" alt="{{ $album->title }}"
                                class="w-full aspect-square object-cover transition-transform duration-300 group-hover:scale-110">
                            <div
                                class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            </div>
                            <button class="play-song-btn absolute inset-0 flex items-center justify-center">
                                <div
                                    class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center transform translate-y-4 opacity-0 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 shadow-lg hover:bg-red-700 hover:scale-105">
                                    <i class="ti ti-player-play text-white text-xl"></i>
                                </div>
                            </button>
                        </div>
                        <div class="mt-3">
                            <h3 class="font-semibold text-base truncate" title="{{ $album->title }}">
                                {{ $album->title }}</h3>
                            <p class="text-sm text-gray-400">{{ $album->created_at->format('Y') }} • {{ $totalTrack }}
                                tracks</p>
                        </div>
                    </div>
                @empty

                    <small>belum terdapat data</small>
                @endforelse

                {{-- @foreach ($albums as $album)
                    <div class="scroll-item music-card-item">
                        <div class="relative group overflow-hidden rounded-xl">
                            <img src="{{ $album['img'] }}" alt="{{ $album['title'] }}"
                                class="w-full aspect-square object-cover transition-transform duration-300 group-hover:scale-110">
                            <div
                                class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            </div>
                            <button class="play-song-btn absolute inset-0 flex items-center justify-center">
                                <div
                                    class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center transform translate-y-4 opacity-0 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 shadow-lg hover:bg-red-700 hover:scale-105">
                                    <i class="ti ti-player-play text-white text-xl"></i>
                                </div>
                            </button>
                        </div>
                        <div class="mt-3">
                            <h3 class="font-semibold text-base truncate" title="{{ $album['title'] }}">
                                {{ $album['title'] }}</h3>
                            <p class="text-sm text-gray-400">{{ $album['year'] }} • {{ $album['tracks'] }} tracks</p>
                        </div>
                    </div>
                @endforeach --}}
            </div>
        </section>


        <!-- Albums Section -->
        @if (\App\Services\UserServices::isMutualFollow($composer->id))
            <section class="mb-10">
                <div class="section-header flex items-center justify-between mb-5">
                    <h2 class="section-title text-xl font-bold">Lagu Belum Release</h2>
                    <a href="{{ route('before-release', $composerId) }}"
                        class="section-link flex items-center gap-1 hover:text-red-500 transition-colors">
                        See All <i class="ti ti-chevron-right text-sm"></i>
                    </a>

                </div>

                <div class="scroll-container">
                    @php
                        $index = 0;
                    @endphp
                    @foreach ($songBeforeRelease as $row)
                        @php
                            $song = $row->song;
                        @endphp
                        @if ($song)
                            @php
                                $index++;
                                $imageUrl = app(\App\Services\SongServices::class)->getCoverImageS3($song, 'sm');
                            @endphp
                            @php
                                $creatorName =
                                    $song->songContributors
                                        ->where('role', 'Composer')
                                        ->pluck('user.name')
                                        ->filter()
                                        ->implode(', ') ?? '-';

                                if (empty($creatorName)) {
                                    $creatorName = '-';
                                }

                                $artistName =
                                    $song->songContributors
                                        ->filter(function ($contributor) {
                                            return in_array($contributor->role, ['Artist', 'Cover Creator']);
                                        })
                                        ->pluck('user.name')
                                        ->filter()
                                        ->implode(', ') ?:
                                    ' ';

                                if (empty($artistName)) {
                                    $artistName = 'No Artist';
                                }
                            @endphp

                            <div class="scroll-item music-card-item" data-aos="fade-up"
                                data-aos-delay="{{ 1 * 50 }}">
                                <div class="relative group overflow-hidden rounded-xl">
                                    <img src="{{ $imageUrl }}" alt="{{ $song->title }}"
                                        class="w-full aspect-square object-cover transition-transform duration-300 group-hover:scale-110">
                                    <div
                                        class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                    </div>
                                    <button onclick="viewSong(this)"
                                        class="play-song-btn absolute inset-0 flex items-center justify-center"
                                        {{ Auth::guest() ? 'data-login-required=true onclick=window.location.href=\'' . route('login') . '\'' : '' }}
                                        data-title="{{ $song->title }}" data-artist="{{ $artistName }}"
                                        data-cover="{{ $imageUrl }}"
                                        data-url="{{ route('users.songs.view', ['id' => $song->id]) }}"
                                        data-id="{{ $song->id }}" data-duration="{{ rand(180, 320) }}">
                                        <div
                                            class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center transform translate-y-4 opacity-0 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 shadow-lg hover:bg-red-700 hover:scale-105">
                                            <i class="ti ti-player-play text-white text-xl"></i>
                                        </div>
                                    </button>
                                </div>
                                <div class="mt-3">
                                    <h3 class="font-semibold text-base truncate" title="{{ $song->title }}">
                                        {{ $song->title }}
                                    </h3>
                                    <p class="text-sm text-gray-400 truncate">{{ $song->created_at->format('D d M Y') }}
                                    </p>
                                </div>
                            </div>
                        @endif
                    @endforeach
                    @if ($index == 0)
                        <div>belum terdapat data</div>
                    @endif


                </div>
            </section>
        @endif


        <!-- Similar Composers -->
        <section class="mb-10">
            <div class="section-header flex items-center justify-between mb-5">
                <h2 class="section-title text-xl font-bold">Similar Composers</h2>
            </div>

            <div class="scroll-container">

                @forelse ($similarComposer as $composer)
                    @php
                        $avatarUrl = app(\App\Services\UserServices::class)->getAvatar($composer, 'md');
                        $firstGenre = null;
                        foreach ($composer->contributors as $contributor) {
                            if ($contributor->song && $contributor->song->genre) {
                                $firstGenre = $contributor->song->genre->name;
                                break;
                            }
                        }
                    @endphp
                    <div class="scroll-item composer-card">
                        <div class="relative group">
                            <div
                                class="overflow-hidden rounded-full border-2 border-gray-700 aspect-square group-hover:border-red-500 transition-all duration-300">
                                <a href="{{ route('composer.profile', $composer->id) }}">
                                    <img src="{{ $avatarUrl }}" alt="{{ $composer->name }}"
                                        class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                                </a>
                            </div>
                        </div>
                        <div class="mt-3 text-center">
                            <a href="{{ route('composer.profile', $composer->id) }}"
                                class="hover:text-red-500 transition-colors">
                                <h3 class="font-semibold truncate" title="{{ $composer->name }}}">{{ $composer->name }}
                                </h3>
                            </a>
                            <p class="text-sm text-gray-400 truncate">
                                {{ $firstGenre }}</p>
                        </div>
                    </div>

                @empty
                    <small>belum terdapat data</small>
                @endforelse

                {{-- @for ($i = 1; $i <= 6; $i++)
                    @php
                        $similarId = (($id + $i) % 10) + 1;
                    @endphp
                    <div class="scroll-item composer-card">
                        <div class="relative group">
                            <div
                                class="overflow-hidden rounded-full border-2 border-gray-700 aspect-square group-hover:border-red-500 transition-all duration-300">
                                <a href="{{ route('composer.profile', $similarId) }}">
                                    <img src="https://picsum.photos/seed/composer{{ $similarId }}/300/300"
                                        alt="Composer {{ $similarId }}"
                                        class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                                </a>
                            </div>
                        </div>
                        <div class="mt-3 text-center">
                            <a href="{{ route('composer.profile', $similarId) }}"
                                class="hover:text-red-500 transition-colors">
                                <h3 class="font-semibold truncate" title="Composer {{ $similarId }}">Composer
                                    {{ $similarId }}</h3>
                            </a>
                            <p class="text-sm text-gray-400 truncate">
                                {{ ['Classical', 'Film Score', 'Contemporary', 'Minimalist'][$similarId % 4] }}</p>
                        </div>
                    </div>
                @endfor --}}
            </div>
        </section>

        <!-- Featured Works Section -->
        <section class="mb-10">
            <div class="relative rounded-xl overflow-hidden">
                <div class="absolute inset-0 bg-gradient-to-r from-blue-900 to-indigo-900 opacity-90"></div>
                <div class="absolute inset-0 bg-cover bg-center opacity-30"
                    style="background-image: url('https://images.unsplash.com/photo-1465847899084-d164df4dedc6?q=80&w=1470&auto=format&fit=crop')">
                </div>

                <div class="relative z-10 p-6 md:p-8">
                    <div class="max-w-3xl">
                        <span class="text-sm bg-white/20 text-white px-2 py-1 rounded-full">FEATURED WORK</span>
                        <h1 class="text-2xl md:text-3xl font-bold mt-3 mb-2">{{ $topTracks->title ?? '' }}</h1>
                        <p class="text-gray-300 mb-4">Experience this acclaimed composition that showcases the unique
                            style
                            and artistic vision of {{ $topTracks->artist->name ?? 'composer' }}.</p>
                    </div>
                </div>
            </div>
        </section>

    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Set animation delay for scroll items
            document.querySelectorAll('.scroll-item').forEach((item, index) => {
                item.style.setProperty('--index', index);
            });

            // Smooth drag scrolling for horizontal containers
            const sliders = document.querySelectorAll('.scroll-container');

            sliders.forEach(container => {
                container.addEventListener('wheel', (e) => {
                    if (e.deltaY !== 0) {
                        e.preventDefault();
                        container.scrollLeft += e.deltaY;
                    }
                });
            });


            function toggleBiography() {
                const biographyText = document.getElementById('biographyText');
                const readMoreText = document.getElementById('readMoreText');
                const readMoreIcon = document.getElementById('readMoreIcon');

                const shortBio = "{{ substr($biography ?? '', 0, 255) }}...";
                const fullBio = "{{ $biography ?? '' }}";

                if (readMoreText.textContent === 'Lihat selengkapnya') {
                    biographyText.textContent = fullBio;
                    readMoreText.textContent = 'Sembunyikan';
                    readMoreIcon.classList.remove('ti-chevron-down');
                    readMoreIcon.classList.add('ti-chevron-up');
                } else {
                    biographyText.textContent = shortBio;
                    readMoreText.textContent = 'Lihat selengkapnya';
                    readMoreIcon.classList.remove('ti-chevron-up');
                    readMoreIcon.classList.add('ti-chevron-down');
                }
            }

        });
    </script>


    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const followButton = document.getElementById("followButton");

            if (followButton) {
                followButton.addEventListener("click", function() {
                    const composerId = this.dataset.composerId;
                    const composerName = this.dataset.composerName;

                    toggleFollow(this, composerId, composerName);
                });
            }
        });

        function toggleFollow(buttonElement, composerId, composerName) {
            const followIcon = $(buttonElement).find('.ti');
            const followText = $(buttonElement).find('span');
            let isFollowing = $(buttonElement).data('is-following') === true;
            const csrfToken = $('meta[name="csrf-token"]').attr('content');

            const url = `{{ route('follow.toggle', ['followedId' => ':composerId']) }}`.replace(':composerId', composerId);

            $.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 (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 {
                        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);
                    }
                }
            });

        function viewSong(element) {
            var url = element.getAttribute('data-url');
            if (url) {
                window.location.href = url;
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal!',
                    text: 'URL tidak ditemukan pada elemen.',
                });
            }
        }
    </script>
@endsection