<template>
  <div class="blog-view">
    <div v-if="loading">Laden…</div>
    <div v-else>
      <h1>{{ blog.title }}</h1>
      <p v-if="blog.description">{{ blog.description }}</p>
      <div class="meta">von {{ blog.owner?.username }}</div>
      <div v-if="$store.getters.isLoggedIn" class="actions">
        <router-link class="editbutton" v-if="isOwner" :to="{ name: 'BlogEdit', params: { id: blog.id } }">Bearbeiten</router-link>
      </div>
      <div class="posts">
        <h2>{{ $t('blog.posts') }}</h2>
        <div v-if="!items.length">{{ $t('blog.noPosts') }}</div>
        <article v-for="p in items" :key="p.id" class="post">
          <h3>{{ p.title }}</h3>
          <div class="content" v-html="sanitize(p.content)" />
        </article>
        <div class="pagination" v-if="total > pageSize">
          <button :disabled="page===1" @click="go(page-1)">«</button>
          <span>{{ page }} / {{ pages }}</span>
          <button :disabled="page===pages" @click="go(page+1)">»</button>
        </div>
      </div>
  <div v-if="isOwner" class="post-editor">
        <h3>{{ $t('blog.newPost') }}</h3>
        <form @submit.prevent="addPost">
          <input v-model="newPost.title" :placeholder="$t('blog.title')" required />
          <RichTextEditor v-model="newPost.content" :blog-id="blog.id" />
          <button class="btn" type="submit">{{ $t('blog.publish') }}</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import { getBlog, listPosts, createPost } from '@/api/blogApi.js';
import DOMPurify from 'dompurify';
import RichTextEditor from './components/RichTextEditor.vue';
export default {
  name: 'BlogView',
  props: { id: String, slug: String },
  components: { RichTextEditor },
  data: () => ({ blog: null, items: [], page: 1, pageSize: 10, total: 0, loading: true, newPost: { title: '', content: '' }, resolvedId: null }),
  computed: {
    isOwner() {
      const u = this.$store.getters.user;
      return !!(u && this.blog && this.blog.owner && this.blog.owner.hashedId === u.id);
    }
  },
  async mounted() {
    try {
      let id = this.$route.params.id;
      // If we have a slug route param or the id is non-numeric, resolve to id
      if ((!id && this.$route.params.slug) || (id && isNaN(Number(id)))) {
        const slug = this.$route.params.slug || this.$route.params.id;
        // Resolve slug to id via backend resolver but keep slug URL
        const res = await fetch(`${import.meta.env.VITE_API_BASE_URL || ''}/api/blog/blogs/slug/${encodeURIComponent(slug)}/id`);
        if (res.ok) {
          const { id: rid } = await res.json();
          this.resolvedId = rid;
          id = rid;
        } else {
          throw new Error('slug not found');
        }
      }
      const useId = id || this.resolvedId;
      this.blog = await getBlog(useId);
      await this.fetchPage(1);
    } catch (e) {
        console.log(e);
//      this.$router.replace('/blogs');
    } finally { this.loading = false; }
  },
  methods: {
    sanitize(html) {
      return DOMPurify.sanitize(html || '');
    },
    async fetchPage(p) {
      const id = this.$route.params.id || this.resolvedId;
      const res = await listPosts(id, { page: p, pageSize: this.pageSize });
      this.items = res.items;
      this.page = res.page;
      this.pageSize = res.pageSize;
      this.total = res.total;
    },
    get pages() { return Math.max(1, Math.ceil(this.total / this.pageSize)); },
    async go(p) { if (p>=1 && p<=this.pages) await this.fetchPage(p); },
    async addPost() {
      if (!this.newPost.title || !this.newPost.content) return;
      const id = this.$route.params.id || this.resolvedId;
      await createPost(id, this.newPost);
      this.newPost = { title: '', content: '' };
      await this.fetchPage(1);
    }
  }
}
</script>

<style lang="scss" scoped>
.editbutton {
    border: 1px solid #000;
    background-color: #f9a22c;
    margin-bottom: 1em;
    border-radius: 3px;
    padding: 0.2em 0.5em;
    display: inline-block;
}
</style>