<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 agent = computed(() => props.snapshot || {});
const expandedPrompt = ref(false);

const modelItems = computed(() => {
  const model = agent.value.modelSummary || {};
  return [
    {
      label: $t('approval.snapshot.modelName'),
      value: model.title || model.modelName,
    },
  ];
});

const promptPreview = computed(
  () =>
    agent.value.promptSummary?.systemPrompt ||
    agent.value.promptConfigJson?.systemPrompt ||
    '',
);

const bindingGroups = computed(() => [
  {
    items: Array.isArray(agent.value.knowledgeSummaries)
      ? agent.value.knowledgeSummaries
      : [],
    key: 'knowledge',
    label: $t('approval.snapshot.knowledgeBindings'),
  },
  {
    items: Array.isArray(agent.value.toolSummaries)
      ? agent.value.toolSummaries
      : [],
    key: 'tool',
    label: $t('approval.snapshot.agentBindings'),
  },
]);

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

function getBindingName(item: Record<string, any>) {
  return (
    item.title ||
    item.toolName ||
    item.name ||
    $t('approval.snapshot.notConfigured')
  );
}
</script>

<template>
  <div class="agent-snapshot">
    <div class="agent-snapshot__hero">
      <div class="agent-snapshot__avatar">
        <img
          v-if="agent.avatar"
          :src="agent.avatar"
          :alt="agent.name || $t('approval.resource.agent')"
        />
        <span v-else>{{ $t('approval.resource.agent').slice(0, 1) }}</span>
      </div>
      <div class="agent-snapshot__hero-copy">
        <div class="agent-snapshot__title">
          {{ agent.name || $t('approval.snapshot.untitledAgent') }}
        </div>
        <div v-if="agent.description" class="agent-snapshot__description">
          {{ agent.description }}
        </div>
      </div>
    </div>

    <section class="agent-snapshot__section">
      <div class="agent-snapshot__section-title">
        {{ $t('approval.snapshot.agentModelConfig') }}
      </div>
      <div class="agent-snapshot__info-grid">
        <div
          v-for="item in modelItems"
          :key="item.label"
          class="agent-snapshot__info-item"
        >
          <span>{{ item.label }}</span>
          <strong>{{ formatValue(item.value) }}</strong>
        </div>
      </div>
    </section>

    <section class="agent-snapshot__section">
      <div class="agent-snapshot__section-head">
        <div class="agent-snapshot__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="agent-snapshot__prompt"
        :class="{ 'is-expanded': expandedPrompt }"
      >
        {{ promptPreview }}
      </div>
      <div v-else class="agent-snapshot__empty">
        {{ $t('approval.snapshot.notConfigured') }}
      </div>
    </section>

    <section class="agent-snapshot__section">
      <div class="agent-snapshot__section-title">
        {{ $t('approval.snapshot.agentBindings') }}
      </div>
      <div class="agent-snapshot__binding-grid">
        <div
          v-for="group in bindingGroups"
          :key="group.key"
          class="agent-snapshot__binding-group"
        >
          <div class="agent-snapshot__binding-head">
            <span>{{ group.label }}</span>
            <ElTag round effect="plain" type="info">
              {{ group.items.length }}
            </ElTag>
          </div>
          <div v-if="group.items.length" class="agent-snapshot__binding-list">
            <div
              v-for="item in group.items"
              :key="`${group.key}-${item.bindingId || item.id || item.targetId || item.knowledgeId}`"
              class="agent-snapshot__binding-item"
            >
              <span>{{ getBindingName(item) }}</span>
              <ElTag
                v-if="item.toolType || item.retrievalMode"
                round
                effect="plain"
                type="primary"
              >
                {{ item.toolType || item.retrievalMode }}
              </ElTag>
            </div>
          </div>
          <div v-else class="agent-snapshot__empty">
            {{ $t('approval.snapshot.noBindings') }}
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.agent-snapshot {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.agent-snapshot__hero,
.agent-snapshot__section {
  padding: var(--space-4);
  border: 1px solid hsl(var(--divider-faint) / 0.64);
  border-radius: var(--radius-panel);
  background: hsl(var(--surface-panel) / 0.88);
}

.agent-snapshot__hero,
.agent-snapshot__section-head,
.agent-snapshot__binding-head,
.agent-snapshot__binding-item {
  display: flex;
  align-items: center;
}

.agent-snapshot__hero {
  gap: var(--space-3);
}

.agent-snapshot__avatar {
  display: grid;
  width: 48px;
  height: 48px;
  flex: none;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-control);
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  font-weight: 600;
}

.agent-snapshot__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agent-snapshot__hero-copy,
.agent-snapshot__section,
.agent-snapshot__binding-group,
.agent-snapshot__binding-list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
}

.agent-snapshot__title,
.agent-snapshot__section-title {
  color: hsl(var(--foreground));
  font-weight: 600;
}

.agent-snapshot__description,
.agent-snapshot__empty {
  color: hsl(var(--text-muted));
  font-size: 13px;
}

.agent-snapshot__section-head,
.agent-snapshot__binding-head,
.agent-snapshot__binding-item {
  justify-content: space-between;
  gap: var(--space-3);
}

.agent-snapshot__info-grid,
.agent-snapshot__binding-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

.agent-snapshot__info-item,
.agent-snapshot__binding-group {
  padding: var(--space-3);
  border-radius: var(--radius-control);
  background: hsl(var(--surface-contrast-soft));
}

.agent-snapshot__info-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: hsl(var(--text-muted));
  font-size: 13px;
}

.agent-snapshot__info-item strong {
  color: hsl(var(--foreground));
  font-weight: 500;
}

.agent-snapshot__prompt {
  display: -webkit-box;
  overflow: hidden;
  color: hsl(var(--foreground));
  font-size: 13px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  white-space: pre-wrap;
}

.agent-snapshot__prompt.is-expanded {
  display: block;
}

.agent-snapshot__binding-item {
  min-height: 32px;
  color: hsl(var(--foreground));
  font-size: 13px;
}
</style>
