<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { useEditorStore } from '../stores/editorStore'
import { sendAIRequest } from '../composables/useAI'

const store = useEditorStore()
const inputText = ref('')
const loading = ref(false)
const errorMsg = ref('')
const messages = ref<{ role: string; content: string }[]>([])
const chatRef = ref<HTMLDivElement | null>(null)

const mode = ref<'json' | 'code'>('json')

function toggleMode() {
  mode.value = mode.value === 'json' ? 'code' : 'json'
}

async function send() {
  const msg = inputText.value.trim()
  if (!msg || loading.value) return
  inputText.value = ''
  errorMsg.value = ''

  if (!store.deepseekKey) {
    errorMsg.value = '请先在设置中输入 DeepSeek API Key'
    return
  }

  messages.value.push({ role: 'user', content: msg })
  loading.value = true

  try {
    const { result, sessionId: newSid } = await sendAIRequest(msg, mode.value, store.deepseekKey, store.aiSessionId || undefined)
    if (newSid) store.setAISessionId(newSid)

    if (mode.value === 'json') {
      const clean = result.replace(/^```json\n?|\n?```$/g, '').trim()
      try {
        JSON.parse(clean)
        store.setAIResult(clean)
        messages.value.push({ role: 'assistant', content: '已生成 JSON，请查看编辑器面板' })
      } catch {
        messages.value.push({ role: 'assistant', content: result })
      }
    } else {
      messages.value.push({ role: 'assistant', content: result || '已完成' })
    }
  } catch (e: any) {
    errorMsg.value = e.message || '请求失败'
  } finally {
    loading.value = false
    await nextTick()
    chatRef.value?.scrollTo({ top: chatRef.value.scrollHeight })
  }
}

function onKeydown(e: KeyboardEvent) {
  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send() }
}

function newSession() {
  store.clearAISession()
  messages.value = []
  errorMsg.value = ''
}
</script>

<template>
  <div class="ai-panel">
    <div class="ai-header">
      <span class="ai-title">AI 助手</span>
      <div class="ai-header-actions">
        <button class="ai-mode-btn" @click="toggleMode" :title="mode === 'json' ? '切换到代码模式' : '切换到 JSON 模式'">
          {{ mode === 'json' ? '📋 JSON' : '💻 代码' }}
        </button>
        <button class="ai-new-btn" @click="newSession" title="新建对话">+</button>
        <button class="ai-close-btn" @click="store.showAIPanel = false">✕</button>
      </div>
    </div>

    <div class="ai-chat" ref="chatRef">
      <div v-if="!store.deepseekKey" class="ai-key-setup">
        <span class="key-label">DeepSeek API Key</span>
        <input
          class="key-input"
          type="password"
          placeholder="sk-..."
          :value="store.deepseekKey"
          @input="store.setDeepseekKey(($event.target as HTMLInputElement).value)"
        />
        <div class="key-hint">Key 保存在浏览器本地，不会上传到编辑器服务器</div>
      </div>
      <div v-if="messages.length === 0 && store.deepseekKey" class="ai-empty">
        输入你的需求，AI 将根据引擎规范修改配置
      </div>
      <div v-for="(m, i) in messages" :key="i" class="ai-msg" :class="m.role">
        <span class="ai-role">{{ m.role === 'user' ? '👤' : '🤖' }}</span>
        <span class="ai-content">{{ m.content }}</span>
      </div>
      <div v-if="loading" class="ai-msg assistant">
        <span class="ai-role">🤖</span>
        <span class="ai-content loading-dots">正在生成<span class="dots">...</span></span>
      </div>
      <div v-if="errorMsg" class="ai-error">{{ errorMsg }}</div>
    </div>

    <div class="ai-input-area">
      <input
        v-model="inputText"
        class="ai-input"
        placeholder="输入你的需求..."
        :disabled="loading"
        @keydown="onKeydown"
      />
      <button class="ai-send-btn" @click="send" :disabled="loading">发送</button>
    </div>
  </div>
</template>

<style scoped>
.ai-panel {
  width: 340px;
  height: 100%;
  background: #141428;
  border-left: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
}

.ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.ai-title {
  font-size: 15px;
  font-weight: 500;
  color: #ddd;
}

.ai-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ai-mode-btn {
  padding: 3px 8px;
  font-size: 11px;
  color: #8cf;
  background: rgba(100,200,255,0.08);
  border: 1px solid rgba(100,200,255,0.2);
  border-radius: 3px;
  cursor: pointer;
}
.ai-mode-btn:hover { background: rgba(100,200,255,0.15); }

.ai-new-btn, .ai-close-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  color: #888;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.ai-new-btn:hover, .ai-close-btn:hover { color: #ddd; border-color: rgba(255,255,255,0.2); }

.ai-chat {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-empty {
  color: #555;
  font-size: 13px;
  text-align: center;
  margin-top: 60px;
}

.ai-msg {
  display: flex;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
}

.ai-role {
  flex-shrink: 0;
  font-size: 13px;
}

.ai-msg.user .ai-content {
  color: #8cf;
}

.ai-msg.assistant .ai-content {
  color: #ccc;
}

.loading-dots .dots {
  animation: dotPulse 1.2s infinite;
}

@keyframes dotPulse {
  0%, 20% { opacity: 0; }
  50% { opacity: 1; }
  80%, 100% { opacity: 0; }
}

.ai-error {
  font-size: 12px;
  color: #e74c3c;
  padding: 8px 12px;
  background: rgba(231,76,60,0.1);
  border-radius: 4px;
}

.ai-input-area {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.ai-input {
  flex: 1;
  padding: 8px 12px;
  font-size: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  color: #ddd;
  outline: none;
}
.ai-input:focus { border-color: rgba(255,255,255,0.2); }

.ai-send-btn {
  padding: 8px 14px;
  font-size: 12px;
  color: #fff;
  background: rgba(100,200,255,0.15);
  border: 1px solid rgba(100,200,255,0.25);
  border-radius: 4px;
  cursor: pointer;
}
.ai-send-btn:hover { background: rgba(100,200,255,0.25); }
.ai-send-btn:disabled { opacity: 0.4; cursor: default; }

.ai-key-setup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 0;
}

.key-label {
  font-size: 14px;
  color: #ccc;
}

.key-input {
  padding: 8px 12px;
  font-size: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  color: #ddd;
  outline: none;
}
.key-input:focus { border-color: rgba(100,200,255,0.3); }

.key-hint {
  font-size: 11px;
  color: #666;
}
</style>
