package pages

import (
	"git.ma-al.com/goc_marek/zfs/internal/server/templates/components"
)

// AdminPage renders the main admin panel
templ AdminPage(username string) {
	@components.Layout("ZFS Backup Admin Panel", username) {
		<div class="max-w-7xl mx-auto px-6">
			@components.Header(username)
			
			<!-- Stats Grid -->
			<div id="stats-grid" class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
				@components.StatsCard("Clients", "Loading...")
				@components.StatsCard("Total Snapshots", "Loading...")
				@components.StatsCard("Total Storage", "Loading...")
			</div>
			
			<!-- Tabs -->
			<div class="flex gap-3 mb-8 flex-wrap">
				@components.TabButton("clients", "Clients", true)
				@components.TabButton("snapshots", "Snapshots", false)
				@components.TabButton("admins", "Admins", false)
			</div>
			
			<!-- Clients Tab -->
			<div id="clients-tab" class="animate-fade-in">
				<div class="bg-white dark:bg-slate-900/80 backdrop-blur-xl rounded-2xl border border-slate-200 dark:border-slate-700/50 overflow-hidden shadow-sm dark:shadow-none transition-colors duration-300">
					<div class="p-6 border-b border-slate-200 dark:border-slate-700/50 flex justify-between items-center">
						<h3 class="text-lg font-semibold text-slate-900 dark:text-white flex items-center gap-3">
							<div class="w-10 h-10 rounded-xl bg-violet-100 dark:bg-violet-500/20 flex items-center justify-center">
								<i class="fas fa-users text-violet-600 dark:text-violet-400"></i>
							</div>
							Clients
						</h3>
						<button 
							class="px-5 py-2.5 bg-gradient-to-r from-emerald-500 to-green-600 hover:from-emerald-400 hover:to-green-500 text-white rounded-xl transition-all duration-300 flex items-center gap-2 shadow-lg shadow-emerald-500/25"
							data-action="show-modal"
							data-modal="add-client-modal"
						>
							<i class="fas fa-plus"></i>
							Add Client
						</button>
					</div>
					<div class="p-6 overflow-x-auto">
						<table class="w-full">
							<thead>
								<tr class="border-b border-slate-200 dark:border-slate-700/50">
									<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Client ID</th>
									<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Storage Type</th>
									<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Quota</th>
									<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Used</th>
									<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Snapshots</th>
									<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Status</th>
									<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Actions</th>
								</tr>
							</thead>
							<tbody id="clients-table"></tbody>
						</table>
					</div>
				</div>
			</div>
			
			<!-- Snapshots Tab -->
			<div id="snapshots-tab" class="hidden animate-fade-in">
				<div class="bg-white dark:bg-slate-900/80 backdrop-blur-xl rounded-2xl border border-slate-200 dark:border-slate-700/50 overflow-hidden shadow-sm dark:shadow-none transition-colors duration-300">
					<div class="p-6 border-b border-slate-200 dark:border-slate-700/50 flex justify-between items-center">
						<h3 class="text-lg font-semibold text-slate-900 dark:text-white flex items-center gap-3">
							<div class="w-10 h-10 rounded-xl bg-violet-100 dark:bg-violet-500/20 flex items-center justify-center">
								<i class="fas fa-images text-violet-600 dark:text-violet-400"></i>
							</div>
							Snapshots
						</h3>
						<select id="snapshot-client-filter" class="px-4 py-2.5 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded-xl text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition-all duration-200 cursor-pointer">
							<option value="">All Clients</option>
						</select>
					</div>
					<div class="p-6 overflow-x-auto">
						<table class="w-full">
							<thead>
								<tr class="border-b border-slate-200 dark:border-slate-700/50">
									<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Client</th>
									<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Snapshot ID</th>
									<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Timestamp</th>
									<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Size</th>
									<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Type</th>
									<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Actions</th>
								</tr>
							</thead>
							<tbody id="snapshots-table"></tbody>
						</table>
					</div>
				</div>
			</div>
			
			<!-- Admins Tab -->
			<div id="admins-tab" class="hidden animate-fade-in">
				<div class="bg-white dark:bg-slate-900/80 backdrop-blur-xl rounded-2xl border border-slate-200 dark:border-slate-700/50 overflow-hidden shadow-sm dark:shadow-none transition-colors duration-300">
					<div class="p-6 border-b border-slate-200 dark:border-slate-700/50 flex justify-between items-center">
						<h3 class="text-lg font-semibold text-slate-900 dark:text-white flex items-center gap-3">
							<div class="w-10 h-10 rounded-xl bg-violet-100 dark:bg-violet-500/20 flex items-center justify-center">
								<i class="fas fa-user-shield text-violet-600 dark:text-violet-400"></i>
							</div>
							Admin Users
						</h3>
						<button 
							class="px-5 py-2.5 bg-gradient-to-r from-emerald-500 to-green-600 hover:from-emerald-400 hover:to-green-500 text-white rounded-xl transition-all duration-300 flex items-center gap-2 shadow-lg shadow-emerald-500/25"
							data-action="show-modal"
							data-modal="add-admin-modal"
						>
							<i class="fas fa-plus"></i>
							Add Admin
						</button>
					</div>
					<div class="p-6 overflow-x-auto">
						<table class="w-full">
							<thead>
								<tr class="border-b border-slate-200 dark:border-slate-700/50">
									<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">ID</th>
									<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Username</th>
									<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Role</th>
									<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Created</th>
									<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Actions</th>
								</tr>
							</thead>
							<tbody id="admins-table"></tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		
		<!-- Modals -->
		@AddClientModal()
		@EditClientModal()
		@AddAdminModal()
		@ChangePasswordModal()
		@ClientPasswordModal()
		
		@AdminScripts()
	}
}

