package templates

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

templ AnimeDetails(anime jikan.Anime, currentStatus string) {
	@Layout("mal - " + anime.DisplayTitle()) {
		<div class="anime-page">
			<div class="anime-main">
				<div class="anime-hero">
					<div class="anime-poster">
						if anime.ImageURL() != "" {
							<img src={ anime.ImageURL() } alt={ anime.DisplayTitle() }/>
						} else {
							<div class="no-image">No image</div>
						}
					</div>
					<div class="anime-info">
						<h1>{ anime.DisplayTitle() }</h1>
						if anime.TitleJapanese != "" {
							<p class="anime-alt-title">{ anime.TitleJapanese }</p>
						}
						<div class="anime-quick-info">
							if anime.ShortRating() != "" {
								<span class="info-tag">{ anime.ShortRating() }</span>
							}
							if anime.Type != "" {
								<span class="info-tag">{ anime.Type }</span>
							}
							if anime.Episodes > 0 {
								<span class="info-tag">{ fmt.Sprintf("%d ep", anime.Episodes) }</span>
							}
							if anime.ShortDuration() != "" {
								<span class="info-tag">{ anime.ShortDuration() }</span>
							}
						</div>
						<div class="anime-actions">
							@WatchlistDropdown(anime.MalID, anime.Title, anime.TitleEnglish, anime.TitleJapanese, anime.ImageURL(), currentStatus, anime.Airing)
						</div>
					</div>
				</div>
				<section class="anime-synopsis">
					<h3>Synopsis</h3>
					if anime.Synopsis != "" {
						<p>{ anime.Synopsis }</p>
					} else {
						<p class="no-synopsis">No synopsis available.</p>
					}
				</section>
				<section class="anime-relations">
					<h3>Related</h3>
					<div hx-get={ string(templ.URL(fmt.Sprintf("/api/anime/%d/relations", anime.MalID))) } hx-trigger="load">
						<div class="loading-indicator">
							<div class="loading-dot"></div>
							<div class="loading-dot"></div>
							<div class="loading-dot"></div>
							<span>Loading relations</span>
						</div>
					</div>
				</section>
				<section class="anime-recommendations">
					<h3>Recommendations</h3>
					<div hx-get={ string(templ.URL(fmt.Sprintf("/api/anime/%d/recommendations", anime.MalID))) } hx-trigger="load">
						<div class="loading-indicator">
							<div class="loading-dot"></div>
							<div class="loading-dot"></div>
							<div class="loading-dot"></div>
							<span>Loading recommendations</span>
						</div>
					</div>
				</section>
			</div>
			<aside class="anime-sidebar">
				if anime.TitleJapanese != "" {
					<div class="sidebar-row">
						<span class="sidebar-label">Japanese</span>
						<span class="sidebar-value">{ anime.TitleJapanese }</span>
					</div>
				}
				if len(anime.TitleSynonyms) > 0 {
					<div class="sidebar-row">
						<span class="sidebar-label">Synonyms</span>
						<span class="sidebar-value">{ strings.Join(anime.TitleSynonyms, ", ") }</span>
					</div>
				}
				if anime.Aired.String != "" {
					<div class="sidebar-row">
						<span class="sidebar-label">Aired</span>
						<span class="sidebar-value">{ anime.Aired.String }</span>
					</div>
				}
				if anime.Premiered() != "" {
					<div class="sidebar-row">
						<span class="sidebar-label">Premiered</span>
						<span class="sidebar-value">{ anime.Premiered() }</span>
					</div>
				}
				if anime.Duration != "" {
					<div class="sidebar-row">
						<span class="sidebar-label">Duration</span>
						<span class="sidebar-value">{ anime.Duration }</span>
					</div>
				}
				if anime.Status != "" {
					<div class="sidebar-row">
						<span class="sidebar-label">Status</span>
						<span class="sidebar-value">{ anime.Status }</span>
					</div>
				}
				if anime.Score > 0 {
					<div class="sidebar-row">
						<span class="sidebar-label">MAL Score</span>
						<span class="sidebar-value">{ fmt.Sprintf("%.2f", anime.Score) }</span>
					</div>
				}
				if len(anime.Genres) > 0 {
					<div class="sidebar-row sidebar-row-wrap">
						<span class="sidebar-label">Genres</span>
						<div class="sidebar-tags">
							for _, g := range anime.Genres {
								<span class="sidebar-tag">{ g.Name }</span>
							}
						</div>
					</div>
				}
				if len(anime.Studios) > 0 {
					<div class="sidebar-row">
						<span class="sidebar-label">Studios</span>
						<span class="sidebar-value">{ joinNames(anime.Studios) }</span>
					</div>
				}
				if len(anime.Producers) > 0 {
					<div class="sidebar-row">
						<span class="sidebar-label">Producers</span>
						<span class="sidebar-value">{ joinNames(anime.Producers) }</span>
					</div>
				}
				if anime.Source != "" {
					<div class="sidebar-row">
						<span class="sidebar-label">Source</span>
						<span class="sidebar-value">{ anime.Source }</span>
					</div>
				}
				if len(anime.Demographics) > 0 {
					<div class="sidebar-row sidebar-row-wrap">
						<span class="sidebar-label">Demographics</span>
						<div class="sidebar-tags">
							for _, d := range anime.Demographics {
								<span class="sidebar-tag">{ d.Name }</span>
							}
						</div>
					</div>
				}
				if len(anime.Themes) > 0 {
					<div class="sidebar-row sidebar-row-wrap">
						<span class="sidebar-label">Themes</span>
						<div class="sidebar-tags">
							for _, t := range anime.Themes {
								<span class="sidebar-tag">{ t.Name }</span>
							}
						</div>
					</div>
				}
				if anime.Broadcast.String != "" {
					<div class="sidebar-row">
						<span class="sidebar-label">Broadcast</span>
						<span class="sidebar-value">{ anime.Broadcast.String }</span>
					</div>
				}
				if len(anime.Streaming) > 0 {
					<div class="sidebar-row">
						<span class="sidebar-label">Streaming</span>
						<div class="sidebar-value">
							for _, s := range anime.Streaming {
								<div><a href={ templ.URL(s.URL) } target="_blank">{ s.Name }</a></div>
							}
						</div>
					</div>
				}
			</aside>
		</div>
		<script>
			function toggleDropdown() {
				document.getElementById('watchlist-dropdown').classList.toggle('open');
			}
			document.addEventListener('click', function(e) {
				const dropdown = document.getElementById('watchlist-dropdown');
				if (dropdown && !dropdown.contains(e.target)) {
					dropdown.classList.remove('open');
				}
			});
		</script>
	}
}

