{{ template "sync/layout/authenticated.html" . }}

{{ define "title" }}Review - Pools{{ end }}
{{ define "extraheader" }}
	<script
		type="text/javascript"
		src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
	></script>
	<script
		defer
		src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
	></script>
	<script src="/static/js/time-relative.js"></script>
	<script src="/static/js/map-multipoint.js"></script>
	<script>
		function formatAddress(a) {
			if (a == undefined) {
				return "undefined";
			}
			if (a.number == "" && a.street == "") {
				return "no address provided";
			}
			return a.number + " " + a.street + ", " + a.locality;
		}
		function reviewApp() {
			return {
				// State
				tasks: [],
				totalPending: 0,
				selectedTask: null,
				originalValues: {},
				loading: true,
				submitting: false,
				error: null,

				// Form fields for the selected task
				form: {
					poolCondition: "",
					ownerContact: "",
					residentContact: "",
					poolShape: "",
				},

				// Computed: track which fields have changed
				get changes() {
					if (!this.selectedTask) return { updated: [], unchanged: [] };

					const updated = [];
					const unchanged = [];

					const fields = [
						{ key: "poolCondition", label: "Pool condition" },
						{ key: "ownerContact", label: "Owner contact" },
						{ key: "residentContact", label: "Resident contact" },
						{ key: "poolShape", label: "Pool shape" },
					];

					fields.forEach((field) => {
						if (this.form[field.key] !== this.originalValues[field.key]) {
							updated.push(field.label);
						} else {
							unchanged.push(field.label);
						}
					});

					return { updated, unchanged };
				},

				// Initialize
				async init() {
					document.addEventListener("DOMContentLoaded", () => {
						const map = document.querySelector("map-multipoint");
						map.on("load", () => {
							map.addLayer({
								id: "parcel",
								minzoom: 14,
								paint: {
									"line-color": "#0f0",
								},
								source: "tegola",
								"source-layer": "parcel",
								type: "line",
							});
						});
					});
					await this.fetchTasks();
				},

				// Fetch tasks from API
				async fetchTasks() {
					this.loading = true;
					this.error = null;

					try {
						const response = await fetch("/api/review-task/pool");
						if (!response.ok) {
							throw new Error("Failed to fetch tasks");
						}

						const data = await response.json();
						this.tasks = data.tasks || [];
						this.totalPending = data.totalPending || this.tasks.length;

						// Auto-select first task if available
						if (this.tasks.length > 0 && !this.selectedTask) {
							this.selectTask(this.tasks[0]);
						}
					} catch (err) {
						this.error = err.message;
						console.error("Error fetching tasks:", err);
					} finally {
						this.loading = false;
						console.log("set loading", this.loading);
					}
				},

				// Select a task
				selectTask(task) {
					console.log("Selected task", task);
					this.selectedTask = task;

					// Populate form with task values
					this.form = {
						poolCondition: task.condition || "",
						ownerContact: task.ownerContact || "",
						residentContact: task.residentContact || "",
						poolShape: task.poolShape || "",
					};

					// Store original values for change tracking
					this.originalValues = { ...this.form };

					// Update map and aerial image
					this.updateMap(task);
					this.updateAerialImage(task);
				},

				// Stub: Update map display
				updateMap(task) {
					console.log("Updating map for task:", task.id);
					// TODO: Initialize/update MapLibre GL map
					// Example implementation:
					// if (this.map) {
					//     this.map.flyTo({
					//         center: [task.longitude, task.latitude],
					//         zoom: 18
					//     });
					//     // Update or add marker
					// } else {
					//     this.map = new maplibregl.Map({
					//         container: 'map-container',
					//         style: 'https://tiles.example.com/style.json',
					//         center: [task.longitude, task.latitude],
					//         zoom: 18
					//     });
					// }
				},

				// Stub: Update aerial image display
				updateAerialImage(task) {
					console.log("Updating aerial image for task:", task.id);
					// TODO: Load aerial image
					// Example implementation:
					// const imageEl = document.getElementById('aerial-image');
					// if (imageEl && task.aerialImageUrl) {
					//     imageEl.src = task.aerialImageUrl;
					// }
				},

				// Format relative time
				formatRelativeTime(dateString) {
					if (!dateString) return "";

					const date = new Date(dateString);
					const now = new Date();
					const diffMs = now - date;
					const diffMins = Math.floor(diffMs / 60000);
					const diffHours = Math.floor(diffMins / 60);
					const diffDays = Math.floor(diffHours / 24);

					if (diffMins < 1) return "just now";
					if (diffMins < 60) return `${diffMins} min ago`;
					if (diffHours < 24)
						return `${diffHours} hour${diffHours > 1 ? "s" : ""} ago`;
					return `${diffDays} day${diffDays > 1 ? "s" : ""} ago`;
				},

				// Submit review action
				async submitReview(action) {
					if (!this.selectedTask || this.submitting) return;

					this.submitting = true;
					this.error = null;

					try {
						const payload = {
							taskId: this.selectedTask.id,
							action: action, // 'reviewed' or 'discarded'
							updates: {},
						};

						// Include changed fields in the payload
						if (action === "reviewed") {
							Object.keys(this.form).forEach((key) => {
								if (this.form[key] !== this.originalValues[key]) {
									payload.updates[key] = this.form[key];
								}
							});
						}

						const response = await fetch("/api/review-task", {
							method: "POST",
							headers: {
								"Content-Type": "application/json",
							},
							body: JSON.stringify(payload),
						});

						if (!response.ok) {
							throw new Error("Failed to submit review");
						}

						// Remove task from list
						const taskIndex = this.tasks.findIndex(
							(t) => t.id === this.selectedTask.id,
						);
						if (taskIndex > -1) {
							this.tasks.splice(taskIndex, 1);
							this.totalPending = Math.max(0, this.totalPending - 1);
						}

						// Select next task or clear selection
						if (this.tasks.length > 0) {
							const nextIndex = Math.min(taskIndex, this.tasks.length - 1);
							this.selectTask(this.tasks[nextIndex]);
						} else {
							this.selectedTask = null;
							this.form = {
								poolCondition: "",
								ownerContact: "",
								residentContact: "",
								poolShape: "",
							};
							this.originalValues = {};
						}
					} catch (err) {
						this.error = err.message;
						console.error("Error submitting review:", err);
					} finally {
						this.submitting = false;
					}
				},

				// Mark as reviewed
				markReviewed() {
					this.submitReview("reviewed");
				},

				// Discard entry
				discardEntry() {
					if (confirm("Are you sure you want to discard this entry?")) {
						this.submitReview("discarded");
					}
				},
			};
		}
	</script>
	<style>
		body {
			background-color: #f5f5f5;
		}
		.left-panel {
			background-color: white;
			height: 100vh;
			overflow-y: auto;
			border-right: 1px solid #dee2e6;
		}
		.middle-panel {
			background-color: white;
			height: 100vh;
			overflow-y: auto;
			padding: 20px;
		}
		.right-panel {
			background-color: white;
			height: 100vh;
			overflow-y: auto;
			border-left: 1px solid #dee2e6;
			padding: 20px;
		}
		.entry-item {
			padding: 15px;
			border-bottom: 1px solid #e9ecef;
			cursor: pointer;
			transition: background-color 0.2s;
		}
		.entry-item:hover {
			background-color: #f8f9fa;
		}
		.entry-item.active {
			background-color: #e7f3ff;
			border-left: 4px solid #0d6efd;
		}
		.placeholder-box {
			background-color: #e9ecef;
			border: 2px dashed #adb5bd;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #6c757d;
			font-size: 18px;
			margin-bottom: 20px;
		}
		.map-placeholder {
			height: 300px;
		}
		.image-placeholder {
			height: 400px;
		}
		.action-btn {
			width: 100%;
			margin-bottom: 10px;
			padding: 12px;
			font-size: 16px;
		}
		.status-badge {
			font-size: 11px;
		}
	</style>
{{ end }}
{{ define "content" }}
	<div class="container-fluid" x-data="reviewApp()">
		<div class="row">
			<!-- Left Column - Entry List -->
			<div class="col-md-3 p-0 left-panel">
				<!-- Error Alert -->
				<div x-show="error" class="mt-3">
					<span x-text="error"></span>
					<button
						type="button"
						class="btn-close"
						@click="error = null"
					></button>
				</div>

				<div class="p-3 border-bottom bg-primary text-white">
					<h5 class="mb-0"><i class="bi bi-list-ul"></i> Review Queue</h5>
					<small><span x-text="totalPending"></span> entries pending</small>
				</div>

				<!-- Empty State -->
				<div
					x-show="!loading && tasks.length === 0"
					class="p-4 text-center text-muted"
				>
					<i class="bi bi-check-circle" style="font-size: 48px;"></i>
					<p class="mt-2">No entries to review!</p>
				</div>

				<!-- Task List -->
				<template x-for="task in tasks" :key="task.id">
					<div
						class="entry-item"
						:class="{ 'active': selectedTask && selectedTask.id === task.id }"
						@click="selectTask(task)"
					>
						<div class="d-flex justify-content-between align-items-start">
							<div>
								<i class="bi bi-droplet"></i>
								<strong>Pool <span x-text="task.id"></span></strong>
							</div>
							<small class="text-muted" x-text="task.condition"></small>
						</div>
						<small
							class="text-muted d-block mt-1"
							x-text="formatAddress(task.address)"
						></small>
					</div>
				</template>
			</div>

			<!-- Middle Column - Details and Media -->
			<div class="col-md-6 p-0 middle-panel">
				<!-- No Selection State -->
				<template x-show="selectedTask == null">
					<div
						class="h-100 d-flex align-items-center justify-content-center text-muted"
					>
						<div class="text-center">
							<i class="bi bi-cursor-fill" style="font-size: 48px;"></i>
							<p class="mt-2">Select an entry from the list to review</p>
						</div>
					</div>
				</template>

				<!-- Selected Task Details -->
				<div x-show="selectedTask">
					<div class="mb-4">
						<h4 class="mb-3">
							Entry #<span x-text="selectedTask?.id"></span> Details
						</h4>

						<form @submit.prevent>
							<div class="row mb-3">
								<label class="col-sm-3 col-form-label fw-bold">Address:</label>
								<div class="col-sm-9">
									<input
										type="text"
										class="form-control"
										:value="formatAddress(selectedTask?.address)"
										readonly
									/>
								</div>
							</div>

							<div class="row mb-3">
								<label class="col-sm-3 col-form-label fw-bold"
									>Pool Condition:</label
								>
								<div class="col-sm-9">
									<select
										class="form-select"
										x-model="form.poolCondition"
										:class="{ 'border-warning': form.poolCondition !== originalValues.poolCondition }"
									>
										<option value="">-- Select --</option>
										<option value="blue">Blue</option>
										<option value="dry">Dry</option>
										<option value="false pool">False Pool</option>
										<option value="unknown">Unknown</option>
										<option value="green">Green</option>
										<option value="murky">Murky</option>
									</select>
								</div>
							</div>

							<template x-if="form.ownerContact != ''">
								<div class="row mb-3">
									<label class="col-sm-3 col-form-label fw-bold"
										>Owner Contact:</label
									>
									<div class="col-sm-9">
										<input
											type="text"
											class="form-control"
											x-model="form.ownerContact"
											:class="{ 'border-warning': form.ownerContact !== originalValues.ownerContact }"
										/>
									</div>
								</div>
							</template>

							<template x-if="form.residentContact != ''">
								<div class="row mb-4">
									<label class="col-sm-3 col-form-label fw-bold"
										>Resident Contact:</label
									>
									<div class="col-sm-9">
										<input
											type="text"
											class="form-control"
											x-model="form.residentContact"
											:class="{ 'border-warning': form.residentContact !== originalValues.residentContact }"
										/>
									</div>
								</div>
							</template>
						</form>
					</div>

					<!-- Map Placeholder -->
					<div class="map-container">
						<map-multipoint
							id="map"
							organization-id="{{ .Organization.ID }}"
							tegola="{{ .URL.Tegola }}"
							xmin="{{ .Organization.ServiceAreaXmin.GetOr 0 }}"
							ymin="{{ .Organization.ServiceAreaYmin.GetOr 0 }}"
							xmax="{{ .Organization.ServiceAreaXmax.GetOr 0 }}"
							ymax="{{ .Organization.ServiceAreaYmax.GetOr 0 }}"
						></map-multipoint>
					</div>

					<!-- Aerial Image Placeholder -->
					<div class="placeholder-box image-placeholder">
						<div class="text-center">
							<i class="bi bi-image" style="font-size: 48px;"></i>
							<p class="mb-0 mt-2">Aerial Pool Image Placeholder</p>
							<small
								>Captured:
								<span x-text="selectedTask?.capturedAt || 'N/A'"></span
							></small>
						</div>
					</div>
				</div>
			</div>

			<!-- Right Column - Actions -->
			<div class="col-md-3 p-0 right-panel">
				<h5 class="mb-4">Actions</h5>

				<button
					class="btn btn-success action-btn"
					@click="markReviewed()"
					:disabled="!selectedTask || submitting"
				>
					<span x-show="!submitting">
						<i class="bi bi-check-circle"></i> Mark Reviewed
					</span>
					<span x-show="submitting">
						<span class="spinner-border spinner-border-sm" role="status"></span>
						Submitting...
					</span>
				</button>

				<button
					class="btn btn-danger action-btn"
					@click="discardEntry()"
					:disabled="!selectedTask || submitting"
				>
					<i class="bi bi-trash"></i> Discard Entry
				</button>

				<div class="card mt-3" x-show="selectedTask">
					<div class="card-body" x-show="changes.updated.length > 0">
						<h6 class="card-title">
							<i class="bi bi-pencil-square text-warning"></i> Updates
						</h6>
						<ul class="mb-0">
							<template x-for="item in changes.updated" :key="item">
								<li x-text="item"></li>
							</template>
						</ul>
					</div>
					<div class="card-body" x-show="changes.unchanged.length > 0">
						<h6 class="card-title">
							<i class="bi bi-dash-circle text-muted"></i> Not changed
						</h6>
						<ul class="mb-0">
							<template x-for="item in changes.unchanged" :key="item">
								<li x-text="item"></li>
							</template>
						</ul>
					</div>
				</div>

				<!-- Keyboard Shortcuts Help -->
				<div class="card mt-3">
					<div class="card-body">
						<h6 class="card-title"><i class="bi bi-keyboard"></i> Tips</h6>
						<small class="text-muted">
							Fields with a yellow border have been modified from their original
							values.
						</small>
					</div>
				</div>
			</div>
		</div>
	</div>
{{ end }}