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

{{ define "title" }}Settings - Integrations{{ end }}
{{ define "extraheader" }}
	<style>
		.integration-card {
			border-left: 5px solid #0d6efd;
			transition: all 0.2s;
		}
		.integration-card:hover {
			box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
		}
		.integration-card.fieldseeker {
			border-left-color: #0d6efd;
		}
		.integration-card.vectorsurv {
			border-left-color: #198754;
		}
		.integration-card.veemac {
			border-left-color: #dc3545;
		}
		.status-active {
			color: #198754;
		}
		.status-inactive {
			color: #dc3545;
		}
		.token-display {
			font-family: monospace;
			background-color: #f8f9fa;
			padding: 0.25rem 0.5rem;
			border-radius: 0.25rem;
			border: 1px solid #dee2e6;
		}
	</style>
{{ end }}
{{ define "content" }}
	<div class="container py-4">
		<!-- Header -->
		<div class="mb-4">
			<h1>Integrations</h1>
			<div class="alert alert-warning">
				<i class="bi bi-exclamation-triangle me-2"></i>
				<strong>Important:</strong> This page allows you to configure
				integration with third-party services. The credentials and tokens stored
				here provide access to external systems and should be protected. Only
				authorized personnel should modify these settings.
			</div>
		</div>

		<!-- Esri ArcGIS Integration -->
		<div class="card mb-4 integration-card arcgis">
			<div
				class="card-header d-flex justify-content-between align-items-center"
			>
				<div>
					<h2 class="h5 mb-0">Esri's ArcGIS</h2>
				</div>
				<img
					src="https://via.placeholder.com/100x40?text=ArcGIS"
					alt="ArcGIS Logo"
					height="40"
				/>
			</div>
			<div class="card-body">
				<div class="table-responsive mb-3">
					<table class="table table-borderless">
						<tbody>
							{{ if not .C.ArcGISOAuth }}
								<tr>
									<td>Not integrated</td>
								</tr>
							{{ else }}
								<tr>
									<td width="30%"><strong>OAuth Token Status</strong></td>
									<td>None</td>
									<td>
										{{ if not .C.ArcGISOAuth.InvalidatedAt.IsNull }}
											<span class="status-inactive">
												<i class="bi bi-x-circle-fill me-1"></i> Invalidated
											</span>
										{{ else if hasPassed .C.ArcGISOAuth.AccessTokenExpires }}
											<span class="status-inactive">
												<i class="bi bi-x-circle-fill me-1"></i> Expired
											</span>
										{{ else }}
											<span class="status-active">
												<i class="bi bi-check-circle-fill me-1"></i> Active
											</span>
										{{ end }}
									</td>
								</tr>
								<tr>
									<td><strong>Token Expiration</strong></td>
									<td>{{ .C.ArcGISOAuth.AccessTokenExpires|timeRelative }}</td>
								</tr>
								<tr>
									<td><strong>Integration Method</strong></td>
									<td>Polling</td>
								</tr>
								<tr>
									<td><strong>Permission Level</strong></td>
									<td>Read</td>
								</tr>
							{{ end }}
						</tbody>
					</table>
				</div>
				<div class="d-flex gap-2">
					<a class="btn btn-primary" href="{{ .URL.OAuthRefreshArcGIS }}">
						<i class="bi bi-arrow-repeat me-2"></i>Refresh OAuth Token
					</a>
					<a
						class="btn btn-outline-danger"
						href="{{ .URL.Configuration.ArcGIS }}"
					>
						<i class="bi bi-gear me-2"></i>Configure
					</a>
				</div>
			</div>
		</div>
		<!-- FieldSeeker GIS Integration -->
		<div class="card mb-4 integration-card fieldseeker">
			<div
				class="card-header d-flex justify-content-between align-items-center"
			>
				<div>
					<h2 class="h5 mb-0">Frontier Precision's FieldSeeker GIS</h2>
				</div>
				<img
					src="https://via.placeholder.com/100x40?text=FieldSeeker"
					alt="FieldSeeker Logo"
					height="40"
				/>
			</div>
			<div class="card-body">
				<div class="table-responsive mb-3">
					<table class="table table-borderless">
						<tbody></tbody>
					</table>
				</div>
				<div class="d-flex gap-2"></div>
			</div>
		</div>

		<!-- VectorSurv Integration -->
		<div class="card mb-4 integration-card vectorsurv">
			<div
				class="card-header d-flex justify-content-between align-items-center"
			>
				<div>
					<h2 class="h5 mb-0">VectorSurv</h2>
				</div>
				<img
					src="https://via.placeholder.com/100x40?text=VectorSurv"
					alt="VectorSurv Logo"
					height="40"
				/>
			</div>
			<div class="card-body">
				<div class="table-responsive mb-3">
					<table class="table table-borderless">
						<tbody>
							<tr>
								<td width="30%"><strong>API Token</strong></td>
								<td>
									<span class="token-display"
										>vs_9f72b5e3******************************c11d</span
									>
								</td>
							</tr>
							<tr>
								<td><strong>Last Synchronization</strong></td>
								<td>December 5, 2025 at 08:34 AM (2 days ago)</td>
							</tr>
							<tr>
								<td><strong>Synchronization Status</strong></td>
								<td>
									<span class="status-active">
										<i class="bi bi-check-circle-fill me-1"></i> Active
										(Scheduled daily at 2:00 AM)
									</span>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="d-flex gap-2">
					<button
						class="btn btn-success"
						data-bs-toggle="modal"
						data-bs-target="#vectorsurvModal"
					>
						<i class="bi bi-pencil-square me-2"></i>Edit Token
					</button>
					<button class="btn btn-outline-danger">
						<i class="bi bi-trash me-2"></i>Remove Integration
					</button>
				</div>
			</div>
		</div>

		<!-- VeeMac Integration -->
		<div class="card mb-4 integration-card veemac">
			<div
				class="card-header d-flex justify-content-between align-items-center"
			>
				<div>
					<h2 class="h5 mb-0">VeeMac</h2>
				</div>
				<img
					src="https://via.placeholder.com/100x40?text=VeeMac"
					alt="VeeMac Logo"
					height="40"
				/>
			</div>
			<div class="card-body">
				<div class="table-responsive mb-3">
					<table class="table table-borderless">
						<tbody>
							<tr>
								<td width="30%"><strong>Username</strong></td>
								<td>mosquito_district21</td>
							</tr>
							<tr>
								<td><strong>Password</strong></td>
								<td>••••••••••••</td>
							</tr>
							<tr>
								<td><strong>Last Synchronization</strong></td>
								<td>December 6, 2025 at 11:15 PM (Yesterday)</td>
							</tr>
							<tr>
								<td><strong>Synchronization Status</strong></td>
								<td>
									<span class="status-inactive">
										<i class="bi bi-x-circle-fill me-1"></i> Inactive (Manual
										sync only)
									</span>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="d-flex gap-2">
					<button
						class="btn btn-success"
						data-bs-toggle="modal"
						data-bs-target="#veemacModal"
					>
						<i class="bi bi-pencil-square me-2"></i>Edit Credentials
					</button>
					<button class="btn btn-outline-danger">
						<i class="bi bi-trash me-2"></i>Remove Integration
					</button>
				</div>
			</div>
		</div>
	</div>

	<!-- VectorSurv Edit Token Modal -->
	<div
		class="modal fade"
		id="vectorsurvModal"
		tabindex="-1"
		aria-labelledby="vectorsurvModalLabel"
		aria-hidden="true"
	>
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="vectorsurvModalLabel">
						Edit VectorSurv API Token
					</h5>
					<button
						type="button"
						class="btn-close"
						data-bs-dismiss="modal"
						aria-label="Close"
					></button>
				</div>
				<div class="modal-body">
					<form>
						<div class="mb-3">
							<label for="vectorsurvToken" class="form-label">API Token</label>
							<input
								type="text"
								class="form-control"
								id="vectorsurvToken"
								value="vs_9f72b5e3c8a1d492f6b7e54321098c11d"
							/>
							<div class="form-text">
								You can find this token in your VectorSurv account settings.
							</div>
						</div>
						<div class="mb-3 form-check">
							<input
								type="checkbox"
								class="form-check-input"
								id="vectorsurvSyncCheck"
								checked
							/>
							<label class="form-check-label" for="vectorsurvSyncCheck"
								>Enable automatic synchronization</label
							>
						</div>
						<div class="mb-3">
							<label for="vectorsurvSyncTime" class="form-label"
								>Sync Time</label
							>
							<input
								type="time"
								class="form-control"
								id="vectorsurvSyncTime"
								value="02:00"
							/>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button
						type="button"
						class="btn btn-secondary"
						data-bs-dismiss="modal"
					>
						Cancel
					</button>
					<button type="button" class="btn btn-success">Save Changes</button>
				</div>
			</div>
		</div>
	</div>

	<!-- VeeMac Edit Credentials Modal -->
	<div
		class="modal fade"
		id="veemacModal"
		tabindex="-1"
		aria-labelledby="veemacModalLabel"
		aria-hidden="true"
	>
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="veemacModalLabel">
						Edit VeeMac Credentials
					</h5>
					<button
						type="button"
						class="btn-close"
						data-bs-dismiss="modal"
						aria-label="Close"
					></button>
				</div>
				<div class="modal-body">
					<form>
						<div class="mb-3">
							<label for="veemacUsername" class="form-label">Username</label>
							<input
								type="text"
								class="form-control"
								id="veemacUsername"
								value="mosquito_district21"
							/>
						</div>
						<div class="mb-3">
							<label for="veemacPassword" class="form-label">Password</label>
							<input
								type="password"
								class="form-control"
								id="veemacPassword"
								value="password123"
							/>
						</div>
						<div class="mb-3 form-check">
							<input
								type="checkbox"
								class="form-check-input"
								id="veemacSyncCheck"
							/>
							<label class="form-check-label" for="veemacSyncCheck"
								>Enable automatic synchronization</label
							>
						</div>
						<div class="mb-3">
							<label for="veemacSyncFrequency" class="form-label"
								>Sync Frequency</label
							>
							<select class="form-select" id="veemacSyncFrequency" disabled>
								<option value="daily">Daily</option>
								<option value="weekly">Weekly</option>
								<option value="hourly">Hourly</option>
							</select>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button
						type="button"
						class="btn btn-secondary"
						data-bs-dismiss="modal"
					>
						Cancel
					</button>
					<button type="button" class="btn btn-danger">Save Changes</button>
				</div>
			</div>
		</div>
	</div>
{{ end }}