package templates

import "mal/internal/jikan"
import "mal/internal/shared/ui"
import "fmt"
import "strings"

templ Schedule() {
	@Layout("mal - schedule") {
		<div class="schedule-page">
			<h1>Weekly schedule</h1>
			<p class="schedule-subtitle">Airing times in JST</p>
			
			<div class="schedule-tabs">
				<button class="schedule-tab active" data-day="Monday" onclick="loadDay('monday', this)">Mon</button>
				<button class="schedule-tab" data-day="Tuesday" onclick="loadDay('tuesday', this)">Tue</button>
				<button class="schedule-tab" data-day="Wednesday" onclick="loadDay('wednesday', this)">Wed</button>
				<button class="schedule-tab" data-day="Thursday" onclick="loadDay('thursday', this)">Thu</button>
				<button class="schedule-tab" data-day="Friday" onclick="loadDay('friday', this)">Fri</button>
				<button class="schedule-tab" data-day="Saturday" onclick="loadDay('saturday', this)">Sat</button>
				<button class="schedule-tab" data-day="Sunday" onclick="loadDay('sunday', this)">Sun</button>
			</div>

			<div id="schedule-content" hx-get="/api/schedule?day=monday" hx-trigger="load">
				@ui.LoadingIndicator("Loading schedule")
			</div>
		</div>

		<script>
			function loadDay(day, btn) {
				document.querySelectorAll('.schedule-tab').forEach(t => t.classList.remove('active'));
				btn.classList.add('active');
				htmx.ajax('GET', '/api/schedule?day=' + day, '#schedule-content');
			}
		</script>
	}
}

templ ScheduleDay(day string, animes []jikan.Anime) {
	<div class="schedule-day">
		<h2>{ strings.Title(day) }</h2>
		if len(animes) == 0 {
			<p class="no-anime">No anime scheduled.</p>
		} else {
			<div class="schedule-grid">
				for _, anime := range animes {
					@ScheduleAnimeCard(anime)
				}
			</div>
		}
	</div>
}

templ ScheduleAnimeCard(anime jikan.Anime) {
	@ui.AnimeCard(ui.AnimeCardProps{
		ID:       anime.MalID,
		Title:    anime.DisplayTitle(),
		ImageURL: anime.ImageURL(),
		Class:    "schedule-card",
		ImgClass: "schedule-card-image",
	}) {
		<div class="schedule-card-info">
			<div class="schedule-card-title">{ anime.DisplayTitle() }</div>
			<div class="schedule-card-meta">
				if anime.Broadcast.Time != "" {
					<span class="schedule-time">{ anime.Broadcast.Time }</span>
				}
				if anime.Type != "" {
					<span class="schedule-type">{ anime.Type }</span>
				}
				if anime.Episodes > 0 {
					<span class="schedule-eps">{ fmt.Sprintf("%d ep", anime.Episodes) }</span>
				}
			</div>
			if anime.Score > 0 {
				<div class="schedule-card-score">★ { fmt.Sprintf("%.1f", anime.Score) }</div>
			}
		</div>
	}
}