<script lang="ts">
	import { page } from '$app/stores';
	import type { Stage, StageEnv } from '$lib/types';
	import * as api from '$lib/api';
	import { toasts } from '$lib/stores/toast';
	import { t } from '$lib/i18n';
	import { IconChevronRight, IconPlus, IconEdit, IconTrash, IconCheck, IconX, IconLock, IconLoader } from '$lib/components/icons';
	import ToggleSwitch from '$lib/components/ToggleSwitch.svelte';
	import Skeleton from '$lib/components/Skeleton.svelte';
	import EmptyState from '$lib/components/EmptyState.svelte';
	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';

	let stages = $state<Stage[]>([]);
	let selectedStageId = $state('');
	let envVars = $state<StageEnv[]>([]);
	let projectEnv = $state<Record<string, string>>({});
	let loading = $state(true);
	let envLoading = $state(false);
	let error = $state('');

	let newKey = $state('');
	let newValue = $state('');
	let newEncrypted = $state(false);
	let saving = $state(false);

	let editingId = $state('');
	let editKey = $state('');
	let editValue = $state('');
	let editEncrypted = $state(false);

	let envDeleteTarget = $state<string | null>(null);

	const projectId = $derived($page.params.id);

	async function loadProject() {
		loading = true;
		error = '';
		try {
			const detail = await api.getProject(projectId);
			stages = detail.stages ?? [];
			try {
				projectEnv = JSON.parse(detail.project.env || '{}');
			} catch {
				projectEnv = {};
			}
			if (stages.length > 0 && !selectedStageId) {
				selectedStageId = stages[0].id;
			}
		} catch (e) {
			error = e instanceof Error ? e.message : $t('envEditor.loadFailed');
		} finally {
			loading = false;
		}
	}

	async function loadStageEnv(stageId: string) {
		if (!stageId) return;
		envLoading = true;
		try {
			envVars = await api.listStageEnv(projectId, stageId);
		} catch (e) {
			toasts.error(e instanceof Error ? e.message : $t('envEditor.loadEnvFailed'));
			envVars = [];
		} finally {
			envLoading = false;
		}
	}

	async function handleAdd() {
		if (!newKey.trim() || !selectedStageId) return;
		saving = true;
		try {
			await api.createStageEnv(projectId, selectedStageId, {
				key: newKey.trim(),
				value: newValue,
				encrypted: newEncrypted
			});
			newKey = '';
			newValue = '';
			newEncrypted = false;
			toasts.success($t('envEditor.envAdded'));
			await loadStageEnv(selectedStageId);
		} catch (e) {
			toasts.error(e instanceof Error ? e.message : $t('envEditor.addFailed'));
		} finally {
			saving = false;
		}
	}

	function startEdit(env: StageEnv) {
		editingId = env.id;
		editKey = env.key;
		editValue = env.encrypted ? '' : env.value;
		editEncrypted = env.encrypted;
	}

	function cancelEdit() {
		editingId = '';
	}

	async function handleUpdate() {
		if (!editKey.trim()) return;
		saving = true;
		try {
			const data: { key?: string; value?: string; encrypted?: boolean } = {
				key: editKey.trim(),
				encrypted: editEncrypted
			};
			if (editValue) {
				data.value = editValue;
			}
			await api.updateStageEnv(projectId, selectedStageId, editingId, data);
			editingId = '';
			toasts.success($t('envEditor.envUpdated'));
			await loadStageEnv(selectedStageId);
		} catch (e) {
			toasts.error(e instanceof Error ? e.message : $t('envEditor.updateFailed'));
		} finally {
			saving = false;
		}
	}

	async function handleDelete(envId: string) {
		try {
			await api.deleteStageEnv(projectId, selectedStageId, envId);
			toasts.success($t('envEditor.envDeleted'));
			await loadStageEnv(selectedStageId);
		} catch (e) {
			toasts.error(e instanceof Error ? e.message : $t('envEditor.deleteFailed'));
		}
	}

	function isOverridden(key: string): boolean {
		return envVars.some((e) => e.key === key);
	}

	$effect(() => {
		void projectId;
		loadProject();
	});

	$effect(() => {
		if (selectedStageId) {
			loadStageEnv(selectedStageId);
		}
	});
</script>

<svelte:head>
	<title>{$t('envEditor.title')} - {$t('app.name')}</title>
</svelte:head>

