<script lang="ts">
	import { user } from '$lib/config';
	import { formatPostDate } from '$lib/blog/date';
	import { themeColors } from '$lib/stores/theme';
	import TuiHeader from '$lib/components/tui/TuiHeader.svelte';
	import TuiFooter from '$lib/components/tui/TuiFooter.svelte';
	import '$lib/assets/css/terminal-tui.css';
	import '$lib/assets/css/tui-body.css';

	let { data } = $props();

	let contentEl = $state<HTMLDivElement>();

	function copyCode(code: string, button: HTMLButtonElement) {
		navigator.clipboard.writeText(code).then(() => {
			const original = button.textContent;
			button.textContent = 'Copied!';
			button.classList.add('copied');
			setTimeout(() => {
				button.textContent = original;
				button.classList.remove('copied');
			}, 1500);
		});
	}

	function addCopyButtons() {
		if (!contentEl) return;
		contentEl.querySelectorAll('pre').forEach((pre) => {
			if (pre.querySelector('.copy-button')) return;
			const code = pre.querySelector('code');
			if (!code) return;

			const button = document.createElement('button');
			button.type = 'button';
			button.className = 'copy-button';
			button.textContent = 'Copy';
			button.addEventListener('click', () => copyCode(code.textContent || '', button));
			pre.appendChild(button);
		});
	}

	$effect(() => {
		data.post.html;
		addCopyButtons();
	});
</script>

<svelte:head>
	<title>{data.post.title} | {user.displayname}</title>
	<meta name="description" content={data.post.excerpt} />
</svelte:head>

