---
import Layout from '../../layouts/Layout.astro';
import UseCaseCard from '../../components/useCases/UseCaseCard.astro';
import {
	getUseCases,
	getFeaturedUseCases,
	getAllUseCaseCategories,
	getCategoryDisplayName,
	getCategoryIcon,
	getUseCaseStats,
} from '../../utils/useCases';

const language = 'en';
const allUseCases = await getUseCases(language);
const featuredUseCases = await getFeaturedUseCases(language);
const categories = getAllUseCaseCategories();
const stats = await getUseCaseStats(language);

const useCasesByCategory = categories.map((category) => ({
	category,
	displayName: getCategoryDisplayName(category),
	icon: getCategoryIcon(category),
	useCases: allUseCases.filter((uc) => uc.data.category === category),
}));
---

<Layout
	title="Use Cases - AI Image Generation for Every Need | Picture"
	description="Discover how creators, marketers, and businesses use Picture AI to generate stunning images for Instagram, YouTube, e-commerce, marketing, and more."
>
	<div class="min-h-screen bg-dark-bg">
		<!-- Hero & Search -->
		<div class="bg-gradient-to-b from-dark-elevated to-dark-bg py-16 md:py-24">
			<div class="mx-auto max-w-6xl px-6 text-center">
				<div
					class="mb-6 inline-block rounded-full border border-primary/20 bg-primary/10 px-4 py-1.5"
				>
					<span class="text-sm font-medium text-primary">🎯 Use Cases</span>
				</div>
				<h1 class="mb-6 text-4xl font-bold text-white md:text-5xl lg:text-6xl">
					AI Images for Every Need
				</h1>
				<p class="mb-8 text-xl text-gray-300">
					From Instagram posts to product photography, discover how Picture helps creators generate
					professional images.
				</p>

				<!-- Search -->
				<div class="mx-auto mb-8 max-w-2xl">
					<div class="relative">
						<input
							type="text"
							id="use-case-search"
							placeholder="Search use cases..."
							class="w-full rounded-xl border border-dark-border bg-dark-elevated px-6 py-4 pl-14 text-white placeholder-gray-400 focus:border-primary focus:outline-none"
						/>
						<svg
							class="absolute left-5 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400"
							fill="none"
							stroke="currentColor"
							viewBox="0 0 24 24"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
						</svg>
					</div>
				</div>

				<!-- Stats -->
				<div class="flex items-center justify-center gap-8 text-sm text-gray-400">
					<div>
						<span class="text-2xl font-bold text-primary">{stats.totalUseCases}</span> use cases
					</div>
					<div>
						<span class="text-2xl font-bold text-primary">{categories.length}</span> categories
					</div>
				</div>
			</div>
		</div>

		<!-- Featured -->
		{
			featuredUseCases.length > 0 && (
				<div class="mx-auto max-w-6xl px-6 py-12">
					<h2 class="mb-6 flex items-center gap-3 text-2xl font-bold text-white">
						<>
							<span>⭐</span>
							<span>Most Popular</span>
						</>
					</h2>
					<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
						{featuredUseCases.map((uc) => (
							<UseCaseCard useCase={uc} />
						))}
					</div>
				</div>
			)
		}

		<!-- Category Filter -->
		<div class="mx-auto max-w-6xl px-6 py-8">
			<div class="mb-8 flex flex-wrap gap-3">
				<button class="category-btn active" data-category="all">
					<span>📚 All ({stats.totalUseCases})</span>
				</button>
				{
					stats.categoryCounts.map(({ category, displayName, icon, count }) => (
						<button class="category-btn" data-category={category}>
							<span>
								{icon} {displayName} ({count})
							</span>
						</button>
					))
				}
			</div>
		</div>

		<!-- Categories -->
		<div class="mx-auto max-w-6xl px-6 pb-16">
			<div id="use-cases-grid" class="space-y-12">
				{
					useCasesByCategory.map(
						({ category, displayName, icon, useCases }) =>
							useCases.length > 0 && (
								<div class="use-case-category" data-category={category}>
									<h3 class="mb-6 text-xl font-bold text-white">
										{icon} {displayName} ({useCases.length})
									</h3>
									<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
										{useCases.map((uc) => (
											<UseCaseCard useCase={uc} />
										))}
									</div>
								</div>
							)
					)
				}
			</div>
			<div id="no-results" class="hidden py-12 text-center">
				<div class="mb-4 text-6xl">🔍</div>
				<h3 class="mb-2 text-xl text-white">No results found</h3>
			</div>
		</div>

		<!-- CTA -->
		<div class="mx-auto max-w-4xl px-6 py-16">
			<div
				class="rounded-2xl border border-primary/20 bg-gradient-to-r from-primary/10 to-purple-500/10 p-12 text-center"
			>
				<h2 class="mb-4 text-3xl font-bold text-white">Ready to create?</h2>
				<p class="mb-8 text-gray-300">Start with our free plan today.</p>
				<a href="#" class="inline-block rounded-lg bg-primary px-8 py-3 font-medium text-white"
					>Get Started Free</a
				>
			</div>
		</div>
	</div>

	<script>
		const search = document.getElementById('use-case-search') as HTMLInputElement;
		const btns = document.querySelectorAll('.category-btn');
		const cats = document.querySelectorAll('.use-case-category');
		const noRes = document.getElementById('no-results');
		let activeCat = 'all';

		search?.addEventListener('input', (e) =>
			filter((e.target as HTMLInputElement).value.toLowerCase(), activeCat)
		);

		btns.forEach((btn) => {
			btn.addEventListener('click', () => {
				const cat = btn.getAttribute('data-category') || 'all';
				activeCat = cat;
				btns.forEach((b) => b.classList.remove('active'));
				btn.classList.add('active');
				filter(search?.value.toLowerCase() || '', cat);
			});
		});

		function filter(q: string, cat: string) {
			let visible = 0;
			cats.forEach((c) => {
				const name = c.getAttribute('data-category');
				const matches = cat === 'all' || name === cat;
				if (!matches) {
					(c as HTMLElement).style.display = 'none';
					return;
				}
				const cards = c.querySelectorAll('.use-case-card');
				let hasVisible = false;
				cards.forEach((card) => {
					const text = card.textContent?.toLowerCase() || '';
					if (!q || text.includes(q)) {
						(card as HTMLElement).style.display = 'block';
						hasVisible = true;
						visible++;
					} else {
						(card as HTMLElement).style.display = 'none';
					}
				});
				(c as HTMLElement).style.display = hasVisible ? 'block' : 'none';
			});
			if (noRes) noRes.style.display = visible === 0 ? 'block' : 'none';
		}
	</script>

	<style>
		.category-btn {
			@apply rounded-lg border border-dark-border bg-dark-elevated px-4 py-2 text-sm text-gray-300 hover:border-primary hover:text-primary;
		}
		.category-btn.active {
			@apply border-primary bg-primary/10 text-primary;
		}
	</style>
</Layout>
