<script>
	import { t } from '$lib/i18n/index.js';
	import { status } from '$lib/stores/statusStore.js';
	import { addLog, addError } from '$lib/stores/logStore.js';
	import { invalidate } from '$lib/api/cache.js';
	import { api } from '$lib/api/client.js';
	import { Package, Plus, GripVertical, Rocket } from 'lucide-svelte';
	import TaskCard from '$lib/pages/tasks/TaskCard.svelte';
	import CreateTaskModal from '$lib/pages/tasks/CreateTaskModal.svelte';
	import AutopilotOverlay from '$lib/pages/tasks/AutopilotOverlay.svelte';
	import { startAutopilot, autopilotRunning } from '$lib/stores/autopilotStore.js';

	let activeTab = $state('__all__');
	let statusFilter = $state('all');

	// ── Create modal ──
	let showCreateModal = $state(false);
	let createLoading = $state(false);

	// ── Drag & Drop state ──
	let dragIndex = $state(-1);
	let overIndex = $state(-1);

	/** Returns true when all relevant phases of a task are complete. */
	function isTaskDone(task) {
		const phases = task.phases;
		if (!phases || Object.keys(phases).length === 0) return false;
		return ['clarify', 'plan', 'implement', 'tests'].every(
			(k) => phases[k] === 'complete'
		);
	}

	/** Whether there are incomplete tasks that autopilot can process. */
	let hasActiveTasks = $derived(
		($status?.tasks || []).some((t) => !isTaskDone(t))
	);

	/** Apply status filter to a task list. */
	function applyStatusFilter(tasks) {
		if (statusFilter === 'done') return tasks.filter(isTaskDone);
		if (statusFilter === 'active') return tasks.filter((t) => !isTaskDone(t));
		return tasks;
	}

	/** Sorted unique milestones extracted from all tasks. */
	let milestones = $derived.by(() => {
		const tasks = $status?.tasks || [];
		const set = new Set();
		for (const task of tasks) {
			if (task.milestone) set.add(task.milestone);
		}
		return [...set].sort();
	});

	/** Tasks for a given tab (milestone filter only). */
	function tasksForTab(tabId) {
		const tasks = $status?.tasks || [];
		return tabId === '__all__' ? tasks : tasks.filter((t) => t.milestone === tabId);
	}

	/** Tabs: "All" + one per milestone. */
	let tabs = $derived.by(() => [
		{ id: '__all__', label: $t('task.all_milestones') },
		...milestones.map((ms) => ({ id: ms, label: formatMilestone(ms) })),
	]);

	/** Tasks visible in the content area - both filters applied. */
	let filteredTasks = $derived.by(() =>
		applyStatusFilter(tasksForTab(activeTab))
	);

	/** DnD is available when status filter is "all" (so ordering is unambiguous). */
	let canReorder = $derived(statusFilter === 'all');

	function formatMilestone(slug) {
		return (slug || '')
			.replace(/^\d+-/, '')
			.replace(/-/g, ' ')
			.replace(/\b\w/g, (c) => c.toUpperCase()) || slug;
	}

	/** Badge count for a tab - respects the active status filter. */
	function tabCount(tabId) {
		return applyStatusFilter(tasksForTab(tabId)).length;
	}

	// ── Create Task ──
	async function handleCreate({ name, milestone }) {
		createLoading = true;
		try {
			await api.createTask(name, milestone);
			addLog($t('log.task_created', { name, milestone }));
			invalidate('status');
			status.set(await api.getStatus());
			showCreateModal = false;
		} catch (e) {
			addError(e.message, 'createTask');
		}
		createLoading = false;
	}

	// ── Drag & Drop ──
	/** Milestone of the task currently being dragged. */
	let dragMilestone = $state('');

	function handleDragStart(e, idx) {
		dragIndex = idx;
		dragMilestone = filteredTasks[idx]?.milestone || '';
		e.dataTransfer.effectAllowed = 'move';
		e.dataTransfer.setData('text/plain', String(idx));
	}

	function handleDragOver(e, idx) {
		e.preventDefault();
		// Only show drop indicator for same-milestone tasks
		const targetTask = filteredTasks[idx];
		if (targetTask && targetTask.milestone === dragMilestone) {
			e.dataTransfer.dropEffect = 'move';
			overIndex = idx;
		} else {
			e.dataTransfer.dropEffect = 'none';
			overIndex = -1;
		}
	}

	function handleDragLeave() {
		overIndex = -1;
	}

	function handleDrop(e) {
		e.preventDefault();
		if (dragIndex < 0 || overIndex < 0 || dragIndex === overIndex) {
			resetDrag();
			return;
		}

		const tasks = [...filteredTasks];
		const draggedTask = tasks[dragIndex];
		const targetTask = tasks[overIndex];

		// Safety: only reorder within same milestone
		if (!draggedTask || !targetTask || draggedTask.milestone !== targetTask.milestone) {
			resetDrag();
			return;
		}

		const milestone = draggedTask.milestone;

		// Extract just this milestone's tasks in their current order
		const milestoneTasks = tasks.filter((t) => t.milestone === milestone);
		const dragMsIdx = milestoneTasks.indexOf(draggedTask);
		const overMsIdx = milestoneTasks.indexOf(targetTask);

		const [moved] = milestoneTasks.splice(dragMsIdx, 1);
		milestoneTasks.splice(overMsIdx, 0, moved);

		const newOrder = milestoneTasks.map((t) => t.name);
		resetDrag();
		persistOrder(milestone, newOrder);
	}

	function handleDragEnd() {
		resetDrag();
	}

	function resetDrag() {
		dragIndex = -1;
		overIndex = -1;
		dragMilestone = '';
	}

	async function persistOrder(milestone, taskNames) {
		try {
			await api.reorderTasks(milestone, taskNames);
			addLog($t('log.tasks_reordered'));
			invalidate('status');
			status.set(await api.getStatus());
		} catch (e) {
			addError(e.message, 'reorderTasks');
		}
	}