<div class="post-container">
	<div
		class="tui-terminal"
		style="
			--terminal-bg: {$themeColors.terminal};
			--terminal-text: {$themeColors.text};
			--terminal-muted: {$themeColors.textMuted};
			--terminal-border: {$themeColors.border};
			--terminal-prompt: {$themeColors.terminalPrompt};
			--terminal-user: {$themeColors.terminalUser};
			--terminal-path: {$themeColors.terminalPath};
			--terminal-primary: {$themeColors.primary};
			--terminal-secondary: {$themeColors.secondary};
			--terminal-accent: {$themeColors.accent};
			--terminal-bg-light: {$themeColors.backgroundLight};
		"
		role="region"
		aria-label="Blog post"
	>
		<div class="tui-border-glow"></div>

		<div class="tui-content">
			<TuiHeader title={`~/blog/${data.post.slug}`} interactive={false} hasButtons={false} />

			<div class="tui-body">
				<article class="post-article">
					<a class="back-link" href="/blog">&larr; back to blog</a>

					<h1 class="post-title">{data.post.title}</h1>

					<div class="post-meta">
						<span class="post-author">{data.post.author}</span>
						<span>{formatPostDate(data.post.date)}</span>
						<span>{data.post.readingTime} min read</span>
					</div>

					{#if data.post.tags.length}
						<div class="post-tags">
							{#each data.post.tags as tag (tag)}
								<span class="post-tag">{tag}</span>
							{/each}
						</div>
					{/if}

					<div class="post-content" bind:this={contentEl}>
						{@html data.post.html}
					</div>

					{#if data.previous || data.next}
						<nav class="post-nav">
							{#if data.previous}
								<a class="post-nav-link prev" href={`/blog/${data.previous.slug}`}>
									<span class="post-nav-label">&larr; Previous</span>
									<span class="post-nav-title">{data.previous.title}</span>
								</a>
							{:else}
								<span class="post-nav-spacer"></span>
							{/if}

							{#if data.next}
								<a class="post-nav-link next" href={`/blog/${data.next.slug}`}>
									<span class="post-nav-label">Next &rarr;</span>
									<span class="post-nav-title">{data.next.title}</span>
								</a>
							{:else}
								<span class="post-nav-spacer"></span>
							{/if}
						</nav>
					{/if}
				</article>
			</div>

			<TuiFooter isTyping={false} linesCount={1} skipAnimation={() => {}} />
		</div>
	</div>
</div>

<style>
	.post-container {
		padding: 0;
		min-height: calc(100vh - var(--navbar-height, 60px));
	}

	.post-article {
		max-width: 720px;
		margin: 0 auto;
	}

	.back-link {
		display: inline-block;
		color: var(--terminal-muted);
		font-size: 0.85rem;
		margin-bottom: 1.25rem;
	}

	.back-link:hover {
		color: var(--terminal-primary);
	}

	.post-title {
		margin: 0 0 0.5rem 0;
		font-size: 1.6rem;
		color: var(--terminal-primary);
	}

	.post-meta {
		display: flex;
		gap: 0.75rem;
		color: var(--terminal-muted);
		font-size: 0.85rem;
		margin-bottom: 0.75rem;
	}

	.post-author {
		color: var(--terminal-text);
		font-weight: 600;
	}

	.post-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
		margin-bottom: 1.5rem;
	}

	.post-tag {
		padding: 0.15rem 0.55rem;
		background: var(--terminal-bg-light);
		border-radius: 4px;
		color: var(--terminal-accent);
		font-size: 0.75rem;
	}

	.post-content {
		line-height: 1.75;
		font-size: 0.95rem;
	}

	.post-content :global(h1),
	.post-content :global(h2),
	.post-content :global(h3) {
		color: var(--terminal-primary);
		margin: 1.75rem 0 0.75rem 0;
	}

	.post-content :global(p) {
		margin: 0 0 1rem 0;
	}

	.post-content :global(a) {
		color: var(--terminal-accent);
	}

	.post-content :global(code) {
		background: var(--terminal-bg-light);
		padding: 0.1rem 0.35rem;
		border-radius: 4px;
		font-size: 0.85em;
	}

	.post-content :global(pre) {
		position: relative;
		background: var(--terminal-bg-light);
		padding: 1rem;
		border-radius: 8px;
		overflow-x: auto;
		margin: 0 0 1rem 0;
	}

	.post-content :global(pre code) {
		background: none;
		padding: 0;
	}

	.post-content :global(.copy-button) {
		position: absolute;
		top: 0.5rem;
		right: 0.5rem;
		padding: 0.25rem 0.6rem;
		background: var(--terminal-bg);
		border: 1px solid var(--terminal-border);
		border-radius: 4px;
		color: var(--terminal-muted);
		font-family: inherit;
		font-size: 0.75rem;
		cursor: pointer;
		transition:
			color 0.15s ease,
			border-color 0.15s ease;
	}

	.post-content :global(.copy-button:hover) {
		color: var(--terminal-text);
		border-color: var(--terminal-primary);
	}

	.post-content :global(.copy-button.copied) {
		color: var(--terminal-accent);
		border-color: var(--terminal-accent);
	}

	.post-content :global(.tok-keyword) {
		color: var(--terminal-primary);
		font-weight: 600;
	}

	.post-content :global(.tok-string) {
		color: var(--terminal-accent);
	}

	.post-content :global(.tok-comment) {
		color: var(--terminal-muted);
		font-style: italic;
	}

	.post-content :global(.tok-number) {
		color: var(--terminal-secondary);
	}

	.post-content :global(blockquote) {
		border-left: 3px solid var(--terminal-primary);
		margin: 0 0 1rem 0;
		padding: 0.25rem 0 0.25rem 1rem;
		color: var(--terminal-muted);
	}

	.post-content :global(ul),
	.post-content :global(ol) {
		margin: 0 0 1rem 0;
		padding-left: 1.5rem;
	}

	.post-content :global(img) {
		max-width: 100%;
		border-radius: 8px;
	}

	.post-content :global(hr) {
		border: none;
		border-top: 1px solid var(--terminal-border);
		margin: 1.75rem 0;
	}

	.post-nav {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		margin-top: 2rem;
		padding-top: 1.5rem;
		border-top: 1px solid var(--terminal-border);
	}

	.post-nav-link {
		display: flex;
		flex-direction: column;
		gap: 0.3rem;
		max-width: 48%;
		padding: 0.75rem 1rem;
		border: 1px solid var(--terminal-border);
		border-radius: 4px;
		color: inherit;
		transition:
			border-color 0.15s ease,
			background 0.15s ease;
	}

	.post-nav-link:hover {
		border-color: var(--terminal-primary);
		background: var(--terminal-bg-light);
	}

	.post-nav-link.next {
		margin-left: auto;
		text-align: right;
		align-items: flex-end;
	}

	.post-nav-spacer {
		flex: 1;
	}

	.post-nav-label {
		color: var(--terminal-muted);
		font-size: 0.75rem;
	}

	.post-nav-title {
		color: var(--terminal-text);
		font-size: 0.9rem;
		font-weight: 600;
	}
</style>
