@extends('front.layouts.app')
@section('content')

@php
    $user = $user ?? null;
    $userRole = $userRole ?? ($user ? $user->role_slug : 'athlete');
    $profile = $profile ?? (($userRole === 'team') ? ($user->teamProfile ?? null) : ($user->athleteProfile ?? null));
    $location = $location ?? '';
    $sportName = $sportName ?? '';
    $positionName = $positionName ?? '';
    $avatarImage = $avatarImage ?? asset('front/assets/images/user.jpeg');
    $coverImage = $coverImage ?? asset('front/assets/images/cover.jpg');
    $campaigns = $campaigns ?? collect();
    $profileStats = $profileStats ?? [];
    $supporters = $profileStats['supporters'] ?? 0;
    $followers = $profileStats['followers'] ?? 0;
    $totalRaised = $profileStats['total_raised'] ?? ($totalRaised ?? 0);
    $activeCampaigns = $profileStats['active_campaigns'] ?? ($activeCampaigns ?? 0);
    $nftsMinted = $profileStats['nfts_minted'] ?? 0;
    $nftTiers = $nftTiers ?? collect();
    $otherUsers = $otherUsers ?? collect();
    $followersFormatted = $followers >= 1000 ? number_format($followers / 1000, 1) . 'K' : (string) $followers;
    
    // Get bio
    $bio = optional($profile)->athlete_bio ?? optional($profile)->team_bio_tagline ?? 'No bio available';
    
    // Get school/club name
    $schoolClub = optional($user)->school_club_name ?? optional($profile)->team_club_name ?? optional($profile)->school_club_name ?? 'N/A';
    
    // Get social links
    $socialLinks = $user->socialLinks ?? collect();
    
    // Get gender icon
    $genderIcon = '';
    if ($userRole === 'athlete' && isset($user->gender)) {
        $genderIcon = $user->gender == 1 ? asset('front/assets/images/male.svg') : asset('front/assets/images/female.svg');
    }
    $userTypeBadge = ($userRole === 'team') ? asset('front/assets/images/team.png') : asset('front/assets/images/athelete.png');
    $authUserId = auth()->id();
    $discoverConversationId = ($authUserId && $user) ? \App\Models\Users\Message::discoverConversationId($authUserId, $user->id) : 0;
    $loggedInUserRole = $loggedInUserRole ?? (auth()->check() && auth()->user() ? auth()->user()->role_slug : null);
    $hasPendingInvite = $hasPendingInvite ?? false;
    $hasAcceptedInvite = $hasAcceptedInvite ?? false;
@endphp

<div class="breadcum-wrap">
    <div class="container-fluid">
        <ul class="breadcum-list">
            <li><a href="{{ route('home') }}" class="home"><i data-lucide="house"></i></a></li>
            <li><a href="{{ route('front.discover.index') }}" class="active">Athlete</a> <img src="{{ asset('front/assets/images/arrow-right.svg') }}" alt=""></li>
            <li>{{ ($userRole == 'team') ? $schoolClub : ($user->full_name ?? 'Athlete') }}</li>
        </ul>
    </div>
</div>

