<script setup lang="ts">
import { computed } from 'vue';

import { ElTag } from 'element-plus';

import { $t } from '#/locales';

const props = defineProps<{
  snapshot?: null | Record<string, any>;
}>();

const knowledge = computed(() => props.snapshot || {});

const visibilityLabelMap: Record<string, string> = {
  DEPT: $t('documentCollection.visibilityScopeDept'),
  PRIVATE: $t('documentCollection.visibilityScopePrivate'),
  PUBLIC: $t('documentCollection.visibilityScopePublic'),
};

const collectionTypeLabelMap: Record<string, string> = {
  DOCUMENT: $t('documentCollection.collectionTypeDocument'),
  FAQ: $t('documentCollection.collectionTypeFaq'),
};

const visibilityLabel = computed(() => {
  const code = String(knowledge.value.visibilityScope || '').toUpperCase();
  return (
    knowledge.value.visibilityScopeLabel ||
    visibilityLabelMap[code] ||
    $t('approval.snapshot.notConfigured')
  );
});

const collectionTypeLabel = computed(() => {
  const code = String(knowledge.value.collectionType || '').toUpperCase();
  return (
    knowledge.value.collectionTypeLabel ||
    collectionTypeLabelMap[code] ||
    $t('approval.snapshot.notConfigured')
  );
});

const basicItems = computed(() => [
  {
    label: $t('documentCollection.alias'),
    value: knowledge.value.alias,
  },
  {
    label: $t('approval.snapshot.department'),
    value: knowledge.value.deptName,
  },
  {
    label: $t('approval.snapshot.category'),
    value: knowledge.value.categoryName,
  },
  {
    label: $t('documentCollection.englishName'),
    value: knowledge.value.englishName,
  },
]);

const configItems = computed(() => [
  {
    label: $t('approval.snapshot.vectorStoreType'),
    value: knowledge.value.vectorStoreType,
  },
  {
    label: $t('approval.snapshot.vectorEmbedModel'),
    value: knowledge.value.vectorEmbedModelName,
  },
  {
    label: $t('documentCollection.dimensionOfVectorModel'),
    value: knowledge.value.dimensionOfVectorModel,
  },
  {
    label: $t('approval.snapshot.rerankModel'),
    value: knowledge.value.rerankModelName,
  },
]);

function formatValue(value?: null | number | string) {
  if (value === null || value === undefined || value === '') {
    return $t('approval.snapshot.notConfigured');
  }
  return String(value);
}
</script>

