package templates

import (
	"encoding/json"
	"fmt"

	"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
}

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
}

type ItemResultRow struct {
	models.Result
	ItemName string
}

templ itemResultsBody(d ItemResultsData) {
	<div>
		<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, "USD") }</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" hx-post={ fmt.Sprintf("/items/%d/run", d.Item.ID) } hx-swap="none">
					<input type="hidden" name="csrf_token" value={ d.CSRFToken }/>
					<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 {
				<canvas id="price-chart" height="120"></canvas>
				<script src="/static/vendor/chart.umd.min.js"></script>
				<script id="price-data" type="application/json">{ d.HistoryChartJSON }</script>
				<script>
				(function(){
					var data = JSON.parse(document.getElementById('price-data').textContent);
					var ctx = document.getElementById('price-chart').getContext('2d');
					new Chart(ctx, {
						type: 'line',
						data: {
							labels: data.labels,
							datasets: [{
								label: 'Best price',
								data: data.points,
								borderColor: '#00e4a4',
								backgroundColor: 'rgba(0,228,164,0.15)',
								pointBackgroundColor: '#e84040',
								pointRadius: 3,
								tension: 0.25,
								fill: true
							}]
						},
						options: {
							scales: {
								x: { ticks: { color: '#a8c0f0' }, grid: { color: 'rgba(255,255,255,0.07)' } },
								y: { ticks: { color: '#a8c0f0' }, grid: { color: 'rgba(255,255,255,0.07)' } }
							},
							plugins: { legend: { labels: { color: '#ffffff' } } }
						}
					});
				})();
				</script>
			}
		</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>
							<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 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>
		<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>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 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)
}