<script lang="ts">
	import { page } from '$app/stores';
	import { goto } from '$app/navigation';
	import { connectionState } from '$lib/realtime';
	import { createNode, createEdge } from '$lib/api';
	import { traitCatalog, packages, type Package } from '$lib/traits';

	const session = $derived($page.data.session as Record<string, unknown> | undefined);
	const nodeId = $derived(session?.nodeId as string | undefined);
	const accessToken = $derived(session?.accessToken as string | undefined);
	const connected = $derived(connectionState.current === 'connected');

	// =========================================================================
	// State
	// =========================================================================

	type Mode = 'select' | 'custom';

	let mode: Mode = $state('select');
	let selectedPackage: Package | null = $state(null);
	let title = $state('');
	let customTraits: Set<string> = $state(new Set());
	let isCreating = $state(false);
	let error: string | null = $state(null);

	/** Currently active traits (from package or custom selection) */
	const activeTraits = $derived.by((): Record<string, Record<string, unknown>> => {
		if (mode === 'select' && selectedPackage) {
			return selectedPackage.traits;
		}
		if (mode === 'custom') {
			const result: Record<string, Record<string, unknown>> = {};
			for (const t of customTraits) {
				result[t] = {};
			}
			return result;
		}
		return {};
	});

	const activeTraitCount = $derived(Object.keys(activeTraits).length);

	const canCreate = $derived(
		title.trim().length > 0 && activeTraitCount > 0 && !isCreating
	);

	function selectPackage(pkg: Package) {
		selectedPackage = pkg;
		mode = 'select';
	}

	function enterCustomMode() {
		mode = 'custom';
		selectedPackage = null;
	}

	function toggleTrait(trait: string) {
		const next = new Set(customTraits);
		if (next.has(trait)) {
			next.delete(trait);
		} else {
			next.add(trait);
		}
		customTraits = next;
	}

	async function handleCreate() {
		if (!canCreate || !accessToken || !nodeId) return;
		isCreating = true;
		error = null;

		try {
			const { node_id } = await createNode(accessToken, {
				node_kind: 'collection',
				title: title.trim(),
				visibility: 'hidden',
				metadata: { traits: activeTraits },
			});

			await createEdge(accessToken, {
				source_id: nodeId,
				target_id: node_id,
				edge_type: 'owner',
			});

			goto(`/collection/${node_id}`);
		} catch (e) {
			error = e instanceof Error ? e.message : 'Ukjent feil';
			isCreating = false;
		}
	}
</script>

<div class="min-h-screen bg-gray-50">
	<!-- Header -->
	<header class="border-b border-gray-200 bg-white">
		<div class="mx-auto flex max-w-4xl items-center justify-between px-4 py-3">
			<div class="flex items-center gap-3">
				<a href="/" class="text-sm text-gray-400 hover:text-gray-600">&larr; Arbeidsflaten</a>
				<h1 class="text-lg font-semibold text-gray-900">Ny samling</h1>
			</div>
			{#if connected}
				<span class="text-xs text-green-600">Tilkoblet</span>
			{:else}
				<span class="text-xs text-gray-400">{connectionState.current}</span>
			{/if}
		</div>
	</header>

	<main class="mx-auto max-w-4xl px-4 py-6">
		{#if !connected}
			<p class="text-sm text-gray-400">Venter på tilkobling…</p>
		{:else if !accessToken || !nodeId}
			<div class="rounded-lg border border-yellow-200 bg-yellow-50 p-4 text-sm text-yellow-800">
				<p class="font-medium">Ikke innlogget</p>
				<p class="mt-1">Du må være innlogget for å opprette samlinger.</p>
			</div>
		{:else}
			<!-- Title input -->
			<div class="mb-6">
				<label for="collection-title" class="mb-1 block text-sm font-medium text-gray-700">
					Navn på samling
				</label>
				<input
					id="collection-title"
					type="text"
					bind:value={title}
					placeholder="F.eks. «Sidelinja Podcast» eller «Teamets wiki»"
					class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none"
				/>
			</div>

			<!-- Mode tabs -->
			<div class="mb-4 flex gap-2">
				<button
					onclick={() => { mode = 'select'; }}
					class="rounded-lg px-3 py-1.5 text-sm font-medium transition-colors {mode === 'select' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}"
				>
					Velg pakke
				</button>
				<button
					onclick={enterCustomMode}
					class="rounded-lg px-3 py-1.5 text-sm font-medium transition-colors {mode === 'custom' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}"
				>
					Velg traits manuelt
				</button>
			</div>

			{#if mode === 'select'}
				<!-- Package grid -->
				<div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
					{#each packages as pkg (pkg.id)}
						<button
							onclick={() => selectPackage(pkg)}
							class="rounded-lg border p-4 text-left transition-all {selectedPackage?.id === pkg.id
								? 'border-indigo-500 bg-indigo-50 ring-2 ring-indigo-200'
								: 'border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm'}"
						>
							<div class="mb-1 text-2xl">{pkg.icon}</div>
							<h3 class="font-medium text-gray-900">{pkg.name}</h3>
							<p class="mt-0.5 text-xs text-gray-500">{pkg.description}</p>
							<div class="mt-2 flex flex-wrap gap-1">
								{#each Object.keys(pkg.traits) as trait (trait)}
									<span class="rounded-full bg-gray-100 px-1.5 py-0.5 text-[10px] text-gray-500">
										{trait}
									</span>
								{/each}
							</div>
						</button>
					{/each}
				</div>
			{:else}
				<!-- Custom trait selector -->
				<div class="space-y-4">
					{#each traitCatalog as category (category.label)}
						<div>
							<h3 class="mb-2 text-xs font-semibold tracking-wide text-gray-400 uppercase">
								{category.label}
							</h3>
							<div class="flex flex-wrap gap-2">
								{#each category.traits as trait (trait)}
									<button
										onclick={() => toggleTrait(trait)}
										class="rounded-full border px-3 py-1 text-sm transition-colors {customTraits.has(trait)
											? 'border-indigo-500 bg-indigo-50 text-indigo-700'
											: 'border-gray-200 bg-white text-gray-600 hover:border-gray-300'}"
									>
										{trait}
									</button>
								{/each}
							</div>
						</div>
					{/each}
				</div>
			{/if}

			<!-- Summary & create -->
			{#if activeTraitCount > 0}
				<div class="mt-6 rounded-lg border border-gray-200 bg-white p-4">
					<div class="mb-3 flex items-center justify-between">
						<h3 class="text-sm font-medium text-gray-700">
							{#if mode === 'select' && selectedPackage}
								Pakke: {selectedPackage.name}
							{:else}
								Egendefinert samling
							{/if}
							<span class="ml-1 text-gray-400">({activeTraitCount} traits)</span>
						</h3>
					</div>
					<div class="mb-4 flex flex-wrap gap-1">
						{#each Object.keys(activeTraits) as trait (trait)}
							<span class="rounded-full bg-indigo-50 px-2 py-0.5 text-xs font-medium text-indigo-600">
								{trait}
							</span>
						{/each}
					</div>

					{#if error}
						<div class="mb-3 rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
							{error}
						</div>
					{/if}

					<button
						onclick={handleCreate}
						disabled={!canCreate}
						class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed"
					>
						{#if isCreating}
							Oppretter…
						{:else}
							Opprett samling
						{/if}
					</button>
				</div>
			{/if}
		{/if}
	</main>
</div>
