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

@section('content')

@include('front.components.breadcrumbs', [
    'currentPage' => 'Follows',
    'breadcrumbs' => []
])

<div class="campaigns-top-bar">
    <div class="campaigns-top-bar-left">
        <h1 class="campaigns-main-title">Follows</h1>
        <p class="campaigns-subtitle">Manage who you follow and who follows you. Approve or decline follow requests in the Follower tab.</p>
    </div>
</div>

<div class="follow-list-container">
    <div class="follow-list-tabs">
        <a href="{{ route('profile.follows.index', ['tab' => 'following']) }}"
           class="follow-list-tab {{ ($tabType ?? 'following') === 'following' ? 'active' : '' }}">
            <i data-lucide="user-plus"></i>
            Following
        </a>
        <a href="{{ route('profile.follows.index', ['tab' => 'follower']) }}"
           class="follow-list-tab {{ ($tabType ?? '') === 'follower' ? 'active' : '' }}">
            <i data-lucide="users"></i>
            Follower
        </a>
    </div>

    <div class="follow-list-content">
        <h3 class="follow-list-section-title">
            @if(($tabType ?? 'following') === 'follower')
                Followers &amp; Requests
            @else
                People You Follow
            @endif
        </h3>

        @if(($tabType ?? 'following') === 'follower')
            @forelse($list as $item)
                @php
                    $displayUser = $item->follower ?? null;
                    if (!$displayUser) {
                        continue;
                    }
                    $userName = $displayUser->full_name ?? 'Unknown User';
                    $initials = collect(explode(' ', $userName))->map(function ($w) {
                        return strtoupper(substr($w, 0, 1));
                    })->take(2)->join('');
                    $userRole = $displayUser->role_slug ?? 'athlete';
                    $profile = ($userRole === 'team') ? $displayUser->teamProfile : $displayUser->athleteProfile;
                    $sport = 'N/A';
                    $primarySport = $displayUser->sports->first();
                    if ($primarySport && $primarySport->sport) {
                        $sport = $primarySport->sport->title;
                    }
                    $requestDate = $item->created_at ? \App\Helpers\Helper::showdate($item->created_at, false) : 'N/A';
                    $avatarIndex = (($displayUser->id ?? 0) % 6) + 1;
                    $isPending = $item->status === \App\Models\Users\UserFollow::STATUS_PENDING;
                @endphp
                <div class="follow-list-card">
                    <div class="follow-list-card-header">
                        <div class="follow-list-avatar follow-list-avatar-{{ $avatarIndex }}">{{ $initials }}</div>
                        <div class="follow-list-user-info">
                            <div class="follow-list-user-name">{{ $userName }}</div>
                            @if($isPending)
                                <div class="follow-list-type follow-list-type-request">Follow request</div>
                            @else
                                <div class="follow-list-type follow-list-type-approved">Follower</div>
                            @endif
                            <div class="follow-list-sport">{{ $sport }}</div>
                        </div>
                        <div class="follow-list-header-right">
                            @if(!$isPending)
                                <span class="follow-list-status-badge follow-list-status-approved">Approved</span>
                            @endif
                            <span class="follow-list-date">{{ $requestDate }}</span>
                        </div>
                    </div>
                    @if($isPending)
                        <div class="follow-list-actions">
                            <button type="button"
                                    class="btn-follow-approve follow-list-action-btn"
                                    data-follow-id="{{ $item->id }}"
                                    data-status="approved">
                                <i data-lucide="user-plus"></i>
                                Approve
                            </button>
                            <button type="button"
                                    class="btn-follow-reject follow-list-action-btn"
                                    data-follow-id="{{ $item->id }}"
                                    data-status="rejected">
                                <i data-lucide="user-x"></i>
                                Decline
                            </button>
                        </div>
                    @endif
                </div>
            @empty
                <div class="follow-list-empty">
                    <i data-lucide="inbox"></i>
                    <p class="follow-list-empty-title">No followers yet</p>
                    <p class="follow-list-empty-subtitle">When someone sends you a follow request, it will appear here.</p>
                </div>
            @endforelse
        @else
            @forelse($list as $item)
                @php
                    $displayUser = $item->following ?? null;
                    if (!$displayUser) {
                        continue;
                    }
                    $userName = $displayUser->full_name ?? 'Unknown User';
                    $initials = collect(explode(' ', $userName))->map(function ($w) {
                        return strtoupper(substr($w, 0, 1));
                    })->take(2)->join('');
                    $userRole = $displayUser->role_slug ?? 'athlete';
                    $sport = 'N/A';
                    $primarySport = $displayUser->sports->first();
                    if ($primarySport && $primarySport->sport) {
                        $sport = $primarySport->sport->title;
                    }
                    $requestDate = $item->created_at ? \App\Helpers\Helper::showdate($item->created_at, false) : 'N/A';
                    $avatarIndex = (($displayUser->id ?? 0) % 6) + 1;
                    $isPending = $item->status === \App\Models\Users\UserFollow::STATUS_PENDING;
                    $isActive = $item->status === \App\Models\Users\UserFollow::STATUS_ACTIVE;
                @endphp
                <div class="follow-list-card">
                    <div class="follow-list-card-header">
                        <div class="follow-list-avatar follow-list-avatar-{{ $avatarIndex }}">{{ $initials }}</div>
                        <div class="follow-list-user-info">
                            <div class="follow-list-user-name">{{ $userName }}</div>
                            @if($isPending)
                                <div class="follow-list-type follow-list-type-request">Requested</div>
                            @else
                                <div class="follow-list-type follow-list-type-approved">Following</div>
                            @endif
                            <div class="follow-list-sport">{{ $sport }}</div>
                        </div>
                        <div class="follow-list-header-right">
                            @if($isPending)
                                <span class="follow-list-status-badge follow-list-status-pending">Requested</span>
                            @else
                                <span class="follow-list-status-badge follow-list-status-approved">Accepted</span>
                            @endif
                            <span class="follow-list-date">{{ $requestDate }}</span>
                        </div>
                    </div>
                </div>
            @empty
                <div class="follow-list-empty follow-list-empty-following">
                    <i data-lucide="user-plus"></i>
                    <p class="follow-list-empty-title">Not following anyone yet</p>
                    <p class="follow-list-empty-subtitle">Discover athletes and teams to follow.</p>
                    <a href="{{ route('front.discover.index') }}" class="follow-list-empty-link">
                        <i data-lucide="search"></i>
                        Discover
                    </a>
                </div>
            @endforelse
        @endif
    </div>

    @if(isset($list) && method_exists($list, 'links'))
        <div class="follow-list-pagination">
            {{ $list->links() }}
        </div>
    @endif
