package templates

import "fmt"

templ ConfigModal(config ConfigData, frequencies []UpdateFrequency) {
	<div id="contact" class="modal-container">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Configuration Settings</h5>
				<button
					type="button"
					class="btn-close"
					@click="$el.closest('dialog').close()"
					aria-label="Close"
				></button>
			</div>
			<form
				x-target="config-status"
				method="post"
				action="/config"
				@ajax:success="$el.closest('dialog').close()"
				x-data="{ saving: false }"
				@ajax:before="saving = true"
				@ajax:after="saving = false"
				@ajax:error="saving = false"
			>
				<div class="modal-body">
					<div class="mb-3">
						<label for="api-token" class="form-label fw-semibold">
							<i class="bi bi-key-fill text-primary me-2"></i>
							Cloudflare API Token
						</label>
						<input
							type="password"
							class="form-control"
							id="api-token"
							name="api_token"
							value={ config.ApiToken }
							placeholder="Enter your Cloudflare API token"
							required
						/>
						<div class="form-text">
							<i class="bi bi-info-circle me-1"></i>
							Create a token with <code>Zone.DNS:Edit</code> permissions in
							the Cloudflare dashboard.
						</div>
					</div>
					<div class="mb-3">
						<label for="zone-id-input" class="form-label fw-semibold">
							<i class="bi bi-globe text-info me-2"></i>
							Zone ID
						</label>
						<input
							type="text"
							class="form-control"
							id="zone-id-input"
							name="zone_id"
							value={ config.ZoneID }
							placeholder="e.g., 1234567890abcdef1234567890abcdef"
							required
						/>
						<div class="form-text">
							<i class="bi bi-info-circle me-1"></i>
							Found in the Cloudflare dashboard under your domain's overview page.
						</div>
					</div>
					<div class="mb-3">
						<label for="domain-input" class="form-label fw-semibold">
							<i class="bi bi-link-45deg text-success me-2"></i>
							Domain
						</label>
						<input
							type="text"
							class="form-control"
							id="domain-input"
							name="domain"
							value={ config.Domain }
							placeholder="e.g., example.com"
							required
						/>
					</div>
					<div class="mb-3">
						<label for="update-period" class="form-label fw-semibold">
							<i class="bi bi-clock text-warning me-2"></i>
							Update Frequency
						</label>
						<select class="form-select" id="update-period" name="update_period">
							for _, freq := range frequencies {
								<option value={ freq.Value } selected?={ freq.Value == config.UpdatePeriod }>
									{ freq.Label }
								</option>
							}
						</select>
					</div>
				</div>
				<div class="modal-footer">
					<button
						type="button"
						class="btn btn-secondary"
						@click="$el.closest('dialog').close()"
					>
						<i class="bi bi-x-lg me-1"></i>
						Cancel
					</button>
					<button
						type="submit"
						class="btn btn-primary"
						:disabled="saving"
					>
						<template x-if="!saving">
							<span class="d-flex align-items-center">
								<i class="bi bi-check-lg me-2"></i>
								Save Configuration
							</span>
						</template>
						<template x-if="saving">
							<span class="d-flex align-items-center">
								<span class="spinner-border spinner-border-sm me-2"></span>
								Saving...
							</span>
						</template>
					</button>
				</div>
			</form>
		</div>
	</div>
}

