@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
{
    <!-- Total Component -->
    <div class="w-75 mt-3 m-auto rate-container bg-info ">

        <!-- Header -->
        <div class="card-header bg-secondary ml-0 py-3 w-100 ">
            <div class="row">
                <div class=" text-center">
                    <h2 class="text-info">Pokémon Rater</h2>
                </div>
            </div>
        </div>

        <!-- Body -->
        <div class="p-3 w-100 flex-column ">
            <!-- Section 1: Top - Pokemon Selection -->
            <div class="row flex-row justify-content-end">
                <div class="pokemon-search col">
                    <div class="position-relative pb-3" >
                        <!-- Pokemon Selection -->
                        <input type="text"
                               class="form-control form-control"
                               @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 class="col-2">
                    <button class="btn btn-danger">Clear</button>
                </div>
            </div>

            <!-- Section 2: Bottom - Pokemon -->
            @if (SelectedPokemon != null)
            {
                <div class="row w-100">
                    <!-- Section 2A: Left Side - Pokemon Card View -->
                    <div class="col">
                        <div class="position-relative d-flex justify-content-center">
                            <PokemonCard Pokemon="SelectedPokemon" />
                        </div>
                    </div>

                    <!-- Section 2B: Right Side - Stat Selection + Form Submission -->
                    <div class="col">
                        <h4 class="mb-3">Select Nature & Subskills</h4>

                        <!-- Nature -->
                        <div class="">
                            <div class="">
                                <label>Select Nature</label>
                                <select class="form-control form-control-sm 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>

                        <!-- Subskill 1 -->
                        <div class="">
                            <div class="">
                                <label for="subskillSelect1">Select Level 10 Subskill</label>
                                <select id="subskillSelect1" class="form-control form-control-sm 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>

                        <!-- Subskill 2 -->
                        <div class="">
                            <div class="">
                                <label for="subskillSelect2">Select Level 25 Subskill</label>
                                <select id="subskillSelect2" class="form-control form-control-sm 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>

                        <!-- Subskill 3 -->
                        <div class="">
                            <div class="">
                                <label for="subskillSelect3">Select Level 50 Subskill</label>
                                <select id="subskillSelect3" class="form-control form-control-sm 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>

                        <!-- Subskill 4 Disabled -->
                        <div class="">
                            <div class="">
                                <label for="subskillSelect4">Select Level 75 Subskill</label>
                                <select id="subskillSelect4" disabled class="form-control form-control-sm 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>
                        </div>

                        <!-- Subskill 5 Disabled -->
                        <div class="">
                            <div class="">
                                <label for="subskillSelect5">Select Level 100 Subskill</label>
                                <select id="subskillSelect5" disabled class="form-control form-control-sm 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>

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

                    </div>
                </div>
            }
        </div>
    </div>
}