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

@attribute [StreamRendering]
@rendermode InteractiveServer


<!-- Table A: Desktop View-->
<div class="container d-none d-lg-block d-md-none mt-4">
    <!-- Main UI -->
    <div class="border-0 mx-auto col-8 ">
        <!-- UI Header -->
        <div class="row bg-secondary 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 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-light">
                        <p class="statText text-primary fw-medium shadow mb-0">@(pokemons.Count()) Pokémon</p>
                    </div>
                    <PokemonDownloadButton _Pokemon="pokemons" />
                </div>

            </div>
        </div>

        <!-- Table -->
        <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>
                    <tr>
                        <th class="text-white text-bg-info col-2" 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-1 text-center" scope="col">Sleep Type</th>
                        <th class="text-white text-bg-info col-1 text-center" scope="col">Speciality</th>
                        @if (adminToggle)
                        {
                            <th class="text-white text-bg-info col-2 text-center" scope="col">Admin</th>

                        }
                    </tr>
                </thead>
                <!-- If/Else Pokemon Loaded-->
                @if(pokemons == null)
                {
                    <tbody>
                        <Loading />
                    </tbody>
                }
                else
                {
                    <!-- Table Body -->
                    <tbody>
                        @if (FilteredPokemon != null && FilteredPokemon.Any())
                        {
                            @foreach (var pokemon in FilteredPokemon)
                            {
                                <tr>
                                    <!-- Section 1: Pokemon Image -->
                                    <td class="pokeimage">
                                            <PokemonImage baseUrl="@pokemon.PokemonImageUrl" shinyUrl="@pokemon.PokemonShinyImageUrl" />
                                    </td>

                                    <!-- Section 2: Pokemon # -->
                                    <th 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>
                                        <div class="d-flex justify-content-center">
                                            <img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:36px; height:36px;box-shadow: 0 1px 2px 1px rgba(0,0,0,0.35);border-radius: 20px;" />
                                        </div>
                                    </td>

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

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

                                        </div>
                                    </td>

                                    <!-- Section 7: Admin Controls -->
                                    @if (adminToggle)
                                    {
                                        <td>
                                            <div class="d-flex justify-content-center gap-1">
                                                <PokemonEditButton PokemonId="@pokemon.PokemonId" />
                                                <button class="btn btn-danger rounded rounded-5 text-white " @onclick="() => ConfirmDelete(pokemon.Id)">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3-fill" viewBox="0 0 16 16">
                                                        <path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06m6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528M8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5" />
                                                    </svg>
                                                </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>


<div class="container d-none d-lg-none d-md-block mt-4">
    <!-- Main UI -->
    <div class="border-0 mx-auto col-8 ">
        <!-- UI Header -->
        <div class="row bg-secondary py-3 border-0 rounded-top">
            <div class="d-flex flex-row align-items-center justify-content-between w-100 gap-3 ms-0 me-0">
                <div class="col">
                    <input class="form-control rounded rounded-5 fs-6 fw-lighter"
                           placeholder="Search Pokémon..."
                           @bind="SearchTerm"
                           @oninput="HandleSearch" />

                </div>
                <!-- Left: Search -->

                <!-- Center: Title -->
                <div class="col">
                    <h2 class="text-white text-center pt-2 fs-6 fw-light">
                        Available Pokémon
                    </h2>
                </div>


                <!-- Right: Count + Download -->
                <div class="col">
                    <div class="d-flex align-items-center gap-1">
                        <div class="badge bg-light">
                            <p class="statText text-primary fw-medium shadow mb-0">@(pokemons.Count()) Pokémon</p>
                        </div>
                        <PokemonDownloadButton _Pokemon="pokemons" />
                    </div>
                </div>


            </div>
        </div>

        <!-- Table -->
        <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>
                    <tr>
                        <th class="text-white text-bg-info col-2" 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-1 text-center" scope="col">Sleep Type</th>
                        <th class="text-white text-bg-info col-1 text-center" scope="col">Speciality</th>
                        @if (adminToggle)
                        {
                            <th class="text-white text-bg-info col-2 text-center" scope="col">Admin</th>

                        }
                    </tr>
                </thead>
                <!-- If/Else Pokemon Loaded-->
                @if (pokemons == null)
                {
                    <tbody>
                        <Loading />
                    </tbody>
                }
                else
                {
                    <!-- Table Body -->
                    <tbody>
                        @if (FilteredPokemon != null && FilteredPokemon.Any())
                        {
                            @foreach (var pokemon in FilteredPokemon)
                            {
                                <tr>
                                    <!-- Section 1: Pokemon Image -->
                                    <td class="">
                                        <img src="@pokemon.PokemonImageUrl" style="width:100px;" />
                                    </td>

                                    <!-- Section 2: Pokemon # -->
                                    <th 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>
                                        <div class="d-flex justify-content-center">
                                            <img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:36px; height:36px;" />
                                        </div>
                                    </td>

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

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

                                        </div>
                                    </td>

                                    <!-- Section 7: Admin Controls -->
                                    @if (adminToggle)
                                    {
                                        <td>
                                            <div class="d-flex justify-content-center gap-1">
                                                <PokemonEditButton PokemonId="@pokemon.PokemonId" />
                                                <button class="btn btn-danger rounded rounded-5 text-white " @onclick="() => ConfirmDelete(pokemon.Id)">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3-fill" viewBox="0 0 16 16">
                                                        <path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06m6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528M8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5" />
                                                    </svg>
                                                </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" style="border: 1px dashed hotpink;">

                             <!-- Pokemon Image -->
                                 <div class="me-3" style="border: 1px dashed hotpink;">
                                 <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 style="border: 1px dashed hotpink;">
                                 <!-- 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> *@