func joinNames(entities []jikan.NamedEntity) string {
	names := make([]string, len(entities))
	for i, e := range entities {
		names[i] = e.Name
	}
	return strings.Join(names, ", ")
}

templ WatchlistDropdown(animeID int, animeTitle string, animeTitleEnglish string, animeTitleJapanese string, animeImage string, currentStatus string, airing bool) {
	<div class="dropdown" id="watchlist-dropdown">
		<button class="dropdown-trigger" onclick="toggleDropdown()">
			if currentStatus != "" {
				{ formatStatus(currentStatus) }
			} else {
				add to watchlist
			}
			<span class="dropdown-arrow">▾</span>
		</button>
		<div class="dropdown-menu">
			@dropdownStatusOption(animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, "watching", currentStatus, airing)
			@dropdownStatusOption(animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, "completed", currentStatus, airing)
			@dropdownStatusOption(animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, "on_hold", currentStatus, airing)
			@dropdownStatusOption(animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, "dropped", currentStatus, airing)
			@dropdownStatusOption(animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, "plan_to_watch", currentStatus, airing)
			if currentStatus != "" {
				<div class="dropdown-divider"></div>
				<button
					class="dropdown-item remove"
					hx-delete={ string(templ.URL(fmt.Sprintf("/api/watchlist/%d", animeID))) }
					hx-target="#watchlist-dropdown"
					hx-swap="outerHTML"
				>Remove from list</button>
			}
		</div>
	</div>
}

