<script setup lang="ts">
import { Database } 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 || $t('ai-platform.workflow.nodes.db_sql.label')"
    :inputs="[{ id: 'target' }]"
    :outputs="[{ id: 'source' }]"
    :node-id="id"
    node-type="db_sql"
  >
    <template #icon><Database class="size-5 text-purple-600" /></template>
    <template #desc>
      {{ $t('ai-platform.workflow.nodes.db_sql.desc') }}
    </template>

    <div class="flex min-w-0 items-center justify-between gap-2">
      <div class="flex min-w-0 items-center gap-2">
        <span
          class="shrink-0 rounded border border-purple-200 bg-purple-50 px-1.5 py-0.5 text-[10px] font-bold text-purple-600"
        >
          SQL
        </span>
        <span class="text-muted-foreground shrink-0 text-[10px]">
          {{
            data.sql_type === 'query'
              ? $t('ai-platform.workflow.nodes.db_sql.query')
              : $t('ai-platform.workflow.nodes.db_sql.execute')
          }}
        </span>
      </div>

      <div
        v-if="data.db_config?.dbName"
        class="flex min-w-0 shrink items-center justify-end gap-1"
      >
        <span
          v-if="data.sql_type === 'execute' && data.db_config.dbName === 'default'"
          class="shrink-0 rounded bg-amber-100 px-1 text-[10px] text-amber-700 dark:bg-amber-950 dark:text-amber-300"
        >
          {{ $t('ai-platform.workflow.editor.dbConnection.defaultBadge') }}
        </span>
        <span
          class="text-muted-foreground truncate text-[10px] font-medium"
          :title="data.db_config.dbName"
        >
          {{ data.db_config.dbName }}
        </span>
      </div>
    </div>
  </BaseNode>
</template>
