<script lang="ts">
	import { onMount } from 'svelte';

	interface AuthSettings {
		auth_mode: string;
		oidc_client_id: string;
		oidc_client_secret: string;
		oidc_issuer_url: string;
		oidc_redirect_url: string;
	}

	interface User {
		id: string;
		username: string;
		email: string;
		role: string;
		created_at: string;
	}

	let settings = $state<AuthSettings>({
		auth_mode: 'local',
		oidc_client_id: '',
		oidc_client_secret: '',
		oidc_issuer_url: '',
		oidc_redirect_url: ''
	});
	let users = $state<User[]>([]);
	let saving = $state(false);
	let message = $state('');
	let error = $state('');

	// New user form
	let newUsername = $state('');
	let newPassword = $state('');
	let newEmail = $state('');
	let newRole = $state('viewer');

	function getToken(): string {
		return localStorage.getItem('auth_token') ?? '';
	}

	function authHeaders(): Record<string, string> {
		return {
			'Content-Type': 'application/json',
			Authorization: `Bearer ${getToken()}`
		};
	}

	onMount(async () => {
		await Promise.all([loadSettings(), loadUsers()]);
	});

	async function loadSettings() {
		try {
			const res = await fetch('/api/auth/settings', { headers: authHeaders() });
			const envelope = await res.json();
			if (envelope.success) {
				settings = envelope.data;
			}
		} catch (err: unknown) {
			error = err instanceof Error ? err.message : 'Failed to load settings';
		}
	}

	async function loadUsers() {
		try {
			const res = await fetch('/api/auth/users', { headers: authHeaders() });
			const envelope = await res.json();
			if (envelope.success) {
				users = envelope.data ?? [];
			}
		} catch (err: unknown) {
			error = err instanceof Error ? err.message : 'Failed to load users';
		}
	}

	async function saveSettings() {
		saving = true;
		message = '';
		error = '';

		try {
			const res = await fetch('/api/auth/settings', {
				method: 'PUT',
				headers: authHeaders(),
				body: JSON.stringify(settings)
			});
			const envelope = await res.json();
			if (envelope.success) {
				message = 'Settings saved';
			} else {
				error = envelope.error ?? 'Failed to save';
			}
		} catch (err: unknown) {
			error = err instanceof Error ? err.message : 'Network error';
		} finally {
			saving = false;
		}
	}

	async function addUser() {
		if (!newUsername || !newPassword) {
			error = 'Username and password are required';
			return;
		}

		try {
			const res = await fetch('/api/auth/users', {
				method: 'POST',
				headers: authHeaders(),
				body: JSON.stringify({
					username: newUsername,
					password: newPassword,
					email: newEmail,
					role: newRole
				})
			});
			const envelope = await res.json();
			if (envelope.success) {
				newUsername = '';
				newPassword = '';
				newEmail = '';
				newRole = 'viewer';
				await loadUsers();
				message = 'User created';
			} else {
				error = envelope.error ?? 'Failed to create user';
			}
		} catch (err: unknown) {
			error = err instanceof Error ? err.message : 'Network error';
		}
	}

	async function deleteUser(id: string) {
		if (!confirm('Are you sure you want to delete this user?')) return;

		try {
			const res = await fetch(`/api/auth/users/${id}`, {
				method: 'DELETE',
				headers: authHeaders()
			});
			const envelope = await res.json();
			if (envelope.success) {
				await loadUsers();
				message = 'User deleted';
			} else {
				error = envelope.error ?? 'Failed to delete user';
			}
		} catch (err: unknown) {
			error = err instanceof Error ? err.message : 'Network error';
		}
	}
</script>

