package templates

// IndexProps contains the properties for the Index component
type IndexProps struct {
	Title string
}

// Index is the main page component
templ Index(props IndexProps) {
	@Layout(props.Title) {
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-md-10">
					<div class="d-flex justify-content-between align-items-center mb-4">
						<h1>{ props.Title }</h1>
						<div class="current-ip d-flex align-items-center">
							<span class="me-2">Current IP:</span>
							<span id="current-ip" class="fw-bold"></span>
							<button
								id="refresh-ip"
								class="btn btn-sm btn-outline-secondary ms-2"
								title="Refresh current IP"
							>
								<i class="bi bi-arrow-clockwise"></i>
							</button>
						</div>
					</div>
					<!-- Configuration Warning -->
					<div
						id="config-warning"
						class="alert alert-warning config-warning"
						style="display: none"
					>
						<h4>Configuration Required</h4>
						<p>
							Please configure your Cloudflare API credentials to manage your
							DNS records.
						</p>
						<button
							class="btn btn-primary"
							data-bs-toggle="modal"
							data-bs-target="#configModal"
						>
							Configure Now
						</button>
					</div>
					<!-- Configuration Status -->
					<div id="config-status" class="card mb-4" style="display: none">
						<div
							class="card-header d-flex justify-content-between align-items-center"
						>
							<h5 class="mb-0">Configuration</h5>
							<button
								class="btn btn-sm btn-outline-primary"
								data-bs-toggle="modal"
								data-bs-target="#configModal"
							>
								Edit
							</button>
						</div>
						<div class="card-body">
							<div class="row">
								<div class="col-md-4">
									<strong>Domain:</strong> <span id="domain-name">mz.uy</span>
								</div>
								<div class="col-md-4">
									<strong>Zone ID:</strong> <span id="zone-id"></span>
								</div>
								<div class="col-md-4">
									<strong>IP Update Schedule:</strong>
									<span id="update-schedule"></span>
								</div>
							</div>
						</div>
					</div>
					<!-- DNS Records Section -->
					<div id="dns-records-section" style="display: none">
						<div class="card">
							<div
								class="card-header d-flex justify-content-between align-items-center"
							>
								<h5 class="mb-0">DNS Records</h5>
								<div>
									<button
										id="update-all-records"
										class="btn btn-sm btn-success me-2"
									>
										<i class="bi bi-arrow-repeat"></i> Update All to Current IP
									</button>
									<button
										class="btn btn-sm btn-primary"
										data-bs-toggle="modal"
										data-bs-target="#recordModal"
									>
										<i class="bi bi-plus-lg"></i> Add Record
									</button>
								</div>
							</div>
							<div class="card-body p-0">
								<div class="table-responsive">
									<table class="table table-striped table-hover mb-0">
										<thead>
											<tr>
												<th>Type</th>
												<th>Name</th>
												<th>Content</th>
												<th>TTL</th>
												<th>Proxied</th>
												<th>Actions</th>
											</tr>
										</thead>
										<tbody id="dns-records">
											<!-- DNS records will be inserted here -->
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
					<!-- Loading Indicator -->
					<div id="loading" class="text-center my-5">
						<div class="spinner-border" role="status">
							<span class="visually-hidden">Loading...</span>
						</div>
						<p class="mt-2">Loading...</p>
					</div>
				</div>
			</div>
		</div>
		@ConfigModal()
		@RecordModal()
		<!-- Toast container for notifications -->
		<div class="toast-container"></div>
		<script src="/assets/js/app.js"></script>
	}
}