<script lang="ts">
	import { marked } from 'marked';
	import DOMPurify from 'isomorphic-dompurify';
	import { Pencil, Eye } from 'lucide-svelte';
	import type { MarkdownWidgetConfig } from '$lib/types/widget.js';

	interface Props {
		config: MarkdownWidgetConfig;
		widgetId?: string;
	}

	let { config, widgetId }: Props = $props();

	let editMode = $state(false);
	let editContent = $state(config.content ?? '');
	let saving = $state(false);

	marked.setOptions({
		breaks: true,
		gfm: true
	});

	const renderedHtml = $derived.by(() => {
		const source = editMode ? editContent : (config.content ?? '');
		const raw = marked.parse(source, { async: false }) as string;
		return DOMPurify.sanitize(raw);
	});

	async function saveContent() {
		if (!widgetId) return;
		saving = true;
		try {
			const newConfig = { ...config, content: editContent };
			await fetch(`/api/widgets/${widgetId}`, {
				method: 'PATCH',
				headers: { 'Content-Type': 'application/json' },
				body: JSON.stringify({ config: JSON.stringify(newConfig) })
			});
		} catch {
			// Silently fail — user can retry
		} finally {
			saving = false;
		}
	}

	function toggleEdit() {
		if (editMode) {
			saveContent();
		} else {
			editContent = config.content ?? '';
		}
		editMode = !editMode;
	}
</script>

<div class="flex h-full flex-col rounded-xl border border-border bg-card">
	<!-- Toolbar -->
	<div class="flex items-center justify-end border-b border-border px-3 py-1.5">
		<button
			type="button"
			onclick={toggleEdit}
			class="flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
			disabled={saving}
		>
			{#if editMode}
				<Eye class="h-3.5 w-3.5" />
				<span>{saving ? 'Saving...' : 'Preview'}</span>
			{:else}
				<Pencil class="h-3.5 w-3.5" />
				<span>Edit</span>
			{/if}
		</button>
	</div>

	{#if editMode}
		<!-- Split pane: editor + preview -->
		<div class="flex flex-1 divide-x divide-border overflow-hidden">
			<div class="flex-1 overflow-hidden">
				<textarea
					bind:value={editContent}
					class="h-full w-full resize-none border-0 bg-background p-3 font-mono text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
					placeholder="Write markdown here..."
				></textarea>
			</div>
			<div class="flex-1 overflow-auto p-3">
				<div class="prose prose-sm prose-invert max-w-none text-foreground">
					<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitized with DOMPurify -->
					{@html renderedHtml}
				</div>
			</div>
		</div>
	{:else}
		<!-- View mode -->
		<div class="flex-1 overflow-auto p-4">
			<div class="prose prose-sm prose-invert max-w-none text-foreground">
				<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitized with DOMPurify -->
				{@html renderedHtml}
			</div>
		</div>
	{/if}
</div>
