@extends('front.layouts.app-auth')

@section('content')
<div class="sponsorship-details-container">
    <!-- Breadcrumbs -->
    @include('front.components.breadcrumbs', [
        'currentPage' => 'Offer Details',
        'breadcrumbs' => [
            ['label' => 'Sponsorships', 'url' => route('profile.sponsorships')]
        ]
    ])

    <!-- Header Section -->
    <div class="sponsorship-header">
        <div class="header-left">
            <h1>
                Offer: {{ $sponsorship->offer_title ?? 'Sponsorship Offer' }}
                @php
                    $displayStatus = ($sponsorship->is_withdrawal == 1) ? 'withdrawn' : ($sponsorship->status ?? 'pending');
                    $statusClass = strtolower($displayStatus);
                @endphp
                <span class="status-badge-header {{ $statusClass }}">
                    • {{ ucfirst($displayStatus) }}
                </span>
            </h1>
        </div>
        <div class="header-actions">
            @if($sponsorship->sponsor_user_id === $user->id)
                @if($sponsorship->status === 'pending' && !($sponsorship->is_withdrawal ?? false))
                <a href="{{ route('profile.sponsorships.edit', ['id' => $sponsorship->id]) }}" class="btn-header btn-edit">
                    <i data-lucide="edit-2" style="width: 16px; height: 16px;"></i>
                    Edit Offer
                </a>
                @endif
                @if(!($sponsorship->is_withdrawal ?? false) && in_array($sponsorship->status, ['pending', 'active']))
                <button type="button" class="btn-header btn-withdrawal" onclick="withdrawOffer({{ $sponsorship->id }})" data-withdraw-url="{{ route('profile.sponsorships.withdraw', ['id' => $sponsorship->id]) }}">
                    <i data-lucide="x-circle" style="width: 16px; height: 16px;"></i>
                    Withdrawal Offer
                </button>
                @endif
            @elseif($sponsorship->beneficiary_user_id === $user->id)
                @if($sponsorship->status === 'pending' && !($sponsorship->is_withdrawal ?? false))
                <button type="button" class="btn-header btn-accept" onclick="confirmAction({{ $sponsorship->id }}, 'approve')">
                    <i data-lucide="check" style="width: 16px; height: 16px;"></i>
                    Accept Offer
                </button>
                <button type="button" class="btn-header btn-decline" onclick="confirmAction({{ $sponsorship->id }}, 'decline')">
                    <i data-lucide="x" style="width: 16px; height: 16px;"></i>
                    Decline Offer
                </button>
                @endif
            @endif
            <button type="button" class="btn-header btn-message" onclick="scrollToMessages()">
                <i data-lucide="message-circle" style="width: 16px; height: 16px;"></i>
                Message {{ $sponsorship->sponsor_user_id === $user->id ? 'Athlete' : 'Sponsor' }}
            </button>
            @if($sponsorship->sponsor_user_id === $user->id)
            <button type="button" class="btn-header btn-report" onclick="viewReport({{ $sponsorship->id }})" data-report-url="{{ route('profile.sponsorships.report', ['id' => $sponsorship->id]) }}" data-export-url="{{ route('profile.sponsorships.export', ['id' => $sponsorship->id]) }}">
                <i data-lucide="file-text" style="width: 16px; height: 16px;"></i>
                View Report
            </button>
            @endif
        </div>
    </div>

    <!-- Main Content Grid -->
    <div class="sponsorship-content-grid">
        <!-- Left Column -->
        <div>
            <!-- Offer Summary Card -->
            <div class="offer-summary-card">
                <h2 class="card-title">Offer Summary</h2>
                <div class="summary-grid">
                    <div class="summary-item">
                        <div class="summary-label">
                            <i data-lucide="users"></i>
                            Athlete / Team:
                        </div>
                        <div class="summary-value">
                            @if(isset($beneficiaryProfile))
                                {{ $beneficiaryProfile['full_name'] }} ({{ $beneficiaryProfile['role'] }} – {{ $beneficiaryProfile['sport'] }}@if($beneficiaryProfile['position']), {{ $beneficiaryProfile['position'] }}@endif)
                            @else
                                N/A
                            @endif
                        </div>
                    </div>

                    <div class="summary-item">
                        <div class="summary-label">
                            <i data-lucide="file-text"></i>
                            Offer Title
                        </div>
                        <div class="summary-value">{{ $sponsorship->offer_title ?? 'N/A' }}</div>
                    </div>

                    <div class="summary-item">
                        <div class="summary-label">
                            <i data-lucide="dollar-sign"></i>
                            Funding Amount
                        </div>
                        <div class="summary-value">{!! \App\Helpers\Helper::price($sponsorship->funding_amount, $sponsorship->currency ?? 'USD') !!}</div>
                    </div>

                    <div class="summary-item">
                        <div class="summary-label">
                            <i data-lucide="layers"></i>
                            Type
                        </div>
                        <div class="summary-value">{{ ucfirst(str_replace('_', ' ', $sponsorship->sponsorship_type ?? 'Cash')) }} Sponsorship</div>
                    </div>

                    <div class="summary-item">
                        <div class="summary-label">
                            <i data-lucide="calendar"></i>
                            Payment Schedule
                        </div>
                        <div class="summary-value">
                            {{ ucfirst($sponsorship->payment_schedule ?? 'Monthly') }} 
                            @if($sponsorship->num_installments)
                                ({{ $sponsorship->num_installments }} installments)
                            @endif
                        </div>
                    </div>

                    <div class="summary-item">
                        <div class="summary-label">
                            <i data-lucide="clock"></i>
                            Duration
                        </div>
                        <div class="summary-value">
                            {{ $sponsorship->funding_start_date ? \Carbon\Carbon::parse($sponsorship->funding_start_date)->format('M Y') : 'N/A' }} – 
                            {{ $sponsorship->funding_end_date ? \Carbon\Carbon::parse($sponsorship->funding_end_date)->format('M Y') : 'Ongoing' }}
                        </div>
                    </div>

                    <div class="summary-item">
                        <div class="summary-label">
                            <i data-lucide="hash"></i>
                            Offer Ref ID
                        </div>
                        <div class="summary-value">OFFR-{{ date('Y') }}-{{ str_pad($sponsorship->id, 4, '0', STR_PAD_LEFT) }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Column - Activity History -->
        @if($sponsorship->sponsor_user_id === $user->id)
        <div>
            <div class="athlete-response-card">
                <h2 class="card-title">Offer Activity & History</h2>
                
                @if($sponsorship->activities && $sponsorship->activities->count() > 0)
                    @foreach($sponsorship->activities as $activity)
                        @php
                            // Get activity title based on type
                            $activityTitle = 'Activity';
                            $activityColor = 'gray';
                            $activityIcon = 'circle';
                            
                            switch($activity->activity_type) {
                                case 'offer_created':
                                    $activityTitle = 'Offer Created';
                                    $activityColor = 'orange';
                                    $activityIcon = 'circle';
                                    break;
                                case 'offer_viewed':
                                    $activityTitle = 'Athlete Viewed Offer';
                                    $activityColor = 'green';
                                    $activityIcon = 'eye';
                                    break;
                                case 'offer_accepted':
                                    $activityTitle = 'Athlete Accepted Offer';
                                    $activityColor = 'green';
                                    $activityIcon = 'check';
                                    break;
                                case 'offer_rejected':
                                    $activityTitle = 'Athlete Rejected Offer';
                                    $activityColor = 'red';
                                    $activityIcon = 'x';
                                    break;
                                case 'offer_withdrawn':
                                    $activityTitle = 'You Withdrew Offer';
                                    $activityColor = 'red';
                                    $activityIcon = 'x-circle';
                                    break;
                                case 'payment_released':
                                    $activityTitle = 'Payment Released';
                                    $activityColor = 'green';
                                    $activityIcon = 'dollar-sign';
                                    // Get installment number from metadata
                                    $metadata = is_array($activity->metadata) ? $activity->metadata : (is_string($activity->metadata) ? json_decode($activity->metadata, true) : []);
                                    if ($metadata && isset($metadata['installment_number'])) {
                                        $installmentNum = $metadata['installment_number'];
                                        // Add ordinal suffix
                                        $suffix = 'th';
                                        if ($installmentNum == 1) $suffix = 'st';
                                        elseif ($installmentNum == 2) $suffix = 'nd';
                                        elseif ($installmentNum == 3) $suffix = 'rd';
                                        $activityTitle = $installmentNum . $suffix . ' Payment Released';
                                    }
                                    break;
                                case 'status_changed':
                                    $activityTitle = 'Status Changed';
                                    $activityColor = 'blue';
                                    $activityIcon = 'refresh-cw';
                                    break;
                                default:
                                    $activityTitle = $activity->description ?? 'Activity';
                                    break;
                            }
                        @endphp
                        <div class="timeline-item">
                            <div class="timeline-dot {{ $activityColor }}">
                                <i data-lucide="{{ $activityIcon }}" style="width: 12px; height: 12px;"></i>
                            </div>
                            <div class="timeline-content">
                                <div class="timeline-title {{ $activityColor }}">{{ $activityTitle }}</div>
                                <div class="timeline-date">{{ $activity->created_at ? $activity->created_at->format('M d, Y') : 'N/A' }}</div>
                                @if($activity->description && $activity->description !== $activityTitle)
                                    <div class="timeline-description">{{ $activity->description }}</div>
                                @endif
                            </div>
                        </div>
                    @endforeach
                @else
                    <!-- Fallback: Show basic timeline if no activities exist -->
                    <div class="timeline-item">
                        <div class="timeline-dot orange">
                            <i data-lucide="circle" style="width: 12px; height: 12px;"></i>
                        </div>
                        <div class="timeline-content">
                            <div class="timeline-title orange">Offer Created</div>
                            <div class="timeline-date">{{ $sponsorship->created_at ? $sponsorship->created_at->format('M d, Y') : 'N/A' }}</div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
        @endif
    </div>

    <!-- Sponsorship Terms -->
    <div class="sponsorship-terms-card">
        <h2 class="card-title">Sponsorship Terms</h2>
        
        <div class="terms-section">
            <div class="terms-section-title">
                <i data-lucide="target"></i>
                Purpose
            </div>
            <div class="terms-value">{{ $sponsorship->purpose ?? 'To support training and tournament participation.' }}</div>
        </div>

        @if($sponsorship->brand_mentions || $sponsorship->num_branding_posts || $sponsorship->visibility_rights)
        <div class="terms-section">
            <div class="terms-section-title">
                <i data-lucide="gift"></i>
                Deliverables
            </div>
            <ul class="terms-list">
                @if($sponsorship->brand_mentions)
                    <li>{{ $sponsorship->brand_mentions }}</li>
                @endif
                @if($sponsorship->num_branding_posts)
                    <li>Social media mentions ({{ $sponsorship->num_branding_posts }}/month)</li>
                @endif
                @if($sponsorship->visibility_rights)
                    @php
                        $visibilityRights = is_string($sponsorship->visibility_rights) 
                            ? json_decode($sponsorship->visibility_rights, true) 
                            : $sponsorship->visibility_rights;
                    @endphp
                    @if(is_array($visibilityRights))
                        @foreach($visibilityRights as $right)
                            <li>{{ ucfirst(str_replace('_', ' ', $right)) }}</li>
                        @endforeach
                    @endif
                @else
                    <li>Logo placement on kit</li>
                    <li>Thank-you video</li>
                @endif
            </ul>
        </div>
        @endif

        <div class="terms-grid">
            <div class="terms-grid-item">
                <div class="terms-section-title">
                    <i data-lucide="video"></i>
                    Media Rights Consent
                </div>
                <div class="terms-value">{{ $sponsorship->media_rights_consent ? 'Granted' : 'Not Granted' }}</div>
            </div>

            <div class="terms-grid-item">
                <div class="terms-section-title">
                    <i data-lucide="paperclip"></i>
                    Attachments
                </div>
                <div class="terms-value">
                    @if(isset($sponsorship->contract_file['id']) && $sponsorship->contract_file['id'] > 0)
                        <a href="{{$sponsorship->contract_file['original']}}" style="color: #4f46e5; text-decoration: underline;">{{ $sponsorship->contract_file['file_name'] }}</a>
                    
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Payment & Status Tracking -->
    <div class="payment-tracking-card">
        <h2 class="card-title">Payment & Status Tracking</h2>
        
        <div class="payment-stats">
            <div class="payment-stat-box funds-committed">
                <div class="payment-stat-label">
                    <i data-lucide="circle-dollar-sign"></i>
                    Funds Committed
                </div>
                <div class="payment-stat-value">{!! \App\Helpers\Helper::price($totalCommitted, $sponsorship->currency ?? 'USD') !!}</div>
            </div>

            <div class="payment-stat-box funds-released">
                <div class="payment-stat-label">
                    <i data-lucide="trending-up"></i>
                    Funds Released
                </div>
                <div class="payment-stat-value">{!! \App\Helpers\Helper::price($totalReleased, $sponsorship->currency ?? 'USD') !!}</div>
            </div>

            <div class="payment-stat-box next-payment">
                <div class="payment-stat-label">
                    <i data-lucide="calendar-clock"></i>
                    Next Payment Due
                </div>
                <div class="payment-stat-value">
                    {{ $nextPayment ? \Carbon\Carbon::parse($nextPayment->installment_date)->format('M d, Y') : 'N/A' }}
                </div>
            </div>
        </div>

        <!-- Payment Table -->
        <div class="payment-table-wrapper">
            <table class="payment-table">
                <thead>
                    <tr>
                        <th>Month</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Released On</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($sponsorship->installments as $installment)
                    <tr>
                        <td>{{ \Carbon\Carbon::parse($installment->installment_date)->format('M Y') }}</td>
                        <td>{!! \App\Helpers\Helper::price($installment->installment_amount, $sponsorship->currency ?? 'USD') !!}</td>
                        <td>
                            <span class="payment-status-badge {{ strtolower($installment->payment_status ?? 'scheduled') }}">
                                {{ ucfirst($installment->payment_status ?? 'Scheduled') }}
                            </span>
                        </td>
                        <td>
                            @if($installment->payment_status == 'paid' || $installment->payment_status == 'released')
                                {{ $installment->paid_at ? \Carbon\Carbon::parse($installment->paid_at)->format('M d') : \Carbon\Carbon::parse($installment->updated_at)->format('M d') }}
                            @else
                                --
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td>{{ \Carbon\Carbon::parse($sponsorship->funding_start_date)->format('M Y') }}</td>
                        <td>{!! \App\Helpers\Helper::price($sponsorship->funding_amount / 12, $sponsorship->currency ?? 'USD') !!}</td>
                        <td><span class="payment-status-badge released">Released</span></td>
                        <td>{{ \Carbon\Carbon::parse($sponsorship->funding_start_date)->format('M d') }}</td>
                    </tr>
                    <tr>
                        <td>{{ \Carbon\Carbon::parse($sponsorship->funding_start_date)->addMonth()->format('M Y') }}</td>
                        <td>{!! \App\Helpers\Helper::price($sponsorship->funding_amount / 12, $sponsorship->currency ?? 'USD') !!}</td>
                        <td><span class="payment-status-badge pending">Pending</span></td>
                        <td>--</td>
                    </tr>
                    <tr>
                        <td>{{ \Carbon\Carbon::parse($sponsorship->funding_start_date)->addMonths(2)->format('M Y') }}</td>
                        <td>{!! \App\Helpers\Helper::price($sponsorship->funding_amount / 12, $sponsorship->currency ?? 'USD') !!}</td>
                        <td><span class="payment-status-badge scheduled">Scheduled</span></td>
                        <td>--</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Messages Section -->
    <div class="comments-card" id="messages-section">
        <div class="comments-header">
            <h2 class="card-title" style="margin: 0;">
                Messages
            </h2>
            <button type="button" class="btn-receive-updates" id="toggle-notifications" style="position: relative;">
                <i data-lucide="bell" style="width: 16px; height: 16px;"></i>
                Receive updates on new messages
                @if(isset($unreadCount) && $unreadCount > 0)
                <span class="bell-notification-dot" id="bell-notification-dot"></span>
                @endif
            </button>
        </div>

        <!-- Messages Container -->
        <div class="messages-container" id="messages-container">
            @forelse($messages ?? [] as $message)
            <div class="comment-item message-item {{ $message->sender_user_id === $user->id ? 'message-sent' : 'message-received' }}" data-message-id="{{ $message->id }}">
                <div class="comment-avatar">{{ substr($message->sender->full_name ?? 'U', 0, 2) }}</div>
                <div class="comment-content">
                    <div class="comment-author">
                        {{ $message->sender->full_name ?? 'Unknown' }}
                        <span class="message-time">{{ $message->created_at->format('M d, h:i A') }}</span>
                        @if($message->sender_user_id === $user->id)
                            @if($message->is_read)
                                <i data-lucide="check-check" style="width: 14px; height: 14px; color: #059669;" class="read-indicator"></i>
                            @else
                                <i data-lucide="check" style="width: 14px; height: 14px; color: #6b7280;" class="read-indicator"></i>
                            @endif
                        @endif
                    </div>
                    @if($message->message)
                    <div class="comment-text">{{ $message->message }}</div>
                    @endif
                    @if($message->file)
                    <div class="message-file">
                        <a href="{{ \App\Models\Masters\File::getFile($message->file) ?? '#' }}" target="_blank" class="file-link">
                            <i data-lucide="paperclip" style="width: 16px; height: 16px;"></i>
                            {{ $message->file->file_name_original ?? 'Attachment' }}
                        </a>
                    </div>
                    @endif
                </div>
            </div>
            @empty
            <div class="no-messages">
                <p>No messages yet. Start the conversation!</p>
            </div>
            @endforelse
        </div>

        <!-- Typing Indicator -->
        <div class="typing-indicator" id="typing-indicator" style="display: none;">
            <div class="comment-item">
                <div class="comment-avatar">{{ substr($otherUser->full_name ?? 'U', 0, 2) }}</div>
                <div class="comment-content">
                    <div class="typing-dots">
                        <span></span><span></span><span></span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Message Input Form -->
        <div class="comment-reply-form">
            <input type="file" id="message-file-input" style="display: none;" accept="image/*,application/pdf,.doc,.docx,.txt">
            <textarea class="comment-input" id="message-input" rows="1" placeholder="Type your message..."></textarea>
            <button class="btn-attach" id="attach-file-btn">
                <i data-lucide="paperclip" style="width: 20px; height: 20px;"></i>
            </button>
            <div class="file-preview" id="file-preview" style="display: none;">
                <span id="file-name"></span>
                <button type="button" id="remove-file" style="background: none; border: none; color: #dc2626; cursor: pointer;">
                    <i data-lucide="x" style="width: 16px; height: 16px;"></i>
                </button>
            </div>
            <button class="btn-send-message" id="send-message-btn">
                <i data-lucide="send" style="width: 16px; height: 16px;"></i>
                Send Message
            </button>
        </div>
    </div>
</div>

<!-- Report Modal -->
<div class="modal fade" id="reportModal" tabindex="-1" aria-labelledby="reportModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="reportModalLabel">Sponsorship Activity Report</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="report-actions mb-3">
                    <button type="button" class="btn btn-primary" id="exportReportBtn" onclick="exportReport()">
                        <i data-lucide="download" style="width: 16px; height: 16px;"></i>
                        Export as CSV
                    </button>
                </div>
                <div class="table-responsive">
                    <table class="table table-striped table-hover" id="activitiesTable">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Activity Type</th>
                                <th>Performed By</th>
                                <th>User Type</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody id="activitiesTableBody">
                            <tr>
                                <td colspan="5" class="text-center">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('page_script')
<script>
    // Make function globally accessible
    window.withdrawOffer = function(sponsorshipId) {
        // Show confirmation dialog using SweetAlert2
        Swal.fire({
            title: 'Withdraw Offer?',
            text: 'Are you sure you want to withdraw this offer? This action cannot be undone.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc2626',
            cancelButtonColor: '#6b7280',
            confirmButtonText: 'Yes, Withdraw',
            cancelButtonText: 'Cancel',
            showClass: {
                popup: 'animate__animated animate__fadeInDown'
            },
            hideClass: {
                popup: 'animate__animated animate__fadeOutUp'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                // Show loading state
                const btn = document.querySelector('.btn-withdrawal');
                if (!btn) return;
                
                const originalHtml = btn.innerHTML;
                btn.disabled = true;
                btn.innerHTML = '<i data-lucide="loader-2" style="width: 16px; height: 16px;" class="animate-spin"></i> Withdrawing...';

                // Get URL from data attribute or build it
                let withdrawUrl = btn.getAttribute('data-withdraw-url');
                if (!withdrawUrl) {
                    withdrawUrl = `/profile/sponsorships/${sponsorshipId}/withdraw`;
                }
                
                fetch(withdrawUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    }
                })
                .then(response => {
                    return response.json().then(data => {
                        return { status: response.status, data: data };
                    });
                })
                .then(result => {
                    const { status, data } = result;
                    
                    // Check if successful: HTTP 200 status OR data.status === 200 OR data.data.success === true
                    const isSuccess = status === 200 || data.status === 200 || data.data?.success === true;
                    
                    if (isSuccess) {
                        // Show success message
                        Swal.fire({
                            title: 'Success!',
                            text: data.message || 'Offer withdrawn successfully',
                            icon: 'success',
                            timer: 2000,
                            showConfirmButton: false,
                            confirmButtonColor: '#059669'
                        }).then(() => {
                            // Reload page to show updated status
                            window.location.reload();
                        });
                    } else {
                        // Show error message
                        Swal.fire({
                            title: 'Error!',
                            text: data.message || 'Failed to withdraw offer. Please try again.',
                            icon: 'error',
                            confirmButtonColor: '#dc2626'
                        });
                        btn.disabled = false;
                        btn.innerHTML = originalHtml;
                        if (typeof lucide !== 'undefined') {
                            lucide.createIcons();
                        }
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    Swal.fire({
                        title: 'Error!',
                        text: 'An error occurred while withdrawing the offer. Please try again.',
                        icon: 'error',
                        confirmButtonColor: '#3085d6'
                    });
                    btn.disabled = false;
                    btn.innerHTML = originalHtml;
                    if (typeof lucide !== 'undefined') {
                        lucide.createIcons();
                    }
                });
            }
        });
    }

    // Accept/Reject functionality (from my_sponsorships.blade.php)
    window.confirmAction = function(sponsorshipId, action) {
        const actionTitle = action === 'approve' ? 'Approve Sponsorship?' : 'Decline Sponsorship?';
        const actionMessage = action === 'approve' 
            ? 'Are you sure you want to approve this sponsorship offer?' 
            : 'Are you sure you want to decline this sponsorship offer?';
        const confirmButtonText = action === 'approve' ? 'Yes, Approve' : 'Yes, Decline';
        const confirmButtonColor = action === 'approve' ? '#059669' : '#dc2626';
        
        Swal.fire({
            title: actionTitle,
            text: actionMessage,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: confirmButtonColor,
            cancelButtonColor: '#6b7280',
            confirmButtonText: confirmButtonText,
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                updateSponsorshipStatus(sponsorshipId, action);
            }
        });
    }

    function updateSponsorshipStatus(sponsorshipId, action) {
        const newStatus = action === 'approve' ? 'active' : 'declined';
        
        Swal.fire({
            title: 'Processing...',
            text: 'Please wait while we update the sponsorship status.',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });
        
        fetch(`/profile/sponsorships/${sponsorshipId}/update-status`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                status: newStatus
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 200 || data.data?.success) {
                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: action === 'approve' 
                        ? 'Sponsorship has been approved successfully.' 
                        : 'Sponsorship has been declined successfully.',
                    confirmButtonColor: '#059669'
                }).then(() => {
                    window.location.reload();
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Error!',
                    text: data.message || 'An error occurred while updating the sponsorship status.',
                    confirmButtonColor: '#dc2626'
                });
            }
        })
        .catch(error => {
            console.error('Error:', error);
            Swal.fire({
                icon: 'error',
                title: 'Error!',
                text: 'An error occurred while updating the sponsorship status.',
                confirmButtonColor: '#dc2626'
            });
        });
    }

    // Scroll to messages function
    function scrollToMessages() {
        const messagesSectionEl = document.getElementById('messages-section');
        if (messagesSectionEl) {
            messagesSectionEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
            // Focus on message input
            setTimeout(() => {
                document.getElementById('message-input')?.focus();
            }, 500);
        }
    }

    // Messaging functionality with Pusher
    (function() {
        const entityType = 'sponsorship';
        const entityId = {{ $sponsorship->id }};
        const currentUserId = {{ $user->id }};
        const messagesContainer = document.getElementById('messages-container');
        const messageInput = document.getElementById('message-input');
        const sendBtn = document.getElementById('send-message-btn');
        const attachBtn = document.getElementById('attach-file-btn');
        const fileInput = document.getElementById('message-file-input');
        const filePreview = document.getElementById('file-preview');
        const fileName = document.getElementById('file-name');
        const removeFileBtn = document.getElementById('remove-file');
        const typingIndicator = document.getElementById('typing-indicator');
        
        let selectedFile = null;
        let typingTimeout = null;
        let pusher = null;
        let channel = null;
        let unreadCount = {{ $unreadCount ?? 0 }};

        // Initialize Pusher
        @if(config('broadcasting.default') === 'pusher')
        try {
            const pusherKey = '{{ config('broadcasting.connections.pusher.key') }}';
            const pusherCluster = '{{ config('broadcasting.connections.pusher.options.cluster') }}';
            
            if (!pusherKey || pusherKey === '') {
                console.warn('Pusher key is not configured. Real-time messaging will not work.');
            } else {
                pusher = new Pusher(pusherKey, {
                    cluster: pusherCluster || 'mt1',
                    encrypted: true,
                    authEndpoint: '/broadcasting/auth',
                    auth: {
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        }
                    }
                });

                const channelName = 'private-messages.' + entityType + '.' + entityId;
                console.log('Subscribing to channel:', channelName);
                
                channel = pusher.subscribe(channelName);
                
                // Channel subscription events for debugging
                channel.bind('pusher:subscription_succeeded', function() {
                    console.log('✅ Successfully subscribed to channel:', channelName);
                });
                
                channel.bind('pusher:subscription_error', function(status) {
                    console.error('❌ Subscription error:', status);
                });
                
            // Listen for new messages
            channel.bind('message.sent', function(data) {
                console.log('📨 Message received via Pusher:', data);
                
                // Check if message already exists in DOM (to prevent duplicates)
                const existingMessage = document.querySelector(`[data-message-id="${data.id}"]`);
                if (existingMessage) {
                    console.log('Message already exists in UI, skipping duplicate');
                    return;
                }
                
                // Add message to UI (Pusher delivers to all subscribers)
                // The sender already sees it from API response, but this ensures sync across tabs
                addMessageToUI(data);
                
                // If this is a message for the current user (they are the receiver)
                if (data.receiver_user_id === currentUserId && data.sender_user_id !== currentUserId) {
                    console.log('New message received - updating unread count');
                    unreadCount++;
                    updateUnreadBadge();
                    // Auto-mark as read if messages section is visible and user is viewing the page
                    // Don't auto-mark immediately - let user see the notification first
                }
            });
                
                // Listen for connection state changes
                pusher.connection.bind('connected', function() {
                    console.log('✅ Pusher connected');
                });
                
                pusher.connection.bind('error', function(err) {
                    console.error('❌ Pusher connection error:', err);
                });
            }

            // Listen for typing status
            channel.bind('typing.status', function(data) {
                if (data.user_id !== currentUserId) {
                    if (data.is_typing) {
                        typingIndicator.style.display = 'block';
                        scrollToBottom();
                    } else {
                        typingIndicator.style.display = 'none';
                    }
                }
            });
        } catch (e) {
            console.error('Pusher initialization error:', e);
        }
        @endif

        // Auto-resize textarea
        if (messageInput) {
            messageInput.addEventListener('input', function() {
                this.style.height = 'auto';
                this.style.height = (this.scrollHeight) + 'px';
                
                // Send typing status
                updateTypingStatus(true);
                clearTimeout(typingTimeout);
                typingTimeout = setTimeout(() => {
                    updateTypingStatus(false);
                }, 1000);
            });

            // Send on Enter (but allow Shift+Enter for new line)
            messageInput.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    sendMessage();
                }
            });
        }

        // File attachment
        if (attachBtn) {
            attachBtn.addEventListener('click', () => {
                fileInput.click();
            });
        }

        if (fileInput) {
            fileInput.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    selectedFile = file;
                    fileName.textContent = file.name;
                    filePreview.style.display = 'flex';
                }
            });
        }

        if (removeFileBtn) {
            removeFileBtn.addEventListener('click', () => {
                selectedFile = null;
                fileInput.value = '';
                filePreview.style.display = 'none';
            });
        }

        // Send message
        if (sendBtn) {
            sendBtn.addEventListener('click', sendMessage);
        }

        function sendMessage() {
            const messageText = messageInput.value.trim();
            
            if (!messageText && !selectedFile) {
                return;
            }

            // Disable send button
            sendBtn.disabled = true;
            sendBtn.innerHTML = '<i data-lucide="loader-2" style="width: 16px; height: 16px;" class="animate-spin"></i> Sending...';

            // Create FormData for file upload
            const formData = new FormData();
            formData.append('entity_type', entityType);
            formData.append('entity_id', entityId);
            if (messageText) {
                formData.append('message', messageText);
            }
            if (selectedFile) {
                formData.append('file', selectedFile);
            }

            fetch(`{{ route('profile.messages.send') }}`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 200 || data.data?.success) {
                    // Add message to UI immediately
                    addMessageToUI(data.data.message);
                    
                    // Clear input
                    messageInput.value = '';
                    messageInput.style.height = 'auto';
                    
                    // Clear file
                    selectedFile = null;
                    fileInput.value = '';
                    filePreview.style.display = 'none';
                    
                    // Stop typing indicator
                    updateTypingStatus(false);
                    
                    scrollToBottom();
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: data.message || 'Failed to send message.',
                        confirmButtonColor: '#dc2626'
                    });
                }
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Error!',
                    text: 'An error occurred while sending the message.',
                    confirmButtonColor: '#dc2626'
                });
            })
            .finally(() => {
                sendBtn.disabled = false;
                sendBtn.innerHTML = '<i data-lucide="send" style="width: 16px; height: 16px;"></i> Send Message';
                if (typeof lucide !== 'undefined') {
                    lucide.createIcons();
                }
            });
        }

        function addMessageToUI(messageData) {
            // Check if message already exists to prevent duplicates
            const existingMessage = document.querySelector(`[data-message-id="${messageData.id}"]`);
            if (existingMessage) {
                console.log('Message already exists in UI, skipping duplicate');
                return;
            }
            
            const messageDiv = document.createElement('div');
            messageDiv.className = `comment-item message-item ${messageData.sender_user_id === currentUserId ? 'message-sent' : 'message-received'}`;
            messageDiv.setAttribute('data-message-id', messageData.id);
            
            const senderInitials = messageData.sender?.full_name ? messageData.sender.full_name.substring(0, 2).toUpperCase() : 'U';
            const senderName = messageData.sender?.full_name || 'Unknown';
            const messageTime = new Date(messageData.created_at).toLocaleString('en-US', {
                month: 'short',
                day: 'numeric',
                hour: 'numeric',
                minute: '2-digit',
                hour12: true
            });
            
            let readIndicator = '';
            if (messageData.sender_user_id === currentUserId) {
                if (messageData.is_read) {
                    readIndicator = '<i data-lucide="check-check" style="width: 14px; height: 14px; color: #059669;" class="read-indicator"></i>';
                } else {
                    readIndicator = '<i data-lucide="check" style="width: 14px; height: 14px; color: #6b7280;" class="read-indicator"></i>';
                }
            }
            
            let fileHtml = '';
            if (messageData.file) {
                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>`;
            }
            
            messageDiv.innerHTML = `
                <div class="comment-avatar">${senderInitials}</div>
                <div class="comment-content">
                    <div class="comment-author">
                        ${senderName}
                        <span class="message-time">${messageTime}</span>
                        ${readIndicator}
                    </div>
                    ${messageData.message ? `<div class="comment-text">${messageData.message}</div>` : ''}
                    ${fileHtml}
                </div>
            `;
            
            // Remove "no messages" if exists
            const noMessages = messagesContainer.querySelector('.no-messages');
            if (noMessages) {
                noMessages.remove();
            }
            
            messagesContainer.appendChild(messageDiv);
            scrollToBottom();
            
            // Reinitialize icons
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        }

        function scrollToBottom() {
            if (messagesContainer) {
                messagesContainer.scrollTop = messagesContainer.scrollHeight;
            }
        }

        function updateTypingStatus(isTyping) {
            fetch(`{{ route('profile.messages.typing') }}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    entity_type: entityType,
                    entity_id: entityId,
                    is_typing: isTyping
                })
            }).catch(err => console.error('Typing status error:', err));
        }

        function updateUnreadBadge() {
            const bellDot = document.getElementById('bell-notification-dot');
            const bellButton = document.getElementById('toggle-notifications');
            
            if (unreadCount > 0) {
                if (!bellDot && bellButton) {
                    // Create red dot if it doesn't exist
                    const newDot = document.createElement('span');
                    newDot.className = 'bell-notification-dot';
                    newDot.id = 'bell-notification-dot';
                    bellButton.appendChild(newDot);
                } else if (bellDot) {
                    bellDot.style.display = 'block';
                }
            } else {
                // Hide red dot when no unread messages
                if (bellDot) {
                    bellDot.style.display = 'none';
                }
            }
        }

        function markMessagesAsRead() {
            fetch(`{{ route('profile.messages.mark_read') }}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    entity_type: entityType,
                    entity_id: entityId
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 200 || data.data?.success) {
                    // Reset unread count and update badge
                    unreadCount = 0;
                    updateUnreadBadge();
                }
            })
            .catch(err => console.error('Mark read error:', err));
        }

        // Initialize unread badge on page load
        updateUnreadBadge();
        
        // Scroll to bottom on load
        setTimeout(scrollToBottom, 100);
        
        // Track if user has scrolled to see messages
        let hasScrolledToMessages = false;
        
        // Function to scroll to last read message or end of list
        function scrollToLastReadMessage() {
            if (!messagesContainer) {
                return;
            }
            
            // Scroll to messages section first
            const messagesSectionEl = document.getElementById('messages-section');
            if (messagesSectionEl) {
                messagesSectionEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
                
                // Wait for scroll to complete, then scroll to bottom (end of message list)
                setTimeout(() => {
                    // Force scroll to the very bottom of the messages container
                    if (messagesContainer) {
                        // Get the last message element
                        const messageItems = messagesContainer.querySelectorAll('.message-item');
                        if (messageItems.length > 0) {
                            const lastMessage = messageItems[messageItems.length - 1];
                            // Scroll the last message into view
                            lastMessage.scrollIntoView({ behavior: 'smooth', block: 'end' });
                        } else {
                            // Fallback: scroll container to bottom
                            messagesContainer.scrollTop = messagesContainer.scrollHeight;
                        }
                    }
                    
                    // Double check and force scroll after a delay
                    setTimeout(() => {
                        if (messagesContainer) {
                            messagesContainer.scrollTop = messagesContainer.scrollHeight + 100;
                        }
                    }, 300);
                    
                    // After scrolling to bottom, mark messages as read and hide red dot
                    setTimeout(() => {
                        if (unreadCount > 0) {
                            hasScrolledToMessages = true;
                            markMessagesAsRead();
                        }
                    }, 800);
                }, 500);
            } else {
                // If section not found, just scroll to bottom
                if (messagesContainer) {
                    const messageItems = messagesContainer.querySelectorAll('.message-item');
                    if (messageItems.length > 0) {
                        const lastMessage = messageItems[messageItems.length - 1];
                        lastMessage.scrollIntoView({ behavior: 'smooth', block: 'end' });
                    } else {
                        messagesContainer.scrollTop = messagesContainer.scrollHeight;
                    }
                }
                setTimeout(() => {
                    if (unreadCount > 0) {
                        hasScrolledToMessages = true;
                        markMessagesAsRead();
                    }
                }, 800);
            }
        }
        
        // Handle bell button click - scroll to last read message or end of list
        // Use setTimeout to ensure DOM is ready and avoid conflicts
        setTimeout(function() {
            const bellButton = document.getElementById('toggle-notifications');
            if (bellButton) {
                // Remove any existing listeners by cloning the button
                const newBellButton = bellButton.cloneNode(true);
                bellButton.parentNode.replaceChild(newBellButton, bellButton);
                
                // Reinitialize Lucide icons for the cloned button
                if (typeof lucide !== 'undefined') {
                    lucide.createIcons();
                }
                
                // Add click event listener
                newBellButton.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    // Always scroll to messages, regardless of unread count
                    scrollToLastReadMessage();
                    return false;
                });
            }
        }, 200);
        
        // Mark messages as read when user scrolls to see messages
        const messagesSectionEl = document.getElementById('messages-section');
        
        if (messagesContainer && unreadCount > 0) {
            messagesContainer.addEventListener('scroll', function() {
                if (!hasScrolledToMessages && unreadCount > 0) {
                    // Check if user has scrolled down to see messages
                    const scrollTop = messagesContainer.scrollTop;
                    const scrollHeight = messagesContainer.scrollHeight;
                    const clientHeight = messagesContainer.clientHeight;
                    
                    // If scrolled near bottom (within 100px), mark as read
                    if (scrollTop + clientHeight >= scrollHeight - 100) {
                        hasScrolledToMessages = true;
                        markMessagesAsRead();
                    }
                }
            });
            
            // Also check on initial load if messages are already visible
            setTimeout(() => {
                if (messagesContainer.scrollTop + messagesContainer.clientHeight >= messagesContainer.scrollHeight - 100) {
                    hasScrolledToMessages = true;
                    if (unreadCount > 0) {
                        markMessagesAsRead();
                    }
                }
            }, 500);
        }
        
        // Mark as read when messages section comes into view
        if (messagesSectionEl && unreadCount > 0) {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting && unreadCount > 0) {
                        // Wait a bit to see if user scrolls, then mark as read
                        setTimeout(() => {
                            if (messagesContainer) {
                                const scrollTop = messagesContainer.scrollTop;
                                const scrollHeight = messagesContainer.scrollHeight;
                                const clientHeight = messagesContainer.clientHeight;
                                
                                // If scrolled to bottom, mark as read
                                if (scrollTop + clientHeight >= scrollHeight - 100) {
                                    if (!hasScrolledToMessages) {
                                        hasScrolledToMessages = true;
                                        markMessagesAsRead();
                                    }
                                }
                            }
                        }, 500);
                    }
                });
            }, { threshold: 0.5 });
            
            observer.observe(messagesSectionEl);
        }
    })();

    // View Report functionality
    let currentSponsorshipId = null;
    let currentExportUrl = null;

    window.viewReport = function(sponsorshipId) {
        const btn = document.querySelector('.btn-report');
        if (!btn) return;
        
        currentSponsorshipId = sponsorshipId;
        currentExportUrl = btn.getAttribute('data-export-url');
        const reportUrl = btn.getAttribute('data-report-url');
        
        // Show modal
        const modalElement = document.getElementById('reportModal');
        if (!modalElement) {
            console.error('Report modal not found');
            return;
        }
        
        // Check if Bootstrap is available
        if (typeof bootstrap === 'undefined') {
            console.error('Bootstrap is not loaded');
            Swal.fire({
                title: 'Error!',
                text: 'Bootstrap is required for this feature',
                icon: 'error',
                confirmButtonColor: '#dc2626'
            });
            return;
        }
        
        const modal = new bootstrap.Modal(modalElement);
        modal.show();
        
        // Fetch activities
        fetch(reportUrl, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(result => {
            const { status, data } = result;
            
            if (status === 200 && data.success && data.activities) {
                displayActivities(data.activities);
            } else {
                showReportError(data.message || 'Failed to load activities');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showReportError('An error occurred while loading the report');
        });
    };

    function displayActivities(activities) {
        const tbody = document.getElementById('activitiesTableBody');
        if (!tbody) return;
        
        tbody.innerHTML = '';
        
        if (activities.length === 0) {
            tbody.innerHTML = '<tr><td colspan="5" class="text-center">No activities found</td></tr>';
            return;
        }
        
        const activityTypeLabels = {
            'offer_created': 'Offer Created',
            'offer_viewed': 'Offer Viewed',
            'offer_accepted': 'Offer Accepted',
            'offer_rejected': 'Offer Rejected',
            'offer_withdrawn': 'Offer Withdrawn',
            'payment_released': 'Payment Released',
            'status_changed': 'Status Changed',
        };
        
        activities.forEach(activity => {
            const row = document.createElement('tr');
            let date = 'N/A';
            if (activity.created_at) {
                const dateObj = new Date(activity.created_at);
                date = dateObj.toLocaleDateString('en-US', { 
                    year: 'numeric', 
                    month: 'short', 
                    day: 'numeric',
                    hour: '2-digit',
                    minute: '2-digit'
                });
            }
            const activityType = activityTypeLabels[activity.activity_type] || activity.activity_type;
            const performedBy = activity.performed_by ? activity.performed_by.full_name : 'System';
            const userType = activity.performed_by_type ? activity.performed_by_type.charAt(0).toUpperCase() + activity.performed_by_type.slice(1) : 'N/A';
            const description = activity.description || '';
            
            row.innerHTML = `
                <td>${date}</td>
                <td>${activityType}</td>
                <td>${performedBy}</td>
                <td>${userType}</td>
                <td>${description}</td>
            `;
            tbody.appendChild(row);
        });
        
        // Reinitialize Lucide icons
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    }

    function showReportError(message) {
        const tbody = document.getElementById('activitiesTableBody');
        if (tbody) {
            tbody.innerHTML = `<tr><td colspan="5" class="text-center text-danger">${message}</td></tr>`;
        }
    }

    window.exportReport = function() {
        if (!currentExportUrl) {
            Swal.fire({
                title: 'Error!',
                text: 'Export URL not found',
                icon: 'error',
                confirmButtonColor: '#dc2626'
            });
            return;
        }
        
        // Create a temporary link to trigger download
        const link = document.createElement('a');
        link.href = currentExportUrl;
        link.download = '';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        
        // Show success message
        Swal.fire({
            title: 'Success!',
            text: 'Report exported successfully',
            icon: 'success',
            timer: 2000,
            showConfirmButton: false,
            confirmButtonColor: '#059669'
        });
    };
</script>
@endpush