package templates

import (
	"strconv"

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

templ OrdersPage(first, last, today, tomorrow, special string, counts models.OrderCounts, cakeCounts []models.CakeCount, specialCakes []models.SpecialCakeWithOrder, orders []models.Order) {
	@Layout("Panel główny", OrdersMain(counts, cakeCounts, orders, specialCakes, first, last, special, today, tomorrow))
}

templ DateForm(first, last, today, tomorrow, special string) {
	<div class="horizontal-group">
		<div class="preset-group">
			<a href={ templ.URL("/orders?from=" + today + "&to=" + today + "&special=" + special) } hx-get={ templ.URL("/orders?from=" + today + "&to=" + today + "&special=" + special) } hx-target="#orders-results" class="preset-btn">Dzisiaj</a>
			<a href={ templ.URL("/orders?from=" + tomorrow + "&to=" + tomorrow + "&special=" + special) } hx-get={ templ.URL("/orders?from=" + tomorrow + "&to=" + tomorrow + "&special=" + special) } hx-target="#orders-results" class="preset-btn">Jutro</a>
			<a href={ templ.URL("/orders?special=" + special) } hx-get={ templ.URL("/orders?special=" + special) } hx-target="#orders-results" class="preset-btn">W tym tygodniu</a>
		</div>
		<form method="GET" action="/orders" class="horizontal-group" hx-get="/orders" hx-target="#orders-results" hx-trigger="change, keyup delay:500ms">
			<label>Od</label>
			<input type="date" name="from" value={ first }/>
			<label>Do</label>
			<input type="date" name="to" value={ last }/>
			<input type="hidden" name="special" value={ special }/>
		</form>
	</div>
}

templ OrdersMain(counts models.OrderCounts, cakeCounts []models.CakeCount, orders []models.Order, specialCakes []models.SpecialCakeWithOrder, first, last, special, today, tomorrow string) {
	@DateForm(first, last, today, tomorrow, special)
	<div class="metric">
		<span class="label">
			<span class="material-symbols-outlined">receipt_long</span>
			Aktywne
		</span>
		<span class="value">{ strconv.Itoa(counts.Active) }</span>
		<span class="change">Wszystkie niezrealizowane</span>
	</div>
	<div class="metric">
		<span class="label">
			<span class="material-symbols-outlined">today</span>
			Na dziś
		</span>
		<span class="value">{ strconv.Itoa(counts.DueToday) }</span>
		<span class="change">Do zrobienia</span>
	</div>
	<div id="orders-results">
		@OrdersContent(orders, cakeCounts, specialCakes, first, last, special)
	</div>
	@SpecialCakeViewOverlay()
}

templ OrdersContent(orders []models.Order, cakeCounts []models.CakeCount, specialCakes []models.SpecialCakeWithOrder, first, last, special string) {
	<section class="card" id="orders-card">
		<header>
			<h2>
				<span class="material-symbols-outlined">list_alt</span>
				Aktywne zamówienia
			</h2>
			<div class="header-actions">
				<div class="preset-group">
					<a href={ templ.URL("/orders?special=true&from=" + first + "&to=" + last) } hx-get={ templ.URL("/orders?special=true&from=" + first + "&to=" + last) } hx-target="#orders-results"
						class={ "preset-btn", templ.KV("active", special == "true") }>Torty</a>
					<a href={ templ.URL("/orders?from=" + first + "&to=" + last) } hx-get={ templ.URL("/orders?from=" + first + "&to=" + last) } hx-target="#orders-results"
						class={ "preset-btn", templ.KV("active", special != "true") }>Wszystkie</a>
				</div>
				<div class="search">
					<span class="material-symbols-outlined">search</span>
					<input type="text" placeholder="Szukaj..." oninput="filterOrders(this)"/>
				</div>
			</div>
		</header>
		<table class="data-table">
			<thead>
				<tr>
					<th>ID zamówienia</th>
					<th>Klient</th>
					<th>Data odbioru</th>
					<th>Pozycje</th>
					<th class="text-right">Suma</th>
					<th class="text-center">Status</th>
					<th class="text-center"></th>
				</tr>
			</thead>
			<tbody>
				for _, o := range orders {
					@OrderRow(o)
				}
			</tbody>
		</table>
	</section>
	@CakeBreakdown(cakeCounts)
	@SpecialCakesTable(specialCakes)
}

templ OrderRow(order models.Order) {
	<tr>
		<td><a href={ templ.URL("/order/" + strconv.Itoa(order.ID)) } class="order-id">#{ strconv.Itoa(order.ID) }</a></td>
		<td>{ order.Surname } { order.Name }<br/><span class="text-muted">{ order.Phone }</span></td>
		<td class="text-muted">{ order.Date.Format("2006-01-02 15:04") }</td>
		<td>
			if len(order.SpecialCakes) > 0 {
				<span class="material-symbols-outlined" title="Tort specjalny">cake</span>
			}
			<span title={ orderItemsDesc(order) }>
				for i, c := range order.Cakes {
					if i > 0 {
						{ ", " }
					}
					{ c.Name } (x{ strconv.Itoa(c.Amount) })
				}
				for _, s := range order.SpecialCakes {
					{ ", " }
					{ s.Name }*
				}
			</span>
		</td>
		<td class="text-right font-bold">{ order.Total().String() } PLN</td>
		<td class="text-center">
			<select name="status"
				hx-post={ templ.URL("/order/" + strconv.Itoa(order.ID) + "/status") }
				hx-trigger="change"
				hx-target="closest tr"
				hx-swap="outerHTML">
				<option value="pending"
					if order.Status == "pending" {
						selected
					}
				>Oczekujące</option>
				<option value="accepted"
					if order.Status == "accepted" {
						selected
					}
				>Przyjęte</option>
				<option value="production"
					if order.Status == "production" {
						selected
					}
				>W realizacji</option>
				<option value="ready"
					if order.Status == "ready" {
						selected
					}
				>Do odbioru</option>
				<option value="picked_up"
					if order.Status == "picked_up" {
						selected
					}
				>Wydane</option>
			</select>
		</td>
		<td class="text-center">
			<a href={ templ.URL("/order/" + strconv.Itoa(order.ID)) } class="btn-icon">
				<span class="material-symbols-outlined">edit</span>
			</a>
		</td>
	</tr>
}

templ SpecialCakesTable(specialCakes []models.SpecialCakeWithOrder) {
	<section class="card" id="special-cakes-card">
		<header>
			<h2>
				<span class="material-symbols-outlined">cake</span>
				Torty specjalne
			</h2>
		</header>
		<table class="data-table">
			<thead>
				<tr>
					<th>Nazwa</th>
					<th>Klient</th>
					<th>Data odbioru</th>
					<th class="text-right">Cena</th>
					<th class="text-center"></th>
				</tr>
			</thead>
			<tbody>
				for _, sc := range specialCakes {
					<tr data-sc-id={ strconv.Itoa(sc.ID) }
					    data-sc-name={ sc.Name }
					    data-sc-price={ sc.Price.String() }
					    data-sc-size={ sc.Size }
					    data-sc-shape={ sc.Shape }
					    data-sc-flavour={ sc.Flavour }
					    data-sc-notes={ sc.Notes }
					    data-sc-tags={ tagNames(sc.Tags) }
					    data-sc-order-id={ strconv.Itoa(sc.OrderID) }
					    data-sc-client={ sc.ClientName + " " + sc.ClientSurname }
					    data-sc-date={ sc.OrderDate.Format("2006-01-02") }>
						<td>
							<button type="button" class="link-btn" onclick="viewSpecialCake(this)">{ sc.Name }</button>
						</td>
						<td>{ sc.ClientName } { sc.ClientSurname }</td>
						<td class="text-muted">{ sc.OrderDate.Format("2006-01-02") }</td>
						<td class="text-right">{ sc.Price.String() } PLN</td>
						<td class="text-center">
							<a href={ templ.URL("/order/" + strconv.Itoa(sc.OrderID)) } class="btn-icon" title="Zobacz zamówienie">
								<span class="material-symbols-outlined">receipt_long</span>
							</a>
						</td>
					</tr>
				}
				if len(specialCakes) == 0 {
					<tr>
						<td colspan="5" class="empty-state">Brak tortów specjalnych w tym okresie</td>
					</tr>
				}
			</tbody>
		</table>
	</section>
}

templ SpecialCakeViewOverlay() {
	<div id="sc-view-overlay" class="overlay">
		<div class="overlay-backdrop" onclick="closeViewSpecialCake()"></div>
		<div class="overlay-panel overlay-panel--view">
			<header>
				<h2>
					<span class="material-symbols-outlined">cake</span>
					<span id="sc-view-title">Tort specjalny</span>
				</h2>
				<button type="button" class="close-btn" onclick="closeViewSpecialCake()">
					<span class="material-symbols-outlined">close</span>
				</button>
			</header>
			<div class="overlay-body">
				<div class="view-field">
					<label>Nazwa</label>
					<span id="sc-view-name"></span>
				</div>
				<div class="view-field">
					<label>Cena</label>
					<span id="sc-view-price"></span>
				</div>
				<div class="view-field">
					<label>Wielkość</label>
					<span id="sc-view-size"></span>
				</div>
				<div class="view-field">
					<label>Kształt</label>
					<span id="sc-view-shape"></span>
				</div>
				<div class="view-field">
					<label>Smak</label>
					<span id="sc-view-flavour"></span>
				</div>
				<div class="view-field">
					<label>Notatki</label>
					<span id="sc-view-notes"></span>
				</div>
				<div class="view-field" id="sc-view-tags-field">
					<label>Tagi</label>
					<div id="sc-view-tags"></div>
				</div>
				<div class="view-field">
					<label>Klient</label>
					<span id="sc-view-client"></span>
				</div>
				<div class="view-field">
					<label>Data odbioru</label>
					<span id="sc-view-date"></span>
				</div>
			</div>
			<footer>
				<a href="" id="sc-view-order-link" class="btn btn-outline">
					<span class="material-symbols-outlined">receipt_long</span>
					Zobacz zamówienie
				</a>
				<button type="button" class="btn btn-primary" onclick="closeViewSpecialCake()">
					<span class="material-symbols-outlined">close</span>
					Zamknij
				</button>
			</footer>
		</div>
	</div>
}

templ CakeBreakdown(cakeCounts []models.CakeCount) {
	<section class="card" id="breakdown-card">
		<header>
			<h2>
				<span class="material-symbols-outlined">cake</span>
				Zapotrzebowanie
			</h2>
		</header>
		<table>
			<thead>
				<tr>
					<th>Nazwa</th>
					<th class="text-right">Ilość</th>
				</tr>
			</thead>
			<tbody>
				for _, cc := range cakeCounts {
					<tr>
						<td>{ cc.Name }</td>
						<td class="text-right font-bold">{ strconv.Itoa(cc.Amount) }</td>
					</tr>
				}
				if len(cakeCounts) == 0 {
					<tr>
						<td colspan="2" class="empty-state">Brak ciast w tym okresie</td>
					</tr>
				}
			</tbody>
		</table>
	</section>
}