<script lang="ts">
	import { getImage } from '$lib/helper';
	import { getDidContext } from '$lib/website/context';
	import type { ContentComponentProps } from '../../types';
	import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';

	let { item, isEditing }: ContentComponentProps = $props();

	let faviconHasError = $state(false);

	let did = getDidContext();
</script>

{#if item.cardData.showBackgroundImage && item.cardData.image}
	<div class="link-card relative flex h-full flex-col justify-end p-4">
		<img
			class="absolute inset-0 -z-10 size-full object-cover"
			src={getImage(item.cardData, did)}
			alt=""
		/>
		<div
			class="from-base-50/90 via-base-50/40 dark:from-base-950/90 dark:via-base-950/40 absolute inset-0 -z-10 bg-linear-to-t to-transparent"
		></div>
		<div class="text-accent-600 dark:text-accent-400 text-xs font-semibold">
			{item.cardData.domain}
		</div>
		<div class="link-title text-base-900 dark:text-base-50 text-lg font-bold">
			{item.cardData.title}
		</div>
		{#if item.cardData.href && !isEditing}
			<a
				href={item.cardData.href}
				class="absolute inset-0 h-full w-full"
				target="_blank"
				rel="noopener noreferrer"
				use:qrOverlay={{
					context: {
						title: item.cardData.title
					}
				}}
			>
				<span class="sr-only">
					{item.cardData.hrefText ?? 'Learn more'}
				</span>

				<div
					class="bg-base-800/30 border-base-900/30 absolute top-2 right-2 rounded-full border p-1 text-white opacity-50 backdrop-blur-lg group-focus-within:opacity-100 group-hover:opacity-100"
				>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke-width="2.5"
						stroke="currentColor"
						class="size-4"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
						/>
					</svg>
				</div>
			</a>
		{/if}
	</div>
{:else}
	<div class="link-card flex h-full flex-col p-4">
		<div class="link-content min-h-0">
			<div
				class="bg-base-100 border-base-300 accent:bg-accent-100/50 accent:border-accent-200 dark:border-base-800 dark:bg-base-900 mb-2 inline-flex size-8 items-center justify-center rounded-xl border"
			>
				{#if item.cardData.favicon && !faviconHasError}
					<img
						class="size-6 rounded-lg object-cover"
						onerror={() => (faviconHasError = true)}
						src={getImage(item.cardData, did, 'favicon')}
						alt=""
					/>
				{:else}
					<svg
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke-width="1.5"
						stroke="currentColor"
						class="size-4"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
						/>
					</svg>
				{/if}
			</div>
			<div class="link-title text-base-900 dark:text-base-50 text-lg font-bold">
				{item.cardData.title}
			</div>
			<!-- <div class="text-base-800 dark:text-base-100 mt-2 text-xs">{item.cardData.description}</div> -->
			<div
				class="text-accent-600 accent:text-accent-950 dark:text-accent-400 mt-2 text-xs font-semibold"
			>
				{item.cardData.domain}
			</div>
		</div>

		{#if item.cardData.image}
			<div class="link-preview-wrap mt-auto">
				<img
					class="link-preview mb-2 aspect-2/1 w-full rounded-xl object-cover opacity-100 transition-opacity duration-100 starting:opacity-0"
					src={getImage(item.cardData, did)}
					alt=""
				/>
			</div>
		{/if}
		{#if item.cardData.href && !isEditing}
			<a
				href={item.cardData.href}
				class="absolute inset-0 h-full w-full"
				target="_blank"
				rel="noopener noreferrer"
				use:qrOverlay={{
					context: {
						title: item.cardData.title
					}
				}}
			>
				<span class="sr-only">
					{item.cardData.hrefText ?? 'Learn more'}
				</span>

				<div
					class="bg-base-800/30 border-base-900/30 absolute top-2 right-2 rounded-full border p-1 text-white opacity-50 backdrop-blur-lg group-focus-within:opacity-100 group-hover:opacity-100"
				>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke-width="2.5"
						stroke="currentColor"
						class="size-4"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
						/>
					</svg>
				</div>
			</a>
		{/if}
	</div>
{/if}

<style>
	.link-title {
		display: -webkit-box;
		line-clamp: 2;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.link-preview {
		display: none;
		width: 100%;
		object-fit: cover;
	}

	.link-preview-wrap {
		display: none;
		padding-top: 1rem;
	}

	@container card (height >= 18rem) {
		.link-title {
			display: block;
			line-clamp: unset;
			overflow: visible;
			-webkit-line-clamp: unset;
		}

		.link-preview-wrap,
		.link-preview {
			display: block;
		}
	}

	@container card (height >= 18rem) and (height < 22rem) {
		.link-content {
			padding-bottom: 1rem;
		}

		.link-preview-wrap {
			padding-top: 0;
		}

		.link-preview {
			aspect-ratio: 2.6 / 1;
			max-height: 4.5rem;
		}
	}

	@container card (height >= 22rem) {
		.link-content {
			padding-bottom: 0.5rem;
		}

		.link-preview-wrap {
			padding-top: 0;
		}

		.link-preview {
			aspect-ratio: 2 / 1;
			max-height: none;
		}
	}
</style>