<div class="cover-wrap">
    <img src="{{ $coverImage }}" alt="" class="cover-image" />
    <div class="container-fluid">
        <div class="cover-info">
            <div class="profile-info-left d-flex align-items-center">
                <div class="profile-img">
                    <img src="{{ $avatarImage }}" alt="{{ $user->full_name ?? 'Athlete' }}">
                </div>
                <div class="badge-team-athe">
                    <span class="status-tag status-active">{{ ucfirst($userRole)}}</span>
                </div>
                <div class="profile-details">
                    <h2>{{ ($userRole === 'team') ? $schoolClub : ($user->full_name ?? 'Athlete Name') }} <i data-lucide="badge-check" class="verify"></i></h2>
                    <p class="position"><i data-lucide="footprints"></i> {{ $sportName }}{{ $positionName ? ' - ' . $positionName : '' }}</p>
                    @if($location)
                    <p class="from"><i data-lucide="map-pin"></i> {{ $location }}</p>
                    @endif
                    @if($userRole == 'athlete' && $schoolClub && $schoolClub !== 'N/A')
                    <p class="club"><i data-lucide="school"></i> {{ $schoolClub }}</p>
                    @endif
                </div>
            </div>
            <div class="profile-info-right d-flex align-items-center">
                @php
                    $followState = $followState ?? 'none';
                    $isFollowing = ($followState === 'active');
                    $isRequested = ($followState === 'pending');
                @endphp
                <button type="button"
                    class="green-btn btn-discover-follow {{ $isFollowing ? 'is-following' : '' }} {{ $isRequested ? 'is-requested' : '' }}"
                    data-following-id="{{ $user->id ?? 0 }}"
                    data-follow-state="{{ $followState }}"
                    data-follow-url="{{ route('front.user-follow.follow') }}"
                    data-unfollow-url="{{ route('front.user-follow.unfollow') }}"
                    data-csrf="{{ csrf_token() }}">
                    @if($isFollowing)
                        Following
                    @elseif($isRequested)
                        Requested
                    @else
                        Follow
                    @endif
                </button>
                <a href="#" class="purple-btn btn-discover-message" data-conversation-id="{{ $discoverConversationId }}" data-other-user-id="{{ $user->id ?? 0 }}" data-login-url="{{ route('login') }}">Message</a>
                <a href="#" class="blue-btn d-none">Sponsor</a>
                @if(in_array($loggedInUserRole, ['athlete', 'team']) && $loggedInUserRole !== $userRole)
                    @if($userRole === 'team')
                        @if($hasAcceptedInvite)
                            <span class="purple-btn btn-discover-join-accepted" style="cursor: default; opacity: 0.9;">Joined</span>
                        @elseif($hasPendingInvite)
                            <span class="purple-btn btn-discover-join-pending" style="cursor: default; opacity: 0.9;">Request Sent</span>
                        @else
                            <a href="#" class="purple-btn btn-discover-join" data-invite-type="join" data-inviter-id="{{ $user->id }}" data-inviter-name="{{ $schoolClub }}" data-inviter-sport="{{ $sportName }}" data-inviter-location="{{ $location }}">Ask to Join</a>
                        @endif
                    @else
                        @if($hasAcceptedInvite)
                            <span class="purple-btn btn-discover-invite-accepted">Joined</span>
                        @elseif($hasPendingInvite)
                            <span class="purple-btn btn-discover-invite-pending">Request Sent</span>
                        @else
                            <a href="#" class="purple-btn btn-discover-invite" data-invite-type="invite" data-inviter-id="{{ $user->id }}" data-inviter-name="{{ $user->full_name ?? 'Athlete' }}" data-inviter-sport="{{ $sportName }}" data-inviter-location="{{ $location }}">Invite to Team</a>
                        @endif
                    @endif
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Join/Invite Request Modal -->
<div class="modal fade" id="joinInviteModal" tabindex="-1" aria-labelledby="joinInviteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="joinInviteModalLabel">{{ $userRole === 'team' ? 'Request to Join Team' : 'Invite to Team' }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="join-invite-info-card mb-3">
                    <div class="d-flex align-items-center gap-3">
                        <img src="{{ $avatarImage }}" alt="{{ $user->full_name ?? 'User' }}" class="join-invite-avatar">
                        <div>
                            <h6 class="mb-0">{{ ($userRole === 'team') ? $schoolClub : ($user->full_name ?? 'Athlete') }}</h6>
                            <p class="text-muted mb-0 small">{{ $sportName }}</p>
                            @if($location)
                            <p class="text-muted mb-0 small">{{ $location }}</p>
                            @endif
                        </div>
                    </div>
                </div>
                <form id="joinInviteForm">
                    <input type="hidden" name="inviter_user_id" id="inviter_user_id" value="{{ $user->id }}">
                    <input type="hidden" name="invite_type" id="invite_type" value="{{ $userRole }}">
                    <input type="hidden" name="user_role" id="user_role" value="{{ $userRole }}">
                    <div class="mb-3">
                        <label for="invite_message" class="form-label">Message (Optional)</label>
                        <textarea class="form-control" id="invite_message" name="note" rows="4" placeholder="{{ $userRole === 'team' ? 'Tell the team why you\'d like to join...' : 'Tell the athlete why you\'d like them to join your team...' }}"></textarea>
                    </div>
                    <div class="alert alert-info d-flex align-items-start gap-2 mb-0">
                        <i class="fa fa-info-circle mt-1"></i>
                        <small class="mb-0" id="invite-info-text">{{ $userRole === 'team' ? 'The team will receive your request and can accept or decline.' : 'The athlete will receive your invitation and can accept or decline.' }}</small>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="sendInviteRequestBtn">Send Request</button>
            </div>
        </div>
    </div>