<div class="space-y-6">
	<!-- Header -->
	<div>
		<div class="flex items-center gap-1.5 text-sm text-[var(--text-tertiary)]">
			<a href="/projects/{projectId}" class="hover:text-[var(--text-link)] transition-colors">{$t('common.project')}</a>
			<IconChevronRight size={14} />
		</div>
		<h1 class="mt-1 text-2xl font-bold text-[var(--text-primary)]">{$t('envEditor.title')}</h1>
		<p class="mt-1 text-sm text-[var(--text-secondary)]">{$t('envEditor.description')}</p>
	</div>

	{#if loading}
		<div class="space-y-4">
			<Skeleton width="16rem" height="2.5rem" />
			<Skeleton height="12rem" />
		</div>
	{:else if error}
		<div class="rounded-xl border border-[var(--color-danger-light)] bg-[var(--color-danger-light)] p-4">
			<p class="text-sm text-[var(--color-danger)]">{error}</p>
		</div>
	{:else}
		<!-- Stage selector -->
		<div>
			<label for="stage-select" class="block text-sm font-medium text-[var(--text-primary)]">{$t('envEditor.stage')}</label>
			<select
				id="stage-select"
				bind:value={selectedStageId}
				class="mt-1 block w-64 rounded-lg border border-[var(--border-input)] bg-[var(--surface-input)] px-3 py-2 text-sm text-[var(--text-primary)] focus:border-[var(--color-brand-500)] focus:ring-2 focus:ring-[var(--color-brand-500)] focus:outline-none"
			>
				{#each stages as stage (stage.id)}
					<option value={stage.id}>{stage.name}</option>
				{/each}
			</select>
		</div>

		{#if stages.length === 0}
			<EmptyState title={$t('envEditor.noStages')} icon="instances" />
		{:else}
			<!-- Project-level env -->
			{#if Object.keys(projectEnv).length > 0}
				<div>
					<h2 class="text-sm font-semibold text-[var(--text-secondary)]">{$t('envEditor.projectDefaults')}</h2>
					<div class="mt-2 overflow-x-auto rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card-hover)]">
						<table class="min-w-full divide-y divide-[var(--border-primary)]">
							<thead>
								<tr>
									<th class="px-4 py-2.5 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('envEditor.key')}</th>
									<th class="px-4 py-2.5 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('envEditor.value')}</th>
									<th class="px-4 py-2.5 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('envEditor.source')}</th>
								</tr>
							</thead>
							<tbody class="divide-y divide-[var(--border-secondary)]">
								{#each Object.entries(projectEnv) as [key, value] (key)}
									<tr class={isOverridden(key) ? 'opacity-50' : ''}>
										<td class="whitespace-nowrap px-4 py-2.5 font-mono text-sm text-[var(--text-primary)]">{key}</td>
										<td class="px-4 py-2.5 font-mono text-sm text-[var(--text-secondary)]">{value}</td>
										<td class="px-4 py-2.5 text-sm">
											{#if isOverridden(key)}
												<span class="rounded-full bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700">{$t('envEditor.overridden')}</span>
											{:else}
												<span class="rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-medium text-emerald-700">{$t('envEditor.inherited')}</span>
											{/if}
										</td>
									</tr>
								{/each}
							</tbody>
						</table>
					</div>
				</div>
			{/if}

			<!-- Stage-level overrides -->
			<div>
				<h2 class="text-sm font-semibold text-[var(--text-secondary)]">{$t('envEditor.stageOverrides')}</h2>

				{#if envLoading}
					<div class="mt-4 flex items-center justify-center gap-2 py-8 text-[var(--text-tertiary)]">
						<IconLoader size={20} />
						<span class="text-sm">{$t('common.loading')}</span>
					</div>
				{:else}
					<div class="mt-2 overflow-x-auto rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] shadow-[var(--shadow-sm)]">
						<table class="min-w-full divide-y divide-[var(--border-primary)]">
							<thead class="bg-[var(--surface-card-hover)]">
								<tr>
									<th class="px-4 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('envEditor.key')}</th>
									<th class="px-4 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('envEditor.value')}</th>
									<th class="px-4 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('envEditor.secret')}</th>
									<th class="px-4 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('envEditor.source')}</th>
									<th class="px-4 py-3 text-right text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('envEditor.actions')}</th>
								</tr>
							</thead>
							<tbody class="divide-y divide-[var(--border-secondary)]">
								{#each envVars as env (env.id)}
									{#if editingId === env.id}
										<tr class="bg-[var(--color-brand-50)]/30">
											<td class="px-4 py-2.5">
												<input type="text" bind:value={editKey} class="block w-full rounded-lg border border-[var(--border-input)] bg-[var(--surface-input)] px-2 py-1 font-mono text-sm text-[var(--text-primary)] focus:border-[var(--color-brand-500)] focus:ring-1 focus:ring-[var(--color-brand-500)] focus:outline-none" />
											</td>
											<td class="px-4 py-2.5">
												<input type={editEncrypted ? 'password' : 'text'} bind:value={editValue} placeholder={env.encrypted ? 'Leave empty to keep current' : ''} class="block w-full rounded-lg border border-[var(--border-input)] bg-[var(--surface-input)] px-2 py-1 font-mono text-sm text-[var(--text-primary)] focus:border-[var(--color-brand-500)] focus:ring-1 focus:ring-[var(--color-brand-500)] focus:outline-none" />
											</td>
											<td class="px-4 py-2.5">
												<ToggleSwitch bind:checked={editEncrypted} label="Secret" />
											</td>
											<td class="px-4 py-2.5"></td>
											<td class="px-4 py-2.5 text-right">
												<div class="flex items-center justify-end gap-1">
													<button type="button" class="rounded-lg p-1.5 text-emerald-600 hover:bg-emerald-50 transition-colors" disabled={saving} onclick={handleUpdate} title={$t('envEditor.save')}>
														<IconCheck size={16} />
													</button>
													<button type="button" class="rounded-lg p-1.5 text-[var(--text-tertiary)] hover:bg-[var(--surface-card-hover)] transition-colors" onclick={cancelEdit} title={$t('common.cancel')}>
														<IconX size={16} />
													</button>
												</div>
											</td>
										</tr>
									{:else}
										<tr class="hover:bg-[var(--surface-card-hover)] transition-colors">
											<td class="whitespace-nowrap px-4 py-2.5 font-mono text-sm text-[var(--text-primary)]">{env.key}</td>
											<td class="px-4 py-2.5 font-mono text-sm text-[var(--text-secondary)]">
												{env.encrypted ? '••••••••' : env.value}
											</td>
											<td class="px-4 py-2.5">
												{#if env.encrypted}
													<span class="inline-flex items-center gap-1 rounded-full bg-purple-50 px-2 py-0.5 text-xs font-medium text-purple-700">
														<IconLock size={12} />
														{$t('envEditor.secret')}
													</span>
												{/if}
											</td>
											<td class="px-4 py-2.5 text-sm">
												{#if env.key in projectEnv}
													<span class="rounded-full bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700">{$t('envEditor.overridesProject')}</span>
												{:else}
													<span class="rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700">{$t('envEditor.stageOnly')}</span>
												{/if}
											</td>
											<td class="whitespace-nowrap px-4 py-2.5 text-right">
												<div class="flex items-center justify-end gap-1">
													<button type="button" class="rounded-lg p-1.5 text-[var(--text-tertiary)] hover:bg-[var(--surface-card-hover)] hover:text-[var(--text-link)] transition-colors" onclick={() => startEdit(env)} title={$t('envEditor.edit')}>
														<IconEdit size={16} />
													</button>
													<button type="button" class="rounded-lg p-1.5 text-[var(--text-tertiary)] hover:bg-red-50 hover:text-red-600 transition-colors" onclick={() => { envDeleteTarget = env.id; }} title={$t('envEditor.delete')}>
														<IconTrash size={16} />
													</button>
												</div>
											</td>
										</tr>
									{/if}
								{/each}

								<!-- Add new row -->
								<tr class="bg-[var(--surface-card-hover)]">
									<td class="px-4 py-2.5">
										<input type="text" bind:value={newKey} placeholder="KEY_NAME" class="block w-full rounded-lg border border-[var(--border-input)] bg-[var(--surface-input)] px-2 py-1 font-mono text-sm text-[var(--text-primary)] focus:border-[var(--color-brand-500)] focus:ring-1 focus:ring-[var(--color-brand-500)] focus:outline-none" />
									</td>
									<td class="px-4 py-2.5">
										<input type={newEncrypted ? 'password' : 'text'} bind:value={newValue} placeholder="value" class="block w-full rounded-lg border border-[var(--border-input)] bg-[var(--surface-input)] px-2 py-1 font-mono text-sm text-[var(--text-primary)] focus:border-[var(--color-brand-500)] focus:ring-1 focus:ring-[var(--color-brand-500)] focus:outline-none" />
									</td>
									<td class="px-4 py-2.5">
										<ToggleSwitch bind:checked={newEncrypted} label="Secret" />
									</td>
									<td class="px-4 py-2.5"></td>
									<td class="px-4 py-2.5 text-right">
										<button
											type="button"
											class="inline-flex items-center gap-1 rounded-lg bg-[var(--color-brand-600)] px-3 py-1.5 text-xs font-medium text-white hover:bg-[var(--color-brand-700)] disabled:opacity-50 transition-colors active:animate-press"
											disabled={!newKey.trim() || saving}
											onclick={handleAdd}
										>
											<IconPlus size={14} />
											{saving ? $t('envEditor.adding') : $t('envEditor.add')}
										</button>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				{/if}
			</div>
		{/if}
	{/if}
</div>

<ConfirmDialog
	open={envDeleteTarget !== null}
	title={$t('envEditor.deleteTitle')}
	message={$t('envEditor.deleteMessage')}
	confirmLabel={$t('common.delete')}
	confirmVariant="danger"
	onconfirm={async () => {
		const envId = envDeleteTarget;
		envDeleteTarget = null;
		if (envId) await handleDelete(envId);
	}}
	oncancel={() => { envDeleteTarget = null; }}
/>
