---
import { getCollection } from 'astro:content';
import Layout from '../../layouts/Layout.astro';
import TutorialCard from '../../components/tutorials/TutorialCard.astro';
import StepIndicator from '../../components/tutorials/StepIndicator.astro';
import {
	getDifficultyDisplayName,
	getDifficultyIcon,
	getDifficultyColor,
	getCategoryDisplayName,
	getCategoryIcon,
	getRelatedTutorials,
} from '../../utils/tutorials';

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

const { tutorial } = Astro.props;
const { Content } = await tutorial.render();
const relatedTutorials = await getRelatedTutorials(tutorial, 3);

const { data } = tutorial;
const difficultyColor = getDifficultyColor(data.difficulty);
---

<Layout title={`${data.title} - Tutorial | Picture`} description={data.description}>
	<div class="min-h-screen bg-dark-bg">
		<!-- Breadcrumbs -->
		<div class="mx-auto max-w-4xl px-6 pt-8">
			<nav class="flex items-center gap-2 text-sm text-gray-400">
				<a href="/" class="hover:text-primary">Home</a>
				<span>/</span>
				<a href="/tutorials" class="hover:text-primary">Tutorials</a>
				<span>/</span>
				<a href={`/tutorials?category=${data.category}`} class="hover:text-primary">
					{getCategoryDisplayName(data.category)}
				</a>
				<span>/</span>
				<span class="text-white">{data.title}</span>
			</nav>
		</div>

		<!-- Hero -->
		<div class="mx-auto max-w-4xl px-6 py-12">
			<div class="mb-6 flex flex-wrap items-center gap-3">
				<span class="text-3xl">{data.icon}</span>
				<span
					class="rounded-lg border border-dark-border bg-dark-elevated px-3 py-1 text-sm text-gray-300"
				>
					{getCategoryIcon(data.category)}
					{getCategoryDisplayName(data.category)}
				</span>
				<span
					class={`px-3 py-1 bg-dark-elevated border border-dark-border rounded-lg text-sm ${difficultyColor}`}
				>
					{getDifficultyIcon(data.difficulty)}
					{getDifficultyDisplayName(data.difficulty)}
				</span>
				{
					data.hasVideo && (
						<span class="rounded-lg border border-dark-border bg-dark-elevated px-3 py-1 text-sm text-gray-300">
							🎥 Video included
						</span>
					)
				}
			</div>

			<h1 class="mb-6 text-4xl font-bold text-white md:text-5xl">{data.title}</h1>
			<p class="mb-8 text-xl text-gray-300">{data.description}</p>

			<!-- Meta Info -->
			<div class="mb-8 flex flex-wrap items-center gap-6 text-sm text-gray-400">
				<div class="flex items-center gap-2">
					<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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
					</svg>
					<span>{data.estimatedTime}</span>
				</div>
				<div class="flex items-center gap-2">
					<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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
						></path>
					</svg>
					<span>{data.steps.length} steps</span>
				</div>
				<div class="flex items-center gap-2">
					<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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
						></path>
					</svg>
					<span>Updated {data.lastUpdated.toLocaleDateString()}</span>
				</div>
			</div>

			<!-- What you'll learn -->
			{
				data.whatYouWillLearn.length > 0 && (
					<div class="mb-8 rounded-xl border border-dark-border bg-dark-elevated p-6">
						<h2 class="mb-4 text-lg font-semibold text-white">What you'll learn:</h2>
						<ul class="space-y-2">
							{data.whatYouWillLearn.map((item) => (
								<li class="flex items-start gap-3 text-gray-300">
									<svg
										class="mt-0.5 h-5 w-5 flex-shrink-0 text-primary"
										fill="currentColor"
										viewBox="0 0 20 20"
									>
										<path
											fill-rule="evenodd"
											d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
											clip-rule="evenodd"
										/>
									</svg>
									<span>{item}</span>
								</li>
							))}
						</ul>
					</div>
				)
			}

			<!-- Prerequisites -->
			{
				data.prerequisites.length > 0 && (
					<div class="mb-8 rounded-xl border border-yellow-500/20 bg-yellow-500/10 p-6">
						<h3 class="mb-3 flex items-center gap-2 text-lg font-semibold text-yellow-400">
							<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
								<path
									fill-rule="evenodd"
									d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
									clip-rule="evenodd"
								/>
							</svg>
							Prerequisites
						</h3>
						<ul class="space-y-1">
							{data.prerequisites.map((item) => (
								<li class="text-yellow-100">• {item}</li>
							))}
						</ul>
					</div>
				)
			}

			<!-- Video -->
			{
				data.hasVideo && data.videoUrl && (
					<div class="mb-12">
						<div class="aspect-video overflow-hidden rounded-xl border border-dark-border bg-dark-elevated">
							<iframe
								src={data.videoUrl}
								class="h-full w-full"
								allowfullscreen
								title={data.title}
							/>
						</div>
					</div>
				)
			}
		</div>

		<!-- Step Indicator (Sticky) -->
		<StepIndicator steps={data.steps} />

		<!-- Tutorial Content -->
		<div class="mx-auto max-w-4xl px-6 pb-12">
			<article
				class="prose prose-lg prose-invert max-w-none
				prose-headings:font-bold prose-headings:text-white
				prose-h2:mb-6 prose-h2:mt-12 prose-h2:text-3xl
				prose-h3:mb-4 prose-h3:mt-8 prose-h3:text-2xl
				prose-p:leading-relaxed prose-p:text-gray-300
				prose-a:text-primary prose-a:no-underline hover:prose-a:underline
				prose-blockquote:border-l-primary prose-blockquote:bg-dark-elevated
				prose-blockquote:py-1 prose-strong:font-semibold prose-strong:text-white prose-code:rounded prose-code:bg-dark-elevated
				prose-code:px-1.5 prose-code:py-0.5 prose-code:text-primary
				prose-pre:border prose-pre:border-dark-border
				prose-pre:bg-dark-elevated
				prose-ol:text-gray-300 prose-ul:text-gray-300 prose-li:marker:text-primary"
			>
				<Content />
			</article>

			<!-- Tips -->
			{
				data.tips.length > 0 && (
					<div class="mt-12 rounded-xl border border-primary/20 bg-primary/10 p-6">
						<h3 class="mb-4 flex items-center gap-2 text-xl font-semibold text-primary">
							<span>💡</span> Pro Tips
						</h3>
						<ul class="space-y-2">
							{data.tips.map((tip) => (
								<li class="text-gray-300">• {tip}</li>
							))}
						</ul>
					</div>
				)
			}

			<!-- Common Mistakes -->
			{
				data.commonMistakes.length > 0 && (
					<div class="mt-8 rounded-xl border border-red-500/20 bg-red-500/10 p-6">
						<h3 class="mb-4 flex items-center gap-2 text-xl font-semibold text-red-400">
							<span>⚠️</span> Common Mistakes to Avoid
						</h3>
						<ul class="space-y-2">
							{data.commonMistakes.map((mistake) => (
								<li class="text-gray-300">• {mistake}</li>
							))}
						</ul>
					</div>
				)
			}

			<!-- Troubleshooting -->
			{
				data.troubleshooting.length > 0 && (
					<div class="mt-8 rounded-xl border border-dark-border bg-dark-elevated p-6">
						<h3 class="mb-4 flex items-center gap-2 text-xl font-semibold text-white">
							<span>🔧</span> Troubleshooting
						</h3>
						<div class="space-y-4">
							{data.troubleshooting.map(({ problem, solution }) => (
								<div>
									<p class="mb-1 font-medium text-yellow-400">Problem: {problem}</p>
									<p class="text-gray-300">Solution: {solution}</p>
								</div>
							))}
						</div>
					</div>
				)
			}

			<!-- Downloadable Resources -->
			{
				data.downloadableResources.length > 0 && (
					<div class="mt-12 rounded-xl border border-dark-border bg-dark-elevated p-6">
						<h3 class="mb-4 flex items-center gap-2 text-xl font-semibold text-white">
							<span>📥</span> Download Resources
						</h3>
						<div class="space-y-3">
							{data.downloadableResources.map((resource) => (
								<a
									href={resource.url}
									class="group flex items-center justify-between rounded-lg border border-dark-border bg-dark-bg p-4 transition hover:border-primary"
								>
									<div class="flex items-center gap-3">
										<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
											{resource.type === 'template' && '📄'}
											{resource.type === 'preset' && '⚙️'}
											{resource.type === 'example' && '🎨'}
											{resource.type === 'cheatsheet' && '📋'}
										</div>
										<div>
											<p class="font-medium text-white">{resource.title}</p>
											<p class="text-sm capitalize text-gray-400">{resource.type}</p>
										</div>
									</div>
									<svg
										class="h-5 w-5 text-gray-400 transition group-hover:text-primary"
										fill="none"
										stroke="currentColor"
										viewBox="0 0 24 24"
									>
										<path
											stroke-linecap="round"
											stroke-linejoin="round"
											stroke-width="2"
											d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
										/>
									</svg>
								</a>
							))}
						</div>
					</div>
				)
			}

			<!-- CTA -->
			<div
				class="mt-12 rounded-xl border border-primary/20 bg-gradient-to-r from-primary/10 to-purple-500/10 p-8 text-center"
			>
				<h3 class="mb-3 text-2xl font-bold text-white">Ready to try it yourself?</h3>
				<p class="mb-6 text-gray-300">
					Put what you learned into practice with Picture's AI image generator.
				</p>
				<a
					href="#"
					class="inline-block rounded-lg bg-primary px-8 py-3 font-medium text-white transition hover:bg-primary/90"
				>
					Start Creating
				</a>
			</div>
		</div>

		<!-- Related Tutorials -->
		{
			relatedTutorials.length > 0 && (
				<div class="bg-dark-elevated py-16">
					<div class="mx-auto max-w-6xl px-6">
						<h2 class="mb-8 text-2xl font-bold text-white">Related Tutorials</h2>
						<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
							{relatedTutorials.map((relatedTutorial) => (
								<TutorialCard tutorial={relatedTutorial} />
							))}
						</div>
					</div>
				</div>
			)
		}
	</div>
</Layout>
