<template>
  <h2>{{ $t('socialnetwork.vocab.languageTitle', { name: language?.name || '' }) }}</h2>

  <div class="box">
    <div v-if="loading">{{ $t('general.loading') }}</div>
    <div v-else-if="!language">{{ $t('socialnetwork.vocab.notFound') }}</div>
    <div v-else>
      <div class="row">
        <strong>{{ $t('socialnetwork.vocab.languageName') }}:</strong>
        <span>{{ language.name }}</span>
      </div>

      <div class="row" v-if="language.isOwner && language.shareCode">
        <strong>{{ $t('socialnetwork.vocab.shareCode') }}:</strong>
        <code>{{ language.shareCode }}</code>
      </div>

      <div class="row">
        <button @click="goSubscribe">{{ $t('socialnetwork.vocab.subscribeByCode') }}</button>
        <button @click="openSearch">{{ $t('socialnetwork.vocab.search.open') }}</button>
      </div>

      <hr />

      <div class="row">
        <h3>{{ $t('socialnetwork.vocab.chapters') }}</h3>
      </div>

      <div class="row" v-if="language.isOwner">
        <label>
          {{ $t('socialnetwork.vocab.newChapter') }}
          <input v-model="newChapterTitle" type="text" />
        </label>
        <button :disabled="creatingChapter || newChapterTitle.trim().length < 2" @click="createChapter">
          {{ creatingChapter ? $t('socialnetwork.vocab.saving') : $t('socialnetwork.vocab.createChapter') }}
        </button>
      </div>

      <div v-if="chaptersLoading">{{ $t('general.loading') }}</div>
      <div v-else>
        <div v-if="chapters.length === 0">{{ $t('socialnetwork.vocab.noChapters') }}</div>
        <ul v-else>
          <li v-for="c in chapters" :key="c.id">
            <span class="click" @click="openChapter(c.id)">
              {{ c.title }} <span class="count">({{ c.vocabCount }})</span>
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <VocabSearchDialog ref="searchDialog" />
</template>

<script>
import apiClient from '@/utils/axios.js';
import VocabSearchDialog from '@/dialogues/socialnetwork/VocabSearchDialog.vue';

export default {
  name: 'VocabLanguageView',
  components: { VocabSearchDialog },
  data() {
    return {
      loading: false,
      language: null,
      chaptersLoading: false,
      chapters: [],
      newChapterTitle: '',
      creatingChapter: false,
    };
  },
  methods: {
    goSubscribe() {
      this.$router.push('/socialnetwork/vocab/subscribe');
    },
    openSearch() {
      this.$refs.searchDialog?.open?.({
        languageId: this.$route.params.languageId,
        languageName: this.language?.name || '',
      });
    },
    openChapter(chapterId) {
      this.$router.push(`/socialnetwork/vocab/${this.$route.params.languageId}/chapters/${chapterId}`);
    },
    async load() {
      this.loading = true;
      try {
        const res = await apiClient.get(`/api/vocab/languages/${this.$route.params.languageId}`);
        this.language = res.data;
        await this.loadChapters();
      } catch (e) {
        console.error('Load vocab language failed:', e);
        this.language = null;
      } finally {
        this.loading = false;
      }
    },
    async loadChapters() {
      this.chaptersLoading = true;
      try {
        const res = await apiClient.get(`/api/vocab/languages/${this.$route.params.languageId}/chapters`);
        this.chapters = res.data?.chapters || [];
      } catch (e) {
        console.error('Load chapters failed:', e);
        this.chapters = [];
      } finally {
        this.chaptersLoading = false;
      }
    },
    async createChapter() {
      this.creatingChapter = true;
      try {
        await apiClient.post(`/api/vocab/languages/${this.$route.params.languageId}/chapters`, {
          title: this.newChapterTitle,
        });
        this.newChapterTitle = '';
        await this.loadChapters();
      } catch (e) {
        console.error('Create chapter failed:', e);
        this.$root.$refs.messageDialog?.open(
          this.$t('socialnetwork.vocab.createChapterError'),
          this.$t('error.title')
        );
      } finally {
        this.creatingChapter = false;
      }
    },
  },
  watch: {
    '$route.params.languageId'() {
      this.load();
    },
  },
  mounted() {
    this.load();
  },
};
</script>

<style scoped>
.box {
  background: #f6f6f6;
  padding: 12px;
  border: 1px solid #ccc;
}
.row {
  margin-bottom: 8px;
}
.click {
  cursor: pointer;
  text-decoration: underline;
}
.count {
  color: #666;
  font-size: 0.9em;
}
</style>


