<template>
  <div class="admin-container">

    
    <el-tabs v-model="activeTab" @tab-click="handleTabChange">
      <!-- ========== Tab 1: Templates ========== -->
      <el-tab-pane :label="$t('mailboxMould.title') || 'Templates'" name="templates">
        <div class="toolbar">
          <el-select
            v-model="tplFilters.journalId"
            :placeholder="$t('mailboxMould.journalPlaceholder')"
            style="width: 300px; margin-right: 10px;"
            @change="fetchTemplates"
          >
            <el-option
              v-for="j in journalList"
              :key="j.journal_id"
              :label="j.title"
              :value="String(j.journal_id)"
            ></el-option>
          </el-select>

          <el-select
            v-model="tplFilters.scene"
            :placeholder="$t('mailboxMould.scenePlaceholder')"
            clearable
            style="width: 200px; margin-right: 10px;"
            @change="fetchTemplates"
            @clear="fetchTemplates"
          >
            <el-option :label="$t('mailboxMould.inviteSubmission')" value="invite_submission"></el-option>
            <el-option :label="$t('mailboxMould.promoteCitation')" value="promote_citation"></el-option>
            <el-option :label="$t('mailboxMould.generalThanks')" value="general_thanks"></el-option>
          </el-select>

          <el-select
            v-model="tplFilters.language"
            :placeholder="$t('mailboxMould.languagePlaceholder')"
            clearable
            style="width: 120px; margin-right: 10px;"
            @change="fetchTemplates"
            @clear="fetchTemplates"
          >
            <el-option label="EN" value="en"></el-option>
            <el-option label="ZH" value="zh"></el-option>
          </el-select>

          <el-button type="primary" icon="el-icon-search" @click="fetchTemplates" style="margin-right: 10px;">
            {{ $t('mailboxMould.searchBtn') }}
          </el-button>

          <div class="right-actions">
            <el-button type="primary" plain icon="el-icon-plus" @click="handleCreateTemplate">{{ $t('mailboxMould.createTemplate') }}</el-button>
          </div>
        </div>

        <el-table :data="tplTableData" border style="width: 100%; margin-top: 20px;" v-loading="tplLoading">
          <el-table-column type="index" :label="$t('mailboxMould.no')" width="70" align="center"></el-table-column>
          <el-table-column prop="title" :label="$t('mailboxMould.colTitle')" min-width="220">
            <template slot-scope="scope">
              <div class="title-cell"><strong>{{ scope.row.title }}</strong></div>
            </template>
          </el-table-column>
          <el-table-column prop="subject" :label="$t('mailboxMould.colSubject')" min-width="220">
            <template slot-scope="scope">
              <span>{{ scope.row.subject || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="scene" :label="$t('mailboxMould.colScene')"  width="160">
            <template slot-scope="scope">
              <el-tag size="small" type="info">{{ scope.row.scene }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="language" :label="$t('mailboxMould.colLanguage')" width="100">
            <template slot-scope="scope">
              {{ String(scope.row.language || '').toUpperCase() }}
            </template>
          </el-table-column>
          <el-table-column prop="version" :label="$t('mailboxMould.colVersion')" width="100"></el-table-column>
          <el-table-column :label="$t('mailboxMould.colStatus')" width="120">
            <template slot-scope="scope">
              <span :class="['status-dot', scope.row.is_active==1?'active':'inactive']"></span>
              {{ scope.row.is_active == 1 ? $t('mailboxMould.active') : $t('mailboxMould.inactive') }}
            </template>
          </el-table-column>
          <el-table-column width="160">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-view" @click="handlePreviewTemplate(scope.row)"></el-button>
              <el-button type="text" icon="el-icon-edit" @click="handleEditTemplate(scope.row)"></el-button>
              <el-button type="text" icon="el-icon-delete" class="delete-btn" @click="handleDeleteTemplate(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!-- ========== Tab 2: Styles ========== -->
      <el-tab-pane :label="$t('mailboxStyle.title') || 'Styles'" name="styles">
        <div class="toolbar">
          <div class="right-actions">
            <el-button type="primary" icon="el-icon-refresh" @click="fetchStyles">{{ $t('mailboxStyle.searchBtn') }}</el-button>
            <el-button type="primary" plain icon="el-icon-plus" @click="handleCreateStyle">{{ $t('mailboxStyle.createStyle') }}</el-button>
          </div>
        </div>

        <el-table :data="styleTableData" border style="width: 100%; margin-top: 20px;" v-loading="styleLoading">
          <el-table-column type="index" :label="$t('mailboxStyle.no')" width="70" align="center"></el-table-column>
          <el-table-column prop="name" :label="$t('mailboxStyle.colName')" min-width="220">
            <template slot-scope="scope">
              <div class="title-cell"><strong>{{ scope.row.title }}</strong></div>
            </template>
          </el-table-column>
          <el-table-column prop="description" :label="$t('mailboxStyle.colDescription')" min-width="220">
            <template slot-scope="scope">
              <span>{{ scope.row.description || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column width="160">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-view" @click="handlePreviewStyle(scope.row)"></el-button>
              <el-button type="text" icon="el-icon-edit" @click="handleEditStyle(scope.row)"></el-button>
              <el-button type="text" icon="el-icon-delete" class="delete-btn" @click="handleDeleteStyle(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 预览弹窗（两个 Tab 共用） -->
    <el-dialog
      :title="$t('mailboxMould.previewTitle')"
      :visible.sync="previewVisible"
      width="80%"
    >
      <div class="preview-body" v-html="previewContent"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="previewVisible = false">{{ $t('mailboxMould.previewClose') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
const API = {
  listTemplates: 'api/mail_template/listTemplates',
  listStyles: 'api/mail_template/listStyles',
  getAllJournal: 'api/Article/getJournal',
  deleteTemplate: 'api/mail_template/deleteTemplate',
  deleteStyle: 'api/mail_template/deleteStyle'
};
// 仅在当前 SPA 会话内记忆筛选（刷新页面即重置）
const mailboxMouldSessionMemory = {
  journalId: '',
  scene: '',
  language: ''
};

export default {
  data() {
    return {
      activeTab: 'templates',
      journalList: [],
      // 用于避免 ElementUI 初始化时触发的 tab 事件把 localStorage 写回 templates
      tabChangeLocked: true,

      // --- Templates ---
      tplLoading: false,
      tplFilters: {
        journalId: '',
        scene: '',
        language: ''
      },
      tplTableData: [],

      // --- Styles ---
      styleLoading: false,
      styleTableData: [],

      // --- 共用预览 ---
      previewVisible: false,
      previewContent: ''
    };
  },
  created() {
    const q = (this.$route && this.$route.query) || {};
    const routeTab = q && (q.activeTab || q.tab || q.mouldTab) ? String(q.activeTab || q.tab || q.mouldTab) : '';
    let savedTab = localStorage.getItem('mailboxMouldActiveTab') || '';
    savedTab = String(savedTab).trim();

    const normalized = (routeTab && (routeTab === 'styles' || routeTab === 'templates')) ? routeTab : savedTab;
    if (normalized === 'styles' || normalized === 'templates') this.activeTab = normalized;

    // 初始化期间不要响应 tab-click，避免覆盖 localStorage
    this.tabChangeLocked = true;
    this.loadJournals();
    this.$nextTick(() => {
      this.tabChangeLocked = false;
    });
  },
  methods: {
    // ========== 公共 ==========
    loadJournals() {
      this.$api
        .post(API.getAllJournal, {username: localStorage.getItem('U_name')})
        .then(res => {
          const list = res || [];
          const mapped = (Array.isArray(list) ? list : []).map(j => ({
            journal_id: j.journal_id || j.id,
            title: j.title || j.name || ''
          }));
          this.journalList = mapped;
          if (mapped.length > 0) {
            const rememberedJournalId = String(mailboxMouldSessionMemory.journalId || '').trim();
            const hasRemembered = rememberedJournalId && mapped.some(j => String(j.journal_id) === rememberedJournalId);
            this.tplFilters.journalId = hasRemembered
              ? rememberedJournalId
              : String(mapped[0].journal_id);
          }
          this.tplFilters.scene = String(mailboxMouldSessionMemory.scene || '');
          this.tplFilters.language = String(mailboxMouldSessionMemory.language || '');
          this.syncTplFilterMemory();
          if (this.activeTab === 'styles') {
            this.fetchStyles();
          } else {
            this.fetchTemplates();
          }
        })
        .catch(() => {
          this.journalList = [];
        });
    },
    handleTabChange(tab) {
      if (this.tabChangeLocked) return;
      localStorage.setItem('mailboxMouldActiveTab', tab.name);
      if (tab.name === 'templates' && this.tplTableData.length === 0) {
        this.fetchTemplates();
      } else if (tab.name === 'styles' && this.styleTableData.length === 0) {
        this.fetchStyles();
      }
    },

    // ========== Templates ==========
    syncTplFilterMemory() {
      mailboxMouldSessionMemory.journalId = String((this.tplFilters && this.tplFilters.journalId) || '');
      mailboxMouldSessionMemory.scene = String((this.tplFilters && this.tplFilters.scene) || '');
      mailboxMouldSessionMemory.language = String((this.tplFilters && this.tplFilters.language) || '');
    },
    fetchTemplates() {
      this.tplLoading = true;
      const params = {
        journal_id: this.tplFilters.journalId || '',
        scene: this.tplFilters.scene || '',
        language: this.tplFilters.language || ''
      };
      this.syncTplFilterMemory();
      this.$api
        .post(API.listTemplates, params)
        .then(res => {
          this.tplLoading = false;
          const list = (res && res.data && res.data.list) || [];
          this.tplTableData = (Array.isArray(list) ? list : []).map(item => ({
            id: item.template_id || item.id,
            template_id: item.template_id || item.id,
            title: item.title,
            subject: item.subject,
            body_html: item.body_html,
            description: item.description || '',
            scene: item.scene,
            language: item.language,
            version: item.version,
            is_active: item.is_active || 0
          }));
        })
        .catch(() => {
          this.tplLoading = false;
          this.tplTableData = [];
        });
    },
    handleCreateTemplate() {
      this.syncTplFilterMemory();
      // 传入当前模板列表选中的期刊，详情页用于默认回填
      const journalId = this.tplFilters && this.tplFilters.journalId ? String(this.tplFilters.journalId) : '';
      this.$router.push({ path: '/mailboxMouldDetail', query: journalId ? { journal_id: journalId } : {} });
    },
    handleEditTemplate(row) {
      this.syncTplFilterMemory();
      const templateId = row && (row.template_id || row.id);
      const journalId = this.tplFilters && this.tplFilters.journalId ? String(this.tplFilters.journalId) : '';
      const query = templateId ? { template_id: String(templateId) } : {};
      // 编辑时一般会由模板详情回填期刊，但带上也能避免个别场景先展示错误默认值
      if (journalId && !query.journal_id) query.journal_id = journalId;
      this.$router.push({ path: '/mailboxMouldDetail', query });
    },
    handlePreviewTemplate(row) {
      this.previewContent = row && row.body_html ? row.body_html : '';
      this.previewVisible = true;
    },
    handleDeleteTemplate(row) {
      this.syncTplFilterMemory();
      const templateId = row && (row.template_id || row.id);
      if (!templateId) return;
      this.$confirm(this.$t('mailboxMould.deleteConfirm'), this.$t('mailboxMould.colActions'), {
        confirmButtonText: this.$t('mailboxMould.confirm'),
        cancelButtonText: this.$t('mailboxMould.cancel'),
        type: 'warning'
      }).then(() => {
        this.$api.post(API.deleteTemplate, { template_id: String(templateId) }).then(res => {
          if (res && res.code === 0) {
            this.$message.success(this.$t('mailboxMould.deleteSuccess'));
            this.fetchTemplates();
          } else {
            this.$message.error((res && res.msg) || this.$t('mailboxMould.deleteFail'));
          }
        }).catch(() => {
          this.$message.error(this.$t('mailboxMould.deleteFail'));
        });
      }).catch(() => {});
    },

    // ========== Styles ==========
    fetchStyles() {
      this.styleLoading = true;
      this.$api
        .post(API.listStyles, {})
        .then(res => {
          this.styleLoading = false;
          const list = (res && res.data && res.data.list) || [];
          this.styleTableData = (Array.isArray(list) ? list : []).map(item => ({
            id: item.style_id || item.id,
            style_id: item.style_id || item.id,
            title: item.name,
            header_html: item.header_html,
            footer_html: item.footer_html,
            description: item.description || ''
          }));
        })
        .catch(() => {
          this.styleLoading = false;
          this.styleTableData = [];
        });
    },
    handleCreateStyle() {
      this.$router.push({ path: '/mailboxStyleDetail' });
    },
    handleEditStyle(row) {
      const styleId = row && (row.style_id || row.id);
      this.$router.push({ path: '/mailboxStyleDetail', query: styleId ? { style_id: String(styleId) } : {} });
    },
    handlePreviewStyle(row) {
      const header = (row && row.header_html) || '';
      const footer = (row && row.footer_html) || '';
      this.previewContent = `${header}${footer}`;
      this.previewVisible = true;
    },
    handleDeleteStyle(row) {
      const styleId = row && (row.style_id || row.id);
      if (!styleId) return;
      this.$confirm(this.$t('mailboxMould.deleteConfirm'), this.$t('mailboxMould.colActions'), {
        confirmButtonText: this.$t('mailboxMould.confirm'),
        cancelButtonText: this.$t('mailboxMould.cancel'),
        type: 'warning'
      }).then(() => {
        this.$api.post(API.deleteStyle, { style_id: String(styleId) }).then(res => {
          if (res && res.code === 0) {
            this.$message.success(this.$t('mailboxMould.deleteSuccess'));
            this.fetchStyles();
          } else {
            this.$message.error((res && res.msg) || this.$t('mailboxMould.deleteFail'));
          }
        }).catch(() => {
          this.$message.error(this.$t('mailboxMould.deleteFail'));
        });
      }).catch(() => {});
    }
  }
};
</script>

<style scoped>
.admin-container {
  padding: 20px;
  background: #fff;
}
.subtitle {
  color: #666;
  font-size: 14px;
  margin-bottom: 20px;
}
.toolbar {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.right-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}
.status-dot.active {
  background-color: #52c41a;
}
.status-dot.inactive {
  background-color: #f5222d;
}
.delete-btn {
  color: #f5222d !important;
}
.preview-body {
  max-height: 70vh;
  overflow: auto;
  padding: 10px;
  border: 1px solid #eee;
  background: #fff;
  box-sizing: border-box;
}
</style>
