---
import type { ChangelogEntry } from '../../utils/changelog';
import VersionBadge from './VersionBadge.astro';
import {
	countTotalChanges,
	formatReleaseDate,
	getTimeAgo,
	isRecentRelease,
	getPlatformIcon,
	getPlatformDisplayName,
	getSeverityIcon,
	getSeverityColor,
} from '../../utils/changelog';

interface Props {
	entry: ChangelogEntry;
	detailed?: boolean;
}

const { entry, detailed = false } = Astro.props;
const { data } = entry;
const totalChanges = countTotalChanges(entry);
const formattedDate = formatReleaseDate(data.releaseDate);
const timeAgo = getTimeAgo(data.releaseDate);
const isRecent = isRecentRelease(data.releaseDate);
---

<article class="changelog-entry">
	<div class="entry-header">
		<div class="flex flex-wrap items-start justify-between gap-4">
			<div>
				<div class="mb-3 flex flex-wrap items-center gap-3">
					<VersionBadge version={data.version} type={data.type} showLabel={false} />

					{
						data.highlighted && (
							<span class="rounded border border-yellow-500/20 bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-400">
								⭐ Highlighted
							</span>
						)
					}

					{
						isRecent && (
							<span class="rounded border border-green-500/20 bg-green-500/10 px-2 py-1 text-xs font-medium text-green-400">
								🆕 New
							</span>
						)
					}
				</div>

				<a href={`/changelog/${entry.id}`} class="entry-title-link">
					<h3 class="entry-title">{data.title}</h3>
				</a>

				<p class="entry-summary">{data.summary}</p>

				<div class="entry-meta">
					<span class="meta-item">
						<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 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
							></path>
						</svg>
						{formattedDate} · {timeAgo}
					</span>
					<span class="meta-item">
						<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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
							></path>
						</svg>
						{totalChanges} changes
					</span>
					<span class="meta-item platforms">
						{
							data.platforms.map((platform) => (
								<span class="platform-badge" title={getPlatformDisplayName(platform)}>
									{getPlatformIcon(platform)}
								</span>
							))
						}
					</span>
				</div>
			</div>

			<a href={`/changelog/${entry.id}`} class="read-more-btn">
				Read More
				<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="M9 5l7 7-7 7"
					></path>
				</svg>
			</a>
		</div>
	</div>

	<!-- Changes Preview -->
	<div class="entry-changes">
		<!-- Features -->
		{
			data.changes.features.length > 0 && (
				<div class="change-section">
					<h4 class="change-section-title">
						<span class="change-icon">✨</span>
						<span>New Features ({data.changes.features.length})</span>
					</h4>
					<ul class="change-list">
						{data.changes.features.slice(0, detailed ? undefined : 3).map((feature) => (
							<li class="change-item">
								<span class="change-bullet">•</span>
								<div>
									<span class="change-title">{feature.title}</span>
									{detailed && <p class="change-description">{feature.description}</p>}
								</div>
							</li>
						))}
						{!detailed && data.changes.features.length > 3 && (
							<li class="change-item-more">+ {data.changes.features.length - 3} more features</li>
						)}
					</ul>
				</div>
			)
		}

		<!-- Improvements -->
		{
			data.changes.improvements.length > 0 && (
				<div class="change-section">
					<h4 class="change-section-title">
						<span class="change-icon">🔧</span>
						<span>Improvements ({data.changes.improvements.length})</span>
					</h4>
					<ul class="change-list">
						{data.changes.improvements.slice(0, detailed ? undefined : 3).map((improvement) => (
							<li class="change-item">
								<span class="change-bullet">•</span>
								<div>
									<span class="change-title">{improvement.title}</span>
									{detailed && <p class="change-description">{improvement.description}</p>}
								</div>
							</li>
						))}
						{!detailed && data.changes.improvements.length > 3 && (
							<li class="change-item-more">
								+ {data.changes.improvements.length - 3} more improvements
							</li>
						)}
					</ul>
				</div>
			)
		}

		<!-- Bug Fixes -->
		{
			data.changes.bugfixes.length > 0 && (
				<div class="change-section">
					<h4 class="change-section-title">
						<span class="change-icon">🐛</span>
						<span>Bug Fixes ({data.changes.bugfixes.length})</span>
					</h4>
					<ul class="change-list">
						{data.changes.bugfixes.slice(0, detailed ? undefined : 3).map((bugfix) => (
							<li class="change-item">
								<span class="change-bullet">•</span>
								<div>
									{bugfix.severity && (
										<span class={`severity-badge ${getSeverityColor(bugfix.severity)}`}>
											{getSeverityIcon(bugfix.severity)}
										</span>
									)}
									<span class="change-title">{bugfix.title}</span>
									{detailed && <p class="change-description">{bugfix.description}</p>}
								</div>
							</li>
						))}
						{!detailed && data.changes.bugfixes.length > 3 && (
							<li class="change-item-more">+ {data.changes.bugfixes.length - 3} more bug fixes</li>
						)}
					</ul>
				</div>
			)
		}

		<!-- Breaking Changes -->
		{
			data.changes.breaking.length > 0 && (
				<div class="change-section breaking">
					<h4 class="change-section-title">
						<span class="change-icon">⚠️</span>
						<span>Breaking Changes ({data.changes.breaking.length})</span>
					</h4>
					<ul class="change-list">
						{data.changes.breaking.map((breaking) => (
							<li class="change-item">
								<span class="change-bullet">•</span>
								<div>
									<span class="change-title">{breaking.title}</span>
									<p class="change-description">{breaking.description}</p>
									{breaking.migration && (
										<p class="migration-guide">
											<strong>Migration:</strong> {breaking.migration}
										</p>
									)}
								</div>
							</li>
						))}
					</ul>
				</div>
			)
		}
	</div>
