@extends('layouts.app')

@section('content')

<div class="starred-page">
    <header class="starred-header">
        <a href="{{ route('gc.dashboard') }}" class="back-btn" aria-label="Back">
            <i class="fa-solid fa-arrow-left"></i>
        </a>
        <h1>Starred messages</h1>
    </header>

    <div class="starred-search">
        <i class="fa-solid fa-magnifying-glass"></i>
        <input type="search" id="starred-search-input" placeholder="Search starred messages" autocomplete="off">
    </div>

    <div id="starred-list" class="starred-list">
        @forelse($starredMessages as $item)
            <a href="{{ route('gc.dashboard', $item['partner_id']) }}#msg-{{ $item['id'] }}" class="starred-item" data-text="{{ strtolower($item['message']) }}">
                <img src="{{ $item['partner_avatar'] }}" alt="" class="starred-avatar" onerror="this.style.display='none'">
                <div class="starred-item-body">
                    <div class="starred-item-top">
                        <strong>{{ $item['partner_name'] }}</strong>
                        <time>{{ $item['created_at'] ? \Carbon\Carbon::parse($item['created_at'])->format('M j, g:i A') : '' }}</time>
                    </div>
                    <span class="starred-sender">{{ $item['sender_name'] }}</span>
                    <p class="starred-preview">{{ Str::limit($item['message'], 120) }}</p>
                </div>
                <i class="fa-solid fa-star starred-icon"></i>
            </a>
        @empty
            <div class="starred-empty">
                <i class="fa-regular fa-star"></i>
                <p>No starred messages</p>
                <span>Tap and hold a message, then tap Star to save it here.</span>
            </div>
        @endforelse
    </div>
</div>

<script>
document.getElementById('starred-search-input')?.addEventListener('input', (e) => {
    const q = e.target.value.trim().toLowerCase();
    document.querySelectorAll('.starred-item').forEach((el) => {
        const text = el.dataset.text || '';
        el.style.display = !q || text.includes(q) ? '' : 'none';
    });
    const visible = document.querySelectorAll('.starred-item:not([style*="none"])').length;
    const empty = document.querySelector('.starred-empty');
    if (empty) empty.style.display = visible === 0 && q ? 'flex' : (document.querySelectorAll('.starred-item').length ? 'none' : 'flex');
});
</script>

@endsection