package ui

import (
	"fmt"

	"mal/web/components/watchlist"
)

type AnimeCardProps struct {
	ID       int
	Title    string
	ImageURL string
	Href     string
	// Options to customize the card behavior
	Class       string // override default wrapper class
	ImgClass    string // override default image class
	TitleClass  string // override default title class
	HideTitle   bool   // if true, do not render the default title block
	CurrentNode bool   // if true, renders a div instead of an anchor tag (useful for graph nodes)
	Synopsis    string // optional synopsis for hover detail
	PlayHref    string // optional play button href (anchored to poster)
	// Watchlist integration
	TitleEnglish     string
	TitleJapanese    string
	Airing           bool
	WatchlistStatus  string // empty if not in watchlist
	DisableWatchlist bool   // if true, don't render the watchlist button
}

templ AnimeCard(props AnimeCardProps) {
	<div class={ defaultString(props.Class, "group min-w-0") }>
		@animeCardPoster(props)
		if !props.HideTitle {
			if props.CurrentNode {
				<div class={ defaultString(props.TitleClass, "mt-2 line-clamp-2 text-sm leading-snug text-(--text)") }>
					{ props.Title }
				</div>
			} else {
				<a href={ templ.URL(cardHref(props)) } class="block">
					<div class={ defaultString(props.TitleClass, "mt-2 line-clamp-2 text-sm leading-snug text-(--text)") }>
						{ props.Title }
					</div>
				</a>
			}
		}
		{ children... }
	</div>
}

func cardHref(props AnimeCardProps) string {
	if props.Href != "" {
		return props.Href
	}
	return fmt.Sprintf("/anime/%d", props.ID)
}

templ animeCardPoster(props AnimeCardProps) {
	<div class="grid w-full aspect-2/3 overflow-hidden">
		<!-- Base image layer -->
		if !props.CurrentNode {
			<a href={ templ.URL(cardHref(props)) } class="col-start-1 row-start-1 block h-full w-full">
				@animeCardImage(props)
			</a>
		} else {
			<div class="col-start-1 row-start-1 h-full w-full">
				@animeCardImage(props)
			</div>
		}
		<!-- Hover darken overlay -->
		<div class="pointer-events-none col-start-1 row-start-1 bg-black/0 transition-colors duration-200 group-hover:bg-black/40"></div>
		<!-- Synopsis overlay -->
		if props.Synopsis != "" {
			<div class="pointer-events-none col-start-1 row-start-1 flex flex-col justify-between p-3 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
				<div>
					<div class="mb-1 text-[11px] font-semibold text-white/90">{ props.Title }</div>
					<p class="line-clamp-3 text-[11px] leading-relaxed text-white/90">{ props.Synopsis }</p>
				</div>
			</div>
		}
		<!-- Actions layer -->
		if props.PlayHref != "" || !props.CurrentNode && !props.DisableWatchlist {
			<div class="col-start-1 row-start-1 flex items-end justify-start p-3 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
				<div class="flex gap-2">
					if props.PlayHref != "" {
						<a
							href={ templ.URL(props.PlayHref) }
							class="text-white"
							aria-label="Play"
						>
							<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<title>Play</title>
								<path d="M8 5V19L19 12L8 5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
							</svg>
						</a>
					}
					if !props.CurrentNode && !props.DisableWatchlist {
						@watchlist.CardButton(
							props.ID,
							props.Title,
							props.TitleEnglish,
							props.TitleJapanese,
							props.ImageURL,
							props.Airing,
							props.WatchlistStatus != "",
						)
					}
				</div>
			</div>
		}
	</div>
}

templ animeCardImage(props AnimeCardProps) {
	if props.ImageURL != "" {
		<img src={ props.ImageURL } alt={ props.Title } class={ defaultString(props.ImgClass, "block h-full w-full object-cover object-center") } loading="lazy"/>
	} else {
		<div class="flex h-full w-full justify-center overflow-hidden text-transparent">No image</div>
	}
}

func defaultString(val, fallback string) string {
	if val == "" {
		return fallback
	}
	return val
}