package templates

import (
	"strconv"

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

templ CakesPage(cakes []models.Cake, allTags []models.Tag) {
	@Layout("Katalog", templ.NopComponent, CakesMain(cakes, allTags))
}

templ CakesMain(cakes []models.Cake, allTags []models.Tag) {
	<section class="card">
		<header>
			<h2>
				<span class="material-symbols-outlined">inventory_2</span>
				Zarządzanie katalogiem
			</h2>
			<a href="/cake" class="btn primary sm">
				<span class="material-symbols-outlined">add</span>
				Nowe ciasto
			</a>
		</header>
		if len(allTags) > 0 {
			<div class="filter-bar">
				<span class="filter-label">Tagi:</span>
				for _, t := range allTags {
					<button type="button" class="tag-chip" data-tag={ t.Name } onclick="toggleCakeTagFilter(this)">{ t.Name }</button>
				}
			</div>
		}
		<div class="table-container">
			<table class="data-table" id="cakes-table">
				<thead>
					<tr>
						<th style="width:2rem"></th>
						<th>Nazwa</th>
						<th>SKU</th>
						<th>Tagi</th>
						<th class="right">Cena bazowa</th>
						<th class="center"></th>
					</tr>
				</thead>
				<tbody>
					for _, c := range cakes {
						<tr data-tags={ tagNames(c.Tags) }>
							<td>
								<div class="icon cake sm">
									<span class="material-symbols-outlined">cake</span>
								</div>
							</td>
							<td class="font-medium">{ c.Name }</td>
							<td class="text-muted">#{ strconv.Itoa(c.ID) }</td>
							<td>
								for _, t := range c.Tags {
									<span class="tag-chip">{ t.Name }</span>
								}
							</td>
							<td class="text-right">{ c.Price.String() } PLN</td>
							<td class="text-center">
								<a href={ templ.URL("/cake/" + strconv.Itoa(c.ID)) } class="action-btn">
									<span class="material-symbols-outlined">edit</span>
								</a>
							</td>
						</tr>
					}
				</tbody>
			</table>
		</div>
	</section>
	<script>
		var activeCakeTags = [];
		function toggleCakeTagFilter(btn) {
			var tag = btn.getAttribute('data-tag');
			var idx = activeCakeTags.indexOf(tag);
			if (idx >= 0) { activeCakeTags.splice(idx, 1); btn.classList.remove('active'); }
			else { activeCakeTags.push(tag); btn.classList.add('active'); }
			var rows = document.querySelectorAll('#cakes-table tbody tr');
			for (var i = 0; i < rows.length; i++) {
				if (activeCakeTags.length === 0) { rows[i].style.display = ''; continue; }
				var rowTags = (rows[i].getAttribute('data-tags') || '').split(',');
				var match = false;
				for (var j = 0; j < activeCakeTags.length; j++) {
					if (rowTags.indexOf(activeCakeTags[j]) >= 0) { match = true; break; }
				}
				rows[i].style.display = match ? '' : 'none';
			}
		}
	</script>
}