<template>
	<article
		class="group flex flex-col h-full"
		:class="featured && 'p-0'"
	>
		<!-- Clickable card surface (image, meta, title, excerpt, author) -->
		<NuxtLink :to="postHref" class="block flex-1">
			<!-- Featured ribbon -->
			<div v-if="featured" class="mb-3">
				<UBadge
					label="Featured"
					color="primary"
					variant="solid"
					size="md"
				/>
			</div>

			<!-- Image -->
			<figure
				v-if="imageSrc"
				:class="[
					'rounded-xl overflow-hidden xHover-zoom shadow-md transition-shadow duration-300 group-hover:shadow-xl',
					featured
						? 'aspect-[21/9] mb-6'
						: 'aspect-[16/9] mb-4',
				]"
			>
				<img
					:src="imageSrc"
					:alt="imageAlt"
					class="w-full h-full object-cover"
				/>
			</figure>

			<!-- Meta -->
			<div class="flex items-center gap-3 mb-3 flex-wrap">
				<UBadge
					v-if="hasCategory && post.category"
					:label="post.category"
					variant="subtle"
				/>
				<time
					v-if="post.date || post.publishedAt"
					:datetime="post.date || post.publishedAt"
					:class="featured ? 'text-base text-neutral-500' : 'text-sm text-neutral-500'"
				>
					{{ formattedDate }}
				</time>
				<span v-if="post.readingTime" class="text-sm text-neutral-400">·</span>
				<span
					v-if="post.readingTime"
					:class="featured ? 'text-base text-neutral-500' : 'text-sm text-neutral-500'"
					>{{ post.readingTime }} min read</span
				>
			</div>

			<!-- Title -->
			<h3
				:class="[
					'text-neutral-900 dark:text-white group-hover:text-primary-500 transition-colors',
					featured
						? 'text-2xl sm:text-3xl lg:text-4xl font-bold leading-tight'
						: 'xText-title',
				]"
			>
				{{ post.title }}
			</h3>

			<!-- Excerpt / Description -->
			<p
				v-if="hasExcerpt && excerpt"
				:class="[
					'text-neutral-600 dark:text-neutral-400',
					featured
						? 'mt-4 text-base sm:text-lg leading-relaxed'
						: 'mt-2 text-sm line-clamp-2',
				]"
			>
				{{ excerpt }}
			</p>

			<!-- Author -->
			<div v-if="hasAuthor && post.author" class="mt-4 flex items-center gap-3">
				<img
					v-if="post.author.avatar"
					:src="post.author.avatar"
					:alt="post.author.name"
					:class="featured ? 'w-10 h-10 rounded-full object-cover' : 'w-8 h-8 rounded-full object-cover'"
				/>
				<div
					v-else
					:class="featured
						? 'w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center'
						: 'w-8 h-8 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center'"
				>
					<span
						class="text-primary-600 dark:text-primary-400 font-medium text-sm"
					>
						{{ post.author.name?.charAt(0) }}
					</span>
				</div>
				<span
					:class="featured
						? 'text-base font-medium text-neutral-900 dark:text-white'
						: 'text-sm font-medium text-neutral-900 dark:text-white'"
				>
					{{ post.author.name }}
				</span>
			</div>
		</NuxtLink>

		<!-- Full Width Button (always visible when `button` prop is passed) -->
		<UButton
			v-if="button?.label"
			:to="postHref"
			:label="button.label"
			:color="button.color || 'primary'"
			:variant="button.variant || 'solid'"
			:icon="button.icon"
			block
			:size="featured ? 'xl' : 'md'"
			class="mt-4 w-full justify-center"
		/>
	</article>
</template>

<script setup>
const props = defineProps({
	/**
	 * Blog post object.
	 * Accepted shapes (auto-detected):
	 *   - { title, slug, img: { src, alt }?, excerpt?, date?, category?, author?, tags? }
	 *   - Nuxt Content: { title, _path, path, image?, description?, publishedAt?, category?, author? }
	 */
	post: {
		type: Object,
		default: () => ({
			title: "Blog Post Title",
			slug: "#",
		}),
	},
	/** Show category badge */
	hasCategory: {
		type: Boolean,
		default: true,
	},
	/** Show author info */
	hasAuthor: {
		type: Boolean,
		default: true,
	},
	/** Show excerpt / description */
	hasExcerpt: {
		type: Boolean,
		default: true,
	},
	/**
	 * Optional full-width read-more button.
	 * Shape: { label: string, color?: string, variant?: string, icon?: string }
	 * Default theme uses `primary`/`solid`.
	 */
	button: {
		type: Object,
		default: null,
	},
	/**
	 * Optional path prefix. Defaults to "/blog".
	 * Posts with a full `_path` / `path` (e.g. "/blog/my-post") are used as-is.
	 */
	pathPrefix: {
		type: String,
		default: "/blog",
	},
	/**
	 * Featured variant: wider image (21:9), larger title (up to 4xl),
	 * un-clamped excerpt, larger author, "Featured" ribbon, xl button.
	 */
	featured: {
		type: Boolean,
		default: false,
	},
});

// --- Resolved post fields (handle Nuxt Content + custom shapes) ------------

const slug = computed(() => {
	const p = props.post;
	if (p.slug) return p.slug;
	// Derive slug from Nuxt Content _path / path
	const raw = p._path || p.path || "";
	const stripped = raw.replace(/^\/+/, "");
	if (!stripped) return "";
	// _path might already be "/blog/foo" — return tail
	return stripped.includes("/") ? stripped.split("/").pop() : stripped;
});

const postHref = computed(() => {
	const p = props.post;
	if (p._path) return p._path;
	if (p.path) return p.path;
	const s = slug.value;
	if (!s || s === "#") return props.pathPrefix;
	return `${props.pathPrefix}/${s}`;
});

const imageSrc = computed(() => {
	const p = props.post;
	if (p.img?.src) return p.img.src;
	if (typeof p.img === "string" && p.img) return p.img;
	if (typeof p.image === "string" && p.image) return p.image;
	if (p.cover?.src) return p.cover.src;
	return "";
});

const imageAlt = computed(() => {
	const p = props.post;
	if (p.img?.alt) return p.img.alt;
	return p.title || "";
});

const excerpt = computed(() => {
	const p = props.post;
	return p.excerpt || p.description || "";
});

const formattedDate = computed(() => {
	const raw = props.post.date || props.post.publishedAt || "";
	if (!raw) return "";
	const date = new Date(raw);
	if (Number.isNaN(date.getTime())) return "";
	return date.toLocaleDateString("en-US", {
		year: "numeric",
		month: "short",
		day: "numeric",
	});
});
</script>
