package templates

import (
	"fmt"
	"html"
	"regexp"

	"bookhoard/internal/handlers"
)

// CompletedProgressThreshold is the viewer_percentage at which a card
// shows the completed check instead of a partial-progress bar — the
// SAME 0.999 cut the filter_query.go status arms and the series-page
// status filter use.
const CompletedProgressThreshold = 0.999

// progressFillCSS renders the partial-progress bar width (gotcha #8:
// quote-free style values only — templ double-escapes quotes into
// literal text the CSS parser never sees).
func progressFillCSS(pct float64) string {
	return fmt.Sprintf("width: %.1f%%; background-color: var(--accent);", pct*100)
}

// highlightQueryHTML escapes text FIRST and only then wraps
// case-insensitive query matches in <mark> — the returned HTML is
// safe by construction (escaped payload, marker tags we wrote), which
// is what lets the search partial emit it via templ.Raw.
func highlightQueryHTML(text, query string) string {
	if text == "" || query == "" {
		return html.EscapeString(text)
	}
	pattern := regexp.MustCompile(regexp.QuoteMeta(html.EscapeString(query)))
	markOpen := `<mark style="background-color: var(--accent); color: var(--bg-primary); padding: 0 2px; border-radius: 2px;">`
	return pattern.ReplaceAllString(html.EscapeString(text), markOpen+"$0</mark>")
}

// searchCoverURL falls back to the placeholder the way BookCard does —
// no inline onerror (CSP: hash-mode refuses native handler attributes).
func searchCoverURL(item handlers.BookInfo) string {
	if item.CoverImagePath != "" {
		return item.CoverImagePath
	}
	return "/static/placeholder-book.svg"
}

// SearchResults is the header-search dropdown partial: compact result
// rows swapped into #search-results by the htmx request the header
// input fires (layout=dropdown on /api/media-items/search). Content is
// server-rendered (rendering-ownership doctrine); web/src/search.ts
// only owns open/close/keyboard state.
templ SearchResults(items []handlers.BookInfo, query string) {
	<div class="p-3 border-b" style="border-color: var(--border)">
		<p class="text-xs font-semibold uppercase tracking-wide" style="color: var(--text-secondary)">
			{ resultCountLabel(len(items), query) }
		</p>
	</div>
	if len(items) == 0 {
		<div class="p-4 text-center">
			<div class="text-4xl mb-2">🔍</div>
			<p class="text-sm" style="color: var(--text-primary)">No results found</p>
			<p class="text-xs mt-1" style="color: var(--text-secondary)">Try different keywords</p>
		</div>
	} else {
		<div class="max-h-96 overflow-y-auto">
			for _, item := range items {
				@SearchResultRow(item, query)
			}
		</div>
		<div class="p-2 border-t text-center" style="border-color: var(--border)">
			<p class="text-xs" style="color: var(--text-secondary)">
				Press <kbd class="px-1 py-0.5 rounded" style="background-color: var(--bg-primary)">↑↓</kbd> to navigate,
				<kbd class="px-1 py-0.5 rounded" style="background-color: var(--bg-primary)">Enter</kbd> to select
			</p>
		</div>
	}
}

templ SearchResultRow(item handlers.BookInfo, query string) {
	<div class="search-result-item p-3 border-b transition-colors cursor-pointer" style="border-color: var(--border)">
		<a href={ "/media/" + item.MediaItemID } class="block">
			<div class="flex items-start space-x-3">
				<div class="relative w-10 h-14 flex-shrink-0 rounded overflow-hidden bg-gradient-to-br from-gray-700 to-gray-900">
					<img src={ searchCoverURL(item) } alt={ item.Title } class="w-full h-full object-cover" loading="lazy"/>
					@SearchProgressOverlay(item)
				</div>
				<div class="flex-1 min-w-0">
					<h4 class="text-sm font-medium truncate" style="color: var(--text-primary)">@templ.Raw(highlightQueryHTML(item.Title, query))</h4>
					if item.Author != "" {
						<p class="text-xs truncate" style="color: var(--text-secondary)">@templ.Raw(highlightQueryHTML(item.Author, query))</p>
					}
					if item.LibraryName != "" {
						<p class="text-xs mt-1" style="color: var(--text-secondary)">{ item.LibraryName }</p>
					}
				</div>
			</div>
		</a>
	</div>
}

// SearchProgressOverlay is the cover overlay shared by the dropdown
// rows and BookCard: a completed check at/above the 0.999 threshold,
// a partial fill bar along the cover bottom while mid-read, nothing
// when the viewer never opened the book.
templ SearchProgressOverlay(item handlers.BookInfo) {
	if item.ViewerPercentage != nil {
		if *item.ViewerPercentage >= CompletedProgressThreshold {
			<span
				class="absolute top-0.5 left-0.5 z-10 flex items-center justify-center h-4 w-4 rounded-full shadow-sm"
				style="background-color: var(--accent); color: var(--bg-primary);"
				title="Completed"
			>
				@Icon("check", "h-3 w-3")
			</span>
		} else if *item.ViewerPercentage > 0 {
			<div class="absolute bottom-0 left-0 right-0 z-10 h-1" style="background-color: color-mix(in srgb, var(--bg-primary) 60%, transparent);">
				<div class="h-full" style={ progressFillCSS(*item.ViewerPercentage) }></div>
			</div>
		}
	}
}

func resultCountLabel(n int, query string) string {
	if n == 1 {
		return fmt.Sprintf("1 result for “%s”", query)
	}
	return fmt.Sprintf("%d results for “%s”", n, query)
}