---
import { getCollection } from 'astro:content';
import type { CollectionEntry } from 'astro:content';
import Layout from '@layouts/Layout.astro';
import { getRelatedFeatures } from '@/utils/features';
import { t } from '../../i18n';
import { localizePath } from '../../i18n';
import FeatureCard from '@components/features/FeatureCard.astro';

export async function getStaticPaths() {
	const allFeatures = await getCollection('features');
	return allFeatures.map((feature) => ({
		params: { slug: feature.id },
		props: { feature },
	}));
}

interface Props {
	feature: CollectionEntry<'features'>;
}

const { feature } = Astro.props;
const { Content } = await feature.render();
const { title, description, icon, category, benefits, useCases, available, comingSoon } =
	feature.data;

const relatedFeatures = await getRelatedFeatures(feature, 3);
---

<Layout title={title} description={description}>
	<article class="min-h-screen bg-dark-bg">
		<!-- Hero Section -->
		<div class="relative overflow-hidden py-24">
			<div
				class="to-secondary-900/20 absolute inset-0 bg-gradient-to-br from-primary-900/20 via-dark-surface"
			>
			</div>

			<div class="container relative z-10 mx-auto px-4">
				<div class="mx-auto max-w-4xl">
					<!-- Back Button -->
					<a
						href={localizePath('/features')}
						class="mb-8 inline-flex items-center gap-2 text-primary transition-colors hover:text-primary-400"
					>
						<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M15 19l-7-7 7-7"></path>
						</svg>
						<span>{t('features.back_to_features')}</span>
					</a>

					<!-- Icon & Category -->
					<div class="mb-6 flex items-center gap-4">
						<span class="text-6xl">{icon}</span>
						<span
							class="rounded-full bg-primary/20 px-3 py-1 text-sm font-medium capitalize text-primary"
						>
							{t(`features.categories.${category}`)}
						</span>
					</div>

					<!-- Title -->
					<h1 class="mb-6 text-4xl font-bold text-white md:text-5xl lg:text-6xl">
						{title}
					</h1>

					<!-- Description -->
					<p class="mb-8 text-xl text-gray-300">
						{description}
					</p>

					<!-- Status Badges -->
					<div class="flex flex-wrap gap-3">
						{
							available && (
								<span class="rounded-lg border border-success/30 bg-success/20 px-4 py-2 font-medium text-success">
									✓ {t('features.available_now')}
								</span>
							)
						}
						{
							comingSoon && (
								<span class="rounded-lg border border-secondary/30 bg-secondary/20 px-4 py-2 font-medium text-secondary">
									🚀 {t('features.coming_soon')}
								</span>
							)
						}
					</div>
				</div>
			</div>
		</div>

		<!-- Benefits Section -->
		{
			benefits && benefits.length > 0 && (
				<section class="bg-dark-surface py-16">
					<div class="container mx-auto px-4">
						<div class="mx-auto max-w-4xl">
							<h2 class="mb-8 text-3xl font-bold text-white">{t('features.key_benefits')}</h2>
							<div class="grid gap-4 md:grid-cols-2">
								{benefits.map((benefit) => (
									<div class="flex items-start gap-3 rounded-lg border border-dark-border bg-dark-elevated p-4">
										<svg
											class="mt-0.5 h-6 w-6 flex-shrink-0 text-primary"
											fill="currentColor"
											viewBox="0 0 20 20"
										>
											<path
												fill-rule="evenodd"
												d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
												clip-rule="evenodd"
											/>
										</svg>
										<span class="text-gray-300">{benefit}</span>
									</div>
								))}
							</div>
						</div>
					</div>
				</section>
			)
		}

		<!-- Content -->
		<section class="py-16">
			<div class="container mx-auto px-4">
				<div class="mx-auto max-w-4xl">
					<div class="prose-primary prose prose-lg prose-invert max-w-none">
						<Content />
					</div>
				</div>
			</div>
		</section>

		<!-- Use Cases -->
		{
			useCases && useCases.length > 0 && (
				<section class="bg-dark-surface py-16">
					<div class="container mx-auto px-4">
						<div class="mx-auto max-w-4xl">
							<h2 class="mb-8 text-3xl font-bold text-white">{t('features.use_cases')}</h2>
							<div class="grid gap-6 md:grid-cols-2">
								{useCases.map((useCase) => (
									<div class="rounded-xl border border-dark-border bg-dark-elevated p-6">
										<div class="flex items-start gap-3">
											<span class="text-2xl">💡</span>
											<p class="flex-1 text-gray-300">{useCase}</p>
										</div>
									</div>
								))}
							</div>
						</div>
					</div>
				</section>
			)
		}

		<!-- CTA -->
		<section class="py-16">
			<div class="container mx-auto px-4">
				<div
					class="mx-auto max-w-4xl rounded-2xl border border-primary/30 bg-gradient-to-br from-primary/20 to-secondary/20 p-12 text-center"
				>
					<h2 class="mb-4 text-3xl font-bold text-white">
						{t('features.try_feature')}
					</h2>
					<p class="mx-auto mb-8 max-w-2xl text-gray-300">
						{t('features.try_feature_subtitle')}
					</p>
					<a
						href="#"
						class="hover:to-secondary-700 inline-block rounded-lg bg-gradient-to-r from-primary-600 to-secondary-600 px-8 py-4 text-lg font-semibold text-white shadow-lg shadow-primary/50 transition-all duration-300 hover:scale-105 hover:from-primary-700 hover:shadow-primary/70"
					>
						{t('features.get_started')}
					</a>
				</div>
			</div>
		</section>

		<!-- Related Features -->
		{
			relatedFeatures.length > 0 && (
				<section class="bg-dark-surface py-16">
					<div class="container mx-auto px-4">
						<h2 class="mb-8 text-3xl font-bold text-white">{t('features.related_features')}</h2>
						<div class="grid gap-8 md:grid-cols-3">
							{relatedFeatures.map((relatedFeature) => (
								<FeatureCard feature={relatedFeature} />
							))}
						</div>
					</div>
				</section>
			)
		}
	</article>
</Layout>

<style is:global>
	/* Feature Page Styles - same as blog */
	.prose {
		@apply text-gray-300;
	}

	.prose h2 {
		@apply mb-6 mt-12 text-3xl font-bold text-white;
	}

	.prose h3 {
		@apply mb-4 mt-8 text-2xl font-semibold text-white;
	}

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

	.prose ul,
	.prose ol {
		@apply mb-6 space-y-2;
	}

	.prose li {
		@apply text-gray-300;
	}

	.prose a {
		@apply text-primary underline transition-colors hover:text-primary-400;
	}

	.prose strong {
		@apply font-semibold text-white;
	}

	.prose code {
		@apply rounded bg-dark-elevated px-2 py-1 text-sm text-primary-300;
	}

	.prose pre {
		@apply mb-6 overflow-x-auto rounded-xl border border-dark-border bg-dark-elevated p-4;
	}

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

	.prose th {
		@apply bg-dark-elevated p-3 text-left font-semibold text-white;
	}

	.prose td {
		@apply border-t border-dark-border p-3;
	}
</style>