// AddClientModal renders the add client modal
templ AddClientModal() {
	@components.Modal("add-client-modal", "Add New Client") {
		<form id="add-client-form">
			@components.FormInput("new-client-id", "Client ID", "text", "", true)
			@components.FormInput("new-client-apikey", "API Key", "text", "", true)
			@components.FormSelect("new-client-storage", "Storage Type", []components.SelectOption{
				{Value: "s3", Label: "S3", Selected: true},
				{Value: "local", Label: "Local ZFS", Selected: false},
			})
			@components.FormInput("new-client-dataset", "Target Dataset (for local storage)", "text", "backup/client1", false)
			@components.FormInput("new-client-quota", "Quota (GB)", "number", "100", true)
			@components.FormCheckbox("new-client-enabled", "Enabled", true)
			
			<h4 class="text-slate-500 dark:text-slate-400 text-sm mt-6 mb-4 flex items-center gap-2 font-medium">
				<i class="fas fa-clock-rotate-left text-violet-500 dark:text-violet-400"></i>
				Rotation Policy
			</h4>
			<div class="grid grid-cols-2 gap-4">
				@components.FormInput("new-client-hourly", "Keep Hourly", "number", "24", false)
				@components.FormInput("new-client-daily", "Keep Daily", "number", "7", false)
				@components.FormInput("new-client-weekly", "Keep Weekly", "number", "4", false)
				@components.FormInput("new-client-monthly", "Keep Monthly", "number", "12", false)
			</div>
			
			<button type="submit" class="w-full mt-6 px-4 py-3.5 bg-gradient-to-r from-emerald-500 to-green-600 hover:from-emerald-400 hover:to-green-500 text-white rounded-xl transition-all duration-300 flex items-center justify-center gap-2 shadow-lg shadow-emerald-500/25 font-medium">
				<i class="fas fa-plus"></i>
				Create Client
			</button>
		</form>
	}
}

