<script lang="ts">
	import type { ProjectScope$result } from '$houdini';

	// Types derived from the ProjectScope query
	export type ProjectScopeType = NonNullable<ProjectScope$result['projectScope']>;
	export type ProjectCategoryType = ProjectScopeType['projectAreas'][number];
	export type ProjectTaskType = ProjectCategoryType['projectTasks'][number];

	interface Props {
		scope: ProjectScopeType;
		expandedCategories: Set<string>;
		editable?: boolean;
		onToggleCategory: (categoryId: string) => void;
		onEditScope?: (scope: ProjectScopeType) => void;
		onDeleteScope?: (scopeId: string) => void;
		onAddCategory?: (scopeId: string, nextOrder: number) => void;
		onEditCategory?: (scopeId: string, category: ProjectCategoryType) => void;
		onDeleteCategory?: (categoryId: string) => void;
		onAddTask?: (categoryId: string, nextOrder: number) => void;
		onEditTask?: (categoryId: string, task: ProjectTaskType) => void;
		onDeleteTask?: (taskId: string) => void;
	}

	let {
		scope,
		expandedCategories,
		editable = true,
		onToggleCategory,
		onEditScope,
		onDeleteScope,
		onAddCategory,
		onEditCategory,
		onDeleteCategory,
		onAddTask,
		onEditTask,
		onDeleteTask
	}: Props = $props();

	function getTotalTasks(): number {
		return scope.projectAreas?.reduce((acc, cat) => acc + (cat.projectTasks?.length ?? 0), 0) ?? 0;
	}

	function sortedCategories(categories: ProjectCategoryType[]): ProjectCategoryType[] {
		return [...categories].sort((a, b) => a.order - b.order);
	}

	function sortedTasks(tasks: ProjectTaskType[]): ProjectTaskType[] {
		return [...tasks].sort((a, b) => a.order - b.order);
	}
</script>

