package views

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

templ AgentDetail(agent *store.AgentStats) {
	@BaseLayout(agent.Hostname, agentDetailContent(agent))
}

templ AgentDetailContent(agent *store.AgentStats) {
	@agentDetailContent(agent)
}

templ agentDetailContent(agent *store.AgentStats) {
	<a href="/" class="back-link">← Back to Dashboard</a>

	<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
		<h2 style="margin: 0;">{ agent.Hostname }</h2>
		@AgentStatusBadge(agent.LastSeen)
	</div>
	
	<!-- CPU Usage Card -->
	<div class="grid" style="grid-template-columns: 1fr;">
		<div class="card">
			<div class="card-title">CPU Usage</div>
			<div id="cpu-stats" hx-get={ templ.SafeURL("/api/agents/" + agent.ID + "/stats") } hx-trigger="stats-update" hx-swap="innerHTML">
				<div class="metric-value" style="font-size: 2rem; margin: 1rem 0;">
					{ FormatPercent(agent.CPUUsage) }
				</div>
				<div class="progress-bar">
					<div class="progress-fill" class={ "progress-fill", calcProgressClass(agent.CPUUsage/100) } style={ fmt.Sprintf("width: %.1f%%", agent.CPUUsage) }></div>
				</div>
				<div style="margin-top: 1rem; font-size: 0.875rem; color: #94a3b8;">
					Last updated: { FormatTime(agent.LastSeen) }
				</div>
			</div>
		</div>
	</div>
	
	<!-- Memory and Disk Usage Cards -->
	<div class="grid" style="margin-top: 1.5rem;">
		<div class="card">
			<div class="card-title">Memory Usage</div>
			@UsageBar("RAM", agent.RAMUsage, agent.RAMTotal)
		</div>
		<div class="card">
			<div class="card-title">Disk Usage</div>
			@UsageBar("Disk", agent.DiskUsage, agent.DiskTotal)
		</div>
	</div>
	
	<!-- Agent Information and Settings -->
	<div class="card" style="margin-top: 1.5rem;">
		<div class="card-title">Agent Information</div>
		<div class="metric-row">
			<span class="metric-label">Agent ID</span>
			<span class="metric-value" style="font-family: monospace; font-size: 0.875rem;">{ agent.ID }</span>
		</div>
		<div class="metric-row">
			<span class="metric-label">Last Seen</span>
			<span class="metric-value">{ agent.LastSeen.Format("2006-01-02 15:04:05") }</span>
		</div>
	</div>
	
	<!-- Hostname Settings -->
	<div class="card" style="margin-top: 1.5rem;">
		<div class="card-title">Settings</div>
		<form method="POST" action={ templ.SafeURL(fmt.Sprintf("/agents/%s/hostname", agent.ID)) } style="display: flex; flex-direction: column; gap: 1rem;">
			<div style="display: flex; flex-direction: column; gap: 0.5rem;">
				<label for="hostname" style="font-size: 0.875rem; font-weight: 500; color: #cbd5e1;">
					Hostname
				</label>
				<input 
					type="text" 
					id="hostname" 
					name="hostname" 
					value={ agent.Hostname }
					required
					style="padding: 0.5rem 0.75rem; background-color: #1e293b; border: 1px solid #475569; border-radius: 0.375rem; color: #e2e8f0; font-size: 0.875rem;"
				/>
			</div>
			<button type="submit" class="btn btn-primary" style="align-self: flex-start;">
				Update Hostname
			</button>
		</form>
	</div>
	
	<!-- Danger Zone -->
	<div class="card" style="margin-top: 1.5rem; border-left: 3px solid #ef4444;">
		<div class="card-title" style="color: #ef4444;">Danger Zone</div>
		<p style="margin: 0 0 1rem 0; color: #94a3b8; font-size: 0.875rem;">
			Deleting this agent will remove all its data and history.
		</p>
		<form method="POST" action={ templ.SafeURL(fmt.Sprintf("/api/agents/%s/delete", agent.ID)) } style="margin: 0;" onsubmit="return confirm('Are you sure you want to remove this agent? This action cannot be undone.');">
			<button type="submit" class="btn btn-danger">Delete Agent</button>
		</form>
	</div>
}