<script setup lang="ts">
import type {AiToolApprovalPayload} from './types';

import {Check, Close, Key} from '@element-plus/icons-vue';
import {ElButton, ElIcon} from 'element-plus';

const props = defineProps<AiToolApprovalPayload & { loading?: boolean }>();

const emit = defineEmits<{
  approve: [payload: AiToolApprovalPayload];
  reject: [payload: AiToolApprovalPayload];
}>();

function payload(): AiToolApprovalPayload {
  return {
    requestId: props.requestId,
    resumeToken: props.resumeToken,
    toolName: props.toolName,
    toolDisplayName: props.toolDisplayName,
    toolCallId: props.toolCallId,
    toolType: props.toolType,
    input: props.input,
    expiresAt: props.expiresAt,
    metadata: props.metadata,
  };
}
</script>

<template>
  <div class="ai-tool-approval">
    <div class="ai-tool-approval__head">
      <ElIcon><Key /></ElIcon>
      <div>
        <div class="ai-tool-approval__title">
          {{ toolDisplayName || toolName }}
        </div>
        <div class="ai-tool-approval__desc">需要确认后执行</div>
      </div>
    </div>
    <pre v-if="input" class="ai-tool-approval__payload">{{ input }}</pre>
    <div class="ai-tool-approval__actions">
      <ElButton
        :icon="Close"
        :loading="loading"
        @click="emit('reject', payload())"
      >
        拒绝
      </ElButton>
      <ElButton
        type="primary"
        :icon="Check"
        :loading="loading"
        @click="emit('approve', payload())"
      >
        批准
      </ElButton>
    </div>
  </div>
</template>

<style scoped>
.ai-tool-approval {
  padding: 12px;
  background: var(--el-color-primary-light-9);
  border-radius: 8px;
}

.ai-tool-approval__head {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ai-tool-approval__title {
  font-size: 13px;
  font-weight: 600;
}

.ai-tool-approval__desc {
  margin-top: 2px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.ai-tool-approval__payload {
  max-height: 128px;
  padding: 8px;
  margin: 10px 0 0;
  overflow: auto;
  font-size: 12px;
  line-height: 18px;
  white-space: pre-wrap;
  background: var(--el-bg-color);
  border-radius: 6px;
}

.ai-tool-approval__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}
</style>
