<script setup>
import { ref, watch } from 'vue'
import { NButton, NIcon, NInputNumber, useMessage } from 'naive-ui'
import { PlayOutline, CloseCircleOutline } from '@vicons/ionicons5'
import CodeEditor from '../skill/CodeEditor.vue'
import QueryResult from './QueryResult.vue'
import { executeSql } from '../../api/datasource'

const props = defineProps({
  datasourceId: { type: [Number, null], default: null }
})
const emit = defineEmits(['executed'])

const message = useMessage()
const sql = ref('SELECT 1;')
const limit = ref(1000)
const executing = ref(false)
const result = ref(null)
const errorMsg = ref('')

async function run() {
  if (!props.datasourceId) {
    message.warning('请先选择数据源')
    return
  }
  const sqlText = sql.value?.trim()
  if (!sqlText) {
    message.warning('请输入 SQL')
    return
  }
  executing.value = true
  errorMsg.value = ''
  result.value = null
  try {
    const res = await executeSql(props.datasourceId, sqlText, limit.value)
    result.value = res.data
    emit('executed')
  } catch (e) {
    errorMsg.value = e.message || '执行失败'
  } finally {
    executing.value = false
  }
}

function clearSql() {
  sql.value = ''
  result.value = null
  errorMsg.value = ''
}

function setSql(text) {
  sql.value = text || ''
}

defineExpose({ setSql })

watch(() => props.datasourceId, () => {
  result.value = null
  errorMsg.value = ''
})
</script>

<template>
  <div class="sql-console">
    <div class="console-toolbar">
      <div class="toolbar-left">
        <n-button
          size="small"
          type="primary"
          :loading="executing"
          :disabled="!datasourceId"
          @click="run"
        >
          <template #icon><n-icon><PlayOutline /></n-icon></template>
          执行
        </n-button>
        <n-button size="small" quaternary @click="clearSql" :disabled="executing">
          清空
        </n-button>
      </div>
      <div class="toolbar-right">
        <span class="row-limit-label">行数限制</span>
        <n-input-number
          v-model:value="limit"
          size="small"
          :min="1"
          :max="10000"
          :step="100"
          style="width: 120px"
        />
      </div>
    </div>

    <div class="editor-wrap">
      <CodeEditor
        v-model="sql"
        language="sql"
        :height="'200px'"
        :minimap="false"
      />
    </div>

    <div class="error-banner" v-if="errorMsg">
      <n-icon size="14" color="#ef4444"><CloseCircleOutline /></n-icon>
      <span>{{ errorMsg }}</span>
    </div>

    <div class="result-wrap">
      <QueryResult :result="result" :loading="executing" />
    </div>
  </div>
</template>

<style scoped>
.sql-console {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.console-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  gap: 8px;
}
.toolbar-left, .toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.row-limit-label {
  font-size: 12px;
  color: var(--text-muted);
}

.editor-wrap {
  border-bottom: 1px solid var(--border-color);
  background: #1e1e1e;
}

.error-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.08);
  border-bottom: 1px solid rgba(239, 68, 68, 0.2);
  color: #ef4444;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
}

.result-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
</style>
