@page "/pokemonsleep/rate-pokemon"

@inject IPokemonService PokemonService
@inject IPokemonNatureService PokemonNatureService
@inject IPokemonSubskillService PokemonSubskillService
@inject NavigationManager Navigation

@attribute [StreamRendering]
@rendermode InteractiveServer


<PageTitle>Rate Pokémon</PageTitle>

<style>

    .flip-container {
        perspective: 1000px;
        display: inline-block;
        width: 250px;
        height: 250px;
        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);
    }

    .badge {
        width: 100px;
        height: 30px;
        color: white;
        padding: 4px 8px;
        text-align: center;
        vertical-align: middle;
        border-radius: 30px;
    }
    .statText {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 13px;
    }

    .dozing {
        background-color: #fcdc5e;
    }
    .snoozing {
        background-color: #4ce8ed;
    }

    .slumbering {
        background-color: #4588fb;
    }

    .berries {
        background-color: #24d86b;
    }

    .ingredients {
        background-color: #fdbe4d;
    }

    .skills {
        background-color: #47a0fc;
    }




</style>


<div class="card-header bg-secondary bg-gradient ml-0 py-3">
    <div class="row">
        <div class="col-12 text-center">
            <h1 class="text-primary">Pokémon Sleep</h1>
        </div>
    </div>
</div>


@if (PokemonList == null || NatureList == null || SubskillList == null)
{
    <p>Loading...</p>
}
else
{
        <div class="w-75 mt-3 m-auto " style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">

            <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">Pokémon Rater</h2>
                    </div>
                </div>
            </div>

            <!-- Section 1: Pokemon Selection -->
        <div class="card-body p-4 col-12" >
                <div class="row pb-3">
                    <div class="col-3">
                        <label for="pokemonSelect">Select Pokémon</label>
                        <select class="form-control form-control-lg" @bind="SelectedPokemonId">
                            <option value="" disabled selected>Choose your Pokémon...</option>
                            @foreach (var pokemon in PokemonList)
                            {
                            if(pokemon.IsVariation)
                            {
                                <option value="@pokemon.Id">@pokemon.PokemonId @pokemon.VariationName @pokemon.PokemonName</option>

                            }
                            else
                            {
                                
                                <option value="@pokemon.Id">@pokemon.PokemonId @pokemon.PokemonName</option>
                            }
                            }
                        </select>
                    </div>
                </div>

            <!-- Section 2: Pokemon Rating -->
                @if (SelectedPokemon != null)
                {
                <div class="border rounded p-3 row" >
                    <div class="d-flex align-top col">

                            <!-- Pokemon Interface -->
                        <div class="m-1 p-1 col-5" >

                                <!-- Image -->
                                @if (SelectedPokemon.IsVariation)
                                {
                                <div class="flip-container" @onclick="() => ToggleImage(SelectedPokemon.Id)">
                                    <div class="flipper @(isShiny[SelectedPokemon.Id] ? "flipped" : "")">
                                        <img class="front" src="/pokemon_images/normal/@(SelectedPokemon.IsVariation ? $"{SelectedPokemon.PokemonId}-{SelectedPokemon.VariationName.ToLower()}{SelectedPokemon.PokemonName.ToLower()}" : SelectedPokemon.PokemonId).png" />

                                        <img class="back" src="/pokemon_images/shiny/@(SelectedPokemon.IsVariation ? $"{SelectedPokemon.PokemonId}-{SelectedPokemon.VariationName.ToLower()}{SelectedPokemon.PokemonName.ToLower()}" : SelectedPokemon.PokemonId).png" />
                                    </div>
                                </div>
                                }
                                else
                                {
                                <div class="flip-container" @onclick="() => ToggleImage(SelectedPokemon.Id)">
                                    <div class="flipper @(isShiny[SelectedPokemon.Id] ? "flipped" : "")">
                                        <img class="front" src="/pokemon_images/normal/@(SelectedPokemon.IsVariation ? $"{SelectedPokemon.PokemonId}-{SelectedPokemon.VariationName.ToLower()}{SelectedPokemon.PokemonName.ToLower()}" : SelectedPokemon.PokemonId).png" />

                                        <img class="back" src="/pokemon_images/shiny/@(SelectedPokemon.IsVariation ? $"{SelectedPokemon.PokemonId}-{SelectedPokemon.VariationName.ToLower()}{SelectedPokemon.PokemonName.ToLower()}" : SelectedPokemon.PokemonId).png" />
                                    </div>
                                </div>
                                }
                                <div class="row">
                                <div class="col-7" >
                                        <!-- Name -->
                                        <div class="row mb-0">
                                            @if (SelectedPokemon.IsVariation)   // If a Variant
                                            {
                                                <h2 class="">@SelectedPokemon.VariationName @SelectedPokemon.PokemonName</h2>
                                            }
                                            else // Otherwise, Base Case
                                            {
                                                <h3 class="">@SelectedPokemon.PokemonName</h3>
                                            }
                                        </div>

                                        <!-- Pokedex Number -->
                                        <div  class="mt-0">
                                            <p class="col-4">Pokédex #<strong>@SelectedPokemon.PokemonId</strong></p>
                                        </div>


                                    </div>

                                    <!-- Pokemon Sleep Stats-->
                                    <div class="col-5 p-1 ">
                                    <div class="row d-flex justify-content-between">
                                            <div class="m-1 col badge @SelectedPokemon.SleepType.ToLower()"><p class="statText">@SelectedPokemon.SleepType</p></div>

                                            <div class="m-1 col badge @SelectedPokemon.Speciality.ToLower()"><p class="statText">@SelectedPokemon.Speciality</p></div>

                                        </div>

                                    </div>
                                </div>

                            </div>



                            <!-- Nature / Subskill Selection Dropdowns-->
                        <div class="m-1 p-1 col " >
                                <h4 class="mb-3">Select Nature & Subskills</h4>

                                <!-- Nature -->
                                <div class="row">
                                    <div class="col-12">
                                        <label>Select Nature</label>
                                        <select class="form-control form-control-lg mb-2" @bind="SelectedNatureId">
                                            <option value="" disabled>Choose Nature...</option>
                                            @foreach (var nature in NatureList)
                                            {
                                                <option value="@nature.Id">@nature.Nature</option>
                                            }
                                        </select>
                                    </div>
                                </div>

                                <!-- Subskills -->
                                <div class="row">
                                    <div class="col-4">
                                        <label for="subskillSelect1">Select Level 10 Subskill</label>
                                        <select id="subskillSelect1" class="form-control form-control-lg mb-2" @bind="subskillSelect1">
                                            <option value="" disabled selected>Choose Subskill...</option>
                                            @foreach (var subskill in SubskillList)
                                            {
                                                <option value="@subskill.Id">@subskill.SubSkill</option>
                                            }
                                        </select>
                                    </div>
                                    <div class="col-4">
                                        <label for="subskillSelect2">Select Level 25 Subskill</label>
                                        <select id="subskillSelect2" class="form-control form-control-lg mb-2" @bind="subskillSelect2">
                                            <option value="" disabled selected>Choose Subskill...</option>
                                            @foreach (var subskill in SubskillList)
                                            {
                                                <option value="@subskill.Id">@subskill.SubSkill</option>
                                            }
                                        </select>
                                    </div>
                                    <div class="col-4">
                                        <label for="subskillSelect3">Select Level 50 Subskill</label>
                                        <select id="subskillSelect3" class="form-control form-control-lg mb-2" @bind="subskillSelect3">
                                            <option value="" disabled selected>Choose Subskill...</option>
                                            @foreach (var subskill in SubskillList)
                                            {
                                                <option value="@subskill.Id">@subskill.SubSkill</option>
                                            }
                                        </select>
                                    </div>
                                </div>

                            </div>

                        </div>

                      

                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <button class="btn btn-primary" @onclick="CalculateScore">Calculate Final Score</button>
                            <h4>Final Score: <span>@FinalScore</span></h4>
                        </div>
                    </div>
                }
            </div>
        </div>
}




