<template>
	<!-- Card Layout -->
	<article
		v-if="layout === 'card'"
		class="group relative flex flex-col rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 overflow-hidden transition-all duration-300 ease-out hover:-translate-y-1 hover:shadow-[0_12px_40px_rgba(128,128,128,0.15)] dark:hover:shadow-[0_12px_40px_rgba(255,255,255,0.07)]"
	>
		<!-- Badge -->
		<div v-if="showBadge && listing.badge" class="absolute top-3 right-3 z-10">
			<UBadge
				:label="listing.badge"
				:color="badgeColor"
				variant="solid"
				size="sm"
			/>
		</div>

		<!-- Logo / Header -->
		<div class="p-5 pb-0 flex items-start gap-4">
			<figure
				v-if="listing.logo"
				class="w-14 h-14 rounded-xl overflow-hidden flex-shrink-0 border border-neutral-100 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800"
			>
				<img
					:src="listing.logo"
					:alt="listing.name"
					class="w-full h-full object-contain"
				/>
			</figure>
			<div
				v-else
				class="w-14 h-14 rounded-xl flex-shrink-0 bg-primary-100 dark:bg-primary-900/40 flex items-center justify-center"
			>
				<span class="text-primary-600 dark:text-primary-400 font-bold text-xl">
					{{ listing.name.charAt(0) }}
				</span>
			</div>

			<div class="flex-1 min-w-0 pt-1">
				<h3
					class="font-semibold text-neutral-900 dark:text-white truncate group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors"
				>
					{{ listing.name }}
				</h3>
				<p
					v-if="listing.category"
					class="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5"
				>
					{{ listing.category }}
				</p>
			</div>
		</div>

		<!-- Description -->
		<div class="px-5 pt-3 flex-1">
			<p
				v-if="listing.description"
				class="text-sm text-neutral-600 dark:text-neutral-400 line-clamp-2"
			>
				{{ listing.description }}
			</p>
		</div>

		<!-- Tags -->
		<div
			v-if="showTags && listing.tags?.length"
			class="px-5 pt-3 flex flex-wrap gap-1.5"
		>
			<UBadge
				v-for="tag in listing.tags.slice(0, 4)"
				:key="tag"
				:label="tag"
				variant="subtle"
				color="neutral"
				size="xs"
			/>
		</div>

		<!-- Rating -->
		<div
			v-if="showRating && listing.rating"
			class="px-5 pt-3 flex items-center gap-2"
		>
			<div class="flex items-center gap-0.5">
				<UIcon
					v-for="i in 5"
					:key="i"
					name="i-lucide-star"
					class="w-3.5 h-3.5"
					:class="
						i <= Math.round(listing.rating)
							? 'text-yellow-400'
							: 'text-neutral-300 dark:text-neutral-600'
					"
				/>
			</div>
			<span class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
				{{ listing.rating.toFixed(1) }}
			</span>
			<span
				v-if="listing.reviewCount"
				class="text-xs text-neutral-500 dark:text-neutral-400"
			>
				({{ listing.reviewCount }})
			</span>
		</div>

		<!-- CTA -->
		<div class="p-5 pt-4 mt-auto">
			<UButton
				:to="listing.to || '#'"
				:label="ctaLabel"
				color="primary"
				variant="outline"
				size="sm"
				block
				class="justify-center"
			/>
		</div>
	</article>

	<!-- Row Layout -->
	<article
		v-else-if="layout === 'row'"
		class="group flex items-center gap-4 p-4 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 transition-all duration-300 ease-out hover:-translate-y-0.5 hover:shadow-[0_8px_24px_rgba(128,128,128,0.12)] dark:hover:shadow-[0_8px_24px_rgba(255,255,255,0.06)]"
	>
		<!-- Logo -->
		<figure
			v-if="listing.logo"
			class="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0 border border-neutral-100 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800"
		>
			<img
				:src="listing.logo"
				:alt="listing.name"
				class="w-full h-full object-contain"
			/>
		</figure>
		<div
			v-else
			class="w-12 h-12 rounded-lg flex-shrink-0 bg-primary-100 dark:bg-primary-900/40 flex items-center justify-center"
		>
			<span class="text-primary-600 dark:text-primary-400 font-bold text-lg">
				{{ listing.name.charAt(0) }}
			</span>
		</div>

		<!-- Content -->
		<div class="flex-1 min-w-0">
			<div class="flex items-center gap-2 flex-wrap">
				<h3
					class="font-semibold text-neutral-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors"
				>
					{{ listing.name }}
				</h3>
				<UBadge
					v-if="showBadge && listing.badge"
					:label="listing.badge"
					:color="badgeColor"
					variant="solid"
					size="xs"
				/>
				<UBadge
					v-if="listing.category"
					:label="listing.category"
					variant="subtle"
					color="neutral"
					size="xs"
				/>
			</div>
			<p
				v-if="listing.description"
				class="text-sm text-neutral-600 dark:text-neutral-400 mt-0.5 truncate"
			>
				{{ listing.description }}
			</p>
			<div
				v-if="showRating && listing.rating"
				class="flex items-center gap-1.5 mt-1"
			>
				<div class="flex items-center gap-0.5">
					<UIcon
						v-for="i in 5"
						:key="i"
						name="i-lucide-star"
						class="w-3 h-3"
						:class="
							i <= Math.round(listing.rating)
								? 'text-yellow-400'
								: 'text-neutral-300 dark:text-neutral-600'
						"
					/>
				</div>
				<span class="text-xs text-neutral-500 dark:text-neutral-400">
					{{ listing.rating.toFixed(1) }}
					<span v-if="listing.reviewCount">({{ listing.reviewCount }})</span>
				</span>
			</div>
		</div>

		<!-- Tags (row) -->
		<div
			v-if="showTags && listing.tags?.length"
			class="hidden sm:flex flex-wrap gap-1 flex-shrink-0"
		>
			<UBadge
				v-for="tag in listing.tags.slice(0, 2)"
				:key="tag"
				:label="tag"
				variant="subtle"
				color="neutral"
				size="xs"
			/>
		</div>

		<!-- CTA -->
		<UButton
			:to="listing.to || '#'"
			:label="ctaLabel"
			color="primary"
			variant="outline"
			size="sm"
			class="flex-shrink-0"
		/>
	</article>

	<!-- Compact Layout -->
	<article
		v-else-if="layout === 'compact'"
		class="group flex items-center gap-3 py-3 border-b border-neutral-100 dark:border-neutral-800 last:border-0 transition-colors hover:bg-neutral-50 dark:hover:bg-neutral-900/50 px-2 rounded-lg"
	>
		<!-- Logo -->
		<figure
			v-if="listing.logo"
			class="w-9 h-9 rounded-lg overflow-hidden flex-shrink-0 border border-neutral-100 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800"
		>
			<img
				:src="listing.logo"
				:alt="listing.name"
				class="w-full h-full object-contain"
			/>
		</figure>
		<div
			v-else
			class="w-9 h-9 rounded-lg flex-shrink-0 bg-primary-100 dark:bg-primary-900/40 flex items-center justify-center"
		>
			<span class="text-primary-600 dark:text-primary-400 font-bold text-sm">
				{{ listing.name.charAt(0) }}
			</span>
		</div>

		<!-- Name + Category -->
		<div class="flex-1 min-w-0">
			<NuxtLink
				:to="listing.to || '#'"
				class="font-medium text-sm text-neutral-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors truncate block"
			>
				{{ listing.name }}
			</NuxtLink>
			<p
				v-if="listing.category"
				class="text-xs text-neutral-500 dark:text-neutral-400 truncate"
			>
				{{ listing.category }}
			</p>
		</div>

		<!-- Rating -->
		<div
			v-if="showRating && listing.rating"
			class="flex items-center gap-1 flex-shrink-0"
		>
			<UIcon name="i-lucide-star" class="w-3 h-3 text-yellow-400" />
			<span class="text-xs font-medium text-neutral-700 dark:text-neutral-300">
				{{ listing.rating.toFixed(1) }}
			</span>
		</div>

		<!-- Badge -->
		<UBadge
			v-if="showBadge && listing.badge"
			:label="listing.badge"
			:color="badgeColor"
			variant="solid"
			size="xs"
			class="flex-shrink-0"
		/>
	</article>
</template>

<script setup>
const props = defineProps({
	/** Listing object { name, description?, logo?, category?, tags?, rating?, reviewCount?, badge?, to? } */
	listing: {
		type: Object,
		default: () => ({
			name: "Example Listing",
			description: "A great product or service.",
			category: "General",
			rating: 4.5,
			reviewCount: 42,
		}),
	},
	/** Card display layout */
	layout: {
		type: String,
		default: "card",
		validator: (v) => ["card", "row", "compact"].includes(v),
	},
	/** Show star rating */
	showRating: {
		type: Boolean,
		default: true,
	},
	/** Show tags */
	showTags: {
		type: Boolean,
		default: true,
	},
	/** Show badge (Featured, Sponsored, etc.) */
	showBadge: {
		type: Boolean,
		default: true,
	},
});

const ctaLabel = computed(() => {
	return props.listing.ctaLabel || "View Listing";
});

const badgeColor = computed(() => {
	const badge = props.listing.badge?.toLowerCase();
	if (badge === "featured") return "primary";
	if (badge === "sponsored") return "warning";
	if (badge === "new") return "success";
	return "primary";
});
</script>
