package templates

import (
	"fmt"
	"math"
	"strings"

	"veola/internal/models"
)

type ItemsData struct {
	Page
	Items            []models.Item
	Categories       []string
	SelectedCategory string
	// PriceHistory holds the last ~20 points per item id, ascending in time.
	// Nil/missing entries render an empty sparkline cell.
	PriceHistory map[int64][]models.PricePoint
}

// sparklinePoints turns a price-history slice into an SVG polyline "points"
// attribute, normalized to a 80x24 viewBox with 2px padding so endpoints
// don't clip the stroke. Returns "" when there isn't enough history to draw.
func sparklinePoints(history []models.PricePoint) string {
	if len(history) < 2 {
		return ""
	}
	const w, h, pad = 80.0, 24.0, 2.0
	minP, maxP := math.Inf(1), math.Inf(-1)
	for _, p := range history {
		if p.Price < minP {
			minP = p.Price
		}
		if p.Price > maxP {
			maxP = p.Price
		}
	}
	span := maxP - minP
	if span == 0 {
		// All-equal series: draw a flat line through the middle.
		span = 1
	}
	step := (w - 2*pad) / float64(len(history)-1)
	parts := make([]string, len(history))
	for i, p := range history {
		x := pad + float64(i)*step
		y := h - pad - ((p.Price-minP)/span)*(h-2*pad)
		parts[i] = fmt.Sprintf("%.1f,%.1f", x, y)
	}
	return strings.Join(parts, " ")
}

// sparklineTrendClass compares the last point to the average of the prior
// points and returns a CSS class so the sparkline tints green (price down),
// red (up), or neutral. Threshold is ±3% to ignore tiny wobbles.
func sparklineTrendClass(history []models.PricePoint) string {
	if len(history) < 2 {
		return ""
	}
	last := history[len(history)-1].Price
	var sum float64
	for _, p := range history[:len(history)-1] {
		sum += p.Price
	}
	avg := sum / float64(len(history)-1)
	if avg == 0 {
		return "v-spark-flat"
	}
	switch {
	case last <= avg*0.97:
		return "v-spark-down"
	case last >= avg*1.03:
		return "v-spark-up"
	}
	return "v-spark-flat"
}

// trendArrow returns the unicode arrow + a CSS class describing the direction.
// Same threshold logic as the sparkline. Empty when there's no trend signal.
func trendArrow(history []models.PricePoint) (glyph, class string) {
	switch sparklineTrendClass(history) {
	case "v-spark-down":
		return "↓", "v-trend-down"
	case "v-spark-up":
		return "↑", "v-trend-up"
	case "v-spark-flat":
		return "→", "v-trend-flat"
	}
	return "", ""
}

// isDeal is the gate for the mascot "deal" moment on a row.
func isDeal(it models.Item) bool {
	return it.BestPrice != nil && it.TargetPrice != nil && *it.BestPrice <= *it.TargetPrice
}

templ itemsBody(d ItemsData) {
	<div>
		<div class="flex items-center justify-between mb-6">
			<h1 class="text-3xl font-semibold">Items</h1>
			<a class="v-btn" href="/items/new">+ Add Item</a>
		</div>
		if len(d.Categories) > 0 {
			<form method="get" action="/items" class="mb-4 flex items-center gap-2">
				<label class="v-label mb-0">Category</label>
				<select class="v-select max-w-xs" name="category" onchange="this.form.submit()">
					<option value="">All</option>
					for _, c := range d.Categories {
						<option value={ c } selected?={ c == d.SelectedCategory }>{ c }</option>
					}
				</select>
			</form>
		}
		if len(d.Items) == 0 {
			@itemsEmpty()
		} else {
			<div class="v-card p-0 overflow-hidden">
				<table class="v-table">
					<thead>
						<tr>
							<th>Name</th>
							<th>Category</th>
							<th>Target</th>
							<th>Best Price</th>
							<th>Trend</th>
							<th>Last Polled</th>
							<th>Status</th>
							<th></th>
						</tr>
					</thead>
					<tbody id="items-tbody">
						for _, it := range d.Items {
							@itemRow(it, d.CSRFToken, d.PriceHistory[it.ID])
						}
					</tbody>
				</table>
			</div>
		}
	</div>
}

templ itemsEmpty() {
	<div class="v-card p-8 flex flex-col md:flex-row items-center gap-6">
		<div class="v-veola-portrait w-48 shrink-0">
			<img src="/static/img/veola.avif" alt="Veola"/>
		</div>
		<div>
			<h2 class="text-xl font-semibold mb-2">Nothing on the watchlist.</h2>
			<p class="v-muted mb-4">Add an item and Veola will keep an eye on it.</p>
			<a class="v-btn" href="/items/new">Add the first item</a>
		</div>
	</div>
}

