<template>
  <div class="faq-list-card" :class="{ 'faq-list-card--desktop': isDesktop }">
    <el-table
      :data="items"
      v-loading="loading"
      style="width: 100%"
      class="faq-table"
      :class="{ 'faq-table--with-actions': canDelete, 'faq-table--without-actions': !canDelete }"
      :row-class-name="rowClassName"
      :height="isDesktop ? '100%' : undefined"
      @row-click="onRowClick"
      table-layout="fixed"
    >
    <el-table-column prop="question" :label="TEXT.common.fields.question" show-overflow-tooltip>
      <template #default="scope">
        <div class="question-cell">
          <span class="question-icon"><el-icon><QuestionFilled /></el-icon></span>
          <el-link type="primary" :underline="false" class="question-link">
            {{ scope.row.question }}
          </el-link>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="category_id" :label="TEXT.common.labels.category" show-overflow-tooltip>
      <template #default="scope">
        <span class="category-pill">{{ categoryLabel(scope.row.category_id) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="updated_at" :label="TEXT.common.labels.updatedAt" show-overflow-tooltip>
      <template #default="scope">
        <span class="time-text">
          <span class="time-date">{{ splitDateTime(scope.row.updated_at).date }}</span>
          <span class="time-clock">{{ splitDateTime(scope.row.updated_at).time }}</span>
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="status" :label="TEXT.common.fields.status">
      <template #default="scope">
        <el-tag :type="statusTagType(scope.row.status)" size="small" effect="light" round>{{ statusLabel(scope.row.status) }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column v-if="canDelete" :label="TEXT.common.labels.actions">
      <template #default="scope">
        <div class="cell-actions">
          <el-button v-if="canDelete" link type="danger" size="small" class="danger" @click.stop="remove(scope.row)">
            删除
          </el-button>
        </div>
      </template>
    </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import { QuestionFilled } from "@element-plus/icons-vue";
import { computed } from "vue";
import { useRouter } from "vue-router";
import { deleteFaqItem } from "../api/faqs";
import type { FaqItem, FaqCategory } from "../api/faqs";
import { displayDateTime, displayEnum } from "../utils/display";
import { TEXT } from "../locales";
import { isTauriRuntime } from "../runtime";

const props = defineProps<{
  items: FaqItem[];
  categories: FaqCategory[];
  loading: boolean;
  canUpdate: boolean;
  canDelete: boolean;
}>();
const emit = defineEmits(["refresh"]);

const router = useRouter();
const isDesktop = isTauriRuntime();

const categoryMap = computed(() =>
  props.categories.reduce<Record<string, string>>((acc, cur) => {
    acc[cur.id] = cur.name;
    return acc;
  }, {})
);

const categoryLabel = (categoryId: string) => {
  return categoryMap.value[categoryId] || categoryId || "--";
};

const splitDateTime = (value?: string | number | Date | null) => {
  const displayValue = displayDateTime(value);
  const [date, time] = displayValue.split(" ");
  return { date, time: time || "" };
};

const rowClassName = () => "faq-row";

const view = (row: FaqItem) => {
  router.push(`/knowledge/medical-consult/${row.id}`);
};

const onRowClick = (row: FaqItem) => {
  view(row);
};

const statusLabel = (status?: string) => {
  return displayEnum(TEXT.enums.faqStatus, status || "");
};

const statusTagType = (status?: string) => {
  if (status === "RESOLVED") return "success";
  if (status === "PROCESSING") return "warning";
  return "info";
};

const remove = async (row: FaqItem) => {
  if (!props.canDelete) {
    ElMessage.warning("权限不足");
    return;
  }
  const ok = await ElMessageBox.confirm(
    TEXT.modules.knowledgeMedicalConsult.confirmDeleteItem.replace("{name}", row.question),
    TEXT.common.labels.tips
  ).catch(() => null);
  if (!ok) return;
  try {
    await deleteFaqItem(row.id, row.study_id);
    ElMessage.success(TEXT.common.messages.deleteSuccess);
    emit("refresh");
  } catch (e: any) {
    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.deleteFailed);
  }
};
</script>

<style scoped>
.faq-list-card {
  min-height: 240px;
}

.faq-table {
  background: transparent;
}

.faq-table :deep(.el-table__inner-wrapper::before) {
  display: none;
}

.faq-table :deep(.el-table__header-wrapper th.el-table__cell) {
  height: 46px;
  border-bottom: 1px solid #dce8f7;
  background: linear-gradient(180deg, #f7fbff 0%, #eef5fc 100%);
  color: #5d7088;
  font-size: 14px;
  font-weight: 800;
}

.faq-table :deep(.el-table__body-wrapper) {
  background: transparent;
}

.faq-table :deep(.el-table__body) {
  border-collapse: separate;
  border-spacing: 0 10px;
}

.faq-table :deep(.faq-row) {
  cursor: pointer;
}

.faq-table :deep(.faq-row td.el-table__cell) {
  padding: 14px 0;
  border-bottom: 1px solid #e8eef6;
  background: #ffffff;
  transition: background 0.18s ease;
}

.faq-table :deep(.faq-row:hover td.el-table__cell) {
  background: #f7fbff;
}

.faq-table--with-actions :deep(col) {
  width: 20%;
}

.faq-table--without-actions :deep(col) {
  width: 25%;
}



/* 紧凑操作按钮 */
.faq-row .cell-actions { display: flex; gap: 4px; white-space: nowrap; }
.faq-row .cell-actions .el-button { font-size: 12px; padding: 0; height: auto; }
.faq-row .cell-actions .el-button + .el-button { margin-left: 0; }
.danger { color: #f56c6c !important; }

.question-cell {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.question-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 26% 22%, rgba(255, 255, 255, 0.42) 0%, transparent 28%),
    linear-gradient(135deg, #2f7be8 0%, #23b7d9 100%);
  color: #ffffff;
  font-size: 17px;
  font-weight: 800;
  box-shadow:
    0 10px 20px rgba(47, 123, 232, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.45) inset;
}

.question-icon :deep(.el-icon) {
  font-size: 1em;
}

.question-link {
  min-width: 0;
  color: #26323b;
  font-size: 15px;
  font-weight: 800;
}

.category-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 26px;
  padding: 0 10px;
  overflow: hidden;
  border-radius: 7px;
  background: #eaf4ff;
  color: #2c73d2;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.time-text {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  color: #8794a6;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  white-space: nowrap;
}

.time-clock {
  color: #9aa6b6;
  font-size: 11px;
}

.danger {
  color: #f56c6c;
}
.question-link {
  cursor: pointer;
}

.faq-list-card--desktop {
  display: flex;
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
  background: #ffffff;
}

.faq-list-card--desktop .faq-table {
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
}

.faq-list-card--desktop .faq-table :deep(.el-table__inner-wrapper) {
  height: 100%;
}

.faq-list-card--desktop .faq-table :deep(.el-table__header-wrapper th.el-table__cell) {
  height: 42px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(121, 152, 188, 0.28) !important;
  background: linear-gradient(180deg, #f4f9ff 0%, #eaf3fc 100%) !important;
  color: #49647f;
  font-size: 12px;
  font-weight: 850;
}

.faq-list-card--desktop .faq-table :deep(.el-table__body) {
  border-collapse: separate;
  border-spacing: 0 6px;
}

.faq-list-card--desktop .faq-table :deep(.el-table__body-wrapper) {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  scrollbar-width: none;
}

.faq-list-card--desktop .faq-table :deep(.el-table__body-wrapper::-webkit-scrollbar),
.faq-list-card--desktop .faq-table :deep(.el-scrollbar__wrap::-webkit-scrollbar) {
  display: none;
  width: 0;
  height: 0;
}

.faq-list-card--desktop .faq-table :deep(.el-scrollbar__wrap) {
  scrollbar-width: none;
}

.faq-list-card--desktop .faq-table :deep(.el-scrollbar__bar.is-vertical) {
  display: none !important;
}

.faq-list-card--desktop .faq-table :deep(.el-table__empty-block) {
  min-height: 100%;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.faq-list-card--desktop .faq-table :deep(.faq-row td.el-table__cell) {
  padding: 10px 14px;
  border-top: 1px solid rgba(226, 235, 246, 0.92);
  border-bottom: 1px solid rgba(226, 235, 246, 0.92);
  background: #ffffff;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.faq-list-card--desktop .faq-table :deep(.faq-row td.el-table__cell:first-child) {
  border-left: 1px solid rgba(226, 235, 246, 0.92);
  border-radius: 9px 0 0 9px;
}

.faq-list-card--desktop .faq-table :deep(.faq-row td.el-table__cell:last-child) {
  border-right: 1px solid rgba(226, 235, 246, 0.92);
  border-radius: 0 9px 9px 0;
}

.faq-list-card--desktop .faq-table :deep(.faq-row:hover td.el-table__cell) {
  border-color: rgba(111, 159, 220, 0.34);
  background: #f5faff;
  box-shadow: 0 8px 18px rgba(45, 86, 143, 0.06);
}

.faq-list-card--desktop .question-cell {
  gap: 10px;
}

.faq-list-card--desktop .question-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow:
    0 8px 16px rgba(47, 123, 232, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.45) inset;
}

.faq-list-card--desktop .question-link {
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
}

.faq-list-card--desktop .category-pill {
  height: 24px;
  padding: 0 9px;
  border-radius: 7px;
  background: linear-gradient(135deg, #e7f3ff 0%, #eefaff 100%);
  font-size: 12px;
}

.faq-list-card--desktop .time-text {
  gap: 0;
  font-size: 11px;
}

:global([data-ctms-theme="dark"] .faq-list-card--desktop .faq-table .faq-row td.el-table__cell) {
  border-color: #26364a;
  background: #172033;
}

:global([data-ctms-theme="dark"] .faq-list-card--desktop .faq-table .faq-row:hover td.el-table__cell) {
  background: #1d2b42;
}
</style>