<template>
  <div class="snapshot-card">
    <div class="snapshot-card__hero">
      <div v-if="knowledge.icon" class="snapshot-card__avatar">
        <img
          :src="knowledge.icon"
          :alt="knowledge.title || $t('approval.resource.knowledge')"
        />
      </div>
      <div
        v-else
        class="snapshot-card__avatar snapshot-card__avatar--placeholder"
      >
        {{ $t('approval.resource.knowledge').slice(0, 1) }}
      </div>
      <div class="snapshot-card__hero-copy">
        <div class="snapshot-card__title-row">
          <div class="snapshot-card__title">
            {{ knowledge.title || $t('approval.snapshot.untitledKnowledge') }}
          </div>
          <div class="snapshot-card__meta-tags">
            <ElTag round effect="plain" type="info">
              {{ visibilityLabel }}
            </ElTag>
            <ElTag round effect="plain" type="primary">
              {{ collectionTypeLabel }}
            </ElTag>
          </div>
        </div>
        <div v-if="knowledge.description" class="snapshot-card__description">
          {{ knowledge.description }}
        </div>
      </div>
    </div>

    <section class="snapshot-card__section">
      <div class="snapshot-card__section-title">
        {{ $t('approval.snapshot.knowledgeBasic') }}
      </div>
      <div class="snapshot-card__info-grid">
        <div
          v-for="item in basicItems"
          :key="item.label"
          class="snapshot-card__info-item"
        >
          <div class="snapshot-card__label">{{ item.label }}</div>
          <div class="snapshot-card__value">{{ formatValue(item.value) }}</div>
        </div>
      </div>
    </section>

    <section class="snapshot-card__section">
      <div class="snapshot-card__section-title">
        {{ $t('approval.snapshot.knowledgeConfig') }}
      </div>
      <div class="snapshot-card__toggles">
        <div class="snapshot-card__toggle">
          <span>{{ $t('documentCollection.vectorStoreEnable') }}</span>
          <ElTag
            round
            :type="knowledge.vectorStoreEnable ? 'success' : 'info'"
            effect="plain"
          >
            {{
              knowledge.vectorStoreEnable
                ? $t('approval.snapshot.enabled')
                : $t('approval.snapshot.disabled')
            }}
          </ElTag>
        </div>
        <div class="snapshot-card__toggle">
          <span>{{ $t('documentCollection.searchEngineEnable') }}</span>
          <ElTag
            round
            :type="knowledge.searchEngineEnable ? 'success' : 'info'"
            effect="plain"
          >
            {{
              knowledge.searchEngineEnable
                ? $t('approval.snapshot.enabled')
                : $t('approval.snapshot.disabled')
            }}
          </ElTag>
        </div>
        <div class="snapshot-card__toggle">
          <span>{{ $t('documentCollection.rerankEnable') }}</span>
          <ElTag
            round
            :type="knowledge.rerankEnable ? 'success' : 'info'"
            effect="plain"
          >
            {{
              knowledge.rerankEnable
                ? $t('approval.snapshot.enabled')
                : $t('approval.snapshot.disabled')
            }}
          </ElTag>
        </div>
        <div class="snapshot-card__toggle">
          <span>{{ $t('approval.snapshot.canUpdateEmbeddingModel') }}</span>
          <ElTag
            round
            :type="knowledge.canUpdateEmbeddingModel ? 'success' : 'info'"
            effect="plain"
          >
            {{
              knowledge.canUpdateEmbeddingModel
                ? $t('approval.snapshot.enabled')
                : $t('approval.snapshot.disabled')
            }}
          </ElTag>
        </div>
      </div>
      <div class="snapshot-card__info-grid">
        <div
          v-for="item in configItems"
          :key="item.label"
          class="snapshot-card__info-item"
        >
          <div class="snapshot-card__label">{{ item.label }}</div>
          <div class="snapshot-card__value">{{ formatValue(item.value) }}</div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.snapshot-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.snapshot-card__hero,
.snapshot-card__section {
  border: 1px solid hsl(var(--divider-faint) / 0.54);
  border-radius: 20px;
  background: hsl(var(--surface-contrast-soft) / 0.9);
}

.snapshot-card__hero {
  display: flex;
  gap: 16px;
  padding: 20px;
}

.snapshot-card__avatar {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid hsl(var(--divider-faint) / 0.5);
  background: hsl(var(--surface) / 0.96);
}

.snapshot-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.snapshot-card__avatar--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  color: hsl(var(--primary));
}

.snapshot-card__hero-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 10px;
}

.snapshot-card__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.snapshot-card__title {
  font-size: 16px;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.snapshot-card__description {
  font-size: 13px;
  line-height: 1.7;
  color: hsl(var(--muted-foreground));
}

.snapshot-card__meta-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.snapshot-card__section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.snapshot-card__section-title {
  font-size: 14px;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.snapshot-card__info-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.snapshot-card__info-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 16px;
  background: hsl(var(--surface-panel) / 0.88);
}

.snapshot-card__label {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

.snapshot-card__value {
  font-size: 14px;
  font-weight: 500;
  color: hsl(var(--foreground));
  line-height: 1.6;
  word-break: break-word;
}

.snapshot-card__toggles {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.snapshot-card__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: hsl(var(--surface-panel) / 0.88);
  font-size: 13px;
  color: hsl(var(--foreground));
}

@media (max-width: 960px) {
  .snapshot-card__hero {
    flex-direction: column;
  }

  .snapshot-card__title-row {
    flex-direction: column;
  }

  .snapshot-card__meta-tags {
    justify-content: flex-start;
  }

  .snapshot-card__info-grid,
  .snapshot-card__toggles {
    grid-template-columns: minmax(0, 1fr);
  }
}
</style>
