<template>
	<article class="listing-detail">
		<!-- Header -->
		<header class="mb-10">
			<div class="flex flex-col sm:flex-row sm:items-start gap-5">
				<!-- Logo -->
				<figure
					v-if="listing.logo"
					class="w-20 h-20 rounded-2xl overflow-hidden flex-shrink-0 border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900 shadow-sm"
				>
					<img
						:src="listing.logo"
						:alt="listing.name"
						class="w-full h-full object-contain"
					/>
				</figure>
				<div
					v-else
					class="w-20 h-20 rounded-2xl flex-shrink-0 bg-primary-100 dark:bg-primary-900/40 flex items-center justify-center shadow-sm"
				>
					<span
						class="text-primary-600 dark:text-primary-400 font-bold text-3xl"
					>
						{{ listing.name.charAt(0) }}
					</span>
				</div>

				<!-- Name + Meta -->
				<div class="flex-1 min-w-0">
					<div class="flex flex-wrap items-center gap-2 mb-1">
						<h1
							class="text-2xl sm:text-3xl font-bold text-neutral-900 dark:text-white"
						>
							{{ listing.name }}
						</h1>
						<UBadge
							v-if="listing.badge"
							:label="listing.badge"
							color="primary"
							variant="solid"
							size="sm"
						/>
					</div>

					<!-- Category + Rating -->
					<div class="flex flex-wrap items-center gap-3 mt-2">
						<UBadge
							v-if="listing.category"
							:label="listing.category"
							variant="subtle"
							color="neutral"
						/>

						<div v-if="listing.rating" class="flex items-center gap-1.5">
							<div class="flex items-center gap-0.5">
								<UIcon
									v-for="i in 5"
									:key="i"
									name="i-lucide-star"
									class="w-4 h-4"
									:class="
										i <= Math.round(listing.rating)
											? 'text-yellow-400'
											: 'text-neutral-300 dark:text-neutral-600'
									"
								/>
							</div>
							<span
								class="text-sm font-semibold text-neutral-700 dark:text-neutral-300"
							>
								{{ listing.rating.toFixed(1) }}
							</span>
							<span
								v-if="listing.reviewCount"
								class="text-sm text-neutral-500 dark:text-neutral-400"
							>
								({{ listing.reviewCount }} reviews)
							</span>
						</div>
					</div>

					<!-- Tags -->
					<div v-if="listing.tags?.length" class="flex flex-wrap gap-1.5 mt-3">
						<UBadge
							v-for="tag in listing.tags"
							:key="tag"
							:label="tag"
							variant="subtle"
							color="neutral"
							size="sm"
						/>
					</div>
				</div>
			</div>
		</header>

		<!-- Content Grid -->
		<div
			:class="[
				'grid gap-10 lg:gap-14',
				hasSidebar ? 'lg:grid-cols-[1fr_300px]' : '',
			]"
		>
			<!-- Main Content -->
			<div class="min-w-0">
				<!-- Description -->
				<section v-if="listing.description" class="mb-8">
					<div class="prose prose-neutral dark:prose-invert max-w-none">
						<p
							class="text-lg text-neutral-700 dark:text-neutral-300 leading-relaxed"
						>
							{{ listing.description }}
						</p>
					</div>
				</section>

				<!-- After Description Slot -->
				<slot name="after-description" />

				<!-- Screenshots Gallery -->
				<section
					v-if="hasScreenshots && listing.screenshots?.length"
					class="mb-10"
				>
					<h2
						class="text-lg font-semibold text-neutral-900 dark:text-white mb-4"
					>
						Screenshots
					</h2>
					<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
						<figure
							v-for="(screenshot, index) in listing.screenshots"
							:key="index"
							class="aspect-video rounded-xl overflow-hidden border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-900 cursor-pointer group"
						>
							<img
								:src="
									typeof screenshot === 'string' ? screenshot : screenshot.src
								"
								:alt="
									typeof screenshot === 'string'
										? `Screenshot ${index + 1}`
										: screenshot.alt || `Screenshot ${index + 1}`
								"
								class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
							/>
						</figure>
					</div>
				</section>

				<!-- Features List -->
				<section v-if="listing.features?.length" class="mb-10">
					<h2
						class="text-lg font-semibold text-neutral-900 dark:text-white mb-4"
					>
						Features
					</h2>
					<ul class="grid sm:grid-cols-2 gap-3">
						<li
							v-for="(feature, index) in listing.features"
							:key="index"
							class="flex items-start gap-3"
						>
							<span
								class="flex-shrink-0 w-5 h-5 rounded-full bg-primary-100 dark:bg-primary-900/40 flex items-center justify-center mt-0.5"
							>
								<UIcon
									name="i-lucide-check"
									class="w-3 h-3 text-primary-600 dark:text-primary-400"
								/>
							</span>
							<span class="text-sm text-neutral-700 dark:text-neutral-300">
								{{ feature }}
							</span>
						</li>
					</ul>
				</section>

				<!-- Reviews Slot -->
				<section v-if="hasReviews">
					<slot name="reviews" />
				</section>
			</div>

			<!-- Sidebar -->
			<aside v-if="hasSidebar" class="hidden lg:block">
				<div class="sticky top-24 space-y-6">
					<!-- Default Sidebar Content -->
					<slot name="sidebar">
						<!-- Website CTA -->
						<div
							class="p-5 rounded-xl bg-neutral-50 dark:bg-neutral-900/50 border border-neutral-200/60 dark:border-neutral-800"
						>
							<UButton
								v-if="listing.website"
								:to="listing.website"
								label="Visit Website"
								icon="i-lucide-external-link"
								color="primary"
								variant="solid"
								block
								target="_blank"
								rel="noopener noreferrer"
								class="justify-center mb-4"
							/>

							<!-- Category -->
							<div
								v-if="listing.category"
								class="flex items-center justify-between py-2.5 border-b border-neutral-200 dark:border-neutral-800"
							>
								<span
									class="text-xs font-semibold uppercase tracking-wider text-neutral-500"
								>
									Category
								</span>
								<UBadge
									:label="listing.category"
									variant="subtle"
									color="neutral"
									size="sm"
								/>
							</div>

							<!-- Rating Summary -->
							<div
								v-if="listing.rating"
								class="flex items-center justify-between py-2.5 border-b border-neutral-200 dark:border-neutral-800"
							>
								<span
									class="text-xs font-semibold uppercase tracking-wider text-neutral-500"
								>
									Rating
								</span>
								<div class="flex items-center gap-1.5">
									<UIcon name="i-lucide-star" class="w-4 h-4 text-yellow-400" />
									<span
										class="text-sm font-semibold text-neutral-900 dark:text-white"
									>
										{{ listing.rating.toFixed(1) }}
									</span>
									<span
										v-if="listing.reviewCount"
										class="text-xs text-neutral-500"
									>
										({{ listing.reviewCount }})
									</span>
								</div>
							</div>

							<!-- Tags -->
							<div v-if="listing.tags?.length" class="pt-3">
								<span
									class="text-xs font-semibold uppercase tracking-wider text-neutral-500 block mb-2"
								>
									Tags
								</span>
								<div class="flex flex-wrap gap-1.5">
									<UBadge
										v-for="tag in listing.tags"
										:key="tag"
										:label="tag"
										variant="subtle"
										color="neutral"
										size="xs"
									/>
								</div>
							</div>
						</div>
					</slot>
				</div>
			</aside>
		</div>
	</article>
</template>

<script setup>
const props = defineProps({
	/** Listing object { name, description?, logo?, website?, screenshots?, tags?, category?, rating?, reviewCount?, features? } */
	listing: {
		type: Object,
		default: () => ({
			name: "Listing Name",
			description: "Full description of this listing.",
			category: "General",
			rating: 4.5,
			reviewCount: 42,
		}),
	},
	/** Show screenshots gallery */
	hasScreenshots: {
		type: Boolean,
		default: true,
	},
	/** Show sidebar */
	hasSidebar: {
		type: Boolean,
		default: true,
	},
	/** Show reviews section */
	hasReviews: {
		type: Boolean,
		default: false,
	},
});
</script>
