---
import Layout from '../../layouts/Layout.astro';
import { getCollection } from 'astro:content';
import type { GetStaticPaths } from 'astro';
import {
	getRelatedTemplates,
	fillTemplate,
	extractVariables,
	formatCategoryName,
	getDifficultyColor,
} from '../../utils/promptTemplates';
import { t } from '../../i18n';

export const getStaticPaths = (async () => {
	const templates = await getCollection('promptTemplates');
	return templates.map((template) => ({
		params: { slug: template.id },
		props: { template },
	}));
}) satisfies GetStaticPaths;

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

const relatedTemplates = await getRelatedTemplates(template, 3);
const variables = extractVariables(template.data.promptTemplate);

// Example filled prompt
const exampleValues: Record<string, string> = {};
template.data.variables.forEach((v) => {
	const placeholderParts = v.placeholder.split('/');
	exampleValues[v.name] = placeholderParts[0].trim();
});
const examplePrompt = fillTemplate(template.data.promptTemplate, exampleValues);

const difficultyColor = getDifficultyColor(template.data.difficulty);
---

<Layout
	title={`${template.data.title} - AI Prompt Template | Picture`}
	description={template.data.description}
>
	<!-- Hero Section -->
	<section class="bg-gradient-to-br from-purple-900 via-purple-800 to-indigo-900 py-12 text-white">
		<div class="container mx-auto px-4">
			<div class="mx-auto max-w-5xl">
				<!-- Breadcrumb -->
				<nav class="mb-6">
					<ol class="flex items-center gap-2 text-sm text-purple-200">
						<li><a href="/" class="hover:text-white">Home</a></li>
						<li>/</li>
						<li>
							<a href="/prompt-templates" class="hover:text-white">Prompt Templates</a>
						</li>
						<li>/</li>
						<li>
							<a
								href={`/prompt-templates?category=${template.data.category}`}
								class="hover:text-white"
							>
								{formatCategoryName(template.data.category)}
							</a>
						</li>
						<li>/</li>
						<li class="font-medium text-white">{template.data.title}</li>
					</ol>
				</nav>

				<!-- Header -->
				<div class="flex items-start gap-6">
					<div class="text-6xl">{template.data.icon}</div>
					<div class="flex-1">
						<div class="mb-3 flex items-center gap-3">
							<h1 class="text-4xl font-bold md:text-5xl">{template.data.title}</h1>
							{
								template.data.featured && (
									<span class="rounded-full bg-yellow-400 px-3 py-1 text-sm font-bold text-yellow-900">
										⭐ Featured
									</span>
								)
							}
						</div>

						<p class="mb-6 text-xl text-purple-100">
							{template.data.description}
						</p>

						<div class="flex flex-wrap items-center gap-4">
							<!-- Difficulty Badge -->
							<span
								class={`px-4 py-2 rounded-full font-semibold ${
									template.data.difficulty === 'beginner'
										? 'bg-green-500 text-white'
										: template.data.difficulty === 'intermediate'
											? 'bg-yellow-500 text-white'
											: 'bg-red-500 text-white'
								}`}
							>
								{
									template.data.difficulty.charAt(0).toUpperCase() +
										template.data.difficulty.slice(1)
								}
							</span>

							<!-- Category -->
							<span class="rounded-full bg-white/20 px-4 py-2 font-medium">
								{formatCategoryName(template.data.category)}
							</span>

							<!-- Stats -->
							<div class="flex items-center gap-4 text-purple-100">
								<span class="flex items-center gap-2">
									⭐ {template.data.rating} rating
								</span>
								<span>•</span>
								<span>{template.data.uses.toLocaleString()} uses</span>
								<span>•</span>
								<span>{template.data.likes.toLocaleString()} likes</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

	<!-- Main Content -->
	<div class="container mx-auto px-4 py-12">
		<div class="mx-auto max-w-7xl">
			<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
				<!-- Main Content Column -->
				<div class="space-y-8 lg:col-span-2">
					<!-- Interactive Prompt Builder -->
					<div class="rounded-xl border border-gray-200 bg-white p-8 shadow-lg">
						<h2 class="mb-6 text-2xl font-bold text-gray-900">🛠️ Build Your Prompt</h2>

						<form id="prompt-form" class="space-y-6">
							{
								template.data.variables.map((variable) => (
									<div>
										<label
											for={`var-${variable.name}`}
											class="mb-2 block text-sm font-semibold text-gray-900"
										>
											{variable.description}
											{variable.required ? (
												<span class="text-red-500">*</span>
											) : (
												<span class="font-normal text-gray-500">(optional)</span>
											)}
										</label>
										<input
											type="text"
											id={`var-${variable.name}`}
											name={variable.name}
											placeholder={variable.placeholder}
											required={variable.required}
											class="w-full rounded-lg border border-gray-300 px-4 py-3 focus:border-transparent focus:ring-2 focus:ring-purple-500"
										/>
									</div>
								))
							}

							<button
								type="button"
								id="generate-prompt-btn"
								class="w-full rounded-lg bg-purple-600 py-4 font-semibold text-white transition-colors hover:bg-purple-700"
							>
								Generate Prompt
							</button>
						</form>

						<!-- Generated Prompt Display -->
						<div id="generated-prompt-container" class="mt-6 hidden">
							<div class="mb-3 flex items-center justify-between">
								<h3 class="text-lg font-bold text-gray-900">Your Generated Prompt</h3>
								<button
									id="copy-prompt-btn"
									class="flex items-center gap-2 rounded-lg bg-gray-100 px-4 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-200"
								>
									<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
										<path
											stroke-linecap="round"
											stroke-linejoin="round"
											stroke-width="2"
											d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
										></path>
									</svg>
									Copy
								</button>
							</div>
							<div
								id="generated-prompt"
								class="rounded-lg border border-gray-200 bg-gray-50 p-4 font-mono text-sm text-gray-800"
							>
							</div>

							<!-- CTA to app -->
							<div class="mt-4 rounded-lg border border-purple-200 bg-purple-50 p-4">
								<p class="mb-3 text-sm text-gray-700">
									Ready to generate your image? Use this prompt in Picture!
								</p>
								<a
									href="/app"
									class="inline-flex items-center gap-2 rounded-lg bg-purple-600 px-6 py-3 font-semibold text-white transition-colors hover:bg-purple-700"
								>
									Open Picture App →
								</a>
							</div>
						</div>
					</div>

					<!-- Example Prompt -->
					<div
						class="rounded-xl border border-blue-200 bg-gradient-to-br from-blue-50 to-indigo-50 p-8"
					>
						<h3 class="mb-4 text-xl font-bold text-gray-900">💡 Example Prompt</h3>
						<div
							class="mb-4 rounded-lg border border-blue-200 bg-white p-4 font-mono text-sm text-gray-800"
						>
							{examplePrompt}
						</div>
						<p class="text-sm text-gray-600">
							This is an example of what your prompt will look like when filled out.
						</p>
					</div>

					<!-- Template Details (from markdown content) -->
					<div
						class="prose prose-lg max-w-none rounded-xl border border-gray-200 bg-white p-8 shadow-lg"
					>
						<Content />
					</div>

					<!-- Use Cases -->
					{
						template.data.useCases.length > 0 && (
							<div class="rounded-xl border border-gray-200 bg-white p-8 shadow-lg">
								<h2 class="mb-4 text-2xl font-bold text-gray-900">🎯 Perfect For</h2>
								<ul class="grid grid-cols-1 gap-3 md:grid-cols-2">
									{template.data.useCases.map((useCase) => (
										<li class="flex items-center gap-3">
											<svg
												class="h-5 w-5 flex-shrink-0 text-green-500"
												fill="none"
												stroke="currentColor"
												viewBox="0 0 24 24"
											>
												<path
													stroke-linecap="round"
													stroke-linejoin="round"
													stroke-width="2"
													d="M5 13l4 4L19 7"
												/>
											</svg>
											<span class="text-gray-700">{useCase}</span>
										</li>
									))}
								</ul>
							</div>
						)
					}

					<!-- Tips & Best Practices -->
					{
						template.data.tips.length > 0 && (
							<div class="rounded-xl border border-gray-200 bg-white p-8 shadow-lg">
								<h2 class="mb-4 text-2xl font-bold text-gray-900">💡 Tips & Best Practices</h2>
								<ul class="space-y-3">
									{template.data.tips.map((tip) => (
										<li class="flex items-start gap-3">
											<span class="flex-shrink-0 font-bold text-purple-600">•</span>
											<span class="text-gray-700">{tip}</span>
										</li>
									))}
								</ul>
							</div>
						)
					}

					<!-- Common Mistakes -->
					{
						template.data.commonMistakes && template.data.commonMistakes.length > 0 && (
							<div class="rounded-xl border border-red-200 bg-red-50 p-8">
								<h2 class="mb-4 text-2xl font-bold text-gray-900">⚠️ Common Mistakes to Avoid</h2>
								<ul class="space-y-3">
									{template.data.commonMistakes.map((mistake) => (
										<li class="flex items-start gap-3">
											<span class="flex-shrink-0 font-bold text-red-600">×</span>
											<span class="text-gray-700">{mistake}</span>
										</li>
									))}
								</ul>
							</div>
						)
					}

					<!-- Variations -->
					{
						template.data.variations.length > 0 && (
							<div class="rounded-xl border border-gray-200 bg-white p-8 shadow-lg">
								<h2 class="mb-6 text-2xl font-bold text-gray-900">🔄 Template Variations</h2>
								<div class="space-y-4">
									{template.data.variations.map((variation) => (
										<div class="rounded-lg border border-gray-200 p-4 transition-colors hover:border-purple-300">
											<h3 class="mb-2 font-bold text-gray-900">{variation.title}</h3>
											{variation.description && (
												<p class="mb-3 text-sm text-gray-600">{variation.description}</p>
											)}
											<div class="rounded bg-gray-50 p-3 font-mono text-sm text-gray-700">
												{variation.prompt}
											</div>
										</div>
									))}
								</div>
							</div>
						)
					}
				</div>

				<!-- Sidebar -->
				<div class="space-y-6">
					<!-- Recommended Settings -->
					<div class="sticky top-6 rounded-xl border border-gray-200 bg-white p-6 shadow-lg">
						<h3 class="mb-4 text-xl font-bold text-gray-900">⚙️ Settings</h3>

						<div class="space-y-4">
							<!-- Recommended Model -->
							<div>
								<div class="mb-1 text-sm font-semibold text-gray-600">Recommended Model</div>
								<div class="text-lg font-bold text-purple-600">
									{template.data.recommendedModel}
								</div>
							</div>

							<!-- Alternative Models -->
							{
								template.data.alternativeModels.length > 0 && (
									<div>
										<div class="mb-2 text-sm font-semibold text-gray-600">Alternative Models</div>
										<div class="flex flex-wrap gap-2">
											{template.data.alternativeModels.map((model) => (
												<span class="rounded-full bg-gray-100 px-3 py-1 text-sm text-gray-700">
													{model}
												</span>
											))}
										</div>
									</div>
								)
							}

							<!-- Recommended Settings -->
							{
								template.data.recommendedSettings && (
									<div class="border-t border-gray-200 pt-4">
										<div class="mb-3 text-sm font-semibold text-gray-600">Recommended Settings</div>
										<div class="space-y-2 text-sm">
											{template.data.recommendedSettings.aspectRatio && (
												<div class="flex justify-between">
													<span class="text-gray-600">Aspect Ratio:</span>
													<span class="font-semibold text-gray-900">
														{template.data.recommendedSettings.aspectRatio}
													</span>
												</div>
											)}
											{template.data.recommendedSettings.steps && (
												<div class="flex justify-between">
													<span class="text-gray-600">Steps:</span>
													<span class="font-semibold text-gray-900">
														{template.data.recommendedSettings.steps}
													</span>
												</div>
											)}
											{template.data.recommendedSettings.guidanceScale && (
												<div class="flex justify-between">
													<span class="text-gray-600">Guidance Scale:</span>
													<span class="font-semibold text-gray-900">
														{template.data.recommendedSettings.guidanceScale}
													</span>
												</div>
											)}
										</div>
									</div>
								)
							}

							<!-- Success Rate -->
							{
								template.data.successRate && (
									<div class="border-t border-gray-200 pt-4">
										<div class="mb-2 text-sm font-semibold text-gray-600">Success Rate</div>
										<div class="flex items-center gap-3">
											<div class="h-2 flex-1 rounded-full bg-gray-200">
												<div
													class="h-2 rounded-full bg-green-500"
													style={`width: ${template.data.successRate}%`}
												/>
											</div>
											<span class="text-sm font-bold text-gray-900">
												{template.data.successRate}%
											</span>
										</div>
									</div>
								)
							}
						</div>

						<!-- CTA Button -->
						<a
							href="/app"
							class="mt-6 block w-full rounded-lg bg-purple-600 px-6 py-3 text-center font-semibold text-white transition-colors hover:bg-purple-700"
						>
							Try This Template
						</a>
					</div>

					<!-- Ideal For -->
					{
						template.data.idealFor.length > 0 && (
							<div class="rounded-xl border border-gray-200 bg-white p-6 shadow-lg">
								<h3 class="mb-4 text-xl font-bold text-gray-900">👥 Ideal For</h3>
								<ul class="space-y-2">
									{template.data.idealFor.map((audience) => (
										<li class="flex items-center gap-2 text-gray-700">
											<svg class="h-4 w-4 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
												<path
													fill-rule="evenodd"
													d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
													clip-rule="evenodd"
												/>
											</svg>
											{audience}
										</li>
									))}
								</ul>
							</div>
						)
					}

					<!-- Tags -->
					<div class="rounded-xl border border-gray-200 bg-white p-6 shadow-lg">
						<h3 class="mb-4 text-xl font-bold text-gray-900">🏷️ Tags</h3>
						<div class="flex flex-wrap gap-2">
							{
								template.data.tags.map((tag) => (
									<a
										href={`/prompt-templates?tag=${tag}`}
										class="rounded-full bg-gray-100 px-3 py-1 text-sm text-gray-700 transition-colors hover:bg-purple-100 hover:text-purple-700"
									>
										#{tag}
									</a>
								))
							}
						</div>
					</div>

					<!-- Share -->
					<div class="rounded-xl border border-gray-200 bg-white p-6 shadow-lg">
						<h3 class="mb-4 text-xl font-bold text-gray-900">📤 Share</h3>
						<div class="flex gap-2">
							<button
								class="flex-1 rounded-lg bg-blue-600 px-4 py-2 text-white transition-colors hover:bg-blue-700"
								onclick="window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(document.title) + '&url=' + encodeURIComponent(window.location.href), '_blank')"
							>
								Twitter
							</button>
							<button
								class="flex-1 rounded-lg bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600"
								onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.location.href), '_blank')"
							>
								Facebook
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Related Templates -->
	{
		relatedTemplates.length > 0 && (
			<section class="bg-gray-50 py-16">
				<div class="container mx-auto px-4">
					<h2 class="mb-8 text-3xl font-bold text-gray-900">Related Templates</h2>
					<div class="grid grid-cols-1 gap-6 md:grid-cols-3">
						{relatedTemplates.map((related) => (
							<a
								href={`/prompt-templates/${related.slug}`}
								class="group overflow-hidden rounded-lg border border-gray-200 bg-white transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
							>
								<div class="p-6">
									<div class="mb-3 flex items-center gap-3">
										<span class="text-3xl">{related.data.icon}</span>
										<h3 class="text-lg font-bold text-gray-900 transition-colors group-hover:text-purple-600">
											{related.data.title}
										</h3>
									</div>
									<p class="mb-4 line-clamp-2 text-sm text-gray-600">{related.data.description}</p>
									<div class="flex items-center justify-between text-sm text-gray-500">
										<span>⭐ {related.data.rating}</span>
										<span>{related.data.uses} uses</span>
									</div>
								</div>
							</a>
						))}
					</div>
				</div>
			</section>
		)
	}

	<!-- CTA Section -->
	<section class="bg-gradient-to-br from-purple-900 via-purple-800 to-indigo-900 py-20 text-white">
		<div class="container mx-auto px-4 text-center">
			<h2 class="mb-6 text-4xl font-bold">Start Creating with This Template</h2>
			<p class="mx-auto mb-8 max-w-2xl text-xl text-purple-100">
				Generate professional-quality AI images in seconds using this prompt template.
			</p>
			<a
				href="/app"
				class="inline-block rounded-full bg-white px-8 py-4 font-semibold text-purple-600 transition-colors hover:bg-purple-50"
			>
				Try It Now - Free
			</a>
		</div>
	</section>

	<script define:vars={{ templateData: template.data }}>
		const form = document.getElementById('prompt-form');
		const generateBtn = document.getElementById('generate-prompt-btn');
		const generatedContainer = document.getElementById('generated-prompt-container');
		const generatedPromptDiv = document.getElementById('generated-prompt');
		const copyBtn = document.getElementById('copy-prompt-btn');

		generateBtn?.addEventListener('click', () => {
			const formData = new FormData(form);
			const values = {};

			templateData.variables.forEach((variable) => {
				const value = formData.get(variable.name);
				if (value) {
					values[variable.name] = value;
				} else if (variable.required) {
					alert(`Please fill in: ${variable.description}`);
					return;
				}
			});

			// Fill template
			let filledPrompt = templateData.promptTemplate;
			Object.entries(values).forEach(([key, value]) => {
				const regex = new RegExp(`\\{${key}\\}`, 'g');
				filledPrompt = filledPrompt.replace(regex, value);
			});

			// Display result
			generatedPromptDiv.textContent = filledPrompt;
			generatedContainer?.classList.remove('hidden');

			// Smooth scroll to result
			generatedContainer?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
		});

		copyBtn?.addEventListener('click', async () => {
			const text = generatedPromptDiv?.textContent || '';
			try {
				await navigator.clipboard.writeText(text);
				copyBtn.textContent = '✓ Copied!';
				setTimeout(() => {
					copyBtn.innerHTML = `
						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
						</svg>
						Copy
					`;
				}, 2000);
			} catch (err) {
				alert('Failed to copy to clipboard');
			}
		});
	</script>
</Layout>