</div>

<!-- Messages Section (hidden by default, shown when Message button clicked) -->
<div class="container-fluid mt-4 mb-4">
    <div class="comments-card" id="discover-messages-section">
        <div class="comments-header">
            <h2 class="card-title">Messages with {{ ($userRole === 'team') ? $schoolClub : ($user->full_name ?? 'User') }}</h2>
        </div>
        <div class="messages-container" id="discover-messages-container">
            <div class="no-messages" id="discover-no-messages">
                <p>No messages yet. Start the conversation!</p>
            </div>
        </div>
        <div class="typing-indicator" id="discover-typing-indicator">
            <div class="comment-item">
                <div class="comment-avatar">{{ substr(($userRole === 'team') ? $schoolClub : ($user->full_name ?? 'U'), 0, 2) }}</div>
                <div class="comment-content"><div class="typing-dots"><span></span><span></span><span></span></div></div>
            </div>
        </div>
        <div class="comment-reply-form">
            <input type="file" id="discover-message-file-input" accept="image/*,application/pdf,.doc,.docx,.txt">
            <textarea class="comment-input" id="discover-message-input" rows="3" placeholder="Type your message..."></textarea>
            <button type="button" class="btn-attach" id="discover-attach-file-btn"><i data-lucide="paperclip"></i></button>
            <div class="file-preview" id="discover-file-preview"><span id="discover-file-name"></span> <button type="button" id="discover-remove-file"><i data-lucide="x"></i></button></div>
            <button type="button" class="btn-send-message" id="discover-send-message-btn"><i data-lucide="send"></i> Send Message</button>
        </div>
    </div>
</div>

