package component

import (
	"fmt"
	common "forge.cadoles.com/wpetit/kouiz/internal/http/handler/webui/common/component"
	"forge.cadoles.com/wpetit/kouiz/internal/store"
	"strconv"
)

type LeaderboardPageVModel struct {
	Player     *store.Player
	Players    []*store.Player
	PlayerRank int
}

templ LeaderboardPage(vmodel LeaderboardPageVModel) {
	@common.AppPage(common.WithPageOptions(
		common.WithTitle("Tableau des scores"),
	)) {
		<h3 class="title">Podium</h3>
		<div class="podium">
			<div class="podium-position podium-second">
				if len(vmodel.Players) > 1 {
					<div class="podium-player">
						<span class="has-text-weight-bold is-uppercase">{ vmodel.Players[1].Name }</span>
						<br/>
						<span class="has-text-grey is-size-7">{ strconv.FormatInt(int64(vmodel.Players[1].Score), 10) }pts</span>
					</div>
				}
				<div class="podium-step">2ème</div>
			</div>
			<div class="podium-position podium-first">
				if len(vmodel.Players) > 0 {
					<div class="podium-player">
						<span class="icon is-size-4 has-text-warning"><i class="fas fa-trophy"></i></span>
						<br/>
						<span class="has-text-weight-bold is-uppercase">{ vmodel.Players[0].Name }</span>
						<br/>
						<span class="has-text-grey is-size-7">{ strconv.FormatInt(int64(vmodel.Players[0].Score), 10) }pts</span>
					</div>
				}
				<div class="podium-step">1er</div>
			</div>
			<div class="podium-position podium-third">
				if len(vmodel.Players) > 2 {
					<div class="podium-player">
						<span class="has-text-weight-bold is-uppercase">{ vmodel.Players[2].Name }</span>
						<br/>
						<span class="has-text-grey is-size-7">{ strconv.FormatInt(int64(vmodel.Players[2].Score), 10) }pts</span>
					</div>
				}
				<div class="podium-step">3ème</div>
			</div>
		</div>
		<h3 class="title mt-5">Tableau des scores</h3>
		<div class="table-container">
			<table class="table is-fullwidth">
				<thead>
					<tr>
						<th>Position</th>
						<th>Pseudonyme</th>
						<th>Score</th>
					</tr>
				</thead>
				<tbody>
					for i, p := range vmodel.Players {
						<tr
							if p.ID == vmodel.Player.ID {
								class="has-text-weight-bold is-info"
							}
							id={ fmt.Sprintf("player-%d", p.ID) }
						>
							<td>{ strconv.FormatInt(int64(i+1), 10) }</td>
							<td>{ p.Name }</td>
							<td>{ strconv.FormatInt(int64(p.Score), 10) }</td>
						</tr>
					}
				</tbody>
			</table>
		</div>
		<style>
      .podium {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: center;
        gap: 10px;
      }

      .podium .podium-step {
        width: 100px;
        justify-content: center;
        align-items: center;
        display: flex;
        font-weight: bold;
        color: white;
        text-shadow: 1px 1px #333;
      }

      .podium .podium-position {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .podium .podium-player {
        text-shadow: none;
        color: #333;
        text-align: center;
      }

      .podium .podium-first .podium-step {
        height: 70px;
        background-color: hsl(141, 71%, 48%)	;
      }

      .podium .podium-second .podium-step {
        height: 50px;
        background-color: hsl(204, 86%, 53%);
      }

      .podium .podium-third .podium-step {
        height: 30px;
        background-color: #66d1ff;
      }
    </style>
	}
}