<script lang="ts">
	import { slide } from 'svelte/transition';

	interface AreaOrCategory {
		id: string;
		name: string;
		order: number;
		taskTemplates: { id: string }[];
	}

	interface Template {
		id: string;
		name: string;
		isActive: boolean;
		areaTemplates?: AreaOrCategory[];
		categoryTemplates?: AreaOrCategory[];
	}

	interface Props {
		templates: Template[];
		selectedId: string | null;
		variant: 'service' | 'project';
		showNewInput: boolean;
		newName: string;
		onSelect: (id: string) => void;
		onCreate: () => void;
		onShowNewInput: (show: boolean) => void;
		onNewNameChange: (name: string) => void;
	}

	let {
		templates,
		selectedId,
		variant,
		showNewInput,
		newName,
		onSelect,
		onCreate,
		onShowNewInput,
		onNewNameChange
	}: Props = $props();

	let borderColorClass = $derived(
		variant === 'service' ? 'border-l-secondary-500' : 'border-l-accent-500'
	);
	let bgColorClass = $derived(variant === 'service' ? 'bg-secondary-500/10' : 'bg-accent-500/10');
	let areaLabel = $derived(variant === 'service' ? 'areas' : 'categories');

	function getAreas(template: Template): AreaOrCategory[] {
		return template.areaTemplates ?? template.categoryTemplates ?? [];
	}

	function getTaskCount(template: Template): number {
		return getAreas(template).reduce((sum, a) => sum + a.taskTemplates.length, 0);
	}
</script>

<!-- New Template Input -->
{#if showNewInput}
	<div class="border-b border-theme p-3" transition:slide={{ duration: 150 }}>
		<input
			type="text"
			value={newName}
			oninput={(e) => onNewNameChange(e.currentTarget.value)}
			placeholder="Template name..."
			class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-sm text-theme focus:border-secondary-500 focus:ring-1 focus:ring-secondary-500 focus:outline-none"
			onkeydown={(e) => {
				if (e.key === 'Enter') {
					onCreate();
				} else if (e.key === 'Escape') {
					onShowNewInput(false);
					onNewNameChange('');
				}
			}}
		/>
		<div class="mt-2 flex justify-end gap-2">
			<button
				onclick={() => {
					onShowNewInput(false);
					onNewNameChange('');
				}}
				class="rounded px-3 py-1 text-sm text-theme-muted hover:text-theme"
			>
				Cancel
			</button>
			<button
				onclick={onCreate}
				class="rounded bg-secondary-500 px-3 py-1 text-sm text-white hover:bg-secondary-600"
			>
				Create
			</button>
		</div>
	</div>
{/if}

<!-- Template List -->
<div class="flex-1 overflow-y-auto p-2">
	{#each templates as template (template.id)}
		<button
			onclick={() => onSelect(template.id)}
			class="mb-1 w-full rounded-lg border-l-4 p-3 text-left transition-colors {selectedId ===
			template.id
				? `${borderColorClass} ${bgColorClass}`
				: 'border-l-transparent hover:bg-black/5 dark:hover:bg-white/10'}"
		>
			<span class="flex items-center justify-between">
				<span class="font-medium text-theme">{template.name}</span>
				<span
					class="rounded-full px-2 py-0.5 text-xs {template.isActive
						? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
						: 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400'}"
				>
					{template.isActive ? 'Active' : 'Inactive'}
				</span>
			</span>
			<span class="mt-1 block text-xs text-theme-muted">
				{getAreas(template).length}
				{areaLabel},
				{getTaskCount(template)} tasks
			</span>
		</button>
	{/each}
	{#if templates.length === 0}
		<div class="py-8 text-center text-theme-muted">
			<p>No {variant} templates yet</p>
			<p class="text-sm">Click + to create one</p>
		</div>
	{/if}
</div>
