@page "/"
@inject TafsirApiClient Api
@inject PlayerSessionService Player
@inject NavigationManager Nav
@implements IDisposable

<section class="home">
    <h1 class="sr-only">تفسیر قرآن</h1>

    @if (Player.HasTrack)
    {
        <button type="button" class="resume-btn" @onclick="Resume">
            <span class="resume-label">ادامه از آخرین مراجعه</span>
            <span class="resume-meta">@Player.DisplayTitle</span>
        </button>
    }

    @if (loading)
    {
        <SkeletonBlock Variant="cards" Lines="2" />
    }
    else if (tafsirs.Count == 0)
    {
        <a class="tafsir-tile" href="/tafsir/ghatreh-chekani">
            <span class="tile-title">تفسیر قطره چکانی</span>
            <span class="tile-author">قرائتی</span>
        </a>
    }
    else
    {
        <div class="tile-grid">
            @foreach (var t in tafsirs)
            {
                <a class="tafsir-tile" href="@($"/tafsir/{t.Slug}")">
                    <span class="tile-title">@t.Title</span>
                    <span class="tile-author">@t.Author</span>
                </a>
            }
        </div>
    }
</section>

@code {
    private List<TafsirDto> tafsirs = [];
    private bool loading = true;

    protected override void OnInitialized() => Player.Changed += OnPlayerChanged;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!firstRender) return;
        try
        {
            await Player.EnsureLoadedAsync();
            tafsirs = (await Api.GetTafsirsAsync()).ToList();
        }
        catch
        {
            tafsirs = [];
        }
        finally
        {
            loading = false;
            await InvokeAsync(StateHasChanged);
        }
    }

    private void Resume() => Nav.NavigateTo(Player.ResumeHref);

    private void OnPlayerChanged() => InvokeAsync(StateHasChanged);

    public void Dispose() => Player.Changed -= OnPlayerChanged;
}