<template>
  <div class="page ctms-page-shell page--flush medical-consult-page medical-consult-page--workbench">
    <section class="faq-hero">
      <div class="workbench-toolbar-meta">
        <span>知识条目</span>
        <small>{{ activeCategoryName }} · {{ resultSummary }}</small>
      </div>
      <div class="hero-tools">
        <el-autocomplete
          v-model="keyword"
          :placeholder="TEXT.common.placeholders.keyword"
          clearable
          class="hero-search"
          :fetch-suggestions="fetchSuggestions"
          :trigger-on-focus="false"
          highlight-first-item
          @select="onSuggestionSelect"
          @keyup.enter="loadFaqs"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-autocomplete>
        <PermissionAction action="faq.create">
          <el-button type="primary" class="new-consult-btn" @click="openForm()">
            <el-icon class="el-icon--left"><Plus /></el-icon>
            新建
          </el-button>
        </PermissionAction>
      </div>
    </section>

    <el-row :gutter="0" class="faq-workspace">
      <el-col v-if="canReadCategories" :span="5" class="faq-sidebar-col">
        <FaqCategoryPanel
          v-model="activeCategory"
          :categories="categories"
          :faqs="faqs"
          @refresh="loadCategories"
        />
      </el-col>
      <el-col :span="canReadCategories ? 19 : 24" class="faq-content-col">
        <div class="faq-main unified-shell">
          <FaqList
            :items="faqs"
            :categories="categories"
            :loading="loading"
            :can-update="canUpdateFaq"
            :can-delete="canDeleteFaq"
            @refresh="loadFaqs"
          />
          <div class="pagination-wrap" v-if="total > 0">
            <el-pagination
              v-model:current-page="page"
              v-model:page-size="pageSize"
              :page-sizes="[5, 10, 20]"
              :total="total"
              layout="prev, pager, next, sizes, total"
              small
              @current-change="onPageChange"
              @size-change="onPageSizeChange"
            />
          </div>
        </div>
      </el-col>
    </el-row>

    <FaqItemForm v-model="showForm" :item="editing" :categories="categories" @success="loadFaqs" />
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import { Plus, Search } from "@element-plus/icons-vue";
import { fetchFaqCategories, fetchFaqItems } from "../api/faqs";
import FaqCategoryPanel from "../components/FaqCategoryPanel.vue";
import FaqList from "../components/FaqList.vue";
import FaqItemForm from "../components/FaqItemForm.vue";
import { useAuthStore } from "../store/auth";
import { useStudyStore } from "../store/study";
import PermissionAction from "../components/PermissionAction.vue";
import { usePermission } from "../utils/permission";
import { TEXT } from "../locales";

const auth = useAuthStore();
const study = useStudyStore();

const categories = ref<any[]>([]);
const faqs = ref<any[]>([]);
const loading = ref(false);
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const keyword = ref("");

const activeCategory = ref("");
const showForm = ref(false);
const editing = ref<any | null>(null);

const { can } = usePermission();
const canReadCategories = computed(() => can("faq.category.read"));
const canUpdateFaq = computed(() => can("faq.update"));
const canDeleteFaq = computed(() => can("faq.delete"));
const activeCategoryName = computed(() => {
  if (!activeCategory.value) return TEXT.common.labels.all;
  return categories.value.find((item: any) => item.id === activeCategory.value)?.name || "已筛选分类";
});
const resultSummary = computed(() => {
  const suffix = keyword.value.trim() ? "，已应用搜索" : "";
  return `${total.value} 条${suffix}`;
});

const loadCategories = async () => {
  try {
    if (!study.currentStudy) return;
    if (!canReadCategories.value) {
      categories.value = [];
      activeCategory.value = "";
      return;
    }
    const params: Record<string, any> = {};
    if (study.currentStudy) params.study_id = study.currentStudy.id;
    const { data } = await fetchFaqCategories(params);
    categories.value = data.items || data || [];
  } catch (e: any) {
    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.loadFailed);
  }
};

const loadFaqs = async () => {
  if (!study.currentStudy) return;
  loading.value = true;
  try {
    const params: Record<string, any> = {
      skip: (page.value - 1) * pageSize.value,
      limit: pageSize.value,
      study_id: study.currentStudy.id,
    };
    if (activeCategory.value) params.category_id = activeCategory.value;
    if (keyword.value) params.keyword = keyword.value;
    const { data } = await fetchFaqItems(params);
    if (Array.isArray(data)) {
      faqs.value = data;
      total.value = data.length;
    } else {
      faqs.value = data.items || [];
      total.value = data.total || 0;
    }
  } catch (e: any) {
    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.loadFailed);
  } finally {
    loading.value = false;
  }
};

