<script setup>
import { onMounted, ref, watch } from 'vue'
import { useRoute, RouterLink } from 'vue-router'
import { api } from '@/api/client'

const route = useRoute()
const post = ref(null)
const loading = ref(true)
const notFound = ref(false)

async function load(slug) {
  loading.value = true
  notFound.value = false
  try {
    post.value = await api.getPost(slug)
    if (post.value?.title) document.title = `${post.value.title} — RisingCompute`
  } catch (e) {
    notFound.value = true
  } finally {
    loading.value = false
  }
}

onMounted(() => load(route.params.slug))
watch(() => route.params.slug, (s) => s && load(s))

function fmtDate(iso) {
  try { return new Date(iso).toLocaleDateString('en-IN', { year: 'numeric', month: 'short', day: 'numeric' }) }
  catch { return iso }
}
</script>

<template>
  <div v-if="loading" class="container section dim mono">Loading…</div>

  <section v-else-if="notFound" class="section text-center">
    <div class="container">
      <h1>Post not found.</h1>
      <RouterLink to="/blog" class="btn btn--ghost">Back to insights</RouterLink>
    </div>
  </section>

  <article v-else class="post-page">
    <header class="post-page__head">
      <div class="container">
        <RouterLink to="/blog" class="back-link">← All insights</RouterLink>
        <span class="pill">{{ post.category_label }}</span>
        <h1>{{ post.title }}</h1>
        <p class="dim mono post-page__meta">
          {{ post.author_name }} · {{ fmtDate(post.published_at) }} · {{ post.read_time_minutes }} min read
        </p>
      </div>
    </header>

    <div class="container post-page__body">
      <p class="post-page__excerpt">{{ post.excerpt }}</p>
      <!-- Body is markdown-ish; for v1 we render as preformatted text with double-newline paragraphing -->
      <div class="prose" v-for="(para, idx) in post.body.split(/\n\n+/)" :key="idx">
        <h2 v-if="para.startsWith('## ')">{{ para.replace(/^##\s*/, '') }}</h2>
        <p v-else>{{ para }}</p>
      </div>
    </div>

    <div class="container post-page__footer">
      <RouterLink to="/blog" class="btn btn--ghost">← More insights</RouterLink>
      <RouterLink to="/contact" class="btn btn--primary">Talk to us</RouterLink>
    </div>
  </article>
</template>

<style scoped>
.back-link { color: var(--color-text-dim); font-size: 0.9rem; }
.back-link:hover { color: var(--color-accent); }

.post-page__head {
  padding: var(--space-8) 0 var(--space-5);
  border-bottom: 1px solid var(--color-border-soft);
  background: radial-gradient(800px 360px at 90% 0%, rgba(0, 229, 255, 0.08), transparent 60%);
}
.post-page__head h1 { margin-top: var(--space-3); max-width: 820px; }
.post-page__meta { margin-top: var(--space-2); }

.post-page__body {
  max-width: 760px;
  padding: var(--space-7) var(--space-5);
}
.post-page__excerpt {
  font-size: 1.2rem;
  color: var(--color-text);
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-4);
  margin-bottom: var(--space-6);
}
.prose h2 { margin-top: var(--space-6); }
.prose p { font-size: 1.05rem; }

.post-page__footer {
  max-width: 760px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5);
  border-top: 1px solid var(--color-border-soft);
  margin-top: var(--space-6);
  gap: var(--space-4);
}
@media (max-width: 540px) { .post-page__footer { flex-direction: column-reverse; } }
</style>
