<script setup lang="ts">
import FixedLayout from '~/components/layouts/FixedLayout.vue';
import TableHeader from '~/components/parts/TableHeader.vue';

const { locale } = useI18n();
const localePath = useLocalePath();

const { data: posts } = useAsyncData('art-posts', async () => {
  const currentLocale = locale.value;

  // Always fetch English articles as the base
  const enPosts = await queryCollection('art')
    .where('path', 'LIKE', `/art/en/%`)
    .order('date', 'DESC')
    .all();

  // If we're already on English, no need for a second query
  if (currentLocale === 'en') return enPosts;

  // Fetch translated articles for the current locale
  const localePosts = await queryCollection('art')
    .where('path', 'LIKE', `/art/${currentLocale}/%`)
    .order('date', 'DESC')
    .all();

  // Build a set of slugs that have a translation
  const translatedSlugs = new Set(
    localePosts.map((p) => p.path.replace(`/art/${currentLocale}/`, ''))
  );

  // Keep English articles that have no translation in the current locale
  const enFallbacks = enPosts.filter(
    (p) => !translatedSlugs.has(p.path.replace('/art/en/', ''))
  );

  // Merge: translated first, then English fallbacks, re-sorted by date
  return [...localePosts, ...enFallbacks].sort(
    (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
  );
}, { watch: [locale, () => useRoute().path] });

const isFallback = (art) => art.path.startsWith('/art/en/') && locale.value !== 'en';
</script>

<template>
    <TableHeader></TableHeader>
    <FixedLayout>
        <Container>
            <div class="grid">
                <NuxtLink v-for="art in posts"
                :key="art.slug"
                class="selector"
                :to="isFallback(art) ? `/art/${art.slug}` : localePath(`/art/${art.slug}`)">
                    <NuxtImg
                        :src="art.thumb"
                        :alt="art.title"
                        class="selector-img"
                        width="600"
                        height="250"
                        fit="cover"
                    />
                    <div class="overlay-text">{{ art.title }}</div>
                </NuxtLink>
            </div>
        </Container>
    </FixedLayout>
    <Footer></Footer>
</template>

<style lang="scss" scoped>
.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    gap: 16px;
    padding: 40px 20px 40px 20px;
}
.selector {
    width: 100%;
    height: 250px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease;
    display: block; /* ensures NuxtLink behaves as a block */
}
.selector:hover {
    transform: scale(1.03);
}
.selector-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.overlay-text {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
    pointer-events: none;
}
/* ...rest unchanged */
</style>