<template>
  <div class="min-h-screen bg-background flex flex-col">
    <Header />
    <main class="flex-grow pt-32 pb-24">
      <div class="max-w-4xl mx-auto">
        <router-link to="/blog" class="inline-flex items-center text-primary font-bold mb-8 hover:translate-x-[-4px] transition-transform group">
          <ArrowLeft class="w-4 h-4 mr-2 group-hover:scale-110 transition-transform" />
          {{ t("blog.back") }}
        </router-link>

        <div v-if="isLoading" class="flex flex-col items-center justify-center py-24 opacity-50">
          <RefreshCw class="w-10 h-10 animate-spin text-primary mb-4" />
          <p class="font-bold tracking-widest uppercase text-[10px]">{{ t("blog.loadingSingle") }}</p>
        </div>

        <article v-else-if="post">
          <div class="flex items-center gap-4 mb-6">
            <span class="px-3 py-1 bg-primary text-white text-[10px] font-bold rounded-full uppercase tracking-widest">
              {{ post.category }}
            </span>
            <span class="text-xs font-bold text-foreground/40 uppercase">
              {{ new Date(post.created_at).toLocaleDateString() }}
            </span>
          </div>

          <h1 class="text-4xl md:text-5xl font-display font-bold text-foreground mb-12 leading-tight">
            {{ getLoc(post, 'title') }}
          </h1>

          <div v-if="post.image_url" class="aspect-video bg-muted/20 rounded-[2rem] mb-12 overflow-hidden border border-black/[0.03]">
             <img :src="post.image_url" class="w-full h-full object-cover" />
          </div>

          <!-- Markdown-like content rendering -->
          <div class="prose prose-lg max-w-none text-foreground/80 leading-relaxed whitespace-pre-wrap font-medium">
            {{ getLoc(post, 'content') }}
          </div>
        </article>

        <div v-else class="py-24 text-center bg-gray-50 rounded-[2.5rem] border border-dashed border-black/[0.05]">
          <h2 class="text-2xl font-display font-bold text-foreground mb-4">{{ t("blog.notFound") }}</h2>
          <router-link to="/blog" class="text-primary font-bold hover:underline italic">{{ t("blog.exploreOther") }}</router-link>
        </div>
      </div>
    </main>
    <Footer />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
import { ArrowLeft, RefreshCw } from "lucide-vue-next";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import { getBlogPost } from "@/lib/api";

const { t, locale } = useI18n();
const route = useRoute();
const post = ref<any | null>(null);
const isLoading = ref(true);

function getLoc(item: any, field: string) {
  const currentLocale = locale.value;
  return item[`${field}_${currentLocale}`] || item[`${field}_en`] || "";
}

onMounted(async () => {
  try {
    post.value = await getBlogPost(route.params.id as string);
  } catch (e) {
    console.error("Failed to fetch post", e);
  } finally {
    isLoading.value = false;
  }
});
</script>
