<script lang="ts">
  import { getBlockLayoutClasses } from "../../lib/block-layout";
  import type { ImageBlockData } from "../../lib/block-types";

  let { block }: { block: ImageBlockData } = $props();

  function getUrl(b: ImageBlockData): string | null {
    if (typeof b.resolvedImageSrc === "string" && b.resolvedImageSrc) return b.resolvedImageSrc;
    const img = b.img ?? b.image;
    if (typeof img === "string" && img.startsWith("http")) return img;
    if (img && typeof img === "object") {
      const src = (img as { src?: string }).src ?? (img as { file?: { url?: string } }).file?.url;
      if (typeof src === "string" && src) return src.startsWith("//") ? `https:${src}` : src;
    }
    return null;
  }

  const layoutClasses = $derived(getBlockLayoutClasses(block.layout));
  const imageSource = $derived(block.image ?? block.img);
  const imageUrl = $derived(getUrl(block));
  $effect(() => {
    if (!imageUrl && block._slug) {
      console.warn("[ImageBlock] Bild nicht verfügbar:", block._slug, {
        resolvedImageSrc: block.resolvedImageSrc,
        hasImage: !!block.image,
        hasImg: !!block.img,
        imageType: typeof block.image,
        imgType: typeof block.img,
        imgSrc: block.img && typeof block.img === "object" ? (block.img as { src?: string }).src : undefined,
        imageSrc: block.image && typeof block.image === "object" ? (block.image as { src?: string }).src : undefined,
      });
    }
  });
  const title = $derived(
    typeof imageSource === "object" && imageSource
      ? ("description" in imageSource && imageSource.description
          ? imageSource.description
          : "title" in imageSource
            ? (imageSource as { title?: string }).title
            : undefined)
      : undefined,
  );
</script>

<div class={layoutClasses} data-block-type="image" data-block-slug={block._slug}>
  {#if imageUrl}
    <figure class="max-w-[400px]">
      {#if block.resolvedResponsive}
        <picture>
          {#each block.resolvedResponsive.sources as s (s.type)}
            <source type={s.type} srcset={s.srcset} sizes="(max-width: 768px) 100vw, 400px" />
          {/each}
          <img
            src={block.resolvedResponsive.fallback}
            width={block.resolvedResponsive.width}
            height={block.resolvedResponsive.height}
            alt={block.caption ?? title ?? ""}
            class="w-full rounded-sm"
            loading="lazy"
            decoding="async"
          />
        </picture>
      {:else}
        <img
          src={imageUrl}
          alt={block.caption ?? title ?? ""}
          class="w-full rounded-sm"
          loading="lazy"
        />
      {/if}
      {#if block.caption}
        <figcaption class="mt-1 text-sm text-zinc-600">{block.caption}</figcaption>
      {/if}
    </figure>
  {:else}
    <p class="text-sm text-zinc-500">Bild nicht verfügbar.</p>
  {/if}
</div>