<div class="space-y-3">
	<!-- Scope Header -->
	<div class="flex items-start justify-between gap-2">
		<div class="min-w-0 flex-1">
			<div class="flex items-center gap-2">
				<h3 class="font-medium text-theme">{scope.name}</h3>
				{#if scope.isActive}
					<span
						class="rounded bg-accent-100 px-1.5 py-0.5 text-xs font-medium text-accent-700 dark:bg-accent-900/40 dark:text-accent-400"
					>
						Active
					</span>
				{/if}
			</div>
			{#if scope.description}
				<p class="mt-1 text-sm text-theme-muted">{scope.description}</p>
			{/if}
			<p class="mt-1 text-xs text-theme-muted">
				{scope.projectAreas?.length ?? 0}
				{(scope.projectAreas?.length ?? 0) === 1 ? 'category' : 'categories'}, {getTotalTasks()}
				{getTotalTasks() === 1 ? 'task' : 'tasks'}
			</p>
		</div>
		{#if editable && onEditScope && onDeleteScope}
			<div class="flex shrink-0 items-center gap-1">
				<button
					type="button"
					onclick={() => onEditScope(scope)}
					class="rounded p-1.5 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
					aria-label="Edit scope"
				>
					<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
						/>
					</svg>
				</button>
				<button
					type="button"
					onclick={() => onDeleteScope(scope.id)}
					class="rounded p-1.5 text-theme-muted hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/20"
					aria-label="Delete scope"
				>
					<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
						/>
					</svg>
				</button>
			</div>
		{/if}
	</div>

	<!-- Categories -->
	<div class="border-t border-theme pt-3">
		<div class="mb-2 flex items-center justify-between">
			<p class="text-xs font-medium tracking-wide text-theme-muted uppercase">Categories</p>
			{#if editable && onAddCategory}
				<button
					type="button"
					onclick={() => onAddCategory(scope.id, scope.projectAreas?.length ?? 0)}
					class="text-xs font-medium text-accent-500 hover:text-accent-600"
				>
					+ Add Category
				</button>
			{/if}
		</div>

		{#if scope.projectAreas && scope.projectAreas.length > 0}
			<div class="space-y-2">
				{#each sortedCategories(scope.projectAreas) as category (category.id)}
					{@const taskCount = category.projectTasks?.length ?? 0}
					{@const isCategoryExpanded = expandedCategories.has(category.id)}
					<div
						class="rounded-lg border border-l-2 border-theme border-l-accent-400 bg-gray-50 dark:bg-gray-800/50"
					>
						<!-- Category Header -->
						<div class="flex items-start justify-between gap-1 p-2">
							<button
								type="button"
								onclick={() => onToggleCategory(category.id)}
								class="min-w-0 flex-1 text-left"
							>
								<span class="flex items-center gap-2">
									<svg
										class="h-4 w-4 flex-shrink-0 text-theme-muted transition-transform {isCategoryExpanded
											? 'rotate-90'
											: ''}"
										style="fill: none"
										stroke="currentColor"
										viewBox="0 0 24 24"
									>
										<path
											stroke-linecap="round"
											stroke-linejoin="round"
											stroke-width="2"
											d="M9 5l7 7-7 7"
										/>
									</svg>
									<span class="font-medium text-theme">{category.name}</span>
								</span>
								<span class="mt-0.5 block pl-6 text-xs text-theme-muted">
									{taskCount}
									{taskCount === 1 ? 'task' : 'tasks'}
								</span>
							</button>
							{#if editable && onAddTask && onEditCategory && onDeleteCategory}
								<div class="flex shrink-0 items-center gap-1">
									<button
										type="button"
										onclick={() => onAddTask(category.id, taskCount)}
										class="rounded p-1 text-accent-500 hover:bg-accent-500/10"
										aria-label="Add task"
										title="Add task"
									>
										<svg
											class="h-3.5 w-3.5"
											style="fill: none"
											stroke="currentColor"
											viewBox="0 0 24 24"
										>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M12 4v16m8-8H4"
											/>
										</svg>
									</button>
									<button
										type="button"
										onclick={() => onEditCategory(scope.id, category)}
										class="rounded p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
										aria-label="Edit category"
									>
										<svg
											class="h-3.5 w-3.5"
											style="fill: none"
											stroke="currentColor"
											viewBox="0 0 24 24"
										>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
											/>
										</svg>
									</button>
									<button
										type="button"
										onclick={() => onDeleteCategory(category.id)}
										class="rounded p-1 text-theme-muted hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/20"
										aria-label="Delete category"
									>
										<svg
											class="h-3.5 w-3.5"
											style="fill: none"
											stroke="currentColor"
											viewBox="0 0 24 24"
										>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
											/>
										</svg>
									</button>
								</div>
							{/if}
						</div>

						<!-- Tasks (expanded content) -->
						{#if isCategoryExpanded}
							<div class="border-t border-theme px-2 pb-2">
								{#if category.projectTasks && category.projectTasks.length > 0}
									<div class="mt-2 space-y-2">
										{#each sortedTasks(category.projectTasks) as task (task.id)}
											<div class="rounded bg-gray-50 p-2 text-xs dark:bg-gray-800/50">
												<!-- Task actions -->
												{#if editable && onEditTask && onDeleteTask}
													<div class="mb-2 flex items-center justify-end gap-0.5">
														<button
															type="button"
															onclick={() => onEditTask(category.id, task)}
															class="rounded p-0.5 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
															aria-label="Edit task"
														>
															<svg
																class="h-3 w-3"
																style="fill: none"
																stroke="currentColor"
																viewBox="0 0 24 24"
															>
																<path
																	stroke-linecap="round"
																	stroke-linejoin="round"
																	stroke-width="2"
																	d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
																/>
															</svg>
														</button>
														<button
															type="button"
															onclick={() => onDeleteTask(task.id)}
															class="rounded p-0.5 text-theme-muted hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/20"
															aria-label="Delete task"
														>
															<svg
																class="h-3 w-3"
																style="fill: none"
																stroke="currentColor"
																viewBox="0 0 24 24"
															>
																<path
																	stroke-linecap="round"
																	stroke-linejoin="round"
																	stroke-width="2"
																	d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
																/>
															</svg>
														</button>
													</div>
												{/if}
												<!-- Task fields stacked vertically -->
												<div class="space-y-2">
													<div>
														<span
															class="inline-flex items-center gap-1 text-[10px] font-medium text-theme-muted uppercase"
														>
															Scope Description
															<button
																type="button"
																class="group relative"
																aria-label="What is scope description?"
															>
																<svg
																	class="h-3 w-3 text-theme-muted hover:text-theme"
																	style="fill: none"
																	stroke="currentColor"
																	viewBox="0 0 24 24"
																>
																	<path
																		stroke-linecap="round"
																		stroke-linejoin="round"
																		stroke-width="2"
																		d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
																	/>
																</svg>
																<span
																	class="pointer-events-none absolute bottom-full left-1/2 z-10 mb-1 hidden w-48 -translate-x-1/2 rounded bg-gray-900 px-2 py-1 text-[10px] text-white normal-case group-hover:block dark:bg-gray-700"
																>
																	The customer-facing description of the task
																</span>
															</button>
														</span>
														<p class="text-theme">{task.description}</p>
													</div>
													<div>
														<span
															class="inline-flex items-center gap-1 text-[10px] font-medium text-theme-muted uppercase"
														>
															Checklist Description
															<button
																type="button"
																class="group relative"
																aria-label="What is checklist description?"
															>
																<svg
																	class="h-3 w-3 text-theme-muted hover:text-theme"
																	style="fill: none"
																	stroke="currentColor"
																	viewBox="0 0 24 24"
																>
																	<path
																		stroke-linecap="round"
																		stroke-linejoin="round"
																		stroke-width="2"
																		d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
																	/>
																</svg>
																<span
																	class="pointer-events-none absolute bottom-full left-1/2 z-10 mb-1 hidden w-48 -translate-x-1/2 rounded bg-gray-900 px-2 py-1 text-[10px] text-white normal-case group-hover:block dark:bg-gray-700"
																>
																	What team members see during a session
																</span>
															</button>
														</span>
														<p class="text-theme">{task.checklistDescription || '—'}</p>
													</div>
												</div>
											</div>
										{/each}
									</div>
								{:else}
									<p class="mt-2 text-center text-xs text-theme-muted">No tasks yet</p>
								{/if}
							</div>
						{/if}
					</div>
				{/each}
			</div>
		{:else}
			<p class="text-xs text-theme-muted">No categories defined for this scope.</p>
		{/if}
	</div>
</div>
