veola/templates/results.templ

package templates

import (
	"encoding/json"
	"fmt"
	"time"

	"veola/internal/db"
	"veola/internal/models"
)

type ItemResultsData struct {
	Page
	Item             models.Item
	Badge            BadgeData
	History          []models.PricePoint
	Results          []models.Result
	Page_            int
	TotalPages       int
	Order            string
	HistoryChartJSON string
	// RunMsg / RunError carry feedback from a "Run Now" poll. Both empty on a
	// normal page load; PostRunItem sets exactly one.
	RunMsg   string
	RunError string
	// EndingSoon, when non-nil, surfaces the soonest-ending auction across this
	// item's results so users can act before close.
	EndingSoon *db.EndingSoon
}

type BadgeData struct {
	Label string
	Class string // v-badge-low / v-badge-avg / v-badge-target / ""
}

type GlobalResultsData struct {
	Page
	Items     []models.Item
	Results   []ItemResultRow
	ItemID    int64
	From      string
	To        string
	// EndingSoon mirrors the per-item field but spans every watched item.
	EndingSoon *db.EndingSoon
}

type ItemResultRow struct {
	models.Result
	ItemName string
}

// endingSoonStrip surfaces the next auction about to close. Hidden when nil
// (the handler decides cutoff: 24h by default). The data-ends-at attribute
// drives the live countdown in flair.js.
templ endingSoonStrip(e *db.EndingSoon) {
	if e != nil {
		<div class="v-ending-strip mb-5" data-ends-at={ e.EndsAt.UTC().Format(time.RFC3339) }>
			<div class="v-ending-label">Ending soon</div>
			<div class="v-ending-title">
				if e.URL != "" {
					<a href={ templ.SafeURL(e.URL) } target="_blank" rel="noopener">{ e.Title }</a>
				} else {
					{ e.Title }
				}
				<span class="v-muted text-xs ml-2">{ e.ItemName }</span>
			</div>
			<div class="v-ending-countdown font-mono" data-countdown></div>
		</div>
	}
}

// endsInCell renders the per-row countdown for auction listings only. Fixed-
// price rows (EndsAt == nil) get an em-dash placeholder so column widths stay
// consistent.
templ endsInCell(endsAt *time.Time) {
	if endsAt != nil {
		<span class="v-countdown font-mono text-sm" data-ends-at={ endsAt.UTC().Format(time.RFC3339) } data-countdown></span>
	} else {
		<span class="v-muted">—</span>
	}
}

templ itemResultsBody(d ItemResultsData) {
	<div>
		@endingSoonStrip(d.EndingSoon)
		<div class="flex items-start justify-between mb-4">
			<div>
				<h1 class="text-3xl font-semibold">{ d.Item.Name }</h1>
				if d.Item.Category != "" {
					<div class="v-muted">{ d.Item.Category }</div>
				}
			</div>
			<div class="text-right">
				if d.Item.BestPrice != nil {
					<div class="font-mono text-3xl">{ fmtPrice(d.Item.BestPrice, d.Item.BestPriceCurrency) }</div>
					if d.Item.BestPriceURL != "" {
						<a class="text-sm" href={ templ.SafeURL(d.Item.BestPriceURL) } target="_blank" rel="noopener">{ d.Item.BestPriceStore }</a>
					}
				} else {
					<div class="v-muted">no price yet</div>
				}
				if d.Badge.Label != "" {
					<div class="mt-2">
						<span class={ "v-badge", d.Badge.Class }>{ d.Badge.Label }</span>
					</div>
				}
				<form
					class="mt-3 flex items-center gap-2 justify-end"
					hx-post={ fmt.Sprintf("/items/%d/run", d.Item.ID) }
					hx-target="#item-results-table"
					hx-swap="outerHTML"
					hx-disabled-elt="find button"
				>
					<input type="hidden" name="csrf_token" value={ d.CSRFToken }/>
					<input type="hidden" name="from" value="results"/>
					<span class="v-spinner htmx-indicator"></span>
					<span class="v-muted text-sm htmx-indicator">Running...</span>
					<button class="v-btn" type="submit">Run Now</button>
				</form>
			</div>
		</div>

		<div class="v-card p-5 mb-6">
			<h2 class="font-semibold mb-3">Price History</h2>
			if len(d.History) < 2 {
				<div class="v-muted">Not enough history yet.</div>
			} else {
				// Chart data rides on a data- attribute, not <script> content:
				// templ interpolates (and escapes) attribute values but treats
				// <script> bodies as raw text, leaving { expr } literal.
				<canvas id="price-chart" height="120" data-chart={ d.HistoryChartJSON }></canvas>
				<script src="/static/vendor/chart.umd.min.js"></script>
				<script src="/static/js/price-chart.js"></script>
			}
		</div>

		@ItemResultsTable(d)
	</div>
}