// EditClientModal renders the edit client modal
templ EditClientModal() {
	@components.Modal("edit-client-modal", "Edit Client") {
		<form id="edit-client-form">
			<input type="hidden" id="edit-client-id"/>
			@components.FormInput("edit-client-apikey", "New API Key (leave empty to keep current)", "text", "Leave empty to keep current", false)
			@components.FormSelect("edit-client-storage", "Storage Type", []components.SelectOption{
				{Value: "s3", Label: "S3", Selected: true},
				{Value: "local", Label: "Local ZFS", Selected: false},
			})
			@components.FormInput("edit-client-dataset", "Target Dataset", "text", "", false)
			@components.FormInput("edit-client-quota", "Quota (GB)", "number", "", true)
			@components.FormCheckbox("edit-client-enabled", "Enabled", false)
			
			<h4 class="text-slate-500 dark:text-slate-400 text-sm mt-6 mb-4 flex items-center gap-2 font-medium">
				<i class="fas fa-clock-rotate-left text-violet-500 dark:text-violet-400"></i>
				Rotation Policy
			</h4>
			<div class="grid grid-cols-2 gap-4">
				@components.FormInput("edit-client-hourly", "Keep Hourly", "number", "", false)
				@components.FormInput("edit-client-daily", "Keep Daily", "number", "", false)
				@components.FormInput("edit-client-weekly", "Keep Weekly", "number", "", false)
				@components.FormInput("edit-client-monthly", "Keep Monthly", "number", "", false)
			</div>
			
			<button type="submit" class="w-full mt-6 px-4 py-3.5 bg-gradient-to-r from-violet-600 to-fuchsia-600 hover:from-violet-500 hover:to-fuchsia-500 text-white rounded-xl transition-all duration-300 flex items-center justify-center gap-2 shadow-lg shadow-violet-500/25 font-medium">
				<i class="fas fa-save"></i>
				Update Client
			</button>
		</form>
	}
}

// AddAdminModal renders the add admin modal
templ AddAdminModal() {
	@components.Modal("add-admin-modal", "Add New Admin") {
		<form id="add-admin-form">
			@components.FormInput("new-admin-username", "Username", "text", "", true)
			@components.FormInput("new-admin-password", "Password", "password", "", true)
			@components.FormSelect("new-admin-role", "Role", []components.SelectOption{
				{Value: "admin", Label: "Admin", Selected: true},
			})
			<button type="submit" class="w-full mt-6 px-4 py-3.5 bg-gradient-to-r from-emerald-500 to-green-600 hover:from-emerald-400 hover:to-green-500 text-white rounded-xl transition-all duration-300 flex items-center justify-center gap-2 shadow-lg shadow-emerald-500/25 font-medium">
				<i class="fas fa-plus"></i>
				Create Admin
			</button>
		</form>
	}
}

// ChangePasswordModal renders the change password modal for admins
templ ChangePasswordModal() {
	@components.Modal("change-password-modal", "Change Password") {
		<form id="change-password-form">
			<input type="hidden" id="change-password-admin-id"/>
			@components.FormInput("change-password-username", "Admin Username", "text", "", true)
			@components.FormInput("change-password-new", "New Password", "password", "", true)
			@components.FormInput("change-password-confirm", "Confirm New Password", "password", "", true)
			<button type="submit" class="w-full mt-6 px-4 py-3.5 bg-gradient-to-r from-violet-600 to-fuchsia-600 hover:from-violet-500 hover:to-fuchsia-500 text-white rounded-xl transition-all duration-300 flex items-center justify-center gap-2 shadow-lg shadow-violet-500/25 font-medium">
				<i class="fas fa-key"></i>
				Change Password
			</button>
		</form>
	}
}

// ClientPasswordModal renders the set client API key modal
templ ClientPasswordModal() {
	@components.Modal("client-password-modal", "Set Client API Key") {
		<form id="client-password-form">
			<input type="hidden" id="client-password-client-id"/>
			@components.FormInput("client-password-client-name", "Client ID", "text", "", true)
			@components.FormInput("client-password-new", "New API Key", "text", "", true)
			@components.FormInput("client-password-confirm", "Confirm API Key", "text", "", true)
			<button type="submit" class="w-full mt-6 px-4 py-3.5 bg-gradient-to-r from-violet-600 to-fuchsia-600 hover:from-violet-500 hover:to-fuchsia-500 text-white rounded-xl transition-all duration-300 flex items-center justify-center gap-2 shadow-lg shadow-violet-500/25 font-medium">
				<i class="fas fa-key"></i>
				Set API Key
			</button>
		</form>
	}
}

// AdminScripts renders the JavaScript for the admin panel
templ AdminScripts() {
	<script src="/admin/static/admin.js"></script>
	<script>initTheme();</script>
}