@page "/pokemonsleep"

@inject IPokemonService PokemonService
@inject IJSRuntime JS

@attribute [StreamRendering]
@rendermode InteractiveServer

<PageTitle>Pokémon Sleep</PageTitle>

<style>

    .tableFixHead {
        overflow: auto;
        height: 600px;
    }

    .tableFixHead thead th {
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .flip-container {
        perspective: 1000px;
        display: inline-block;
        width: 90px;
        height: 90px;
        cursor: pointer;
    }

    .flipper {
        transition: transform 0.6s;
        transform-style: preserve-3d;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .flipped {
        transform: rotateY(180deg);
    }

    .front, .back {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        backface-visibility: hidden;
    }

    .back {
        transform: rotateY(180deg);
    }


</style>

<!-- Heading + Button -->
<div class="card-header bg-secondary bg-gradient ml-0 py-3">
    <div class="row">
        <div class="col-4"></div>
        <div class="col-4 text-center">
            <h1 class="text-primary">Pokémon Sleep</h1>
        </div>
        <div class="col-4 text-end">
            <NavLink class="btn btn-info" style="border-radius: 15px 50px;" href="/pokemonsleep/add-new-pokemon">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z" />
                </svg> Add New Pokemon
            </NavLink>
        </div>
    </div>
</div>


<!-- Main Body -->
@if (pokemons == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <!-- Pokemon Table -->
    <div class="card shadow border-0 mt-4" style="margin: auto; width: 900px; max-width: 60%; ">

        <!-- Table Header -->
        <div class="card-header bg-secondary bg-gradient ml-0 py-3">
            <div class="row">
                <div class="col-12 text-center">
                    <h2 class="text-info">Available Pokémon</h2>
                </div>
            </div>
        </div>

        <!-- Table -->
        <div class="tableFixHead" >
            <table class="table table-striped" >

                <!-- Table Head -->
                <thead >
                    <tr>
                        <th class="text-bg-info" scope="col"></th>
                        <th class="text-bg-info" scope="col">#</th>
                        <th class="text-bg-info" scope="col">Pokemon</th>
                        <th class="text-bg-info" scope="col">Sleep Type</th>
                        <th class="text-bg-info" scope="col" style="padding-right: 30px;">Speciality</th>
                        <th class="text-bg-info" scope="col"></th>
                    </tr>
                </thead>

                <!-- Table Body -->
                <tbody >
                    @foreach (var pokemon in pokemons)
                    {
                        <tr>

                            <!-- Section 1: Pokemon Image -->
                            @if (pokemon.IsVariation)
                            {
                                string BaseURL = $"/pokemon_images/normal/{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}.png";
                                string ShinyURL = $"/pokemon_images/shiny/{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}.png";
                                <td style="text-align: center;">
                                    <div class="flip-container" @onclick="() => ToggleImage(pokemon.Id)">
                                        <div class="flipper @(isShiny[pokemon.Id] ? "flipped" : "")">
                                            <img class="front" src="/pokemon_images/normal/@(pokemon.IsVariation ? $"{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}" : pokemon.PokemonId).png" />

                                            <img class="back" src="/pokemon_images/shiny/@(pokemon.IsVariation ? $"{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}" : pokemon.PokemonId).png" />
                                        </div>
                                    </div>
                                </td>
                            }
                            else // Base Case
                            {
                                string BaseURL = $"/pokemon_images/normal/{pokemon.PokemonId}.png"; ;
                                string ShinyURL = $"/pokemon_images/shiny/{pokemon.PokemonId}.png";
                                <td style="text-align: center;">
                                    <div class="flip-container" @onclick="() => ToggleImage(pokemon.Id)">
                                        <div class="flipper @(isShiny[pokemon.Id] ? "flipped" : "")">
                                            <img class="front" src="/pokemon_images/normal/@(pokemon.IsVariation ? $"{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}" : pokemon.PokemonId).png" />

                                            <img class="back" src="/pokemon_images/shiny/@(pokemon.IsVariation ? $"{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}" : pokemon.PokemonId).png" />
                                        </div>
                                    </div>
                                </td>
                            }

                            <!-- Section 2: Pokemon # -->
                            <th scope="row">@pokemon.PokemonId</th>

                            <!-- Section 3: Pokemon Name -->
                            @if (pokemon.IsVariation)   // If a Variant
                            {
                                @if (pokemon.VariationName == "Alolan")
                                {
                                    <td style="vertical-align: auto;"> Alolan @pokemon.PokemonName</td>
                                }
                                @if (pokemon.VariationName == "Paldean")
                                {
                                    <td style="vertical-align: auto;"> Paldean @pokemon.PokemonName</td>
                                }
                            }
                            else // Otherwise, Base Case
                            {
                                <td style="vertical-align: auto;"> @pokemon.PokemonName</td>
                            }

                            <!-- Section 4: Sleep Type -->
                            <td style="vertical-align: auto;">@pokemon.SleepType</td>

                            <!-- Section 5: Speciality -->
                            <td style="padding-right: 30px; vertical-align: auto;">@pokemon.Speciality</td>

                            <!-- Section 6: Delete Button  -->
                            <td>
                                <button class="btn btn-danger"  @onclick="() => ConfirmDelete(pokemon.Id)">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                         class="bi bi-trash" viewBox="0 0 16 16">
                                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z" />
                                        <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z" />
                                    </svg>
                                </button>
                            </td>

                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>

}

@code {
    private List<Pokemon> pokemons = new List<Pokemon>();
    private Dictionary<int, bool> isShiny = new Dictionary<int, bool>();


    protected override async Task OnInitializedAsync()
    {

        var result = await PokemonService.GetAllPokemonAsync();
        if (result is not null)
        {
            pokemons = result;
            pokemons.Sort((x,y) => x.PokemonId.CompareTo(y.PokemonId));

            // Initialize dictionary with false (show base image first)
            foreach (var pokemon in pokemons)
            {
                isShiny[pokemon.Id] = false;
            }

        }
    }

    private void ToggleImage(int Id)
    {
        if (isShiny.ContainsKey(Id))
        {
            isShiny[Id] = !isShiny[Id];
        }
    }
    private async Task ConfirmDelete(int Id)
    {
        bool confirm = await JS.InvokeAsync<bool>("confirm", "Are you sure you want to delete this Pokémon?");
        if (confirm)
        {
            await DeletePokemon(Id);
        }
    }

    private async Task DeletePokemon(int Id)
    {
        await PokemonService.DeletePokemonAsync(Id);
        pokemons.RemoveAll(p => p.Id == Id);  // Remove from the list locally
        StateHasChanged(); // Refresh the UI
    }


}