<div class="profile-content-wrap">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-8">
                <div class="grey-box">
                    <h2>About {{ ($userRole === 'team') ? $schoolClub : ($user->first_name ?? 'Athlete') }}</h2>
                    <p>{{ $bio }}</p>
                    <div class="icon-sec-achi">
                        @foreach($socialLinks as $socialLink)
                            @php
                                $socialIcon = '';
                                $socialUrl = $socialLink->social_link_url ?? '#';
                                switch($socialLink->social_link_type) {
                                    case 1: $socialIcon = asset('front/assets/images/youtube.png'); break;
                                    case 2: $socialIcon = asset('front/assets/images/instagram.png'); break;
                                    case 3: $socialIcon = asset('front/assets/images/facebook1.png'); break;
                                    case 4: $socialIcon = asset('front/assets/images/twitter1.png'); break;
                                    case 5: $socialIcon = asset('front/assets/images/link.png'); break;
                                }
                            @endphp
                            @if($socialIcon)
                            <a href="{{ $socialUrl }}" target="_blank"><img src="{{ $socialIcon }}" alt="Social Link"></a>
                            @endif
                        @endforeach
                    </div>
                </div>
                
                <div class="card sponser">
                    <h2>Achievements</h2>
                    <div class="profile-achi-sec">
                        <!-- Static achievements for now - can be made dynamic later -->
                        <div class="sponsor-item">
                            <div class="sponsor-left">
                                <div class="sponsor-icon blue"><img src="{{ asset('front/assets/images/sp-1.png') }}"></div>
                                <div class="sponsor-info">
                                    <h4>2024 Regional MVP</h4>
                                </div>
                            </div>
                        </div>
                        <div class="sponsor-item">
                            <div class="sponsor-left">
                                <div class="sponsor-icon orange"><img src="{{ asset('front/assets/images/sp-2.png') }}"></div>
                                <div class="sponsor-info">
                                    <h4>All-State Player</h4>
                                </div>
                            </div>
                        </div>
                        <div class="sponsor-item">
                            <div class="sponsor-left">
                                <div class="sponsor-icon green"><img src="{{ asset('front/assets/images/trophy.png') }}"></div>
                                <div class="sponsor-info">
                                    <h4>Junior Nationals 2023</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="grey-box mt-5">
                    <div class="achievements-section">
                        <h6>Statistics</h6>
                        <div class="achievements-grid">
                            <div class="achievement-card gold d-none">
                                <h3 class="achievement-title">38</h3>
                                <p class="achievement-date">Matches / Events</p>
                            </div>
                            <div class="achievement-card blue">
                                <h3 class="achievement-title">{{ number_format($supporters) }}</h3>
                                <p class="achievement-date">supporters</p>
                            </div>
                            <div class="achievement-card green">
                                <h3 class="achievement-title">{{ $followersFormatted }}</h3>
                                <p class="achievement-date">Followers</p>
                            </div>
                            <div class="achievement-card blue">
                                <h3 class="achievement-title">{!! \App\Helpers\Helper::price($totalRaised) !!}</h3>
                                <p class="achievement-date">Total Raised</p>
                            </div>
                            <div class="achievement-card green">
                                <h3 class="achievement-title">{{ number_format($activeCampaigns) }}</h3>
                                <p class="achievement-date">Active Campaigns</p>
                            </div>
                            <div class="achievement-card gold">
                                <h3 class="achievement-title">{{ number_format($nftsMinted) }}</h3>
                                <p class="achievement-date">NFTs Minted</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!--Digital Collectibles-->
                @if($nftTiers->count() > 0)
                <section class="digital-collectibles-wrap">
                    <h2>Digital Collectibles</h2>
                    <div class="row">
                        @foreach($nftTiers as $nftTier)
                            @php
                                $campaign = $nftTier->campaign ?? null;
                                $campaignImage = asset('front/assets/images/placeholder-campaign.jpg');
                                if ($campaign && isset($campaign->campaign_image)) {
                                    $imgData = is_array($campaign->campaign_image) ? $campaign->campaign_image : [];
                                    $campaignImage = $imgData['original'] ?? $imgData['thumb'] ?? $campaignImage;
                                }
                                $nftTitle = 'NFT Tier';
                                if (isset($nftTier->rewards_perks_note)) {
                                    $lines = explode("\n", $nftTier->rewards_perks_note);
                                    if (isset($lines[0]) && strpos($lines[0], 'Title:') === 0) {
                                        $nftTitle = str_replace('Title: ', '', $lines[0]);
                                    }
                                }
                                $sold = 0; // TODO: Get actual sold count
                                $total = $nftTier->nft_quantity ?? 100;
                            @endphp
                            <div class="col-sm-6">
                                <div class="grey-box">
                                    <div class="dc-img-wrap">
                                        <img src="{{ $campaignImage }}" alt="{{ $nftTitle }}">
                                    </div>
                                    <h3 class="blue-txt">{{ $nftTitle }}</h3>
                                    <div class="sponser-txtsec">
                                        <p class="left-txt">{!! \App\Helpers\Helper::price($nftTier->nft_price) !!}</p>
                                        <p class="right-txt">{{ $sold }}/{{ $total }} Sold</p>
                                    </div>
                                    <a href="#" class="blue-btn">Buy NFT</a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </section>
                @endif

                <!--Discover More Athletes-->
                @if($otherUsers->count() > 0)
                <div class="grey-box discover-more-athletes">
                    <h2>Discover More Athletes / Teams</h2>
                    <section class="athelets">
                        <div class="container">
                            <div class="grid-view-container">
                                @foreach($otherUsers as $otherUser)
                                    @include('front.discover.grid_list', ['user' => $otherUser])
                                @endforeach
                            </div>
                        </div>
                    </section>
                </div>
                @endif
            </div>
            
            <div class="col-sm-4">
                @if($campaigns->count() > 0)
                <div class="profile-campaign campaign-box mt-0">
                    <div class="campaign-header">
                        <h2>Active Fundraising Campaigns</h2>
                    </div>
                    @foreach($campaigns as $campaign)
                        @php
                            $campaignProgress = $campaign->fund_target > 0 ? ($campaign->fund_raised / $campaign->fund_target) * 100 : 0;
                            $campaignProgress = min(100, max(0, $campaignProgress));
                            $sportIcon = asset('front/assets/images/ball.png');
                            if ($campaign->category && isset($campaign->category->image)) {
                                $catImg = is_array($campaign->category->image) ? ($campaign->category->image['thumb'] ?? $campaign->category->image['original'] ?? '') : '';
                                if ($catImg) {
                                    $sportIcon = $catImg;
                                }
                            }
                        @endphp
                        <div class="campaign-item">
                            <div class="campaign-title"><img src="{{ $sportIcon }}" alt=""> {{ $campaign->title }}</div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: {{ $campaignProgress }}%"></div>
                            </div>
                            <div class="campaign-footer">
                                <div>{!! \App\Helpers\Helper::price($campaign->fund_raised) !!} / {!! \App\Helpers\Helper::price($campaign->fund_target) !!}</div>
                                <div class="percentage">{{ number_format($campaignProgress, 0) }}%</div>
                            </div>
                            <a href="{{ route('front.campaigns.show', ['id' => $campaign->id]) }}" class="btn-dark-blue pur-btn">Click here to contribute</a>
                        </div>
                    @endforeach
                </div>
                @endif
                
                <div class="team-card mt-0 mb-4">
                    <div class="team-header">
                        <h2>Sponsors & Partners</h2>
                    </div>
                    <div class="build-trust-block-wrapper">
                        @php $acceptedSponsorships = $acceptedSponsorships ?? collect(); @endphp
                        @forelse($acceptedSponsorships as $sponsorship)
                            @php
                                $sponsor = $sponsorship->sponsor ?? null;
                                $sponsorName = $sponsor ? ($sponsor->full_name ?? $sponsor->first_name . ' ' . $sponsor->last_name) : 'Sponsor';
                                $offerTypeName = $sponsorship->offer_type_name ?? 'Sponsor';
                                $fundingAmount = $sponsorship->funding_amount ?? 0;
                                $offerTitle = $sponsorship->offer_title ?? $offerTypeName;
                            @endphp
                            <div class="build-trust-block">
                                <div class="build-trust-block-icon">
                                    <i data-lucide="{{ in_array($sponsorship->offer_type ?? 0, [4]) ? 'shirt' : 'circle-dollar-sign' }}"></i>
                                </div>
                                <h3>{{ $offerTypeName }}</h3>
                                <p>{{ $offerTitle }}</p>
                                <p class="text-muted small mb-0">{{ $sponsorName }} · {!! \App\Helpers\Helper::price($fundingAmount) !!}</p>
                            </div>
                        @empty
                            <div class="build-trust-block w-100 text-center py-4">
                                <div class="build-trust-block-icon mx-auto mb-2">
                                    <i data-lucide="users" class="discover-no-sponsors-icon"></i>
                                </div>
                                <h3 class="mb-1">No Sponsors or Partners</h3>
                                <p class="text-muted mb-0 small">No sponsorship or partnership agreements at this time. Check back later or reach out to become a sponsor.</p>
                            </div>
                        @endforelse
                    </div>
                </div>

                <div class="team-card mt-0 mb-4">
                    <div class="team-header">
                        <h2>Team Roster</h2>
                    </div>
                    <div class="build-trust-block-wrapper">
                        @php $teamRoster = $teamRoster ?? collect(); @endphp
                        @forelse($teamRoster as $invite)
                            @php
                                $member = $invite->invitedUser ?? null;
                                $memberName = $member ? ($member->full_name ?? trim($member->first_name . ' ' . $member->last_name) ?: 'Team Member') : 'Team Member';
                                $memberAvatar = $member && isset($member->avatar) ? (is_array($member->avatar) ? ($member->avatar['thumb'] ?? $member->avatar['original'] ?? '') : $member->avatar) : '';
                                $memberUrl = $member && !empty($member->username) ? route('front.discover.show', $member->username) : null;
                            @endphp
                            <div class="build-trust-block">
                                <div class="build-trust-block-icon">
                                    @if($memberAvatar)
                                        <img src="{{ $memberAvatar }}" alt="{{ $memberName }}" class="team-roster-avatar rounded-circle" style="width: 48px; height: 48px; object-fit: cover;">
                                    @else
                                        <i data-lucide="user"></i>
                                    @endif
                                </div>
                                <h3 class="mb-1">{{ $memberName }}</h3>
                                <p class="text-muted small mb-0">Team Member</p>
                                @if($memberUrl)
                                    <a href="{{ $memberUrl }}" class="small text-primary mt-1 d-inline-block">View profile</a>
                                @endif
                            </div>
                        @empty
                            <div class="build-trust-block w-100 text-center py-4">
                                <div class="build-trust-block-icon mx-auto mb-2">
                                    <i data-lucide="users" class="discover-no-sponsors-icon"></i>
                                </div>
                                <h3 class="mb-1">No Team Roster</h3>
                                <p class="text-muted mb-0 small">No team roster at this time. Check back later or reach out to become a team member.</p>
                            </div>
                        @endforelse
                    </div>
                </div>
                
                <section class="team-card profile-sponser d-none">
                    <h4>Support {{ ($userRole == 'team') ? $schoolClub ?? 'Athlete' : ($user->first_name ?? 'Athlete') }}</h4>
                    <p>1,240 supporters have contributed so far.</p>
                    <div class="btn-section">
                        <a href="#" class="yellow-btn">Support via NFT</a>
                        <a href="{{ route('profile.sponsorships.create', ['sp' => $user->username]) }}" class="blue-btn">Become a Sponsor</a>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>

