@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>

<PokemonHeader />

@if (PokemonList == null || NatureList == null || SubskillList == null)
{
    <p>Loading...</p>
}
else
{
    <div class="w-75 mt-3 m-auto rate-container">

        <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>

        <div class="card-body p-4 col-12">
            <!-- Section 1: Pokemon Selection -->
            <div class="row pb-3">
                <div class="col-3">
                    <div class="position-relative">
                        <input type="text"
                               class="form-control form-control-lg"
                               @bind="PokemonSearchTerm"
                               placeholder="Search Pokémon..."
                               @oninput="OnSearchTextChanged" />

                        @if (FilteredPokemonList.Any() && !string.IsNullOrWhiteSpace(PokemonSearchTerm))
                        {
                            <ul class="list-group position-absolute w-100" style="z-index: 1000; max-height: 200px; overflow-y: auto;">
                                @foreach (var pokemon in FilteredPokemonList)
                                {
                                    <li class="list-group-item list-group-item-action" @onclick="() => SelectPokemon(pokemon)">
                                        @if (pokemon.IsVariation)
                                        {
                                            @($"{pokemon.PokemonId} {pokemon.VariationName} {pokemon.PokemonName}")
                                        }
                                        else
                                        {
                                            @($"{pokemon.PokemonId} {pokemon.PokemonName}")
                                        }
                                    </li>
                                }
                            </ul>
                        }
                    </div>
                </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-3 p-1 col-5">
                            <!-- Image and other Pokemon info -->
                            <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">
                                    <div class="row mb-0">
                                        @if (SelectedPokemon.IsVariation)
                                        {
                                            <h2>@SelectedPokemon.VariationName @SelectedPokemon.PokemonName</h2>
                                        }
                                        else
                                        {
                                            <h3>@SelectedPokemon.PokemonName</h3>
                                        }
                                    </div>
                                    <div class="mt-0">
                                        <p class="col-4">Pokédex #<strong>@SelectedPokemon.PokemonId</strong></p>
                                    </div>
                                </div>

                                <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-3 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">
                                <!-- Subskill 1 -->
                                <div class="col-4">
                                    <label for="subskillSelect1">Select Level 10 Subskill</label>
                                    <select id="subskillSelect1" class="form-control form-control 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>
                                <!-- Subskill 2 -->
                                <div class="col-4">
                                    <label for="subskillSelect2">Select Level 25 Subskill</label>
                                    <select id="subskillSelect2" class="form-control form-control 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>
                                <!-- Subskill 3 -->
                                <div class="col-4">
                                    <label for="subskillSelect3">Select Level 50 Subskill</label>
                                    <select id="subskillSelect3" class="form-control form-control 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 class="row">
                                <!-- Subskill 4 -->
                                <div class="col-4">
                                    <label for="subskillSelect4">Select Level 75 Subskill</label>
                                    <select id="subskillSelect4" disabled class="form-control form-control mb-2" @bind="subskillSelect4">
                                        <option value="" disabled selected>Choose Subskill...</option>
                                        @foreach (var subskill in SubskillList)
                                        {
                                            <option value="@subskill.Id">@subskill.SubSkill</option>
                                        }
                                    </select>
                                </div>
                                <!-- Subskill 5 -->
                                <div class="col-4">
                                    <label for="subskillSelect5">Select Level 100 Subskill</label>
                                    <select id="subskillSelect5" disabled class="form-control form-control mb-2" @bind="subskillSelect5">
                                        <option value="" disabled selected>Choose Subskill...</option>
                                        @foreach (var subskill in SubskillList)
                                        {
                                            <option value="@subskill.Id">@subskill.SubSkill</option>
                                        }
                                    </select>
                                </div>
                            </div>

                        </div>

                    </div>

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