@page "/bookmarks"
@inject TafsirApiClient Api
@inject IDeviceIdStore DeviceStore

<section class="list-page">
    <h1>نشان‌شده‌ها</h1>
    @if (loading)
    {
        <p class="muted">در حال بارگذاری...</p>
    }
    else if (items.Count == 0)
    {
        <p class="muted">هنوز نشانی ذخیره نشده است.</p>
    }
    else
    {
        <ul class="simple-list">
            @foreach (var item in items)
            {
                <li>
                    <a href="/tafsir/ghatreh-chekani">@item.Episode.Title</a>
                    <span class="ep-meta">@item.Episode.SurahNameFa — آیه @item.Episode.AyahNumber</span>
                </li>
            }
        </ul>
    }
</section>

@code {
    private List<BookmarkDto> items = [];
    private bool loading = true;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!firstRender) return;
        var deviceId = await DeviceStore.GetOrCreateAsync();
        try { items = (await Api.GetBookmarksAsync(deviceId)).ToList(); }
        catch { items = []; }
        finally
        {
            loading = false;
            await InvokeAsync(StateHasChanged);
        }
    }
}