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

import { ElButton, ElTag } from 'element-plus';

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

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

const bot = computed(() => props.snapshot || {});
const expandedPrompt = ref(false);

const modelItems = computed(() => [
  {
    label: $t('approval.snapshot.modelName'),
    value: bot.value.modelName,
  },
  {
    label: $t('bot.temperature'),
    value: bot.value.temperature,
  },
  {
    label: 'Top P',
    value: bot.value.topP,
  },
  {
    label: 'Top K',
    value: bot.value.topK,
  },
  {
    label: $t('bot.maxReplyLength'),
    value: bot.value.maxReplyLength,
  },
  {
    label: $t('approval.snapshot.maxMessageCount'),
    value: bot.value.maxMessageCount,
  },
]);

const bindingGroups = computed(() => [
  {
    items: Array.isArray(bot.value.knowledgeBindings)
      ? bot.value.knowledgeBindings
      : [],
    key: 'knowledge',
    label: $t('approval.snapshot.knowledgeBindings'),
  },
  {
    items: Array.isArray(bot.value.workflowBindings)
      ? bot.value.workflowBindings
      : [],
    key: 'workflow',
    label: $t('approval.snapshot.workflowBindings'),
  },
  {
    items: Array.isArray(bot.value.pluginBindings)
      ? bot.value.pluginBindings
      : [],
    key: 'plugin',
    label: $t('approval.snapshot.pluginBindings'),
  },
  {
    items: Array.isArray(bot.value.mcpBindings) ? bot.value.mcpBindings : [],
    key: 'mcp',
    label: $t('approval.snapshot.mcpBindings'),
  },
]);

const promptPreview = computed(() => bot.value.systemPrompt || '');

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

function getBindingName(groupKey: string, item: Record<string, any>) {
  switch (groupKey) {
    case 'knowledge': {
      return item.knowledgeName || $t('approval.snapshot.unnamedKnowledge');
    }
    case 'mcp': {
      return (
        item.mcpName || item.mcpToolName || $t('approval.snapshot.unnamedMcp')
      );
    }
    case 'plugin': {
      return item.pluginItemName || $t('approval.snapshot.unnamedPlugin');
    }
    case 'workflow': {
      return item.workflowName || $t('approval.snapshot.unnamedWorkflow');
    }
    default: {
      return $t('approval.snapshot.notConfigured');
    }
  }
}

function getRetrievalModeLabel(mode?: string) {
  const normalized = String(mode || '').toLowerCase();
  if (!normalized) {
    return '';
  }
  const label = $t(`bot.retrievalModes.${normalized}`);
  return label === `bot.retrievalModes.${normalized}` ? String(mode) : label;
}
</script>

<template>
  <div class="snapshot-card">
    <div class="snapshot-card__hero">
      <div v-if="bot.icon" class="snapshot-card__avatar">
        <img :src="bot.icon" :alt="bot.title || $t('approval.resource.bot')" />
      </div>
      <div
        v-else
        class="snapshot-card__avatar snapshot-card__avatar--placeholder"
      >
        {{ $t('approval.resource.bot').slice(0, 1) }}
      </div>
      <div class="snapshot-card__hero-copy">
        <div class="snapshot-card__title-row">
          <div class="snapshot-card__title">
            {{ bot.title || $t('approval.snapshot.untitledBot') }}
          </div>
          <div class="snapshot-card__meta-tags">
            <ElTag round effect="plain" type="primary">
              {{ bot.alias || $t('approval.snapshot.notConfigured') }}
            </ElTag>
            <ElTag
              round
              effect="plain"
              :type="bot.anonymousEnabled ? 'success' : 'info'"
            >
              {{
                bot.anonymousEnabled
                  ? $t('approval.snapshot.anonymousEnabled')
                  : $t('approval.snapshot.anonymousDisabled')
              }}
            </ElTag>
          </div>
        </div>
        <div v-if="bot.description" class="snapshot-card__description">
          {{ bot.description }}
        </div>
        <div class="snapshot-card__submeta">
          <span>
            {{ $t('approval.snapshot.department') }}：{{
              formatValue(bot.deptName)
            }}
          </span>
          <span>
            {{ $t('approval.snapshot.category') }}：{{
              formatValue(bot.categoryName)
            }}
          </span>
        </div>
      </div>
    </div>

    <section class="snapshot-card__section">
      <div class="snapshot-card__section-title">
        {{ $t('approval.snapshot.botModelConfig') }}
      </div>
      <div class="snapshot-card__info-grid">
        <div
          v-for="item in modelItems"
          :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-head">
        <div class="snapshot-card__section-title">
          {{ $t('approval.snapshot.systemPrompt') }}
        </div>
        <ElButton
          v-if="promptPreview"
          link
          type="primary"
          @click="expandedPrompt = !expandedPrompt"
        >
          {{
            expandedPrompt
              ? $t('approval.snapshot.collapsePrompt')
              : $t('approval.snapshot.expandPrompt')
          }}
        </ElButton>
      </div>
      <div
        v-if="promptPreview"
        class="snapshot-card__prompt"
        :class="{ 'snapshot-card__prompt--expanded': expandedPrompt }"
      >
        {{ promptPreview }}
      </div>
      <div v-else class="snapshot-card__empty-text">
        {{ $t('approval.snapshot.notConfigured') }}
      </div>
    </section>

    <section class="snapshot-card__section">
      <div class="snapshot-card__section-title">
        {{ $t('approval.snapshot.botBindings') }}
      </div>
      <div class="snapshot-card__bindings-grid">
        <div
          v-for="group in bindingGroups"
          :key="group.key"
          class="snapshot-card__binding-group"
        >
          <div class="snapshot-card__binding-head">
            <span>{{ group.label }}</span>
            <ElTag round effect="plain" type="info">
              {{ group.items.length }}
            </ElTag>
          </div>
          <div
            v-if="group.items.length > 0"
            class="snapshot-card__binding-list"
          >
            <div
              v-for="item in group.items"
              :key="`${group.key}-${JSON.stringify(item)}`"
              class="snapshot-card__binding-item"
            >
              <span>{{ getBindingName(group.key, item) }}</span>
              <ElTag
                v-if="group.key === 'knowledge' && item.retrievalMode"
                round
                effect="plain"
                type="primary"
              >
                {{ getRetrievalModeLabel(item.retrievalMode) }}
              </ElTag>
              <ElTag
                v-else-if="group.key === 'mcp' && item.mcpToolName"
                round
                effect="plain"
                type="success"
              >
                {{ item.mcpToolName }}
              </ElTag>
            </div>
          </div>
          <div v-else class="snapshot-card__empty-text">
            {{ $t('approval.snapshot.noBindings') }}
          </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__submeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 12px;
  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-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

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

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

.snapshot-card__info-item,
.snapshot-card__binding-group {
  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__prompt {
  max-height: 132px;
  overflow: hidden;
  padding: 14px 16px;
  border-radius: 16px;
  background: hsl(var(--surface-panel) / 0.88);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  color: hsl(var(--foreground));
}

.snapshot-card__prompt--expanded {
  max-height: none;
}

.snapshot-card__binding-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  color: hsl(var(--foreground));
}

.snapshot-card__binding-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.snapshot-card__binding-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: hsl(var(--foreground));
}

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

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

  .snapshot-card__title-row,
  .snapshot-card__section-head {
    flex-direction: column;
    align-items: flex-start;
  }

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

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