---
import type { CollectionEntry } from 'astro:content';

export interface Props {
	template: CollectionEntry<'promptTemplates'>;
}

const { template } = Astro.props;
---

<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>

<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>
