<script setup lang="ts">
import { ref, onMounted, computed, watch } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from '../i18n';

interface PageData {
  title: string;
  html: string;
}

const route = useRoute();
const { locale, t } = useI18n();
const registerId = computed(() => route.params.registerId as string | undefined);
const pageName = computed(() => {
  if (route.params.page) return route.params.page as string;
  if (route.params.slug) return route.params.slug as string;
  return 'about';
});

const data = ref<PageData | null>(null);
const loading = ref(true);
const notFound = ref(false);

async function fetchPage() {
  loading.value = true;
  notFound.value = false;
  data.value = null;

  const page = pageName.value;
  const dsId = registerId.value;
  const base = import.meta.env.BASE_URL;

  // Build candidate URLs: try localized first, then default
  const langSuffix = locale.value !== 'eng' ? `.${locale.value}` : '';
  const urls: string[] = [];
  if (dsId) {
    if (langSuffix) urls.push(`${base}pages/${dsId}-${page}${langSuffix}.json`);
    urls.push(`${base}pages/${dsId}-${page}.json`);
  }
  if (langSuffix) urls.push(`${base}pages/${page}${langSuffix}.json`);
  urls.push(`${base}pages/${page}.json`);

  for (const url of urls) {
    try {
      const resp = await fetch(url);
      if (resp.ok) {
        data.value = await resp.json();
        loading.value = false;
        return;
      }
    } catch { /* try next */ }
  }
  notFound.value = true;
  loading.value = false;
}

onMounted(fetchPage);
watch([pageName, locale], fetchPage);
</script>

<template>
  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <nav aria-label="Breadcrumb" class="flex items-center gap-1.5 text-sm text-ink-400 mb-6">
      <router-link :to="{ name: 'home' }" class="hover:text-ink-700 transition-colors">{{ t('nav.home') }}</router-link>
      <template v-if="registerId">
        <span class="text-ink-200">/</span>
        <router-link :to="{ name: 'dataset', params: { registerId } }" class="hover:text-ink-700 transition-colors">{{ registerId }}</router-link>
      </template>
      <span class="text-ink-200">/</span>
      <span class="text-ink-700">{{ data?.title || pageName }}</span>
    </nav>

    <template v-if="loading">
      <div class="animate-pulse space-y-6">
        <div class="h-8 bg-ink-100 rounded w-48"></div>
        <div class="h-4 bg-ink-100 rounded w-full"></div>
        <div class="h-4 bg-ink-100 rounded w-5/6"></div>
        <div class="h-4 bg-ink-100 rounded w-4/6"></div>
      </div>
    </template>

    <template v-else-if="notFound">
      <div class="card p-8 text-center">
        <h1 class="font-serif text-2xl text-ink-800 mb-2">{{ t('page.notFound') }}</h1>
        <p class="text-ink-500 mb-4">{{ t('page.notFoundMsg', { name: pageName }) }}</p>
        <router-link :to="{ name: 'home' }" class="btn-primary">{{ t('page.goHome') }}</router-link>
      </div>
    </template>

    <template v-else-if="data">
      <h1 class="font-serif text-3xl text-ink-800 mb-6">{{ data.title }}</h1>
      <div class="prose-page" v-html="data.html"></div>
    </template>
  </div>
</template>
