package adminview

import (
	"git.haelnorr.com/h/oslstats/internal/db"
	"fmt"
	"time"
)

templ AuditLogsList(logs *db.List[db.AuditLog], users []*db.User, actions []string, resourceTypes []string) {
	<div class="space-y-4">
		<!-- Header -->
		<div class="flex justify-between items-center">
			<h1 class="text-2xl font-bold text-text">Audit Logs</h1>
		</div>
		<!-- Filters -->
		<div class="bg-surface0 border border-surface1 rounded-lg p-4">
			<form
				id="audit-filters-form"
				hx-post="/admin/audit/filter"
				hx-target="#audit-results"
				hx-trigger="change from:select, change from:input delay:500ms"
				class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
			>
				<!-- User Filter -->
				<div>
					<label class="block text-sm font-medium text-subtext0 mb-1">User</label>
					<select
						name="user_id"
						class="w-full bg-mantle border border-surface1 rounded px-3 py-2 text-text focus:outline-none focus:border-blue"
					>
						<option value="">All Users</option>
						for _, user := range users {
							<option value={ fmt.Sprintf("%d", user.ID) }>{ user.Username }</option>
						}
					</select>
				</div>
				<!-- Action Filter -->
				<div>
					<label class="block text-sm font-medium text-subtext0 mb-1">Action</label>
					<select
						name="action"
						class="w-full bg-mantle border border-surface1 rounded px-3 py-2 text-text focus:outline-none focus:border-blue"
					>
						<option value="">All Actions</option>
						for _, action := range actions {
							<option value={ action }>{ action }</option>
						}
					</select>
				</div>
				<!-- Resource Type Filter -->
				<div>
					<label class="block text-sm font-medium text-subtext0 mb-1">Resource Type</label>
					<select
						name="resource_type"
						class="w-full bg-mantle border border-surface1 rounded px-3 py-2 text-text focus:outline-none focus:border-blue"
					>
						<option value="">All Resource Types</option>
						for _, rt := range resourceTypes {
							<option value={ rt }>{ rt }</option>
						}
					</select>
				</div>
				<!-- Result Filter -->
				<div>
					<label class="block text-sm font-medium text-subtext0 mb-1">Result</label>
					<select
						name="result"
						class="w-full bg-mantle border border-surface1 rounded px-3 py-2 text-text focus:outline-none focus:border-blue"
					>
						<option value="">All Results</option>
						<option value="success">Success</option>
						<option value="denied">Denied</option>
						<option value="error">Error</option>
					</select>
				</div>
				<!-- Start Date Filter -->
				<div>
					<label class="block text-sm font-medium text-subtext0 mb-1">Start Date</label>
					<input
						type="date"
						name="start_date"
						class="w-full bg-mantle border border-surface1 rounded px-3 py-2 text-text focus:outline-none focus:border-blue"
					/>
				</div>
				<!-- End Date Filter -->
				<div>
					<label class="block text-sm font-medium text-subtext0 mb-1">End Date</label>
					<input
						type="date"
						name="end_date"
						class="w-full bg-mantle border border-surface1 rounded px-3 py-2 text-text focus:outline-none focus:border-blue"
					/>
				</div>
				<!-- Clear Filters Button -->
				<div class="md:col-span-2 lg:col-span-3">
					<button
						type="button"
						onclick="document.getElementById('audit-filters-form').reset(); htmx.trigger('#audit-filters-form', 'change')"
						class="px-4 py-2 bg-surface1 hover:bg-surface2 text-text rounded font-medium transition hover:cursor-pointer"
					>
						Clear Filters
					</button>
				</div>
			</form>
		</div>
		<!-- Audit logs results container -->
		<div id="audit-results">
			@AuditLogsResults(logs)
		</div>
	</div>
	<!-- Modal container for detail view -->
	<div id="modal-container"></div>
}