templ dropdownStatusOption(animeID int, animeTitle string, animeTitleEnglish string, animeTitleJapanese string, animeImage string, status string, currentStatus string, airing bool) {
	<button
		class={ "dropdown-item", templ.KV("active", status == currentStatus) }
		hx-post="/api/watchlist"
		hx-vals={ fmt.Sprintf(`{"anime_id": "%d", "anime_title": "%s", "anime_title_english": "%s", "anime_title_japanese": "%s", "anime_image": "%s", "status": "%s", "airing": "%v"}`, animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, status, airing) }
		hx-target="#watchlist-dropdown"
		hx-swap="outerHTML"
	>
		{ formatStatus(status) }
		if status == currentStatus {
			<span class="check">✓</span>
		}
	</button>
}

templ statusOption(anime jikan.Anime, status string, currentStatus string) {
	<button
		class={ "dropdown-item", templ.KV("active", status == currentStatus) }
		hx-post="/api/watchlist"
		hx-vals={ fmt.Sprintf(`{"anime_id": "%d", "anime_title": "%s", "anime_title_english": "%s", "anime_title_japanese": "%s", "anime_image": "%s", "status": "%s"}`, anime.MalID, anime.Title, anime.TitleEnglish, anime.TitleJapanese, anime.ImageURL(), status) }
		hx-target="#watchlist-dropdown"
		hx-swap="outerHTML"
	>
		{ formatStatus(status) }
		if status == currentStatus {
			<span class="check">✓</span>
		}
	</button>
}

func formatStatus(status string) string {
	switch status {
	case "watching":
		return "Watching"
	case "completed":
		return "Completed"
	case "on_hold":
		return "On hold"
	case "dropped":
		return "Dropped"
	case "plan_to_watch":
		return "Plan to watch"
	default:
		return status
	}
}

templ AnimeRelationsList(relations []jikan.RelationEntry) {
	if len(relations) > 1 {
		<div class="relations-grid">
			for _, rel := range relations {
				if rel.IsCurrent {
					<div class="relation-card current">
						if rel.Anime.ImageURL() != "" {
							<img src={ rel.Anime.ImageURL() } alt={ rel.Anime.DisplayTitle() } class="relation-thumb"/>
						} else {
							<div class="no-image">No image</div>
						}
						<div class="relation-title">{ rel.Anime.DisplayTitle() }</div>
					</div>
				} else {
					<a href={ templ.URL(fmt.Sprintf("/anime/%d", rel.Anime.MalID)) } class="relation-card">
						if rel.Anime.ImageURL() != "" {
							<img src={ rel.Anime.ImageURL() } alt={ rel.Anime.DisplayTitle() } class="relation-thumb"/>
						} else {
							<div class="no-image">No image</div>
						}
						<div class="relation-title">{ rel.Anime.DisplayTitle() }</div>
					</a>
				}
			}
		</div>
	} else {
		<p style="color: var(--text-muted); font-size: var(--text-sm);">No related anime found.</p>
	}
}

templ AnimeRecommendations(recs []jikan.Anime) {
	if len(recs) > 0 {
		<div class="relations-grid">
			for _, anime := range recs {
				<a href={ templ.URL(fmt.Sprintf("/anime/%d", anime.MalID)) } class="relation-card">
					if anime.ImageURL() != "" {
						<img src={ anime.ImageURL() } alt={ anime.DisplayTitle() } class="relation-thumb"/>
					} else {
						<div class="no-image">No image</div>
					}
					<div class="relation-title">{ anime.DisplayTitle() }</div>
				</a>
			}
		</div>
	} else {
		<p style="color: var(--text-muted); font-size: var(--text-sm);">No recommendations available.</p>
	}
}