@page "/movie/{id}"

<PageTitle>Movie Details</PageTitle>

<style>
    .my-grid {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: auto auto;
        gap: 20px;
        max-width: 800px;
        margin-right: auto;
    }
    .favorite {
        background-color: gold;
        color: black;
    }
    .not-favorite {
        background-color: gray;
        color: white;
    }
</style>

<div class="my-grid">
    @if (movie is not null)
    {
        <h1>@movie.Title</h1>
        <div></div>
        <img src="@movie.Poster" alt="@movie.Title Poster" />
        <div class="details">
            <p>@movie.Runtime</p>
            <p>@movie.Plot</p>
            @if(ManageFavorite.IsFavorite(id))
            {
                <button class="btn-secondary favorite" @onclick="ToggleFavoriteMovie">Remove Favorite</button>
            }
            else
            {
                <button class="btn-secondary not-favorite" @onclick="ToggleFavoriteMovie">Add to Favorites</button>
            }
        </div>
    }
    else
    {
        <p>Loading movie details...</p>
    }
</div>


@inject OmdbService OmdbService
@inject ManageFavorite ManageFavorite

@code {
    [Parameter]
    public required string id { get; set; }
    private Movie? movie;

    protected override async Task OnInitializedAsync()
    {
        movie = await OmdbService.FetchMovieDetail(id);
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await ManageFavorite.LoadFavorites();
            StateHasChanged();
        }
    }

    private async Task ToggleFavoriteMovie()
    {
        await ManageFavorite.ToggleFavoriteMovie(id);
    }
}