templ AuditLogsResults(logs *db.List[db.AuditLog]) {
	if len(logs.Items) == 0 {
		<div class="bg-mantle border border-surface1 rounded-lg p-8 text-center">
			<p class="text-subtext0 text-lg">No audit logs found</p>
		</div>
	} else {
			<div class="bg-surface0 border border-surface1 rounded-lg overflow-hidden">
				<div class="overflow-x-auto">
					<table class="w-full">
						<thead class="bg-mantle border-b border-surface1">
							<tr>
								<th class="px-4 py-3 text-left text-sm font-semibold text-text">Timestamp</th>
								<th class="px-4 py-3 text-left text-sm font-semibold text-text">User</th>
								<th class="px-4 py-3 text-left text-sm font-semibold text-text">Action</th>
								<th class="px-4 py-3 text-left text-sm font-semibold text-text">Resource</th>
								<th class="px-4 py-3 text-left text-sm font-semibold text-text">Resource ID</th>
								<th class="px-4 py-3 text-left text-sm font-semibold text-text">Result</th>
								<th class="px-4 py-3 text-left text-sm font-semibold text-text">Actions</th>
							</tr>
						</thead>
						<tbody class="divide-y divide-surface1">
							for _, log := range logs.Items {
								<tr class="hover:bg-surface1 transition-colors">
									<td class="px-4 py-3 text-sm text-subtext0 whitespace-nowrap">
										{ formatFullTimestamp(log.CreatedAt) }
									</td>
									<td class="px-4 py-3 text-sm font-medium text-text">
										if log.User != nil {
											{ log.User.Username }
										} else {
											<span class="text-subtext1 italic">Unknown</span>
										}
									</td>
									<td class="px-4 py-3 text-sm text-subtext0 font-mono">
										{ log.Action }
									</td>
									<td class="px-4 py-3 text-sm text-subtext0">
										{ log.ResourceType }
									</td>
									<td class="px-4 py-3 text-sm text-subtext0 font-mono">
										if log.ResourceID != nil {
											{ *log.ResourceID }
										} else {
											<span class="text-subtext1 italic">—</span>
										}
									</td>
									<td class="px-4 py-3 text-sm">
										@resultBadge(log.Result)
									</td>
									<td class="px-4 py-3 text-sm">
										<button
											hx-get={ fmt.Sprintf("/admin/audit/%d", log.ID) }
											hx-target="#modal-container"
											class="px-3 py-1 bg-blue hover:bg-blue/80 text-mantle rounded text-xs font-medium transition hover:cursor-pointer"
										>
											Details
										</button>
									</td>
								</tr>
							}
						</tbody>
					</table>
				</div>
			</div>
			<!-- Pagination -->
			{{
				totalPages := (logs.Total + logs.PageOpts.PerPage - 1) / logs.PageOpts.PerPage
				if logs.PageOpts.PerPage == 0 {
					totalPages = 1
				}
			}}
			if totalPages > 1 {
				<div class="flex justify-center gap-2 mt-4">
					if logs.PageOpts.Page > 1 {
						<button
							hx-post={ fmt.Sprintf("/admin/audit/filter?page=%d", logs.PageOpts.Page-1) }
							hx-target="#audit-results"
							hx-include="#audit-filters-form"
							class="px-4 py-2 bg-surface1 hover:bg-surface2 text-text rounded font-medium transition hover:cursor-pointer"
						>
							Previous
						</button>
					}
					<span class="px-4 py-2 text-subtext0">
						Page { fmt.Sprintf("%d", logs.PageOpts.Page) } of { fmt.Sprintf("%d", totalPages) }
					</span>
					if logs.PageOpts.Page < totalPages {
						<button
							hx-post={ fmt.Sprintf("/admin/audit/filter?page=%d", logs.PageOpts.Page+1) }
							hx-target="#audit-results"
							hx-include="#audit-filters-form"
							class="px-4 py-2 bg-surface1 hover:bg-surface2 text-text rounded font-medium transition hover:cursor-pointer"
						>
							Next
						</button>
					}
				</div>
			}
	}
}

templ resultBadge(result string) {
	{{ 
		var classes string
		switch result {
		case "success":
			classes = "px-2 py-0.5 bg-green/20 text-green rounded text-xs font-medium"
		case "denied":
			classes = "px-2 py-0.5 bg-yellow/20 text-yellow rounded text-xs font-medium"
		case "error":
			classes = "px-2 py-0.5 bg-red/20 text-red rounded text-xs font-medium"
		default:
			classes = "px-2 py-0.5 bg-surface1 text-subtext0 rounded text-xs font-medium"
		}
	}}
	<span class={ classes }>{ result }</span>
}

func formatFullTimestamp(unixTime int64) string {
	t := time.Unix(unixTime, 0)
	return t.Format("Jan 2, 2006 15:04:05")
}