<script lang="ts">
	import { run } from 'svelte/legacy';
	import { notes } from '$lib';
	import { page } from '$app/stores';
	import { goto } from '$app/navigation';
	import { renderMarkdown } from '$lib/markdown';

	interface Note {
		id: string;
		title: string;
		content: string;
		createdAt: Date;
		updatedAt: Date;
		linksTo?: Note[];
		linkedBy?: Note[];
	}

	let note: Note | undefined = $state();
	let isEditing = $state($page.url.searchParams.get('edit') === 'true');
	let editedTitle = $state('');
	let editedContent = $state('');

	let id = $derived($page.params.id);

	run(() => {
		if ($notes && id) {
			note = $notes.find((n) => n.id === id);
			if (note) {
				editedTitle = note.title;
				editedContent = note.content;
			} else if ($notes.length > 0) {
				// Only redirect if we have loaded notes and didn't find this one
				goto('/');
			}
		}
	});

	async function handleSave() {
		if (!editedTitle || !editedContent) return;

		try {
			await notes.update(id, {
				title: editedTitle,
				content: editedContent
			});
			isEditing = false;
		} catch (error) {
			console.error('Failed to update note:', error);
		}
	}
</script>

{#if note}
	<div class="container">
		{#if isEditing}
			<div class="field">
				<div class="control">
					<input
						class="input is-large"
						type="text"
						placeholder="Note Title"
						bind:value={editedTitle}
					/>
				</div>
			</div>
			<div class="field">
				<div class="control">
					<textarea class="textarea" placeholder="Note Content" rows="20" bind:value={editedContent}
					></textarea>
				</div>
			</div>
			<div class="field is-grouped">
				<div class="control">
					<button class="button is-primary" onclick={handleSave}>Save</button>
				</div>
				<div class="control">
					<button class="button" onclick={() => (isEditing = false)}>Cancel</button>
				</div>
			</div>
		{:else}
			<div class="content">
				<h1 class="title">{note.title}</h1>
				{#await renderMarkdown(note.content, note.linksTo || [])}
					<p>Loading...</p>
				{:then html}
					<!-- eslint-disable-next-line svelte/no-at-html-tags -->
					{@html html}
				{/await}
				<div class="field is-grouped mt-4">
					<div class="control">
						<button class="button is-primary" onclick={() => (isEditing = true)}>Edit</button>
					</div>
				</div>
			</div>
		{/if}

		{#if (note.linksTo || []).length > 0}
			<div class="box mt-4">
				<h2 class="title is-5">Links to:</h2>
				<div class="tags">
					{#each note.linksTo || [] as link}
						<a href="/notes/{link.id}" class="tag is-link">{link.title}</a>
					{/each}
				</div>
			</div>
		{/if}

		{#if (note.linkedBy || []).length > 0}
			<div class="box mt-4">
				<h2 class="title is-5">Referenced by:</h2>
				<div class="tags">
					{#each note.linkedBy || [] as link}
						<a href="/notes/{link.id}" class="tag is-info">{link.title}</a>
					{/each}
				</div>
			</div>
		{/if}
	</div>
{/if}

<style>
	.container {
		max-width: 800px;
		margin: 0 auto;
		padding: 2rem;
	}
</style>