</article>

<style>
	.changelog-entry {
		@apply rounded-2xl border border-dark-border bg-dark-elevated p-6 transition hover:border-primary/30;
	}

	.entry-header {
		@apply mb-6;
	}

	.entry-title-link {
		@apply block;
	}

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

	.entry-summary {
		@apply mb-4 leading-relaxed text-gray-300;
	}

	.entry-meta {
		@apply flex flex-wrap items-center gap-4 text-sm text-gray-500;
	}

	.meta-item {
		@apply flex items-center gap-1.5;
	}

	.platforms {
		@apply gap-1;
	}

	.platform-badge {
		@apply text-base;
	}

	.read-more-btn {
		@apply flex items-center gap-2 whitespace-nowrap rounded-lg border border-primary/20 bg-primary/10 px-4 py-2 text-sm font-medium text-primary transition hover:bg-primary/20;
	}

	.entry-changes {
		@apply space-y-4;
	}

	.change-section {
		@apply rounded-xl bg-dark-bg p-4;
	}

	.change-section.breaking {
		@apply border border-red-500/20 bg-red-500/5;
	}

	.change-section-title {
		@apply mb-3 flex items-center gap-2 text-sm font-semibold text-white;
	}

	.change-icon {
		@apply text-base;
	}

	.change-list {
		@apply space-y-2;
	}

	.change-item {
		@apply flex items-start gap-2 text-sm text-gray-300;
	}

	.change-bullet {
		@apply mt-0.5 flex-shrink-0 text-primary;
	}

	.change-title {
		@apply font-medium text-white;
	}

	.change-description {
		@apply mt-1 text-sm text-gray-400;
	}

	.change-item-more {
		@apply pl-4 text-sm italic text-gray-500;
	}

	.severity-badge {
		@apply mr-1 text-xs;
	}

	.migration-guide {
		@apply mt-2 rounded bg-yellow-500/5 p-2 text-sm text-yellow-400;
	}
</style>
