package views

import (
	"nerd-monitor/internal/store"
)

templ Dashboard(agents []*store.AgentStats, staleAgents []*store.AgentStats) {
	@BaseLayout("Dashboard", dashboardContent(agents, staleAgents))
}

templ DashboardContent(agents []*store.AgentStats, staleAgents []*store.AgentStats) {
	@dashboardContent(agents, staleAgents)
}

templ dashboardContent(agents []*store.AgentStats, staleAgents []*store.AgentStats) {
	<h2 style="margin-bottom: 1rem;">Agent Status Overview</h2>

		@StaleAgentAlert(len(staleAgents), nil)

		<div id="agent-table-container" hx-get="/api/dashboard/table" hx-trigger="stats-update" hx-swap="innerHTML">
			if len(agents) == 0 {
				<div class="alert alert-info">
					<strong>ℹ️ No agents connected</strong>
					<p style="margin-top: 0.5rem; font-size: 0.875rem;">
						Start an agent to see its statistics appear here.
					</p>
				</div>
			} else {
				<div class="card">
					<div class="card-title">Active Agents</div>
					<table>
						<thead>
							<tr>
								<th>Hostname</th>
								<th>CPU Usage</th>
								<th>Memory</th>
								<th>Disk</th>
								<th>Last Seen</th>
							</tr>
						</thead>
						<tbody>
							for _, agent := range agents {
								@AgentRow(agent.ID, agent.Hostname, agent.CPUUsage, agent.RAMUsage, agent.RAMTotal, agent.DiskUsage, agent.DiskTotal, agent.LastSeen)
							}
						</tbody>
					</table>
				</div>
			}
		</div>
	
		if len(staleAgents) > 0 {
			<div class="card" style="margin-top: 2rem; border-color: #d97706;">
				<div class="card-title" style="color: #f59e0b;">
					Stale Agents ({ len(staleAgents) })
				</div>
				<form method="POST" action="/api/agents/remove-stale" style="margin-top: 1rem;">
					<table>
						<thead>
							<tr>
								<th style="width: 30px;"><input type="checkbox" id="select-all" onchange="toggleAll(this)" /></th>
								<th>Hostname</th>
								<th>Last Seen</th>
							</tr>
						</thead>
						<tbody>
							for _, agent := range staleAgents {
								<tr>
									<td><input type="checkbox" name="agent_ids" value={ agent.ID } class="agent-checkbox" /></td>
									<td>{ agent.Hostname }</td>
									<td class="timestamp">{ FormatTime(agent.LastSeen) }</td>
								</tr>
							}
						</tbody>
					</table>
					<div class="btn-group">
						<button type="submit" class="btn btn-danger" style="margin-top: 1rem;">Remove Selected</button>
					</div>
				</form>
			</div>
		}
	<script>
	function toggleAll(checkbox) {
		const checkboxes = document.querySelectorAll('.agent-checkbox');
		checkboxes.forEach(cb => cb.checked = checkbox.checked);
	}
	</script>
}
