---
import type { CollectionEntry } from 'astro:content';
import {
	getWinnerBadgeColor,
	getWinnerBadgeText,
	getTypeDisplayName,
	getTypeIcon,
} from '../../utils/comparisons';

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

const { comparison } = Astro.props;
const { data } = comparison;
---

<a href={`/comparisons/${comparison.id}`} class="comparison-card group">
	<div class="card-content">
		<!-- Header: Icon, Badges, Type -->
		<div class="mb-4 flex items-start justify-between">
			<div class="flex items-center gap-3">
				<div class="icon">{data.icon}</div>
				<div>
					<span class="type-badge">
						{getTypeIcon(data.type)}
						{getTypeDisplayName(data.type)}
					</span>
				</div>
			</div>
			<div class="flex flex-col items-end gap-2">
				{data.featured && <span class="badge badge-primary">Featured</span>}
				{data.trending && <span class="badge badge-trending">🔥 Trending</span>}
			</div>
		</div>

		<!-- Title & Competitor -->
		<h3 class="title">{data.title}</h3>
		<p class="competitor">vs {data.competitor}</p>

		<!-- Description -->
		<p class="description">{data.description}</p>

		<!-- Quick Stats -->
		<div class="stats-grid">
			<!-- Pricing Winner -->
			<div class="stat-item">
				<div class="stat-label">💰 Pricing</div>
				<div
					class={`stat-value ${data.comparisonTable.pricing.winner === 'picture' ? 'text-green-400' : 'text-gray-400'}`}
				>
					{
						data.comparisonTable.pricing.winner === 'picture'
							? '✓ Picture'
							: data.comparisonTable.pricing.winner === 'tie'
								? 'Tie'
								: 'Competitor'
					}
				</div>
			</div>

			<!-- Speed Winner -->
			<div class="stat-item">
				<div class="stat-label">⚡ Speed</div>
				<div
					class={`stat-value ${data.comparisonTable.speed.winner === 'picture' ? 'text-green-400' : 'text-gray-400'}`}
				>
					{
						data.comparisonTable.speed.winner === 'picture'
							? '✓ Picture'
							: data.comparisonTable.speed.winner === 'tie'
								? 'Tie'
								: 'Competitor'
					}
				</div>
			</div>

			<!-- Quality Winner -->
			<div class="stat-item">
				<div class="stat-label">🎨 Quality</div>
				<div
					class={`stat-value ${data.comparisonTable.imageQuality.winner === 'picture' ? 'text-green-400' : 'text-gray-400'}`}
				>
					{
						data.comparisonTable.imageQuality.winner === 'picture'
							? '✓ Picture'
							: data.comparisonTable.imageQuality.winner === 'tie'
								? 'Tie'
								: 'Competitor'
					}
				</div>
			</div>

			<!-- Ease of Use Winner -->
			<div class="stat-item">
				<div class="stat-label">🎯 Ease</div>
				<div
					class={`stat-value ${data.comparisonTable.easeOfUse.winner === 'picture' ? 'text-green-400' : 'text-gray-400'}`}
				>
					{
						data.comparisonTable.easeOfUse.winner === 'picture'
							? '✓ Picture'
							: data.comparisonTable.easeOfUse.winner === 'tie'
								? 'Tie'
								: 'Competitor'
					}
				</div>
			</div>
		</div>

		<!-- Verdict Preview -->
		<div class="verdict">
			<div class="verdict-label">Verdict:</div>
			<p class="verdict-text">{data.verdict}</p>
		</div>

		<!-- Overall Winner Badge -->
		{
			data.winnerBadge && (
				<div class={`winner-badge ${getWinnerBadgeColor(data.winnerBadge)}`}>
					{getWinnerBadgeText(data.winnerBadge)}
				</div>
			)
		}

		<!-- CTA Arrow -->
		<div class="cta-arrow">
			<span>Read Full Comparison</span>
			<svg
				class="h-5 w-5 transition-transform group-hover:translate-x-1"
				fill="none"
				stroke="currentColor"
				viewBox="0 0 24 24"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
			</svg>
		</div>
	</div>
</a>

<style>
	.comparison-card {
		@apply block rounded-2xl border border-dark-border bg-dark-elevated p-6
		       transition-all duration-300 hover:-translate-y-1 hover:border-primary
		       hover:shadow-xl hover:shadow-primary/10;
	}

	.card-content {
		@apply flex h-full flex-col;
	}

	.icon {
		@apply text-4xl;
	}

	.type-badge {
		@apply rounded-lg border border-dark-border bg-dark-bg px-2 py-1 text-xs text-gray-400;
	}

	.badge {
		@apply rounded-full px-2 py-1 text-xs font-medium;
	}

	.badge-primary {
		@apply border border-primary/20 bg-primary/10 text-primary;
	}

	.badge-trending {
		@apply border border-orange-500/20 bg-orange-500/10 text-orange-400;
	}

	.title {
		@apply mb-2 text-xl font-bold text-white transition-colors group-hover:text-primary;
	}

	.competitor {
		@apply mb-3 text-sm text-gray-500;
	}

	.description {
		@apply mb-4 text-sm leading-relaxed text-gray-400;
	}

	.stats-grid {
		@apply mb-4 grid grid-cols-2 gap-3 border-b border-dark-border pb-4;
	}

	.stat-item {
		@apply flex flex-col;
	}

	.stat-label {
		@apply mb-1 text-xs text-gray-500;
	}

	.stat-value {
		@apply text-sm font-medium;
	}

	.verdict {
		@apply mb-4 rounded-lg border border-dark-border bg-dark-bg p-3;
	}

	.verdict-label {
		@apply mb-1 text-xs font-semibold text-primary;
	}

	.verdict-text {
		@apply text-sm leading-relaxed text-gray-300;
	}

	.winner-badge {
		@apply mb-4 rounded-lg px-4 py-2 text-center text-sm font-semibold;
	}

	.cta-arrow {
		@apply mt-auto flex items-center justify-between text-sm font-medium text-primary;
	}
</style>