templ itemRow(it models.Item, csrf string, history []models.PricePoint) {
	<tr id={ fmt.Sprintf("item-row-%d", it.ID) }>
		<td>
			<div class="flex items-center gap-2">
				if isDeal(it) {
					<img class="v-deal-mascot" src="/static/img/veola.avif" alt="" title={ fmt.Sprintf("Deal! Best %s ≤ target %s", fmtPrice(it.BestPrice, it.BestPriceCurrency), fmtPrice(it.TargetPrice, "USD")) }/>
				}
				<a href={ templ.SafeURL(fmt.Sprintf("/items/%d/results", it.ID)) }>{ it.Name }</a>
			</div>
			if it.LastPollError != "" {
				<button class="v-pill v-pill-error ml-2" hx-get={ fmt.Sprintf("/items/%d/error", it.ID) } hx-target={ fmt.Sprintf("#item-error-%d", it.ID) } hx-swap="innerHTML">!</button>
				<div id={ fmt.Sprintf("item-error-%d", it.ID) } class="v-error-text mt-1"></div>
			}
		</td>
		<td class="v-muted">{ it.Category }</td>
		<td class="font-mono">
			if it.TargetPrice != nil {
				{ fmtPrice(it.TargetPrice, "USD") }
			} else {
				<span class="v-muted">—</span>
			}
		</td>
		<td>
			if it.BestPrice != nil {
				<div class="flex items-center gap-1.5">
					<span class={ "font-mono text-lg", priceClass(it.BestPrice, it.TargetPrice) }>{ fmtPrice(it.BestPrice, it.BestPriceCurrency) }</span>
					if glyph, cls := trendArrow(history); glyph != "" {
						<span class={ "v-trend", cls }>{ glyph }</span>
					}
				</div>
				if it.BestPriceURL != "" {
					<a class="text-xs" href={ templ.SafeURL(it.BestPriceURL) } target="_blank" rel="noopener">{ it.BestPriceStore }</a>
				} else if it.BestPriceStore != "" {
					<span class="text-xs v-muted">{ it.BestPriceStore }</span>
				}
			} else {
				<span class="v-muted">not yet</span>
			}
		</td>
		<td>
			if pts := sparklinePoints(history); pts != "" {
				<svg class={ "v-sparkline", sparklineTrendClass(history) } viewBox="0 0 80 24" width="80" height="24" aria-hidden="true">
					<polyline points={ pts } fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
				</svg>
			} else {
				<span class="v-muted text-xs">—</span>
			}
		</td>
		<td class="v-muted text-sm">
			if it.LastPolledAt != nil {
				<span title={ it.LastPolledAt.Format("2006-01-02 15:04:05") }>{ humanTime(*it.LastPolledAt) }</span>
			} else {
				—
			}
		</td>
		<td>
			if it.Active {
				<span class="v-pill v-pill-active">active</span>
			} else {
				<span class="v-pill v-pill-paused">paused</span>
			}
		</td>
		<td class="text-right whitespace-nowrap">
			<form class="inline" hx-post={ fmt.Sprintf("/items/%d/toggle", it.ID) } hx-target={ fmt.Sprintf("#item-row-%d", it.ID) } hx-swap="outerHTML">
				<input type="hidden" name="csrf_token" value={ csrf }/>
				<button class="v-btn-ghost text-sm" type="submit">
					if it.Active {
						Pause
					} else {
						Resume
					}
				</button>
			</form>
			<form class="inline" hx-post={ fmt.Sprintf("/items/%d/run", it.ID) } hx-target={ fmt.Sprintf("#item-row-%d", it.ID) } hx-swap="outerHTML" hx-disabled-elt="find button">
				<input type="hidden" name="csrf_token" value={ csrf }/>
				<button class="v-btn-ghost text-sm" type="submit">
					Run Now
					<span class="v-spinner htmx-indicator ml-1"></span>
				</button>
			</form>
			<a class="v-btn-ghost text-sm" href={ templ.SafeURL(fmt.Sprintf("/items/%d/edit", it.ID)) }>Edit</a>
			<form class="inline" hx-post={ fmt.Sprintf("/items/%d/delete", it.ID) } hx-target={ fmt.Sprintf("#item-row-%d", it.ID) } hx-swap="outerHTML" hx-confirm="Delete this item?">
				<input type="hidden" name="csrf_token" value={ csrf }/>
				<button class="v-btn-ghost text-sm" type="submit">Delete</button>
			</form>
		</td>
	</tr>
}

func priceClass(best, target *float64) string {
	if best == nil || target == nil {
		return ""
	}
	if *best <= *target {
		return "v-price-target"
	}
	return ""
}

templ Items(d ItemsData) {
	@Layout(d.Page, itemsBody(d))
}

// ItemRow renders a single row partial, used by HTMX endpoints. Callers
// that don't have history cheaply on hand pass nil; the sparkline cell
// degrades to an em-dash placeholder.
templ ItemRow(it models.Item, csrf string, history []models.PricePoint) {
	@itemRow(it, csrf, history)
}

// EmptyRow lets a delete handler return a row replacement that vanishes.
templ EmptyRow() {
	<tr></tr>
}