<script setup lang="ts">
import { DatabaseZap } from '@vben/icons';
import { $t } from '@vben/locales';

import BaseNode from './BaseNode.vue';

defineProps(['selected', 'data', 'id']);
</script>

<template>
  <BaseNode
    :selected="selected"
    :execution-status="data.executionStatus"
    :execution-result="data.executionResult"
    :label="data.label || 'Text-to-SQL'"
    :inputs="[{ id: 'target' }]"
    :outputs="[{ id: 'source' }]"
    :node-id="id"
    node-type="text_to_sql"
  >
    <template #icon><DatabaseZap class="size-5 text-cyan-600" /></template>
    <template #desc>
      {{ $t('ai-platform.workflow.nodes.text_to_sql.desc') }}
    </template>

    <div class="space-y-2">
      <!-- 数据库连接 -->
      <div v-if="data.db_connection" class="flex items-center gap-2">
        <span
          class="rounded border border-cyan-200 bg-cyan-50 px-1.5 py-0.5 text-[10px] font-bold text-cyan-600 dark:border-cyan-800 dark:bg-cyan-950 dark:text-cyan-400"
        >
          DB
        </span>
        <span class="text-muted-foreground text-[10px]">
          {{ data.db_connection }}
        </span>
      </div>

      <!-- 问题预览 -->
      <div v-if="data.user_question" class="bg-muted rounded px-2 py-1.5">
        <div
          class="text-muted-foreground line-clamp-2 text-[10px]"
          :title="data.user_question"
        >
          {{ data.user_question }}
        </div>
      </div>
      <div v-else class="text-muted-foreground text-[10px]">
        {{ $t('ai-platform.workflow.nodes.text_to_sql.notConfigured') }}
      </div>

      <!-- {{ $t('ai-platform.workflow.nodes.text_to_sql.chartRecommend') }}开关 -->
      <div v-if="data.enable_chart" class="flex items-center gap-1">
        <span
          class="rounded border border-green-200 bg-green-50 px-1.5 py-0.5 text-[10px] text-green-600 dark:border-green-800 dark:bg-green-950 dark:text-green-400"
        >
          {{ $t('ai-platform.workflow.nodes.text_to_sql.chartRecommend') }}
        </span>
      </div>
    </div>
  </BaseNode>
</template>
