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" data-tab-group="schedule">
				<button class="schedule-tab active" type="button" data-day="monday" data-schedule-tab>Mon</button>
				<button class="schedule-tab" type="button" data-day="tuesday" data-schedule-tab>Tue</button>
				<button class="schedule-tab" type="button" data-day="wednesday" data-schedule-tab>Wed</button>
				<button class="schedule-tab" type="button" data-day="thursday" data-schedule-tab>Thu</button>
				<button class="schedule-tab" type="button" data-day="friday" data-schedule-tab>Fri</button>
				<button class="schedule-tab" type="button" data-day="saturday" data-schedule-tab>Sat</button>
				<button class="schedule-tab" type="button" data-day="sunday" data-schedule-tab>Sun</button>
			</div>

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

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>
	}
}