@code {

    private List<Pokemon> PokemonList;
    private List<PokemonNature> NatureList;
    private List<PokemonSubskill> SubskillList;

    private Dictionary<int, bool> isShiny = new Dictionary<int, bool>();


    private int _selectedPokemonId;
    private int SelectedPokemonId
    {
        get => _selectedPokemonId;
        set
        {
            _selectedPokemonId = value;
            OnPokemonSelected();
        }
    }

    private int SelectedNatureId;
    private int subskillSelect1;
    private int subskillSelect2;
    private int subskillSelect3;

    private int[] SelectedSubskills = new int[3];

    private Pokemon SelectedPokemon;

    private int FinalScore;

    private string PokemonImageUrl => SelectedPokemon != null
        ? $"https://www.serebii.net/pokemonsleep/pokemon/{SelectedPokemon.Id}.png"
        : string.Empty;

    protected override async Task OnInitializedAsync()
    {
        PokemonList = await PokemonService.GetAllPokemonAsync();
        NatureList = await PokemonNatureService.GetAllPokemonNaturesAsync();
        SubskillList = await PokemonSubskillService.GetAllPokemonSubskillsAsync();

        if (PokemonList is not null)
        {
            
            PokemonList.Sort((x, y) => x.PokemonId.CompareTo(y.PokemonId));

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

        }

    }

    private async void OnPokemonSelected()
    {
        if (SelectedPokemonId > 0)
        {
            SelectedPokemon = await PokemonService.GetPokemonByIdAsync(SelectedPokemonId);
            StateHasChanged(); // Force UI to refresh
        }
    }

    private void ToggleImage(int Id)
    {
        if (isShiny.ContainsKey(Id))
        {
            isShiny[Id] = !isShiny[Id];
        }
    }

    private void CalculateScore()
    {
        if (SelectedPokemon == null || SelectedNatureId == 0 || subskillSelect1 == 0 || subskillSelect2 == 0 || subskillSelect3 == 0 )
        {
            return;
        }

        var nature = NatureList.FirstOrDefault(n => n.Id == SelectedNatureId);
        var subskill1 = SubskillList.FirstOrDefault(s => s.Id == subskillSelect1);
        var subskill2 = SubskillList.FirstOrDefault(s => s.Id == subskillSelect2);
        var subskill3 = SubskillList.FirstOrDefault(s => s.Id == subskillSelect3);

        if (nature == null || subskill1 == null || subskill2 == null || subskill3 == null)
        {
            return;
        }

        FinalScore = SelectedPokemon.Speciality switch
        {
            "Berries" => nature.BerryRating + subskill1.BerryRank + subskill2.BerryRank + subskill3.BerryRank,
            "Ingredients" => nature.IngredientRating + subskill1.IngredientRank + subskill2.IngredientRank + subskill3.IngredientRank,
            "Skills" => nature.SkillRating + subskill1.SkillRank + subskill2.SkillRank + subskill3.SkillRank,
            _ => 0
        };
    }
}