<script lang="ts">
	import { goto } from '$app/navigation';
	import { softDeleteContext, toggleFavorite, reorderContext } from '$lib/db/repositories';
	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
	import type { AgendaContext, PersonMeta, PersonSubType } from '@ka-note/shared';

	interface Props {
		persons: AgendaContext[];
	}
	let { persons }: Props = $props();

	function displayName(name: string): string {
		return name.replace('Person ', '');
	}

	const subTypeLabels: Record<PersonSubType, string> = {
		contact: 'Kontakt',
		employee: 'Mitarbeiter',
		colleague: 'Kollege'
	};

	const subTypeColors: Record<PersonSubType, string> = {
		contact: 'bg-[#555] text-[#ccc]',
		employee: 'bg-accent/30 text-accent',
		colleague: 'bg-[#00b894]/30 text-[#00b894]'
	};

	let confirmDeleteId = $state<string | null>(null);
	let confirmDeleteName = $state('');

	function requestDelete(id: string, name: string) {
		confirmDeleteId = id;
		confirmDeleteName = name;
	}

	async function handleDelete() {
		if (confirmDeleteId) await softDeleteContext(confirmDeleteId);
		confirmDeleteId = null;
	}
</script>

{#if persons.length > 0}
	<div class="flex flex-col gap-2">
		{#each persons as ctx, i (ctx.id)}
			{@const subType = ((ctx.meta as PersonMeta | null)?.personSubType ?? 'contact') as PersonSubType}
			<div class="flex items-center gap-2">
				<div class="flex flex-col">
					<button class="text-[#555] hover:text-[#aaa] disabled:opacity-20 leading-none px-1" onclick={() => reorderContext(ctx.id, 'up')} disabled={i === 0} title="Nach oben">▲</button>
					<button class="text-[#555] hover:text-[#aaa] disabled:opacity-20 leading-none px-1" onclick={() => reorderContext(ctx.id, 'down')} disabled={i === persons.length - 1} title="Nach unten">▼</button>
				</div>
				<button
					class="rounded border border-[#444] bg-sidebar px-2.5 py-2.5 transition-colors hover:border-[#666] {ctx.isFavorite ? 'text-yellow-400' : 'text-[#555] hover:text-yellow-400/60'}"
					onclick={() => toggleFavorite(ctx.id)}
					title={ctx.isFavorite ? 'Aus Sidebar entfernen' : 'In Sidebar anzeigen'}
				>&#9733;</button>
				<button
					class="flex flex-1 items-center justify-between rounded-lg border border-[#444] bg-sidebar px-4 py-3 text-left transition-colors hover:border-[#666] hover:bg-[#2a2a2a]"
					onclick={() => goto(`/context/${ctx.id}`)}
				>
					<span class="font-bold text-white">{displayName(ctx.name)}</span>
					<span class="rounded px-2 py-0.5 text-xs {subTypeColors[subType]}">{subTypeLabels[subType]}</span>
				</button>
				<button
					class="rounded border border-[#444] bg-sidebar px-2.5 py-2.5 text-[#888] transition-colors hover:border-red-900 hover:text-red-400"
					onclick={() => requestDelete(ctx.id, displayName(ctx.name))}
					title="Löschen"
				>🗑</button>
			</div>
		{/each}
	</div>
{:else}
	<div class="text-muted">Keine Personen vorhanden.</div>
{/if}

{#if confirmDeleteId}
	<ConfirmDialog
		message={`Person \u201E${confirmDeleteName}\u201C wirklich löschen?`}
		onconfirm={handleDelete}
		oncancel={() => confirmDeleteId = null}
	/>
{/if}