</script>

<div class="page-with-tabs">
	<div class="main-header">
		<div class="header-left">
			<h2><Package size={24} /> {$t('task.title')}</h2>
			<p>{$t('task.subtitle')}</p>
		</div>
		<div class="header-right">
			{#if $status?.tasks?.length}
				<div class="status-filters">
					<button
						class="filter-btn"
						class:active={statusFilter === 'all'}
						onclick={() => statusFilter = 'all'}
					>{$t('task.filter_all')}</button>
					<button
						class="filter-btn"
						class:active={statusFilter === 'active'}
						onclick={() => statusFilter = 'active'}
					>{$t('task.filter_active')}</button>
					<button
						class="filter-btn"
						class:active={statusFilter === 'done'}
						onclick={() => statusFilter = 'done'}
					>{$t('task.filter_done')}</button>
				</div>
			{/if}
			{#if hasActiveTasks}
				<button
					class="btn btn-autopilot"
					disabled={$autopilotRunning}
					onclick={startAutopilot}
				>
					<Rocket size={14} /> {$t('autopilot.run_all')}
				</button>
			{/if}
			<button class="btn btn-primary" onclick={() => showCreateModal = true}>
				<Plus size={14} /> {$t('task.create')}
			</button>
		</div>
	</div>

	{#if !$status?.tasks?.length}
		<div class="card empty">
			<p>{$t('task.empty')}</p>
			<p class="hint">{$t('task.empty_hint')}</p>
			<div class="btn-group" style="justify-content: center;">
				<button class="btn btn-primary" onclick={() => showCreateModal = true}>
					<Plus size={14} /> {$t('task.create')}
				</button>
			</div>
		</div>
	{:else}
		<div class="milestone-tabs-layout">
			<nav class="milestone-tabs-nav">
				{#each tabs as tab}
					{@const count = tabCount(tab.id)}
					<button
						class="tab-item"
						class:active={activeTab === tab.id}
						onclick={() => activeTab = tab.id}
					>
						<span class="tab-label">{tab.label}</span>
						<span class="tab-badge" class:tab-badge-active={activeTab === tab.id}>{count}</span>
					</button>
				{/each}
			</nav>
			<div class="milestone-tabs-content" role="list">
				{#each filteredTasks as task, i (task.name)}
					{@const isDragging = dragIndex === i}
					{@const isOver = overIndex === i && dragIndex !== i}
					{@const sameMilestone = dragMilestone === '' || task.milestone === dragMilestone}
					<div
						class="drag-wrapper"
						class:drag-active={isDragging}
						class:drag-over-above={isOver && dragIndex > i}
						class:drag-over-below={isOver && dragIndex < i}
						class:drag-foreign={dragIndex >= 0 && !isDragging && !sameMilestone}
						draggable={canReorder}
						ondragstart={(e) => handleDragStart(e, i)}
						ondragover={(e) => handleDragOver(e, i)}
						ondragleave={handleDragLeave}
						ondrop={handleDrop}
						ondragend={handleDragEnd}
						role="listitem"
					>
						{#if canReorder}
							<span class="drag-grip"><GripVertical size={16} /></span>
						{/if}
						<div class="drag-card-wrap">
							<TaskCard {task} href="/tasks/{encodeURIComponent(task.name)}" />
						</div>
					</div>
				{/each}
				{#if filteredTasks.length === 0}
					<div class="card empty">
						<p class="hint">{$t('task.filter_empty_' + statusFilter)}</p>
					</div>
				{/if}
			</div>
		</div>
	{/if}
</div>

<!-- Create Task Modal -->
{#if showCreateModal}
	<CreateTaskModal
		milestones={milestones}
		loading={createLoading}
		onConfirm={handleCreate}
		onClose={() => showCreateModal = false}
	/>
{/if}

<!-- Autopilot Mission Control overlay -->
<AutopilotOverlay />

<style>
	.main-header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 1rem;
	}

	.header-left {
		min-width: 0;
	}

	.header-right {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		flex-shrink: 0;
		padding-top: 0.25rem;
	}

	/* Status filter buttons */
	.status-filters {
		display: flex;
		gap: 0.25rem;
		align-items: center;
	}

	.filter-btn {
		padding: 0.3125rem 0.75rem;
		border: 0.0625rem solid var(--bd);
		border-radius: var(--r);
		background: none;
		color: var(--dm);
		font-size: 0.8125rem;
		font-family: inherit;
		cursor: pointer;
		transition: background .1s, color .1s, border-color .1s;
		white-space: nowrap;
	}

	.filter-btn:hover {
		background: var(--bg2);
		color: var(--tx-bright);
	}

	.filter-btn.active {
		background: var(--bg2);
		color: var(--tx-bright);
		border-color: var(--ac);
	}

	/* Layout */
	.milestone-tabs-layout {
		display: flex;
		gap: 1.5rem;
		margin-top: 1.5rem;
	}

	.milestone-tabs-nav {
		position: sticky;
		top: 0;
		width: 14rem;
		flex-shrink: 0;
		align-self: flex-start;
		display: flex;
		flex-direction: column;
		gap: .2rem;
		padding: 0;
		padding-top: 1rem;
	}

	/* Tab items */
	.tab-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
		width: 100%;
		padding: .75rem;
		border: none;
		border-radius: var(--r);
		background: none;
		color: var(--tx-bright);
		font-size: 1rem;
		font-family: inherit;
		text-align: left;
		cursor: pointer;
		transition: background .1s;
	}

	.tab-item:hover {
		background: var(--bg2);
	}

	.tab-item.active {
		background: var(--bg2);
		color: var(--tx-bright);
	}

	.tab-label {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Tab badge */
	.tab-badge {
		flex-shrink: 0;
		min-width: 1.25rem;
		padding: 0 0.375rem;
		border-radius: 0.5rem;
		background: var(--sf);
		color: var(--dm);
		font-size: 0.75rem;
		font-family: var(--font-ui);
		line-height: 1.25rem;
		text-align: center;
		transition: background .1s, color .1s;
	}

	.tab-badge-active {
		background: color-mix(in srgb, var(--ac) 15%, transparent);
		color: var(--ac);
	}

	/* Content area */
	.milestone-tabs-content {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	/* ── Drag & Drop ── */
	.drag-wrapper {
		display: flex;
		align-items: stretch;
		gap: 0;
		border-radius: var(--r);
		transition: opacity .15s;
		position: relative;
	}

	.drag-wrapper .drag-card-wrap {
		flex: 1;
		min-width: 0;
	}

	.drag-grip {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1.75rem;
		flex-shrink: 0;
		color: var(--dm2);
		cursor: grab;
		opacity: 0;
		transition: opacity .15s;
		user-select: none;
	}

	.drag-wrapper:hover .drag-grip {
		opacity: 1;
	}

	.drag-grip:active { cursor: grabbing; }

	.drag-active {
		opacity: 0.4;
	}

	/* Dim cards from other milestones while dragging */
	.drag-foreign {
		opacity: 0.3;
		pointer-events: none;
	}

	.drag-over-above {
		box-shadow: 0 -0.125rem 0 0 var(--ac);
	}

	.drag-over-below {
		box-shadow: 0 0.125rem 0 0 var(--ac);
	}

	/* Autopilot button */
	.btn-autopilot {
		background: linear-gradient(135deg, rgba(88, 157, 246, 0.12), rgba(152, 118, 170, 0.12));
		border: 1px solid var(--ac-dim);
		color: var(--ac);
		transition: all 0.2s;
	}

	.btn-autopilot:hover:not(:disabled) {
		background: linear-gradient(135deg, rgba(88, 157, 246, 0.22), rgba(152, 118, 170, 0.22));
		border-color: var(--ac);
		box-shadow: 0 0 12px rgba(88, 157, 246, 0.15);
	}

	.btn-autopilot:disabled {
		opacity: 0.4;
		cursor: not-allowed;
	}
</style>