// ItemResultsTable is the results listing + pagination, plus optional "Run
// Now" feedback. It is both part of the initial page (via itemResultsBody)
// and the standalone response to POST /items/{id}/run from the results page,
// so the Run Now button targets #item-results-table with hx-swap="outerHTML".
templ ItemResultsTable(d ItemResultsData) {
	<div id="item-results-table">
		if d.RunError != "" {
			<div class="v-flash-error">{ d.RunError }</div>
		} else if d.RunMsg != "" {
			<div class="v-flash">{ d.RunMsg }</div>
		}
		<div class="v-card p-0 overflow-hidden">
			<table class="v-table">
				<thead>
					<tr>
						<th></th>
						<th>Title</th>
						<th>
							<a href={ templ.SafeURL(fmt.Sprintf("/items/%d/results?order=%s", d.Item.ID, toggleOrder(d.Order, "price"))) }>Price</a>
						</th>
						<th>Store</th>
						<th>Ends</th>
						<th>
							<a href={ templ.SafeURL(fmt.Sprintf("/items/%d/results?order=%s", d.Item.ID, toggleOrder(d.Order, "found"))) }>Found</a>
						</th>
						<th>Alert</th>
					</tr>
				</thead>
				<tbody>
					for _, r := range d.Results {
						<tr>
							<td>
								if r.ImageURL != "" {
									<img src={ r.ImageURL } alt="" class="w-10 h-10 object-cover rounded"/>
								}
							</td>
							<td>
								if r.URL != "" {
									<a href={ templ.SafeURL(r.URL) } target="_blank" rel="noopener">{ r.Title }</a>
								} else {
									{ r.Title }
								}
								if r.MatchedQuery != "" {
									<div class="v-muted text-xs">via "{ r.MatchedQuery }"</div>
								}
							</td>
							<td class={ "font-mono", priceClass(r.Price, d.Item.TargetPrice) }>{ fmtPrice(r.Price, r.Currency) }</td>
							<td class="v-muted">{ r.Source }</td>
							<td>@endsInCell(r.EndsAt)</td>
							<td class="v-muted text-sm">{ humanTime(r.FoundAt) }</td>
							<td>
								if r.Alerted {
									<span class="v-pill v-pill-active">sent</span>
								}
							</td>
						</tr>
					}
				</tbody>
			</table>
		</div>
		if d.TotalPages > 1 {
			<div class="flex gap-2 justify-center my-4">
				for i := 1; i <= d.TotalPages; i++ {
					<a class={ pageClass(i, d.Page_) } href={ templ.SafeURL(fmt.Sprintf("/items/%d/results?page=%d&order=%s", d.Item.ID, i, d.Order)) }>{ fmt.Sprintf("%d", i) }</a>
				}
			</div>
		}
	</div>
}

func pageClass(i, current int) string {
	if i == current {
		return "v-btn"
	}
	return "v-btn-ghost"
}

func toggleOrder(current, axis string) string {
	switch axis {
	case "price":
		if current == "price_asc" {
			return "price_desc"
		}
		return "price_asc"
	case "found":
		if current == "found_desc" || current == "" {
			return "found_asc"
		}
		return "found_desc"
	}
	return ""
}

templ ItemResults(d ItemResultsData) {
	@Layout(d.Page, itemResultsBody(d))
}

templ globalResultsBody(d GlobalResultsData) {
	<div>
		<h1 class="text-3xl font-semibold mb-6">All Results</h1>
		@endingSoonStrip(d.EndingSoon)
		<form method="get" action="/results" class="flex items-end gap-3 mb-4">
			<div>
				<label class="v-label">Item</label>
				<select class="v-select" name="item_id">
					<option value="0">All</option>
					for _, it := range d.Items {
						<option value={ fmt.Sprintf("%d", it.ID) } selected?={ d.ItemID == it.ID }>{ it.Name }</option>
					}
				</select>
			</div>
			<div>
				<label class="v-label">From</label>
				<input class="v-input" type="date" name="from" value={ d.From }/>
			</div>
			<div>
				<label class="v-label">To</label>
				<input class="v-input" type="date" name="to" value={ d.To }/>
			</div>
			<button class="v-btn" type="submit">Filter</button>
		</form>
		<div class="v-card p-0 overflow-hidden">
			<table class="v-table">
				<thead>
					<tr><th>Item</th><th>Title</th><th>Price</th><th>Store</th><th>Ends</th><th>Found</th><th>Alert</th></tr>
				</thead>
				<tbody>
					for _, r := range d.Results {
						<tr>
							<td><a href={ templ.SafeURL(fmt.Sprintf("/items/%d/results", r.ItemID)) }>{ r.ItemName }</a></td>
							<td>
								if r.URL != "" {
									<a href={ templ.SafeURL(r.URL) } target="_blank" rel="noopener">{ r.Title }</a>
								} else {
									{ r.Title }
								}
								if r.MatchedQuery != "" {
									<div class="v-muted text-xs">via "{ r.MatchedQuery }"</div>
								}
							</td>
							<td class="font-mono">{ fmtPrice(r.Price, r.Currency) }</td>
							<td class="v-muted">{ r.Source }</td>
							<td>@endsInCell(r.EndsAt)</td>
							<td class="v-muted text-sm">{ humanTime(r.FoundAt) }</td>
							<td>
								if r.Alerted {
									<span class="v-pill v-pill-active">sent</span>
								}
							</td>
						</tr>
					}
				</tbody>
			</table>
		</div>
	</div>
}

templ GlobalResults(d GlobalResultsData) {
	@Layout(d.Page, globalResultsBody(d))
}

// ChartJSON helper for handlers.
type ChartJSON struct {
	Labels []string  `json:"labels"`
	Points []float64 `json:"points"`
}

func MustChartJSON(c ChartJSON) string {
	b, _ := json.Marshal(c)
	return string(b)
}