@extends('layouts.app-sub')

@section('title', '알림함 - 마이페이지')
@section('header-title', '알림함')

@section('content')
<div class="container py-3 py-lg-4" style="max-width: 780px;">

    <!-- 1. 탭 필터 (전체 / 안 읽음) & 우측 모두 읽음 액션 바 -->
    <div class="d-flex justify-content-between align-items-center mb-3 border-bottom pb-2">
        <div class="d-flex gap-2">
            <a href="{{ route('mypage.notifications.index', ['filter' => 'all']) }}" 
               class="btn btn-sm px-3 fw-semibold {{ ($filter ?? 'all') === 'all' ? 'btn-dark' : 'btn-light text-muted' }}" 
               style="border-radius: 20px; font-size: 0.85rem;">
                전체 ({{ $totalCount ?? 0 }})
            </a>
            <a href="{{ route('mypage.notifications.index', ['filter' => 'unread']) }}" 
               class="btn btn-sm px-3 fw-semibold {{ ($filter ?? 'all') === 'unread' ? 'btn-dark' : 'btn-light text-muted' }}" 
               style="border-radius: 20px; font-size: 0.85rem;">
                안 읽음 ({{ $unreadCount ?? 0 }})
            </a>
        </div>

        @if(($unreadCount ?? 0) > 0)
            <button type="button" class="btn btn-sm btn-outline-secondary d-flex align-items-center gap-1 shadow-sm py-1 px-3" id="btnMarkAllRead" style="border-radius: var(--radius-fixed); font-size: 0.8rem;">
                <i class="fas fa-check-double text-muted"></i>
                <span>모두 읽음</span>
            </button>
        @endif
    </div>

    <!-- 2. 게시판 목록 형태 컨테이너 -->
    <div class="card border-0 shadow-sm overflow-hidden mb-3" style="border-radius: var(--radius-fixed);">
        <div class="list-group list-group-flush" id="notificationListContainer">
            @if($notifications->count() > 0)
                @include('mypage.notifications._items')
            @else
                <div class="text-center py-5 bg-white">
                    <div class="mb-3 text-muted opacity-50">
                        <i class="far fa-bell-slash fa-3x"></i>
                    </div>
                    <h6 class="fw-bold text-dark mb-1">
                        {{ ($filter ?? 'all') === 'unread' ? '새로운 안 읽은 알림이 없습니다.' : '받은 알림이 없습니다.' }}
                    </h6>
                    <p class="text-muted small mb-0">새로운 알림이 도착하면 이곳에 목록으로 표시됩니다.</p>
                </div>
            @endif
        </div>
    </div>

    <!-- 3. 무한 스크롤 트리거 & 로딩 스피너 -->
    <div id="infiniteScrollSentinel" class="text-center py-2 {{ $notifications->hasMorePages() ? '' : 'd-none' }}">
        <div class="spinner-border spinner-border-sm text-secondary opacity-75" role="status">
            <span class="visually-hidden">로딩 중...</span>
        </div>
    </div>

</div>
@endsection

@push('styles')
<style>
    .list-group-item:hover {
        background-color: #fcfbf9 !important;
    }
    .hover-opacity-100:hover {
        opacity: 1 !important;
        color: #dc3545 !important;
    }
    .fs-xs {
        font-size: 0.75rem;
    }
</style>
@endpush

@push('scripts')
<script>
/**
 * 1. 단건 알림 삭제 SweetAlert
 */
async function confirmDeleteNotification(notiId, notiTitle) {
    const form = document.getElementById('delete-form-' + notiId);
    if (!form) return;

    const message = `
        <div class="text-secondary small text-start px-1 py-1">
            <p class="mb-0" style="font-size: 0.95rem; line-height: 1.5;">
                <strong class="text-dark">[${notiTitle}]</strong> 알림을 삭제하시겠습니까?
            </p>
        </div>
    `;

    const confirmed = await showSwalConfirm(
        message, 
        '알림 삭제', 
        '삭제', 
        '취소', 
        'question'
    );

    if (confirmed) {
        form.submit();
    }
}

document.addEventListener('DOMContentLoaded', function () {
    // 2. 전체 읽음 처리 SweetAlert
    const btnMarkAll = document.getElementById('btnMarkAllRead');
    if (btnMarkAll) {
        btnMarkAll.addEventListener('click', async function () {
            const message = `
                <div class="text-secondary small text-start px-1 py-1">
                    <p class="mb-0" style="font-size: 0.95rem; line-height: 1.5;">
                        확인하지 않은 <strong class="text-dark">{{ $unreadCount ?? 0 }}건</strong>의 알림을 모두 읽음 처리하시겠습니까?
                    </p>
                </div>
            `;

            const confirmed = await showSwalConfirm(
                message,
                '전체 읽음 처리',
                '모두 읽음',
                '취소',
                'question'
            );

            if (confirmed) {
                fetch('{{ route("mypage.notifications.read-all") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    }
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    }
                })
                .catch(err => {
                    console.error(err);
                    alert('처리 중 오류가 발생했습니다.');
                });
            }
        });
    }

    // 3. 무한 스크롤 (Intersection Observer)
    let nextPageUrl = @json($notifications->nextPageUrl());
    let isLoading = false;
    const sentinel = document.getElementById('infiniteScrollSentinel');
    const container = document.getElementById('notificationListContainer');

    if (sentinel && nextPageUrl) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting && nextPageUrl && !isLoading) {
                    isLoading = true;
                    sentinel.classList.remove('d-none');

                    fetch(nextPageUrl, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        }
                    })
                    .then(res => res.json())
                    .then(data => {
                        container.insertAdjacentHTML('beforeend', data.html);
                        nextPageUrl = data.nextPageUrl;

                        if (!data.hasMore) {
                            observer.disconnect();
                            sentinel.classList.add('d-none');
                        }
                        isLoading = false;
                    })
                    .catch(err => {
                        console.error('알림 로딩 오류:', err);
                        isLoading = false;
                        sentinel.classList.add('d-none');
                    });
                }
            });
        }, { rootMargin: '100px' });

        observer.observe(sentinel);
    }
});
</script>
@endpush