@endsection
@push('page_script')
<script>
    lucide.createIcons();

    $(function() {
        $('.btn-discover-follow').on('click', function(e) {
            e.preventDefault();
            var $btn = $(this);
            var followingId = $btn.data('following-id');
            var followState = $btn.data('follow-state') || 'none';
            var followUrl = $btn.data('follow-url');
            var unfollowUrl = $btn.data('unfollow-url');
            var csrf = $btn.data('csrf');
            if (!followingId) return;

            var url, data, newState, newText, newClass;
            if (followState === 'none') {
                url = followUrl;
                data = { _token: csrf, following_id: followingId };
            } else {
                url = unfollowUrl;
                data = { _token: csrf, following_id: followingId };
            }
            if (!url) return;

            var originalText = $btn.text();
            $btn.prop('disabled', true).text('...');

            $.ajax({
                url: url,
                type: 'POST',
                data: data,
                dataType: 'json',
                headers: { 'X-CSRF-TOKEN': csrf }
            }).done(function(response) {
                if (response.status == 200 || response.status == 201) {
                    var state = (response.data && response.data.follow_state) ? response.data.follow_state : (response.data && response.data.is_following ? 'active' : 'none');
                    $btn.data('follow-state', state);
                    $btn.removeClass('is-following is-requested');
                    if (state === 'active') {
                        $btn.addClass('is-following').text('Following');
                    } else if (state === 'pending') {
                        $btn.addClass('is-requested').text('Requested');
                    } else {
                        $btn.text('Follow');
                    }
                    var message = response.message || (state === 'active' ? 'You are now following this user.' : (state === 'pending' ? 'Follow request sent.' : 'Request cancelled.'));
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({ icon: 'success', title: 'Success', text: message, confirmButtonText: 'OK' });
                    } else {
                        alert(message);
                    }
                } else {
                    alert(response.message || 'Something went wrong. Please try again.');
                    $btn.text(originalText);
                }
            }).fail(function(xhr) {
                if (xhr.status == 401) {
                    var r = xhr.responseJSON || {};
                    var redirectUrl = (r.data && r.data.redirect) ? r.data.redirect : '{{ route("login") }}';
                    window.location.href = redirectUrl;
                    return;
                }
                var r = xhr.responseJSON || {};
                alert(r.message || 'Something went wrong. Please try again.');
                $btn.text(originalText);
            }).always(function() {
                $btn.prop('disabled', false);
            });
        });

        // Join/Invite button — open modal
        $('.btn-discover-join, .btn-discover-invite').on('click', function(e) {
            e.preventDefault();
            var $btn = $(this);
            var inviteType = $btn.data('invite-type');
            var inviterId = $btn.data('inviter-id');
            var userRole = $('#user_role').val() || (inviteType === 'join' ? 'team' : 'athlete');
            $('#joinInviteModalLabel').text(userRole === 'team' ? 'Request to Join Team' : 'Invite to Team');
            $('#invite_message').attr('placeholder', userRole === 'team' ? 'Tell the team why you\'d like to join...' : 'Tell the athlete why you\'d like them to join your team...');
            $('#invite-info-text').text(userRole === 'team' ? 'The team will receive your request and can accept or decline.' : 'The athlete will receive your invitation and can accept or decline.');
            $('#inviter_user_id').val(inviterId);
            $('#invite_type').val(inviteType);
            $('#invite_message').val('');
            var modalEl = document.getElementById('joinInviteModal');
            var modal = bootstrap.Modal.getOrCreateInstance(modalEl);
            modal.show();
        });

        // Send invite/join request
        $('#sendInviteRequestBtn').on('click', function(e) {
            e.preventDefault();
            var $btn = $(this);
            var $form = $('#joinInviteForm');
            var formData = {
                _token: '{{ csrf_token() }}',
                inviter_user_id: $('#inviter_user_id').val(),
                note: $('#invite_message').val() || null
            };
            $btn.prop('disabled', true);
            var originalHtml = $btn.html();
            $btn.html('<span class="spinner-border spinner-border-sm me-1"></span>Sending...');
            $.ajax({
                url: '{{ route("front.discover.invite") }}',
                type: 'POST',
                data: formData,
                dataType: 'json',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                success: function(response) {
                    if (response.status == 200 || response.status == 201) {
                        var modalEl = document.getElementById('joinInviteModal');
                        var modal = bootstrap.Modal.getInstance(modalEl);
                        if (modal) modal.hide();
                        if (typeof Swal !== 'undefined') {
                            Swal.fire({ icon: 'success', title: 'Success', text: response.message || 'Your request has been sent successfully!', confirmButtonText: 'OK' });
                        } else {
                            alert(response.message || 'Your request has been sent successfully!');
                        }
                        $form[0].reset();
                    } else {
                        alert(response.message || 'An error occurred');
                    }
                },
                error: function(xhr) {
                    if (xhr.status == 401) {
                        var response = xhr.responseJSON || {};
                        window.location.href = (response.data && response.data.redirect) ? response.data.redirect : '{{ route("login") }}';
                        return;
                    }
                    var response = xhr.responseJSON || {};
                    alert(response.message || 'An error occurred. Please try again.');
                },
                complete: function() {
                    $btn.prop('disabled', false);
                    $btn.html(originalHtml);
                }
            });
        });

        // ——— Discover Messages (same as sponsorships/show, entity_type = discover) ———
        var discoverEntityType = 'discover';
        var discoverEntityId = {{ $discoverConversationId }};
        var discoverCurrentUserId = {{ $authUserId ?? 0 }};
        var discoverMessagesLoaded = false;
        var discoverSelectedFile = null;

        function discoverScrollToMessages() {
            var $section = $('#discover-messages-section');
            if ($section.length) {
                $section.css('display', 'block');
                $('html, body').animate({ scrollTop: $section.offset().top - 20 }, 500);
                setTimeout(function() { $('#discover-message-input').focus(); }, 500);
            }
        }

        function discoverScrollToBottom() {
            var $container = $('#discover-messages-container');
            if ($container.length) $container.scrollTop($container[0].scrollHeight);
        }

        function discoverLoadMessages() {
            if (!discoverEntityId || !discoverCurrentUserId) return;
            $.ajax({
                url: '{{ route("profile.messages.get") }}',
                method: 'GET',
                data: { entity_type: discoverEntityType, entity_id: discoverEntityId },
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
                success: function(res) {
                    if (res.status !== 200 || !res.data || !res.data.messages) return;
                    var $container = $('#discover-messages-container');
                    var $noMessages = $('#discover-no-messages');
                    $container.find('.message-item').remove();
                    $noMessages.show();
                    res.data.messages.forEach(function(msg) {
                        discoverAddMessageToUI(msg);
                    });
                    if (res.data.messages.length > 0) $noMessages.hide();
                    discoverScrollToBottom();
                    discoverMarkMessagesAsRead();
                }
            });
        }

        function discoverMarkMessagesAsRead() {
            $.ajax({
                url: '{{ route("profile.messages.mark_read") }}',
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
                data: JSON.stringify({ entity_type: discoverEntityType, entity_id: discoverEntityId })
            });
        }

        function discoverAddMessageToUI(messageData) {
            var $existing = $('[data-message-id="' + messageData.id + '"]');
            if ($existing.length) return;
            var senderInitials = (messageData.sender && messageData.sender.full_name) ? messageData.sender.full_name.substring(0, 2).toUpperCase() : 'U';
            var senderName = (messageData.sender && messageData.sender.full_name) || 'Unknown';
            var messageTime = messageData.created_at ? new Date(messageData.created_at).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit', hour12: true }) : '';
            var readIndicator = '';
            if (messageData.sender_user_id === discoverCurrentUserId) {
                readIndicator = messageData.is_read ? '<i data-lucide="check-check" style="width:14px;height:14px;color:#059669;margin-left:6px;"></i>' : '<i data-lucide="check" style="width:14px;height:14px;color:#6b7280;margin-left:6px;"></i>';
            }
            var fileHtml = '';
            if (messageData.file && messageData.file.file_url) {
                fileHtml = '<div class="message-file"><a href="' + (messageData.file.file_url || '#') + '" target="_blank" class="file-link"><i data-lucide="paperclip" style="width:16px;height:16px;"></i> ' + (messageData.file.file_name_original || 'Attachment') + '</a></div>';
            }
            var msgClass = 'comment-item message-item ' + (messageData.sender_user_id === discoverCurrentUserId ? 'message-sent' : 'message-received');
            var html = '<div class="' + msgClass + '" data-message-id="' + messageData.id + '"><div class="comment-avatar">' + senderInitials + '</div><div class="comment-content"><div class="comment-author"><div class="comment-author-name">' + senderName + ' ' + readIndicator + '</div><div class="message-time">' + messageTime + '</div></div>' + (messageData.message ? '<div class="comment-text">' + messageData.message + '</div>' : '') + fileHtml + '</div></div>';
            $('#discover-no-messages').hide();
            $('#discover-messages-container').append(html);
            discoverScrollToBottom();
            if (typeof lucide !== 'undefined') lucide.createIcons();
        }

        $('.btn-discover-message').on('click', function(e) {
            e.preventDefault();
            if (!discoverCurrentUserId) {
                window.location.href = $(this).data('login-url') || '{{ route("login") }}';
                return;
            }
            if (!discoverEntityId) return;
            discoverScrollToMessages();
            if (!discoverMessagesLoaded) {
                discoverMessagesLoaded = true;
                discoverLoadMessages();
            }
        });

        $('#discover-send-message-btn').on('click', function() {
            var messageText = $('#discover-message-input').val().trim();
            if (!messageText && !discoverSelectedFile) return;
            var $btn = $('#discover-send-message-btn');
            $btn.prop('disabled', true);
            $btn.html('<i data-lucide="loader-2" style="width:16px;height:16px;" class="animate-spin"></i> Sending...');
            var formData = new FormData();
            formData.append('entity_type', discoverEntityType);
            formData.append('entity_id', discoverEntityId);
            if (messageText) formData.append('message', messageText);
            if (discoverSelectedFile) formData.append('file', discoverSelectedFile);
            $.ajax({
                url: '{{ route("profile.messages.send") }}',
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
                data: formData,
                processData: false,
                contentType: false,
                success: function(data) {
                    if (data.status === 200 && data.data && data.data.message) {
                        discoverAddMessageToUI(data.data.message);
                        $('#discover-message-input').val('');
                        discoverSelectedFile = null;
                        $('#discover-message-file-input').val('');
                        $('#discover-file-preview').hide();
                    } else {
                        alert(data.message || 'Failed to send message.');
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 401) {
                        window.location.href = (xhr.responseJSON && xhr.responseJSON.data && xhr.responseJSON.data.redirect) ? xhr.responseJSON.data.redirect : '{{ route("login") }}';
                        return;
                    }
                    alert((xhr.responseJSON && xhr.responseJSON.message) || 'An error occurred while sending the message.');
                },
                complete: function() {
                    $btn.prop('disabled', false);
                    $btn.html('<i data-lucide="send" style="width:16px;height:16px;"></i> Send Message');
                    if (typeof lucide !== 'undefined') lucide.createIcons();
                }
            });
        });

        $('#discover-message-input').on('keydown', function(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                $('#discover-send-message-btn').click();
            }
        });

        $('#discover-attach-file-btn').on('click', function() { $('#discover-message-file-input').click(); });
        $('#discover-message-file-input').on('change', function(e) {
            var file = e.target.files[0];
            if (file) {
                discoverSelectedFile = file;
                $('#discover-file-name').text(file.name);
                $('#discover-file-preview').css('display', 'flex').show();
            }
        });
        $('#discover-remove-file').on('click', function() {
            discoverSelectedFile = null;
            $('#discover-message-file-input').val('');
            $('#discover-file-preview').hide();
        });
    });
</script>
@endpush