---
import { getCollection } from 'astro:content';
import type { CollectionEntry } from 'astro:content';
import Layout from '../../layouts/Layout.astro';
import ComparisonCard from '../../components/comparisons/ComparisonCard.astro';
import ComparisonSchema from '../../components/comparisons/ComparisonSchema.astro';
import {
	getWinnerBadgeColor,
	getWinnerBadgeText,
	calculateOverallWinner,
} from '../../utils/comparisons';

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

interface Props {
	comparison: CollectionEntry<'comparisons'>;
}

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

// Calculate overall winner
const overallWinner = data.winnerBadge || calculateOverallWinner(data.comparisonTable);

// Get related comparisons
const allComparisons = await getCollection('comparisons');
const relatedComparisons = allComparisons
	.filter(
		(c) =>
			data.relatedComparisons.includes(c.id) &&
			c.id !== comparison.id &&
			c.data.language === data.language
	)
	.slice(0, 3);
---

<Layout title={data.title} description={data.description}>
	<ComparisonSchema comparison={comparison} slot="head" />

	<article class="min-h-screen bg-dark-bg">
		<!-- Hero Section -->
		<div class="border-b border-dark-border bg-gradient-to-b from-dark-elevated to-dark-bg py-16">
			<div class="mx-auto max-w-4xl px-6">
				<!-- Breadcrumb -->
				<nav class="mb-6 text-sm text-gray-400">
					<a href="/" class="hover:text-primary">Home</a>
					<span class="mx-2">/</span>
					<a href="/comparisons" class="hover:text-primary">Comparisons</a>
					<span class="mx-2">/</span>
					<span class="text-white">{data.competitor}</span>
				</nav>

				<!-- Icon & Badges -->
				<div class="mb-6 flex items-center gap-4">
					<div class="text-6xl">{data.icon}</div>
					<div class="flex flex-wrap gap-2">
						{
							data.featured && (
								<span class="rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-sm text-primary">
									⭐ Featured
								</span>
							)
						}
						{
							data.trending && (
								<span class="rounded-full border border-orange-500/20 bg-orange-500/10 px-3 py-1 text-sm text-orange-400">
									🔥 Trending
								</span>
							)
						}
						<span
							class="rounded-full border border-dark-border bg-dark-bg px-3 py-1 text-sm text-gray-400"
						>
							Updated {
								data.lastUpdated.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
							}
						</span>
					</div>
				</div>

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

				<!-- Verdict -->
				<div class="mb-6 rounded-xl border border-primary/20 bg-dark-elevated p-6">
					<div class="flex items-start gap-4">
						<div class="text-3xl">⚖️</div>
						<div class="flex-1">
							<div class="mb-2 text-sm font-semibold text-primary">VERDICT</div>
							<p class="text-lg leading-relaxed text-gray-200">{data.verdict}</p>
						</div>
					</div>
				</div>

				<!-- Overall Winner Badge -->
				<div
					class={`text-center py-4 px-6 rounded-xl font-bold text-lg ${
						overallWinner === 'picture'
							? 'bg-green-500/10 border border-green-500/20 text-green-400'
							: overallWinner === 'competitor'
								? 'bg-blue-500/10 border border-blue-500/20 text-blue-400'
								: 'bg-yellow-500/10 border border-yellow-500/20 text-yellow-400'
					}`}
				>
					{getWinnerBadgeText(overallWinner)}
				</div>
			</div>
		</div>

		<!-- Comparison Table -->
		<div class="mx-auto max-w-4xl px-6 py-12">
			<h2 class="mb-6 text-2xl font-bold text-white">Quick Comparison</h2>
			<div class="overflow-hidden rounded-xl border border-dark-border bg-dark-elevated">
				<table class="w-full">
					<thead>
						<tr class="border-b border-dark-border">
							<th class="px-6 py-4 text-left text-sm font-semibold text-gray-400">Feature</th>
							<th class="px-6 py-4 text-left text-sm font-semibold text-primary">Picture</th>
							<th class="px-6 py-4 text-left text-sm font-semibold text-gray-400"
								>{data.competitor}</th
							>
							<th class="px-6 py-4 text-center text-sm font-semibold text-gray-400">Winner</th>
						</tr>
					</thead>
					<tbody>
						<!-- Pricing -->
						<tr class="border-b border-dark-border hover:bg-dark-bg/50">
							<td class="px-6 py-4 text-sm text-gray-300">💰 Pricing</td>
							<td class="px-6 py-4 text-sm text-white">{data.comparisonTable.pricing.picture}</td>
							<td class="px-6 py-4 text-sm text-white">{data.comparisonTable.pricing.competitor}</td
							>
							<td class="px-6 py-4 text-center">
								{
									data.comparisonTable.pricing.winner === 'picture' && (
										<span class="text-green-400">✓</span>
									)
								}
								{
									data.comparisonTable.pricing.winner === 'competitor' && (
										<span class="text-blue-400">✓</span>
									)
								}
								{
									data.comparisonTable.pricing.winner === 'tie' && (
										<span class="text-yellow-400">=</span>
									)
								}
							</td>
						</tr>
						<!-- Image Quality -->
						<tr class="border-b border-dark-border hover:bg-dark-bg/50">
							<td class="px-6 py-4 text-sm text-gray-300">🎨 Image Quality</td>
							<td class="px-6 py-4 text-sm text-white"
								>{data.comparisonTable.imageQuality.picture}</td
							>
							<td class="px-6 py-4 text-sm text-white"
								>{data.comparisonTable.imageQuality.competitor}</td
							>
							<td class="px-6 py-4 text-center">
								{
									data.comparisonTable.imageQuality.winner === 'picture' && (
										<span class="text-green-400">✓</span>
									)
								}
								{
									data.comparisonTable.imageQuality.winner === 'competitor' && (
										<span class="text-blue-400">✓</span>
									)
								}
								{
									data.comparisonTable.imageQuality.winner === 'tie' && (
										<span class="text-yellow-400">=</span>
									)
								}
							</td>
						</tr>
						<!-- Speed -->
						<tr class="border-b border-dark-border hover:bg-dark-bg/50">
							<td class="px-6 py-4 text-sm text-gray-300">⚡ Speed</td>
							<td class="px-6 py-4 text-sm text-white">{data.comparisonTable.speed.picture}</td>
							<td class="px-6 py-4 text-sm text-white">{data.comparisonTable.speed.competitor}</td>
							<td class="px-6 py-4 text-center">
								{
									data.comparisonTable.speed.winner === 'picture' && (
										<span class="text-green-400">✓</span>
									)
								}
								{
									data.comparisonTable.speed.winner === 'competitor' && (
										<span class="text-blue-400">✓</span>
									)
								}
								{
									data.comparisonTable.speed.winner === 'tie' && (
										<span class="text-yellow-400">=</span>
									)
								}
							</td>
						</tr>
						<!-- Ease of Use -->
						<tr class="border-b border-dark-border hover:bg-dark-bg/50">
							<td class="px-6 py-4 text-sm text-gray-300">🎯 Ease of Use</td>
							<td class="px-6 py-4 text-sm text-white">{data.comparisonTable.easeOfUse.picture}</td>
							<td class="px-6 py-4 text-sm text-white"
								>{data.comparisonTable.easeOfUse.competitor}</td
							>
							<td class="px-6 py-4 text-center">
								{
									data.comparisonTable.easeOfUse.winner === 'picture' && (
										<span class="text-green-400">✓</span>
									)
								}
								{
									data.comparisonTable.easeOfUse.winner === 'competitor' && (
										<span class="text-blue-400">✓</span>
									)
								}
								{
									data.comparisonTable.easeOfUse.winner === 'tie' && (
										<span class="text-yellow-400">=</span>
									)
								}
							</td>
						</tr>
						<!-- Features -->
						<tr class="hover:bg-dark-bg/50">
							<td class="px-6 py-4 text-sm text-gray-300">✨ Features</td>
							<td class="px-6 py-4 text-sm text-white">{data.comparisonTable.features.picture}</td>
							<td class="px-6 py-4 text-sm text-white"
								>{data.comparisonTable.features.competitor}</td
							>
							<td class="px-6 py-4 text-center">
								{
									data.comparisonTable.features.winner === 'picture' && (
										<span class="text-green-400">✓</span>
									)
								}
								{
									data.comparisonTable.features.winner === 'competitor' && (
										<span class="text-blue-400">✓</span>
									)
								}
								{
									data.comparisonTable.features.winner === 'tie' && (
										<span class="text-yellow-400">=</span>
									)
								}
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

		<!-- Pros & Cons -->
		<div class="mx-auto max-w-4xl px-6 pb-12">
			<h2 class="mb-6 text-2xl font-bold text-white">Pros & Cons</h2>
			<div class="grid gap-6 md:grid-cols-2">
				<!-- Picture Pros/Cons -->
				<div class="space-y-4">
					<h3 class="mb-3 text-lg font-semibold text-primary">Picture</h3>

					<div class="rounded-xl border border-green-500/20 bg-green-500/5 p-5">
						<div class="mb-3 font-semibold text-green-400">Pros</div>
						<ul class="space-y-2">
							{
								data.picturePros.map((pro) => (
									<li class="flex items-start gap-2 text-sm text-gray-300">
										<span class="flex-shrink-0 text-green-400">✓</span>
										<span>{pro}</span>
									</li>
								))
							}
						</ul>
					</div>

					<div class="rounded-xl border border-red-500/20 bg-red-500/5 p-5">
						<div class="mb-3 font-semibold text-red-400">Cons</div>
						<ul class="space-y-2">
							{
								data.pictureCons.map((con) => (
									<li class="flex items-start gap-2 text-sm text-gray-300">
										<span class="flex-shrink-0 text-red-400">✗</span>
										<span>{con}</span>
									</li>
								))
							}
						</ul>
					</div>
				</div>

				<!-- Competitor Pros/Cons -->
				<div class="space-y-4">
					<h3 class="mb-3 text-lg font-semibold text-gray-300">{data.competitor}</h3>

					<div class="rounded-xl border border-green-500/20 bg-green-500/5 p-5">
						<div class="mb-3 font-semibold text-green-400">Pros</div>
						<ul class="space-y-2">
							{
								data.competitorPros.map((pro) => (
									<li class="flex items-start gap-2 text-sm text-gray-300">
										<span class="flex-shrink-0 text-green-400">✓</span>
										<span>{pro}</span>
									</li>
								))
							}
						</ul>
					</div>

					<div class="rounded-xl border border-red-500/20 bg-red-500/5 p-5">
						<div class="mb-3 font-semibold text-red-400">Cons</div>
						<ul class="space-y-2">
							{
								data.competitorCons.map((con) => (
									<li class="flex items-start gap-2 text-sm text-gray-300">
										<span class="flex-shrink-0 text-red-400">✗</span>
										<span>{con}</span>
									</li>
								))
							}
						</ul>
					</div>
				</div>
			</div>
		</div>

		<!-- Best For Section -->
		<div class="mx-auto max-w-4xl px-6 pb-12">
			<h2 class="mb-6 text-2xl font-bold text-white">Which Should You Choose?</h2>
			<div class="grid gap-6 md:grid-cols-2">
				<!-- Choose Picture -->
				<div class="rounded-xl border border-primary/20 bg-primary/5 p-6">
					<div class="mb-4 flex items-center gap-3">
						<div class="text-3xl">{data.icon}</div>
						<h3 class="text-lg font-bold text-primary">Choose Picture</h3>
					</div>
					<ul class="space-y-2">
						{
							data.bestFor.picture.map((reason) => (
								<li class="flex items-start gap-2 text-sm text-gray-300">
									<span class="flex-shrink-0 text-primary">✓</span>
									<span>{reason}</span>
								</li>
							))
						}
					</ul>
					<a
						href="#"
						class="mt-6 block w-full rounded-lg bg-primary px-6 py-3 text-center font-medium text-white transition-colors hover:bg-primary/90"
					>
						Try Picture Free
					</a>
				</div>

				<!-- Choose Competitor -->
				<div class="rounded-xl border border-dark-border bg-dark-elevated p-6">
					<div class="mb-4 flex items-center gap-3">
						<div class="text-3xl">🔄</div>
						<h3 class="text-lg font-bold text-gray-300">Choose {data.competitor}</h3>
					</div>
					<ul class="space-y-2">
						{
							data.bestFor.competitor.map((reason) => (
								<li class="flex items-start gap-2 text-sm text-gray-300">
									<span class="flex-shrink-0 text-gray-500">•</span>
									<span>{reason}</span>
								</li>
							))
						}
					</ul>
					{
						data.competitorWebsite && (
							<a
								href={data.competitorWebsite}
								target="_blank"
								rel="noopener noreferrer"
								class="mt-6 block w-full rounded-lg border border-dark-border bg-dark-bg px-6 py-3 text-center font-medium text-gray-300 transition-colors hover:border-primary"
							>
								Visit {data.competitor} →
							</a>
						)
					}
				</div>
			</div>
		</div>

		<!-- Full Article Content -->
		<div class="mx-auto max-w-4xl px-6 pb-12">
			<div class="prose prose-lg prose-invert max-w-none">
				<Content />
			</div>
		</div>

		<!-- Related Comparisons -->
		{
			relatedComparisons.length > 0 && (
				<div class="mx-auto max-w-6xl px-6 pb-16">
					<h2 class="mb-6 text-2xl font-bold text-white">Related Comparisons</h2>
					<div class="grid gap-6 md:grid-cols-3">
						{relatedComparisons.map((comp) => (
							<ComparisonCard comparison={comp} />
						))}
					</div>
				</div>
			)
		}

		<!-- Final 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">Try Picture Free</h2>
				<p class="mb-8 text-gray-300">
					Experience the difference with 50 free images - no credit card required.
				</p>
				<a
					href="#"
					class="inline-block rounded-lg bg-primary px-8 py-3 font-medium text-white transition-colors hover:bg-primary/90"
				>
					Start Creating Now
				</a>
			</div>
		</div>
	</article>

	<style>
		.prose {
			@apply text-gray-300;
		}
		.prose h2 {
			@apply mb-6 mt-12 text-2xl font-bold text-white;
		}
		.prose h3 {
			@apply mb-4 mt-8 text-xl font-bold text-white;
		}
		.prose p {
			@apply mb-4 leading-relaxed;
		}
		.prose ul {
			@apply mb-4 list-inside list-disc space-y-2;
		}
		.prose table {
			@apply mb-8 w-full overflow-hidden rounded-lg border border-dark-border;
		}
		.prose th {
			@apply bg-dark-elevated px-4 py-3 text-left font-semibold;
		}
		.prose td {
			@apply border-t border-dark-border px-4 py-3;
		}
	</style>
</Layout>