<div class="space-y-8">
	<div>
		<h1 class="text-2xl font-bold text-gray-900">Authentication Settings</h1>
		<p class="mt-1 text-sm text-gray-500">Configure authentication mode and manage users.</p>
	</div>

	{#if message}
		<div class="rounded-md bg-green-50 p-3 text-sm text-green-700">{message}</div>
	{/if}
	{#if error}
		<div class="rounded-md bg-red-50 p-3 text-sm text-red-700">{error}</div>
	{/if}

	<!-- Auth Mode Toggle -->
	<div class="rounded-lg border border-gray-200 bg-white p-6">
		<h2 class="text-lg font-semibold text-gray-900">Authentication Mode</h2>
		<div class="mt-4 flex gap-4">
			<label class="flex items-center gap-2">
				<input type="radio" bind:group={settings.auth_mode} value="local" class="text-indigo-600" />
				<span class="text-sm font-medium text-gray-700">Local (username/password)</span>
			</label>
			<label class="flex items-center gap-2">
				<input type="radio" bind:group={settings.auth_mode} value="oidc" class="text-indigo-600" />
				<span class="text-sm font-medium text-gray-700">OIDC (SSO)</span>
			</label>
		</div>
	</div>

	<!-- OIDC Configuration -->
	{#if settings.auth_mode === 'oidc'}
		<div class="rounded-lg border border-gray-200 bg-white p-6">
			<h2 class="text-lg font-semibold text-gray-900">OIDC Provider Configuration</h2>
			<div class="mt-4 space-y-4">
				<div>
					<label for="issuer" class="block text-sm font-medium text-gray-700">Issuer URL</label>
					<input
						id="issuer"
						type="url"
						bind:value={settings.oidc_issuer_url}
						placeholder="https://auth.example.com/application/o/docker-watcher/"
						class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
					/>
				</div>
				<div>
					<label for="client_id" class="block text-sm font-medium text-gray-700">Client ID</label>
					<input
						id="client_id"
						type="text"
						bind:value={settings.oidc_client_id}
						class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
					/>
				</div>
				<div>
					<label for="client_secret" class="block text-sm font-medium text-gray-700">Client Secret</label>
					<input
						id="client_secret"
						type="password"
						bind:value={settings.oidc_client_secret}
						class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
					/>
				</div>
				<div>
					<label for="redirect" class="block text-sm font-medium text-gray-700">Redirect URL</label>
					<input
						id="redirect"
						type="url"
						bind:value={settings.oidc_redirect_url}
						placeholder="https://watcher.example.com/api/auth/oidc/callback"
						class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
					/>
				</div>
			</div>
		</div>
	{/if}

	<button
		onclick={saveSettings}
		disabled={saving}
		class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 disabled:opacity-50"
	>
		{saving ? 'Saving...' : 'Save Settings'}
	</button>

	<!-- Local Users Management -->
	<div class="rounded-lg border border-gray-200 bg-white p-6">
		<h2 class="text-lg font-semibold text-gray-900">Local Users</h2>

		{#if users.length > 0}
			<table class="mt-4 min-w-full divide-y divide-gray-200">
				<thead>
					<tr>
						<th class="px-3 py-2 text-left text-xs font-medium uppercase text-gray-500">Username</th>
						<th class="px-3 py-2 text-left text-xs font-medium uppercase text-gray-500">Email</th>
						<th class="px-3 py-2 text-left text-xs font-medium uppercase text-gray-500">Role</th>
						<th class="px-3 py-2 text-left text-xs font-medium uppercase text-gray-500">Created</th>
						<th class="px-3 py-2"></th>
					</tr>
				</thead>
				<tbody class="divide-y divide-gray-100">
					{#each users as user}
						<tr>
							<td class="px-3 py-2 text-sm text-gray-900">{user.username}</td>
							<td class="px-3 py-2 text-sm text-gray-500">{user.email || '-'}</td>
							<td class="px-3 py-2">
								<span class="inline-flex rounded-full px-2 text-xs font-semibold {user.role === 'admin' ? 'bg-purple-100 text-purple-800' : 'bg-gray-100 text-gray-800'}">
									{user.role}
								</span>
							</td>
							<td class="px-3 py-2 text-sm text-gray-500">{user.created_at}</td>
							<td class="px-3 py-2 text-right">
								<button
									onclick={() => deleteUser(user.id)}
									class="text-sm text-red-600 hover:text-red-800"
								>
									Delete
								</button>
							</td>
						</tr>
					{/each}
				</tbody>
			</table>
		{:else}
			<p class="mt-4 text-sm text-gray-500">No users found.</p>
		{/if}

		<div class="mt-6 border-t border-gray-200 pt-4">
			<h3 class="text-sm font-semibold text-gray-900">Add User</h3>
			<div class="mt-3 grid grid-cols-2 gap-3">
				<input
					type="text"
					bind:value={newUsername}
					placeholder="Username"
					class="rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
				/>
				<input
					type="password"
					bind:value={newPassword}
					placeholder="Password"
					class="rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
				/>
				<input
					type="email"
					bind:value={newEmail}
					placeholder="Email (optional)"
					class="rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
				/>
				<select
					bind:value={newRole}
					class="rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
				>
					<option value="viewer">Viewer</option>
					<option value="admin">Admin</option>
				</select>
			</div>
			<button
				onclick={addUser}
				class="mt-3 rounded-md bg-gray-800 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-gray-900"
			>
				Add User
			</button>
		</div>
	</div>
</div>
