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

	interface TaskTemplate {
		id: string;
		description: string;
		checklistDescription: string | null;
		frequency?: string | null;
		estimatedMinutes: number | null;
		order: number;
	}

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

	interface Props {
		area: AreaOrCategory;
		variant: 'service' | 'project';
		isExpanded: boolean;
		editingAreaName: string | null;
		editingTaskId: string | null;
		showNewTaskInput: string | null;
		newTaskDescription: string;
		onToggle: () => void;
		onUpdateName: (name: string) => void;
		onDelete: () => void;
		onStartEditName: () => void;
		onCancelEditName: () => void;
		onShowNewTask: () => void;
		onHideNewTask: () => void;
		onNewTaskDescriptionChange: (desc: string) => void;
		onCreateTask: () => void;
		onStartEditTask: (taskId: string) => void;
		onCancelEditTask: () => void;
		onUpdateTask: (
			taskId: string,
			updates: {
				description: string;
				checklistDescription: string;
				frequency?: string;
				estimatedMinutes: number | null;
			}
		) => void;
		onDeleteTask: (taskId: string) => void;
		onMoveUp?: () => void;
		onMoveDown?: () => void;
		onMoveTaskUp: (taskId: string) => void;
		onMoveTaskDown: (taskId: string) => void;
	}

	let {
		area,
		variant,
		isExpanded,
		editingAreaName,
		editingTaskId,
		showNewTaskInput,
		newTaskDescription,
		onToggle,
		onUpdateName,
		onDelete,
		onStartEditName,
		onCancelEditName,
		onShowNewTask,
		onHideNewTask,
		onNewTaskDescriptionChange,
		onCreateTask,
		onStartEditTask,
		onCancelEditTask,
		onUpdateTask,
		onDeleteTask,
		onMoveUp,
		onMoveDown,
		onMoveTaskUp,
		onMoveTaskDown
	}: Props = $props();

	let isEditingName = $derived(editingAreaName === area.id);
	let isShowingNewTask = $derived(showNewTaskInput === area.id);
	let sortedTasks = $derived([...area.taskTemplates].sort((a, b) => a.order - b.order));
	let areaLabel = $derived(variant === 'service' ? 'area' : 'category');
</script>

<div class="mb-4 rounded-lg border border-theme bg-theme-card">
	<div class="flex items-center justify-between border-b border-theme px-4 py-3">
		<button onclick={onToggle} class="flex flex-1 items-center gap-2">
			<svg
				class="h-4 w-4 text-theme-muted transition-transform {isExpanded ? 'rotate-90' : ''}"
				style="fill: none"
				viewBox="0 0 24 24"
				stroke="currentColor"
			>
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
			</svg>
			{#if isEditingName}
				<input
					type="text"
					value={area.name}
					class="rounded border border-theme bg-theme px-2 py-1 text-sm font-semibold text-theme focus:border-secondary-500 focus:outline-none"
					onclick={(e) => e.stopPropagation()}
					onkeydown={(e) => {
						if (e.key === 'Enter') {
							onUpdateName(e.currentTarget.value);
						} else if (e.key === 'Escape') {
							onCancelEditName();
						}
					}}
					onblur={(e) => onUpdateName(e.currentTarget.value)}
				/>
			{:else}
				<span
					class="font-semibold text-theme"
					role="button"
					tabindex="0"
					ondblclick={(e) => {
						e.stopPropagation();
						onStartEditName();
					}}
					onkeydown={(e) => {
						if (e.key === 'Enter' || e.key === ' ') {
							e.stopPropagation();
							onStartEditName();
						}
					}}
				>
					{area.name}
				</span>
			{/if}
			<span class="text-xs text-theme-muted">
				({area.taskTemplates.length} tasks)
			</span>
		</button>
		<div class="flex items-center gap-1">
			<button
				onclick={onShowNewTask}
				class="rounded p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
				aria-label="Add task"
			>
				<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M12 6v6m0 0v6m0-6h6m-6 0H6"
					/>
				</svg>
			</button>
			{#if onMoveUp}
				<button
					onclick={onMoveUp}
					class="rounded p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
					aria-label="Move {areaLabel} up"
				>
					<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M5 15l7-7 7 7"
						/>
					</svg>
				</button>
			{/if}
			{#if onMoveDown}
				<button
					onclick={onMoveDown}
					class="rounded p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
					aria-label="Move {areaLabel} down"
				>
					<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M19 9l-7 7-7-7"
						/>
					</svg>
				</button>
			{/if}
			<button
				onclick={onDelete}
				class="rounded p-1 text-red-400 hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/20"
				aria-label="Delete {areaLabel}"
			>
				<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M6 18L18 6M6 6l12 12"
					/>
				</svg>
			</button>
		</div>
	</div>

	{#if isExpanded}
		<div class="p-3" transition:slide={{ duration: 150 }}>
			<!-- New Task Input -->
			{#if isShowingNewTask}
				<div
					class="mb-3 rounded-lg border border-dashed border-theme bg-theme p-3"
					transition:slide={{ duration: 150 }}
				>
					<input
						type="text"
						value={newTaskDescription}
						oninput={(e) => onNewTaskDescriptionChange(e.currentTarget.value)}
						placeholder="Task description..."
						class="placeholder-theme-muted w-full rounded border border-theme bg-theme-card px-3 py-2 text-sm text-theme focus:border-secondary-500 focus:outline-none"
						onkeydown={(e) => {
							if (e.key === 'Enter') {
								onCreateTask();
							} else if (e.key === 'Escape') {
								onHideNewTask();
								onNewTaskDescriptionChange('');
							}
						}}
					/>
					<div class="mt-2 flex justify-end gap-2">
						<button
							onclick={() => {
								onHideNewTask();
								onNewTaskDescriptionChange('');
							}}
							class="rounded px-2 py-1 text-xs text-theme-muted hover:text-theme"
						>
							Cancel
						</button>
						<button
							onclick={onCreateTask}
							class="rounded bg-secondary-500 px-2 py-1 text-xs text-white hover:bg-secondary-600"
						>
							Add Task
						</button>
					</div>
				</div>
			{/if}

			<!-- Tasks -->
			{#each sortedTasks as task, index (task.id)}
				<TaskTemplateCard
					{task}
					{variant}
					isEditing={editingTaskId === task.id}
					onStartEdit={() => onStartEditTask(task.id)}
					onCancelEdit={onCancelEditTask}
					onSave={(updates) => onUpdateTask(task.id, updates)}
					onDelete={() => onDeleteTask(task.id)}
					onMoveUp={index === 0 ? undefined : () => onMoveTaskUp(task.id)}
					onMoveDown={index === sortedTasks.length - 1 ? undefined : () => onMoveTaskDown(task.id)}
				/>
			{/each}

			{#if area.taskTemplates.length === 0 && !isShowingNewTask}
				<div class="py-4 text-center text-sm text-theme-muted">
					No tasks yet. Click + to add one.
				</div>
			{/if}
		</div>
	{/if}
</div>
