@inject IPokemonService PokemonService
@inject IJSRuntime JS
@inject NavigationManager Navigation

@attribute [StreamRendering]
@rendermode InteractiveServer

<div class="d-flex justify-content-end">

    
</div>
<!-- Table A: Desktop View-->
<div class="container d-none d-md-block" style="height: 70vh;">
    <!-- Main UI -->
    <div class="border-0 mt-4 mx-auto col-12 col-md-10 col-lg-8 pokemontable">
        <!-- Table Header -->
        <div class="row bg-secondary bg-gradient py-3 border-0 rounded-top">
            <div class="d-flex align-items-center justify-content-between w-100 position-relative px-3">

                <!-- Left: Search -->
                <input class="form-control w-25 me-3 rounded rounded-5"
                       placeholder="Search Pokémon..."
                       @bind="SearchTerm"
                       @oninput="HandleSearch" />

                <!-- Center: Title -->
                <h2 class="text-white text-decoration-underline mb-0 position-absolute start-50 translate-middle-x">
                    Available Pokémon
                </h2>

                <!-- Right: Count + Download -->
                <div class="d-flex align-items-center gap-2">
                    <div class="badge bg-info">
                        <p class="statText mb-0">@(pokemons.Count()) Pokémon</p>
                    </div>
                    <PokemonDownloadButton _Pokemon="pokemons" />
                </div>

            </div>
        </div>

        
        <div class="tableFixHead d-flex flex-column justify-content-start bg-secondary table-responsive row ">
            <table class="table table-borderless border-0 table-secondary table-striped align-middle">
                <!-- Table Head -->
                <thead class="">
                    <tr class="">
                        <th class="text-white text-bg-info col-2 d-none d-md-table-cell" scope="col"></th>
                        <th class="text-white text-bg-info col-1" scope="col">#</th>
                        <th class="text-white text-bg-info col-2" scope="col">Pokémon</th>
                        <th class="text-white text-bg-info col-1 text-center" scope="col">Type</th>
                        <th class="text-white text-bg-info col-2 text-center" scope="col">Sleep Type</th>
                        <th class="text-white text-bg-info col-2 text-center" scope="col">Speciality</th>
                        @if (adminToggle)
                        {
                            <th class="text-white text-bg-info col-1 text-center" scope="col">Edit</th>

                        }
                    </tr>
                </thead>
                <!-- If/Else Pokemon Loaded-->
                @if(pokemons == null)
                {
                    <tbody>
                        <Loading />
                    </tbody>
                }
                else
                {
                    <!-- Table Body -->
                    <tbody class="">
                        <tr></tr>
                        @if (FilteredPokemon != null && FilteredPokemon.Any())
                        {
                            
                            @foreach (var pokemon in FilteredPokemon)
                            {
                                <tr class="flex-row">
                                    <!-- Section: Pokemon Image -->
                                    @{
                                        string baseUrl = pokemon.PokemonImageUrl;
                                        string shinyUrl = pokemon.PokemonShinyImageUrl;
                                    }
                                    <td class="text-center d-none d-md-table-cell">
                                        @if (shinyUrl == null)
                                        {
                                            <div class="flip-container">
                                                <div class="flipper">
                                                    <img class="front img-fluid" style="max-width: 100px;" src="@baseUrl" />
                                                </div>
                                            </div>

                                        }
                                        else
                                        {
                                            <div class="flip-container" @onclick="() => ToggleImage(pokemon.Id)">
                                                <div class="flipper @(isShiny[pokemon.Id] ? "flipped" : "")">
                                                    <img class="front img-fluid" style="max-width: 100px;" src="@baseUrl" />
                                                    <img class="back img-fluid" style="max-width: 100px;" src="@shinyUrl" />
                                                </div>
                                            </div>

                                        }
                                    </td>

                                    <!-- Section 2: Pokemon # -->
                                    <th class="" scope="row" style="cursor: default;">@pokemon.PokemonId</th>


                                    <!-- Section 3: Pokemon Name -->

                                        <td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style fw-light col-2">@(pokemon.IsVariation && ToggleVariationName(pokemon.Id, pokemon.PokemonId) ? $"{pokemon.VariationName} {pokemon.PokemonName}" : pokemon.PokemonName)</td>
                              


                                    <!-- Section 4: Pokemon Type -->
                                    <td class="">
                                        <div class="d-flex justify-content-center">
                                            <img src="@GetTypeImageUrl(pokemon.PokemonType)"  style="width:36px; height:36px;" />
                                        </div>
                                    </td>

                                    <!-- Section 5: Sleep Type -->
                                    <td class="" style="">
                                        <div class="d-flex justify-content-center ">
                                            <PokemonBadge BadgeItem="@pokemon.SleepType" />
                                        </div>
                                    </td>

                                    <!-- Section 6: Speciality -->
                                    <td class="" style="">
                                        <div class="d-flex justify-content-center">
                                            <PokemonBadge BadgeItem="@pokemon.Speciality" />

                                        </div>
                                    </td>

                                    @if (adminToggle)
                                    {
                                        <td class="" style="">
                                            <div class="d-flex justify-content-center">
                                                <PokemonEditButton PokemonId="@pokemon.PokemonId" />
                                                @*<button @onclick="() => ConfirmDelete(pokemon.Id)">Delete</button>*@
                                                
                                            </div>
                                        </td>
                                    }


                                </tr>
                            }
                        }
                        else
                        {
                            <tr>
                                <td colspan="100%">
                                    <div class="d-flex justify-content-center align-items-center" style="height: 200px;">
                                        <p class="text-muted">Pokémon could not be found.</p>
                                    </div>
                                </td>
                            </tr>
                        }
                    </tbody>
                }
               

            </table>

        </div>
        <!-- Wrap in Auth -->
        <div class="d-flex justify-content-end mt-1">
            <div class="form-check form-switch">
                <input class="form-check-input rounded rounded-3" type="checkbox" role="switch" id="flexSwitchCheckDefault" @bind="adminToggle">
            </div>
        </div>
        
    </div>