</div>

@push('page_script')
<script>
(function() {
    if (typeof $ === 'undefined') return;
    $(function() {
        if (typeof lucide !== 'undefined') lucide.createIcons();

        $(document).on('click', '.follow-list-action-btn', function(e) {
            e.preventDefault();
            var $btn = $(this);
            if ($btn.hasClass('is-loading') || $btn.prop('disabled')) return false;

            var followId = $btn.data('follow-id');
            var status = $btn.data('status');
            if (!followId || !status) return false;

            var url = '{{ url("profile/follows") }}/' + followId + '/status-update';
            var csrf = $('meta[name="csrf-token"]').attr('content');
            $btn.prop('disabled', true).addClass('is-loading');

            $.ajax({
                url: url,
                type: 'POST',
                headers: { 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': csrf },
                data: { status: status },
                dataType: 'json'
            }).done(function(data) {
                if (data && (data.status === 200 || data.success)) {
                    if (typeof showNotification === 'function') {
                        showNotification('success', data.message || 'Success');
                    }
                    setTimeout(function() { window.location.reload(); }, 800);
                } else {
                    if (typeof showNotification === 'function') {
                        showNotification('error', (data && data.message) ? data.message : 'Request failed');
                    }
                    $btn.prop('disabled', false).removeClass('is-loading');
                }
            }).fail(function(xhr) {
                var msg = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'An error occurred';
                if (typeof showNotification === 'function') showNotification('error', msg);
                $btn.prop('disabled', false).removeClass('is-loading');
            });
            return false;
        });
    });
})();
</script>
@endpush

@endsection