templ RecordForm(title, recordID, domain string, record DNSRecord) {
	<div id="contact" class="modal-container">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">
					<i class="bi bi-dns text-primary me-2"></i>
					{ title }
				</h5>
				<button
					type="button"
					class="btn-close"
					@click="$el.closest('dialog').close()"
					aria-label="Close"
				></button>
			</div>
			<div id="error-message" class="alert alert-danger d-none mx-3 mt-3" role="alert">
				<i class="bi bi-exclamation-triangle-fill me-2"></i>
				<span class="error-text"></span>
			</div>
			<form
				if recordID != "" {
					method="put"
					action={ templ.URL(fmt.Sprintf("/records/%s", recordID)) }
				} else {
					method="post"
					action="/records"
				}
				x-target="dns-records-table"
				x-target.error="none"
				@ajax:success="$el.closest('dialog').close()"
				x-data="{ saving: false }"
				@ajax:before="saving = true"
				@ajax:after="saving = false"
				@ajax:error="saving = false"
			>
				<div class="modal-body">
					<div class="row">
						<div class="col-md-8 mb-3">
							<label for="record-name" class="form-label fw-semibold">
								<i class="bi bi-tag text-info me-2"></i>
								Record Name
							</label>
							<div class="input-group">
								<input
									type="text"
									class="form-control"
									id="record-name"
									name="name"
									placeholder="subdomain"
									value={ getRecordName(record.Name, domain) }
									required
								/>
								<span class="input-group-text bg-light text-muted">.{ domain }</span>
							</div>
							<div class="form-text">
								<i class="bi bi-info-circle me-1"></i>
								Use <code>{ "@" }</code> { "for" } the root domain
							</div>
						</div>
						<div class="col-md-4 mb-3">
							<label for="record-type" class="form-label fw-semibold">
								<i class="bi bi-diagram-3 text-success me-2"></i>
								Type
							</label>
							<select
								class="form-select"
								id="record-type"
								name="type"
								onchange="toggleMyIPOption()"
							>
								<option value="A" selected?={ record.Type == "A" }>A (IPv4)</option>
								<option value="AAAA" selected?={ record.Type == "AAAA" }>AAAA (IPv6)</option>
								<option value="CNAME" selected?={ record.Type == "CNAME" }>CNAME</option>
								<option value="TXT" selected?={ record.Type == "TXT" }>TXT</option>
								<option value="MX" selected?={ record.Type == "MX" }>MX</option>
							</select>
						</div>
					</div>
					<div class="mb-3" id="content-group">
						<label for="record-content" class="form-label fw-semibold">
							<i class="bi bi-file-text text-warning me-2"></i>
							Content
						</label>
						<input
							type="text"
							class="form-control"
							id="record-content"
							name="content"
							value={ record.Content }
							placeholder="Enter the record value"
							required
						/>
					</div>
					<div class="mb-3 form-check bg-light p-3 rounded" id="use-my-ip-group" style="display: none;">
						<input
							type="checkbox"
							class="form-check-input"
							id="use-my-ip"
							name="use_my_ip"
							onchange="toggleContentField()"
						/>
						<label class="form-check-label fw-semibold" for="use-my-ip">
							<i class="bi bi-geo-alt text-primary me-2"></i>
							Use my current IP address
						</label>
						<div class="form-text">
							Automatically use your current public IP address
						</div>
					</div>
					<div class="row">
						<div class="col-md-6 mb-3">
							<label for="record-ttl" class="form-label fw-semibold">
								<i class="bi bi-clock-history text-secondary me-2"></i>
								TTL (Time to Live)
							</label>
							<select class="form-select" id="record-ttl" name="ttl">
								<option value="1" selected?={ record.TTL == 1 }>Auto</option>
								<option value="120" selected?={ record.TTL == 120 }>2 minutes</option>
								<option value="300" selected?={ record.TTL == 300 }>5 minutes</option>
								<option value="600" selected?={ record.TTL == 600 }>10 minutes</option>
								<option value="1800" selected?={ record.TTL == 1800 }>30 minutes</option>
								<option value="3600" selected?={ record.TTL == 3600 }>1 hour</option>
								<option value="7200" selected?={ record.TTL == 7200 }>2 hours</option>
								<option value="18000" selected?={ record.TTL == 18000 }>5 hours</option>
								<option value="43200" selected?={ record.TTL == 43200 }>12 hours</option>
								<option value="86400" selected?={ record.TTL == 86400 }>1 day</option>
							</select>
						</div>
						<div class="col-md-6 mb-3 d-flex align-items-end">
							<div class="form-check bg-light p-3 rounded w-100">
								<input
									type="checkbox"
									class="form-check-input"
									id="record-proxied"
									name="proxied"
									checked?={ record.Proxied }
								/>
								<label class="form-check-label fw-semibold" for="record-proxied">
									<i class="bi bi-shield-check text-success me-2"></i>
									Proxied through Cloudflare
								</label>
								<div class="form-text">
									Enable Cloudflare's proxy and security features
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button
						type="button"
						class="btn btn-secondary"
						@click="$el.closest('dialog').close()"
					>
						<i class="bi bi-x-lg me-1"></i>
						Cancel
					</button>
					<button
						type="submit"
						class="btn btn-primary"
						:disabled="saving"
					>
						<template x-if="!saving">
							<span class="d-flex align-items-center">
								<i class="bi bi-check-lg me-2"></i>
								if recordID != "" {
									Update Record
								} else {
									Create Record
								}
							</span>
						</template>
						<template x-if="saving">
							<span class="d-flex align-items-center">
								<span class="spinner-border spinner-border-sm me-2"></span>
								if recordID != "" {
									Updating...
								} else {
									Creating...
								}
							</span>
						</template>
					</button>
				</div>
			</form>
		</div>
	</div>
}