</div>

<!-- Desktop B: Mobile View -->
<div class="container card border-0 d-block d-md-none mx-auto mt-4 shadow-sm">
    <!-- Table Header -->
    <div class="row card-header bg-secondary bg-gradient ml-0 py-3 border-0 bg-info">
        <div class="flex-row justify-content-between">
            <div class="text-center position-relative">
                <h2 class="text-white text-decoration-underline">Pokémon</h2>
                <div class="m-1 badge bg-white text-info position-absolute top-0 end-0 border-0 w-auto"><p class="statText">@(pokemons.Count()) Pokémon</p></div>
            </div>
        </div>
    </div>
    <!-- Table Body -->
    <div class="tableFixHead row">
        <table class="table table-striped border-0">

        
        <tbody>
            @if (pokemons == null)
            {
                <Loading />
            }
            else
            {

                @foreach (var pokemon in pokemons)
                {
                    <tr class="border-0">
                        <div class="d-flex align-items-center">

                            <!-- Pokemon Image -->
                            <div class="me-3">
                                <div class="flip-container-sm" @onclick="() => ToggleImage(pokemon.Id)">
                                    <div class="flipper-sm @(isShiny[pokemon.Id] ? "flipped" : "")">
                                        <img class="front img-fluid" src="@pokemon.PokemonImageUrl" />
                                        @if (pokemon.PokemonShinyImageUrl != null)
                                        {
                                            <img class="back img-fluid" src="@pokemon.PokemonShinyImageUrl" />
                                        }
                                    </div>
                                </div>
                            </div>

                            <div class="">
                                <!-- Number and Name -->
                                <h5>
                                    @pokemon.PokemonId -
                                        <span class="pokemon-name-style fw-light" @onclick="() => ViewPokemon(pokemon.PokemonId)">
                                            @(pokemon.IsVariation && ToggleVariationName(pokemon.Id, pokemon.PokemonId) ? $"{pokemon.VariationName} {pokemon.PokemonName}" : pokemon.PokemonName)
                                    </span>
                                </h5>
                                <!-- Stats -->
                                <div class="d-flex flex-wrap align-items-center gap-2">
                                    <img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:28px;" />
                                        <PokemonBadge BadgeItem="@pokemon.SleepType" />
                                        <PokemonBadge BadgeItem="@pokemon.Speciality" />
                                </div>
                            </div>

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