---
import Layout from '../../layouts/Layout.astro';
import Navbar from '../../components/navigation/Navbar.astro';
import Footer from '../../components/navigation/Footer.astro';
import Section from '../../components/content/Section.astro';
import Container from '../../components/layout/Container.astro';
import Heading from '../../components/typography/Heading.astro';
import Text from '../../components/typography/Text.astro';
import { getCollection } from 'astro:content';
import { Icon } from 'astro-icon/components';

export async function getStaticPaths() {
	const posts = await getCollection('devlog');
	return posts.map((post) => ({
		params: { slug: post.slug },
		props: { post },
	}));
}

const { post } = Astro.props;
const { Content } = await post.render();

const categoryColors: Record<string, { bg: string; text: string; border: string }> = {
	release: {
		bg: 'from-green-500/10 to-emerald-500/10',
		text: 'text-green-500',
		border: 'border-green-500/30',
	},
	infrastructure: {
		bg: 'from-blue-500/10 to-cyan-500/10',
		text: 'text-blue-500',
		border: 'border-blue-500/30',
	},
	feature: {
		bg: 'from-purple-500/10 to-pink-500/10',
		text: 'text-purple-500',
		border: 'border-purple-500/30',
	},
	bugfix: {
		bg: 'from-orange-500/10 to-amber-500/10',
		text: 'text-orange-500',
		border: 'border-orange-500/30',
	},
	update: {
		bg: 'from-gray-500/10 to-slate-500/10',
		text: 'text-gray-400',
		border: 'border-gray-500/30',
	},
};

const categoryLabels: Record<string, string> = {
	release: 'Release',
	infrastructure: 'Infrastructure',
	feature: 'Feature',
	bugfix: 'Bugfix',
	update: 'Update',
};

const colors = categoryColors[post.data.category] || categoryColors.update;

const formatDate = (date: Date) => {
	return new Intl.DateTimeFormat('de-DE', {
		weekday: 'long',
		day: '2-digit',
		month: 'long',
		year: 'numeric',
	}).format(date);
};
---

