package templates

import "mal/internal/jikan"
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">
				<div class="loading-indicator">
					<div class="loading-dot"></div>
					<div class="loading-dot"></div>
					<div class="loading-dot"></div>
					<span>Loading schedule</span>
				</div>
			</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) {
	<a href={ templ.URL(fmt.Sprintf("/anime/%d", anime.MalID)) } class="schedule-card">
		<div class="schedule-card-image">
			if anime.ImageURL() != "" {
				<img src={ anime.ImageURL() } alt={ anime.DisplayTitle() } loading="lazy"/>
			} else {
				<div class="no-image">No image</div>
			}
		</div>
		<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>
	</a>
}