const fetchSuggestions = async (queryString: string, callback: (results: Array<{ value: string }>) => void) => {
  if (!queryString || !study.currentStudy) {
    callback([]);
    return;
  }
  try {
    const params: Record<string, any> = {
      study_id: study.currentStudy.id,
      keyword: queryString,
      limit: 8,
    };
    const { data } = await fetchFaqItems(params);
    const items = Array.isArray(data) ? data : data.items || [];
    callback(items.slice(0, 8).map((item: any) => ({ value: item.question || item.title || "" })));
  } catch {
    callback([]);
  }
};

const onSuggestionSelect = (item: { value: string }) => {
  keyword.value = item.value;
  loadFaqs();
};

const onPageChange = (p: number) => {
  page.value = p;
  loadFaqs();
};

const onPageSizeChange = (size: number) => {
  pageSize.value = size;
  page.value = 1;
  loadFaqs();
};

watch(activeCategory, () => {
  page.value = 1;
  loadFaqs();
});

const openForm = (row?: any) => {
  editing.value = row || null;
  showForm.value = true;
};

onMounted(async () => {
  if (!auth.user && auth.token) {
    await auth.fetchMe().catch(() => {});
  }
  await loadCategories();
  loadFaqs();
});
</script>

<style scoped>
.page {
  position: relative;
  padding: 0;
  min-height: calc(100vh - 64px);
  background: linear-gradient(180deg, #f0f4ff 0%, #ffffff 30%, #f8fafc 100%);
}

.faq-hero {
  position: relative;
  padding: 28px 24px 36px;
  text-align: center;
  border-bottom: 1px solid #e8eef6;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(59, 130, 246, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
  overflow: hidden;
}

.faq-hero::before {
  content: "";
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 200px;
  background: radial-gradient(ellipse, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.hero-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 920px;
  margin: 0 auto;
}
.hero-search {
  width: min(620px, 54vw);
}
.hero-search :deep(.el-input__wrapper) {
  height: 54px;
  padding: 0 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 34px rgba(15, 35, 69, 0.08), 0 0 0 1px #e6edf6 inset;
}
.hero-search :deep(.el-input__inner) {
  color: #1f2d3d;
  font-size: 16px;
  font-weight: 600;
}
.hero-search :deep(.el-input__prefix) {
  color: #9aa9bb;
  font-size: 20px;
}
.new-consult-btn {
  flex-shrink: 0;
  height: 46px;
  padding: 0 20px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
  font-weight: 800;
  font-size: 14px;
  transition: all 0.2s ease;
}
.new-consult-btn:hover,
.new-consult-btn:focus {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
}
.faq-workspace {
  min-height: calc(100vh - 252px);
}
.faq-sidebar-col {
  border-right: 1px solid #edf2f8;
  background: rgba(255, 255, 255, 0.72);
}
.faq-content-col {
  min-width: 0;
}
.faq-main {
  min-height: calc(100vh - 252px);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 24px 28px 0;
  overflow: hidden;
}
.list-title strong {
  min-width: 30px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #e8f2ff;
  color: #1f5fb8;
  font-size: 13px;
  line-height: 24px;
}
.list-meta {
  color: #7d8da3;
  font-size: 13px;
  font-weight: 700;
}
.pagination-wrap {
  padding: 16px 0 24px;
  display: flex;
  justify-content: flex-end;
}

.workbench-toolbar-meta {
  display: flex;
  position: relative;
  min-width: 160px;
  padding-left: 14px;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.workbench-toolbar-meta::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2f7be8 0%, #23b7d9 100%);
  box-shadow: 0 0 16px rgba(47, 123, 232, 0.35);
}

.workbench-toolbar-meta span {
  color: #11335a;
  font-size: 15px;
  font-weight: 850;
}

.workbench-toolbar-meta small {
  color: #436785;
  font-size: 12px;
  font-weight: 600;
}

.medical-consult-page--workbench {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  gap: 0 !important;
  overflow: hidden;
  background: linear-gradient(180deg, #eef5ff 0%, #f7fbff 100%);
}

.medical-consult-page--workbench .faq-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px !important;
  border: 1px solid rgba(90, 145, 220, 0.24) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(42, 132, 255, 0.22) 0%, transparent 34%),
    radial-gradient(circle at 78% 18%, rgba(35, 183, 217, 0.16) 0%, transparent 30%),
    linear-gradient(135deg, #ecf7ff 0%, #edf3ff 46%, #f8fcff 100%) !important;
  box-shadow:
    0 10px 24px rgba(30, 73, 128, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.86) inset !important;
  text-align: left;
  border-radius: 0 !important;
}

.medical-consult-page--workbench .faq-hero::before {
  display: none;
}

.medical-consult-page--workbench .hero-tools {
  width: auto;
  max-width: none;
  margin: 0;
  justify-content: flex-end;
}

.medical-consult-page--workbench .hero-search {
  width: min(460px, 44vw);
}

.medical-consult-page--workbench .hero-search :deep(.el-input__wrapper) {
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 8px 20px rgba(48, 92, 150, 0.08),
    0 0 0 1px rgba(93, 146, 214, 0.24) inset;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.medical-consult-page--workbench .hero-search :deep(.el-input__inner) {
  font-size: 13px;
  font-weight: 600;
}

.medical-consult-page--workbench .hero-search :deep(.el-input__prefix) {
  color: #6d93bc;
  font-size: 15px;
}

.medical-consult-page--workbench .new-consult-btn {
  height: 34px;
  padding: 0 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2f7be8 0%, #2560bd 100%);
  border: none;
  box-shadow: 0 10px 18px rgba(47, 123, 232, 0.24);
  font-size: 13px;
  font-weight: 800;
  transition: all 0.2s;
}

.medical-consult-page--workbench .new-consult-btn:hover,
.medical-consult-page--workbench .new-consult-btn:focus {
  background: linear-gradient(135deg, #3d6bbf 0%, #254d90 100%);
  box-shadow: 0 4px 14px rgba(79, 126, 207, 0.4);
  transform: translateY(-1px);
}

.medical-consult-page--workbench .faq-workspace {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  flex: 1 1 auto;
  height: 0;
  min-height: 0;
  margin-top: 0;
  border: 1px solid rgba(130, 158, 190, 0.22);
  border-radius: 0;
  background: #ffffff;
  overflow: hidden;
}

.medical-consult-page--workbench .faq-sidebar-col,
.medical-consult-page--workbench .faq-content-col {
  width: auto;
  max-width: none !important;
  flex: initial !important;
}

.medical-consult-page--workbench .faq-sidebar-col {
  min-height: 0;
  border-right: 1px solid rgba(134, 163, 194, 0.22);
  background:
    radial-gradient(circle at 18% 0%, rgba(47, 123, 232, 0.13) 0%, transparent 34%),
    linear-gradient(180deg, #e9f4ff 0%, #f6faff 44%, #eaf1fa 100%);
  overflow: hidden;
}

.medical-consult-page--workbench .faq-content-col {
  display: flex;
  min-height: 0;
  overflow: hidden;
}

.medical-consult-page--workbench .faq-main {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  border: 0 !important;
  padding: 0;
  overflow: hidden;
  background: #ffffff;
}

.medical-consult-page--workbench .pagination-wrap {
  flex: 0 0 auto;
  padding: 10px 14px;
  border-top: 1px solid #edf3fa;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.medical-consult-page--workbench :deep(.faq-category-panel) {
  height: 100%;
  padding: 12px 10px;
}

.medical-consult-page--workbench :deep(.faq-category-panel .header) {
  padding: 10px 10px;
  font-size: 12px;
}

.medical-consult-page--workbench :deep(.faq-category-panel .menu) {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
  padding-top: 10px;
}

.medical-consult-page--workbench :deep(.faq-category-panel .menu .el-menu-item) {
  height: 36px;
  margin: 4px 0;
  border-radius: 8px;
  font-size: 13px;
  line-height: 36px;
}

.medical-consult-page--workbench :deep(.faq-category-panel .cat-icon) {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 12px;
}

:global([data-ctms-theme="dark"] .medical-consult-page--workbench .faq-hero),
:global([data-ctms-theme="dark"] .medical-consult-page--workbench .faq-workspace) {
  border-color: #26364a;
  background:
    radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.2) 0%, transparent 34%),
    linear-gradient(135deg, #172033 0%, #111827 100%) !important;
}

:global([data-ctms-theme="dark"] .medical-consult-page--workbench .faq-sidebar-col) {
  border-color: #26364a;
  background: #111827;
}

:global([data-ctms-theme="dark"] .medical-consult-page--workbench .workbench-toolbar-meta span) {
  color: #e5edf7;
}

@media (max-width: 1080px) {
  .hero-tools {
    flex-wrap: wrap;
  }
  .hero-search {
    width: 100%;
  }
  .faq-sidebar-col,
  .faq-content-col {
    max-width: 100%;
    flex: 0 0 100%;
  }
  .faq-main {
    padding: 18px 16px 0;
  }

  .medical-consult-page--workbench .faq-workspace {
    grid-template-columns: 1fr;
  }

  .medical-consult-page--workbench .faq-sidebar-col {
    border-right: 0;
    border-bottom: 1px solid #d9e2ec;
  }

  .medical-consult-page--workbench .faq-main {
    padding: 0;
  }
}
</style>
