package templates

import (
	"strconv"

	"git.bronku.xyz/bronku/cake-order-tracker/models"
)

templ OrdersPage(first, last, today, tomorrow string, orders []models.Order) {
	@Layout("Panel główny", DateForm(first, last, today, tomorrow), OrdersMain(orders))
}

templ DateForm(first, last, today, tomorrow string) {
	<div class="horizontal-group" style="gap:0.5rem;flex-wrap:wrap">
		<div class="preset-group">
			<a href={ templ.URL("/orders?from=" + today + "&to=" + today) } class="preset-btn">Dzisiaj</a>
			<a href={ templ.URL("/orders?from=" + tomorrow + "&to=" + tomorrow) } class="preset-btn">Jutro</a>
			<a href="/orders" class="preset-btn">W tym tygodniu</a>
		</div>
		<form method="GET" action="/orders" class="horizontal-group" style="align-items:center;gap:0.25rem">
			<label>Od</label>
			<input type="date" name="from" value={ first }/>
			<label>Do</label>
			<input type="date" name="to" value={ last }/>
			<button type="submit" class="btn primary sm">Filtruj</button>
		</form>
	</div>
}

templ OrdersMain(orders []models.Order) {
	<div class="metrics-grid">
		<div>
			<span class="label">
				<span class="material-symbols-outlined">receipt_long</span>
				Zamówienia dzisiaj
			</span>
			<span class="value">{ len(orders) }</span>
			<span class="change positive">
				<span class="material-symbols-outlined">arrow_upward</span>
				Wszystkie aktywne
			</span>
		</div>
		<div>
			<span class="label">
				<span class="material-symbols-outlined">cake</span>
				Do realizacji
			</span>
			<span class="value">{ strconv.Itoa(countPending(orders)) }</span>
			<span class="change warning">
				<span class="material-symbols-outlined">priority_high</span>
				Oczekujące
			</span>
		</div>
		<div>
			<span class="label">
				<span class="material-symbols-outlined">check_circle</span>
				Gotowe do odbioru
			</span>
			<span class="value">{ strconv.Itoa(countDone(orders)) }</span>
			<span class="change">Zrealizowane</span>
		</div>
		<div>
			<span class="label">
				<span class="material-symbols-outlined">payments</span>
				Przychód (szac.)
			</span>
			<span class="value">{ estimateRevenue(orders).String() } PLN</span>
			<span class="change positive">
				<span class="material-symbols-outlined">trending_up</span>
				W bieżącym miesiącu
			</span>
		</div>
	</div>
	<section class="card">
		<header>
			<h2>
				<span class="material-symbols-outlined">list_alt</span>
				Aktywne zamówienia
			</h2>
			<div style="position:relative;width:11.25rem">
				<span class="material-symbols-outlined" style="position:absolute;left:0.5rem;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--on-surface-variant);pointer-events:none">search</span>
				<input type="text" style="height:1.75rem;padding-left:1.75rem;padding-right:0.5rem;font-size:0.75rem;border:1px solid var(--outline-variant);border-radius:var(--border-radius-sm);background:var(--surface-container-lowest);color:var(--on-surface);outline:none;width:100%" placeholder="Szukaj..." oninput="filterOrders(this)"/>
			</div>
		</header>
		<div class="table-container" id="results-table">
			@OrdersTable(orders)
		</div>
	</section>
	<script>
		function filterOrders(input) {
			var q = input.value.toLowerCase();
			var rows = document.querySelectorAll('#results-table tbody tr');
			for (var i = 0; i < rows.length; i++) {
				var id = rows[i].children[0].textContent.toLowerCase();
				var customer = rows[i].children[1].textContent.toLowerCase();
				rows[i].style.display = id.includes(q) || customer.includes(q) ? '' : 'none';
			}
		}
	</script>
}

templ OrdersTable(orders []models.Order) {
	<table class="data-table">
		<thead>
			<tr>
				<th>ID zamówienia</th>
				<th>Klient</th>
				<th>Data odbioru</th>
				<th>Pozycje</th>
				<th class="right">Suma</th>
				<th class="center">Status</th>
				<th class="center"></th>
			</tr>
		</thead>
		<tbody>
			for _, o := range orders {
				<tr>
					<td><a href={ templ.URL("/order/" + strconv.Itoa(o.ID)) } class="order-id">#{ strconv.Itoa(o.ID) }</a></td>
					<td class="customer">{ o.Surname } { o.Name }<br/><span class="text-muted" style="font-size:0.75rem;font-weight:400">{ o.Phone }</span></td>
					<td class="text-muted">{ o.Date.Format("2006-01-02 15:04") }</td>
					<td>
						<span class="truncate" title={ cakeItemsDesc(o.Cakes) }>
							for i, c := range o.Cakes {
								if i > 0 {
									{ ", " }
								}
								{ c.Name } (x{ strconv.Itoa(c.Amount) })
							}
						</span>
					</td>
					<td class="text-right" style="font-weight:700">{ o.Total().String() } PLN</td>
					<td class="text-center">
						<span class={ "status-chip " + o.Status }>
							if o.Status == "accepted" {
								Przyjęte
							} else if o.Status == "done" {
								Gotowe
							} else {
								Oczekujące
							}
						</span>
					</td>
					<td class="text-center">
						<a href={ templ.URL("/order/" + strconv.Itoa(o.ID)) } class="action-btn">
							<span class="material-symbols-outlined">edit</span>
						</a>
					</td>
				</tr>
			}
		</tbody>
	</table>
}