<Layout title={`${post.data.title} - ManaCore Devlog`} description={post.data.description}>
	<div
		class="bg-gradient-to-b from-blue-50/30 via-white to-blue-50/30 dark:from-gray-900 dark:via-gray-900 dark:to-gray-900 min-h-screen"
	>
		<Navbar />

		<!-- Hero Section -->
		<div class="relative pt-24 pb-12">
			<div class="absolute inset-0">
				<div
					class="absolute inset-0 bg-gradient-to-b from-blue-50/50 to-transparent dark:from-gray-900 dark:to-transparent"
				>
				</div>
				<div
					class="absolute top-0 right-0 w-96 h-96 bg-mana-blue/10 dark:bg-mana-blue/5 rounded-full blur-3xl"
				>
				</div>
				<div
					class="absolute bottom-0 left-0 w-96 h-96 bg-purple-500/10 dark:bg-purple-500/5 rounded-full blur-3xl"
				>
				</div>
			</div>

			<Container class="relative z-10">
				<div class="max-w-4xl mx-auto">
					<!-- Back link -->
					<a
						href="/devlog"
						class="inline-flex items-center gap-2 text-gray-500 hover:text-mana-blue transition-colors mb-8"
					>
						<Icon name="mdi:arrow-left" class="w-4 h-4" />
						<Text size="sm">Zurück zum Devlog</Text>
					</a>

					<!-- Meta info -->
					<div class="flex flex-wrap items-center gap-4 mb-6">
						<!-- Date -->
						<div class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
							<Icon name="mdi:calendar" class="w-5 h-5" />
							<Text size="base">{formatDate(post.data.date)}</Text>
						</div>

						<!-- Category Badge -->
						<span
							class={`inline-flex items-center px-4 py-1.5 rounded-full text-sm font-medium bg-gradient-to-r ${colors.bg} ${colors.text} border ${colors.border}`}
						>
							{categoryLabels[post.data.category]}
						</span>

						<!-- Commits -->
						{
							post.data.commits && (
								<div class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
									<Icon name="mdi:source-commit" class="w-5 h-5" />
									<Text size="base">{post.data.commits} Commits</Text>
								</div>
							)
						}

						<!-- Read Time -->
						{
							post.data.readTime && (
								<div class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
									<Icon name="mdi:clock-outline" class="w-5 h-5" />
									<Text size="base">{post.data.readTime} min Lesezeit</Text>
								</div>
							)
						}
					</div>

					<!-- Title -->
					<Heading as="h1" size="1" class="mb-6">
						{post.data.title}
					</Heading>

					<!-- Description -->
					<Text size="xl" class="text-gray-600 dark:text-gray-400 mb-8">
						{post.data.description}
					</Text>

					<!-- Author -->
					<div class="flex items-center gap-3 pb-8 border-b border-gray-200 dark:border-gray-700">
						<div
							class="w-10 h-10 bg-gradient-to-br from-mana-blue to-blue-600 rounded-full flex items-center justify-center text-white font-bold"
						>
							{post.data.author.charAt(0)}
						</div>
						<div>
							<Text weight="semibold">{post.data.author}</Text>
							<Text size="sm" class="text-gray-500">Autor</Text>
						</div>
					</div>
				</div>
			</Container>
		</div>

		<!-- Content -->
		<Section spacing="large" class="relative">
			<Container class="relative z-10">
				<article
					class="max-w-4xl mx-auto prose prose-lg dark:prose-invert prose-headings:text-gray-900 dark:prose-headings:text-white prose-p:text-gray-600 dark:prose-p:text-gray-300 prose-a:text-mana-blue prose-a:no-underline hover:prose-a:underline prose-strong:text-gray-900 dark:prose-strong:text-white prose-code:text-mana-blue prose-code:bg-gray-100 dark:prose-code:bg-gray-800 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-pre:bg-gray-900 prose-pre:border prose-pre:border-gray-700 prose-table:border-collapse prose-th:bg-gray-100 dark:prose-th:bg-gray-800 prose-th:border prose-th:border-gray-300 dark:prose-th:border-gray-600 prose-th:px-4 prose-th:py-2 prose-td:border prose-td:border-gray-300 dark:prose-td:border-gray-600 prose-td:px-4 prose-td:py-2 prose-hr:border-gray-200 dark:prose-hr:border-gray-700"
				>
					<Content />
				</article>

				<!-- Tags -->
				{
					post.data.tags && post.data.tags.length > 0 && (
						<div class="max-w-4xl mx-auto mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
							<Text size="sm" weight="semibold" class="mb-4 text-gray-500">
								Tags
							</Text>
							<div class="flex flex-wrap gap-2">
								{post.data.tags.map((tag: string) => (
									<span class="px-3 py-1.5 text-sm rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 border border-gray-200 dark:border-gray-700">
										#{tag}
									</span>
								))}
							</div>
						</div>
					)
				}

				<!-- Navigation -->
				<div class="max-w-4xl mx-auto mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
					<a
						href="/devlog"
						class="inline-flex items-center gap-2 px-6 py-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-mana-blue transition-colors"
					>
						<Icon name="mdi:arrow-left" class="w-5 h-5" />
						<Text weight="semibold">Alle Devlog Einträge</Text>
					</a>
				</div>
			</Container>
		</Section>

		<Footer />
	</div>
</Layout>

<style>
	/* Additional prose customizations */
	:global(.prose h2) {
		margin-top: 2.5rem;
		padding-bottom: 0.5rem;
		border-bottom: 1px solid rgba(156, 163, 175, 0.2);
	}

	:global(.prose h3) {
		margin-top: 2rem;
	}

	:global(.prose table) {
		display: block;
		overflow-x: auto;
		width: 100%;
	}

	:global(.prose ul) {
		list-style-type: disc;
	}

	:global(.prose li::marker) {
		color: #3b82f6;
	}
</style>
