package templates

import (
	"fmt"
	"malago/internal/database"
)

templ Watchlist(entries []database.GetUserWatchListRow, layout string, currentStatus string) {
	@Layout("My Watchlist") {
		<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
			<h2 style="margin: 0;">My Watchlist</h2>
			<div>
				<a href={ templ.URL(fmt.Sprintf("/watchlist?view=grid&status=%s", currentStatus)) } style={ viewLinkStyle(layout == "grid") }>Grid</a>
				<span style="color: var(--border);"> | </span>
				<a href={ templ.URL(fmt.Sprintf("/watchlist?view=table&status=%s", currentStatus)) } style={ viewLinkStyle(layout == "table") }>Table</a>
			</div>
		</div>

		<div style="display: flex; gap: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border); padding-bottom: 8px; overflow-x: auto; white-space: nowrap;">
			<a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=all", layout)) } style={ tabLinkStyle(currentStatus == "all") }>All</a>
			<a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=watching", layout)) } style={ tabLinkStyle(currentStatus == "watching") }>Watching</a>
			<a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=on_hold", layout)) } style={ tabLinkStyle(currentStatus == "on_hold") }>On Hold</a>
			<a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=plan_to_watch", layout)) } style={ tabLinkStyle(currentStatus == "plan_to_watch") }>Plan to Watch</a>
			<a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=dropped", layout)) } style={ tabLinkStyle(currentStatus == "dropped") }>Dropped</a>
			<a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=completed", layout)) } style={ tabLinkStyle(currentStatus == "completed") }>Completed</a>
		</div>

		if len(entries) == 0 {
			<div class="empty-state">
				Your watchlist is empty. <a href="/">Go search for some anime!</a>
			</div>
		} else {
			if layout == "grid" {
				<div class="catalog-grid">
					for _, entry := range entries {
						<div class="catalog-item" id={ fmt.Sprintf("watchlist-entry-%d", entry.AnimeID) } style="position: relative;">
							<a href={ templ.URL(fmt.Sprintf("/anime/%d", entry.AnimeID)) }>
								if entry.ImageUrl != "" {
									<img src={ entry.ImageUrl } alt={ entry.Title } class="catalog-thumb" loading="lazy" />
								} else {
									<div class="no-image">no image</div>
								}
							</a>
							<div class="catalog-title">
								{ entry.Title }
								<div style="font-size: 10px; color: var(--text-muted); margin-top: 4px;">{ entry.Status }</div>
							</div>
							<button hx-delete={ string(templ.URL(fmt.Sprintf("/api/watchlist/%d", entry.AnimeID))) } hx-target={ fmt.Sprintf("#watchlist-entry-%d", entry.AnimeID) } hx-swap="outerHTML" style="position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.7); border: 1px solid var(--border); color: var(--redtext, #e06c75); cursor: pointer; font-size: 10px; padding: 2px 6px; border-radius: 4px;">remove</button>
						</div>
					}
				</div>
			} else {
				<table class="stats-table">
					<thead>
						<tr>
							<th>Image</th>
							<th>Title</th>
							<th>Status</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						for _, entry := range entries {
							<tr id={ fmt.Sprintf("watchlist-entry-%d", entry.AnimeID) }>
								<td style="width: 50px;">
									<a href={ templ.SafeURL(fmt.Sprintf("/anime/%d", entry.AnimeID)) }>
										<img src={ entry.ImageUrl } alt={ entry.Title } width="50" style="border: 1px solid var(--border);" loading="lazy"/>
									</a>
								</td>
								<td>
									<a href={ templ.SafeURL(fmt.Sprintf("/anime/%d", entry.AnimeID)) }>
										<strong>{ entry.Title }</strong>
									</a>
								</td>
								<td>{ entry.Status }</td>
								<td style="text-align: right;">
									<button hx-delete={ string(templ.URL(fmt.Sprintf("/api/watchlist/%d", entry.AnimeID))) } hx-target={ fmt.Sprintf("#watchlist-entry-%d", entry.AnimeID) } hx-swap="outerHTML" style="background: none; border: none; color: var(--redtext, #e06c75); cursor: pointer; text-decoration: underline; font-size: 12px; padding: 0;">delete</button>
								</td>
							</tr>
						}
					</tbody>
				</table>
			}
		}
	}
}

func viewLinkStyle(active bool) string {
	if active {
		return "color: var(--text); font-weight: bold; text-decoration: none;"
	}
	return "color: var(--text-muted); text-decoration: none;"
}

func tabLinkStyle(active bool) string {
	if active {
		return "color: var(--text); font-weight: bold; text-decoration: none; border-bottom: 2px solid var(--text); padding-bottom: 7px;"
	}
	return "color: var(--text-muted); text-decoration: none; padding-bottom: 7px;"
}