---
import { getCollection, getEntry } from 'astro:content';
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 Button from '../../components/ui/Button.astro';
import Card from '../../components/ui/Card.astro';

export async function getStaticPaths() {
	const privacyEntries = await getCollection('privacy');
	return privacyEntries.map((entry) => ({
		params: { slug: entry.slug },
		props: { entry },
	}));
}

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

// Get other privacy articles for sidebar
const allPrivacyArticles = await getCollection('privacy');
const otherArticles = allPrivacyArticles
	.filter((article) => article.slug !== entry.slug)
	.sort((a, b) => a.data.order - b.data.order);

// Format date
const lastUpdated = new Date(entry.data.lastUpdated).toLocaleDateString('de-DE', {
	year: 'numeric',
	month: 'long',
	day: 'numeric',
});

// Get category color
const categoryColors = {
	compliance: 'blue',
	security: 'green',
	'ai-ethics': 'purple',
	transparency: 'orange',
};
const categoryColor = categoryColors[entry.data.category] || 'gray';
---

<Layout title={`${entry.data.title} | Mana Datenschutz`}>
	<Navbar />

	<Section spacing="large" class="pt-32">
		<Container>
			<div class="max-w-6xl mx-auto">
				<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
					<!-- Main Content -->
					<div class="lg:col-span-3">
						<!-- Header -->
						<div class="mb-8">
							<div class="flex items-center gap-3 mb-4">
								<span
									class={`inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-${categoryColor}-100 dark:bg-${categoryColor}-900/30 text-${categoryColor}-700 dark:text-${categoryColor}-300`}
								>
									{entry.data.category === 'compliance' && 'Compliance'}
									{entry.data.category === 'security' && 'Sicherheit'}
									{entry.data.category === 'ai-ethics' && 'KI-Ethik'}
									{entry.data.category === 'transparency' && 'Transparenz'}
								</span>
								{
									entry.data.featured && (
										<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300">
											⭐ Empfohlen
										</span>
									)
								}
							</div>

							<Heading as="h1" size="1" class="mb-4">
								{entry.data.title}
							</Heading>

							<Text size="xl" color="muted" class="mb-6">
								{entry.data.description}
							</Text>

							<div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
								<span>Zuletzt aktualisiert: {lastUpdated}</span>
							</div>
						</div>

						<!-- Tags -->
						{
							entry.data.tags && entry.data.tags.length > 0 && (
								<div class="flex flex-wrap gap-2 mb-8">
									{entry.data.tags.map((tag) => (
										<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300">
											{tag}
										</span>
									))}
								</div>
							)
						}

						<!-- Article Content -->
						<div class="prose prose-lg dark:prose-invert max-w-none">
							<Content />
						</div>

						<!-- Contact CTA -->
						<Card
							variant="elevated"
							padding="large"
							class="mt-12 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-950/20 dark:to-purple-950/20"
						>
							<div class="text-center">
								<Heading as="h3" size="4" class="mb-3"> Haben Sie Fragen zum Datenschutz? </Heading>
								<Text color="muted" class="mb-6">
									Unser Datenschutzteam steht Ihnen gerne zur Verfügung.
								</Text>
								<div class="flex flex-col sm:flex-row gap-4 justify-center">
									<Button href="mailto:datenschutz@mana.ai" variant="primary">
										E-Mail schreiben
									</Button>
									<Button href="/kontakt" variant="outline"> Kontaktformular </Button>
								</div>
							</div>
						</Card>
					</div>

					<!-- Sidebar -->
					<div class="lg:col-span-1">
						<div class="sticky top-24">
							<!-- Other Articles -->
							<Card variant="bordered" padding="medium" class="mb-6">
								<Heading as="h3" size="6" class="mb-4"> Weitere Datenschutz-Themen </Heading>
								<div class="space-y-3">
									{
										otherArticles.map((article) => (
											<a href={`/privacy/${article.slug}`} class="block group">
												<div class="p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
													<Text
														size="sm"
														weight="semibold"
														class="mb-1 group-hover:text-mana-blue transition-colors"
													>
														{article.data.title}
													</Text>
													<Text size="xs" color="muted" class="line-clamp-2">
														{article.data.description}
													</Text>
												</div>
											</a>
										))
									}
								</div>
							</Card>

							<!-- Quick Links -->
							<Card variant="bordered" padding="medium">
								<Heading as="h3" size="6" class="mb-4"> Schnellzugriff </Heading>
								<div class="space-y-2">
									<a
										href="/datenschutz"
										class="flex items-center gap-2 text-sm hover:text-mana-blue transition-colors"
									>
										<span>📄</span> Datenschutzerklärung
									</a>
									<a
										href="/legal/agb"
										class="flex items-center gap-2 text-sm hover:text-mana-blue transition-colors"
									>
										<span>📋</span> AGB
									</a>
									<a
										href="/impressum"
										class="flex items-center gap-2 text-sm hover:text-mana-blue transition-colors"
									>
										<span>ℹ️</span> Impressum
									</a>
									<a
										href="/cookies"
										class="flex items-center gap-2 text-sm hover:text-mana-blue transition-colors"
									>
										<span>🍪</span> Cookie-Richtlinie
									</a>
								</div>
							</Card>
						</div>
					</div>
				</div>
			</div>
		</Container>
	</Section>

	<Footer />
</Layout>

<style>
	.prose h2 {
		@apply text-2xl font-bold mt-8 mb-4;
	}

	.prose h3 {
		@apply text-xl font-semibold mt-6 mb-3;
	}

	.prose p {
		@apply mb-4 leading-relaxed;
	}

	.prose ul {
		@apply space-y-2 mb-4;
	}

	.prose li {
		@apply ml-6 list-disc;
	}

	.prose table {
		@apply w-full border-collapse mb-6;
	}

	.prose th {
		@apply bg-gray-50 dark:bg-gray-800 font-semibold text-left p-3 border border-gray-200 dark:border-gray-700;
	}

	.prose td {
		@apply p-3 border border-gray-200 dark:border-gray-700;
	}

	.prose code {
		@apply bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded text-sm;
	}

	.prose pre {
		@apply bg-gray-900 dark:bg-gray-950 text-gray-100 p-4 rounded-lg overflow-x-auto mb-4;
	}

	.prose blockquote {
		@apply border-l-4 border-mana-blue pl-4 italic mb-4;
	}

	.prose hr {
		@apply my-8 border-gray-200 dark:border-gray-700;
	}
</style>
