<script setup lang="ts">
import { ref, onMounted } from 'vue';

interface BeholdPost {
  id: string;
  permalink: string;
  mediaUrl: string;
  thumbnailUrl?: string;
  caption?: string;
  mediaType: 'IMAGE' | 'VIDEO' | 'CAROUSEL_ALBUM';
  timestamp: string;
}

const props = defineProps<{
  feedId: string;
  account: string;
  accountUrl: string;
  fallbackBio?: string;
}>();

const posts = ref<BeholdPost[]>([]);
const loading = ref(true);
const error = ref<string | null>(null);

const isPlaceholder = (id: string) => !id || id.startsWith('PLACEHOLDER_');

onMounted(async () => {
  if (isPlaceholder(props.feedId)) {
    loading.value = false;
    error.value = 'no-feed-id';
    return;
  }
  try {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 5000);
    const res = await fetch(`https://feeds.behold.so/${props.feedId}`, {
      signal: controller.signal,
    });
    clearTimeout(timeoutId);
    if (!res.ok) throw new Error(`Behold returned ${res.status}`);
    const data = await res.json();
    const items: BeholdPost[] = Array.isArray(data) ? data : (data.posts ?? []);
    posts.value = items.slice(0, 6);
  } catch (e) {
    error.value = (e as Error).message || 'fetch-error';
  } finally {
    loading.value = false;
  }
});
</script>

<template>
  <section class="border-b border-neutral-200 last:border-b-0">
    <header class="px-4 py-3 flex items-center justify-between">
      <a
        :href="accountUrl"
        target="_blank"
        rel="noopener"
        class="font-medium text-sm hover:underline"
      >
        {{ account }}
      </a>
      <span v-if="loading" class="text-xs text-neutral-400">...</span>
    </header>

    <div v-if="loading" class="grid grid-cols-2 gap-1 p-1">
      <div
        v-for="i in 4"
        :key="i"
        class="aspect-square bg-neutral-100 animate-pulse"
      />
    </div>

    <div
      v-else-if="posts.length"
      class="grid grid-cols-2 gap-1 p-1"
    >
      <a
        v-for="post in posts"
        :key="post.id"
        :href="post.permalink"
        target="_blank"
        rel="noopener"
        class="block aspect-square overflow-hidden group"
      >
        <img
          :src="post.thumbnailUrl || post.mediaUrl"
          :alt="post.caption?.slice(0, 80) || account"
          loading="lazy"
          class="w-full h-full object-cover group-hover:scale-105 transition-transform"
        />
      </a>
    </div>

    <div v-else class="p-4 text-sm text-neutral-600">
      <p v-if="fallbackBio" class="mb-3">{{ fallbackBio }}</p>
      <a
        :href="accountUrl"
        target="_blank"
        rel="noopener"
        class="inline-block px-3 py-2 bg-neutral-900 text-white rounded-lg text-sm"
      >
        Voir sur Instagram &rarr;
      </a>
    </div>
  </section>
</template>
