<template>
  <div class="code-commander">
    <!-- AI 提供商选择器 -->
    <div class="provider-selector">
      <div class="label">选择 AI 助手</div>
      <div class="providers">
        <button
          v-for="p in providers"
          :key="p.id"
          :class="{ active: selectedProvider === p.id }"
          @click="selectedProvider = p.id"
        >
          <img :src="p.icon" :alt="p.name" />
          {{ p.name }}
        </button>
      </div>
    </div>

    <!-- 任务输入 -->
    <div class="task-input">
      <textarea
        v-model="taskPrompt"
        placeholder="描述你想让 AI 帮你做什么..."
        rows="4"
      />
      <button @click="executeTask" :disabled="isExecuting">
        {{ isExecuting ? '执行中...' : '开始执行' }}
      </button>
    </div>

    <!-- 终端输出 -->
    <TerminalDisplay
      ref="terminalRef"
      :session-id="currentSessionId"
      @input="handleUserInput"
    />

    <!-- 交互输入框 -->
    <div v-if="isWaitingForInput" class="interactive-input">
      <span>{{ inputPrompt }}</span>
      <input v-model="userInput" @keyup.enter="sendUserInput" />
    </div>

    <!-- 操作按钮 -->
    <div class="actions">
      <button @click="downloadFiles" :disabled="!canDownload">
        下载文件
      </button>
      <button @click="cleanup" :disabled="!canCleanup">
        清理
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import TerminalDisplay from '@/components/TerminalDisplay.vue'
import { terminalWsService } from '@/services/terminalWs'

const providers = [
  { id: 'claude', name: 'Claude', icon: '/icons/claude.png' },
  { id: 'gemini', name: 'Gemini', icon: '/icons/gemini.png' },
  { id: 'codex', name: 'Codex', icon: '/icons/codex.png' },
  { id: 'opencode', name: 'OpenCode', icon: '/icons/opencode.png' },
]

const selectedProvider = ref('claude')
const taskPrompt = ref('')
const isExecuting = ref(false)
const currentSessionId = ref<string | null>(null)
const isWaitingForInput = ref(false)
const inputPrompt = ref('')
const userInput = ref('')
const terminalRef = ref<InstanceType<typeof TerminalDisplay> | null>(null)

const canDownload = computed(() => currentSessionId.value !== null)
const canCleanup = computed(() => currentSessionId.value !== null)

async function executeTask() {
  if (!taskPrompt.value.trim()) return
  
  isExecuting.value = true
  currentSessionId.value = await terminalWsService.connect(selectedProvider.value)
  
  // 订阅消息
  terminalWsService.onMessage((msg) => {
    if (msg.type === 'output') {
      terminalRef.value?.write(msg.data)
    } else if (msg.type === 'waiting_input') {
      isWaitingForInput.value = true
      inputPrompt.value = msg.data
    } else if (msg.type === 'complete') {
      isExecuting.value = false
    }
  })
  
  // 发送任务
  await terminalWsService.sendTask(currentSessionId.value, taskPrompt.value)
}

function handleUserInput(data: string) {
  terminalWsService.sendInput(currentSessionId.value!, data)
}

function sendUserInput() {
  terminalWsService.sendInput(currentSessionId.value!, userInput.value)
  userInput.value = ''
  isWaitingForInput.value = false
}

async function downloadFiles() {
  // TODO: 调用下载 API
}

async function cleanup() {
  if (currentSessionId.value) {
    await terminalWsService.disconnect(currentSessionId.value)
    currentSessionId.value = null
  }
}
</script>

<style scoped>
.code-commander {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  height: 100%;
}

.provider-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.provider-selector .label {
  font-size: 14px;
  color: #888;
}

.providers {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.providers button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid #333;
  border-radius: 6px;
  background: #252526;
  color: #ccc;
  cursor: pointer;
  transition: all 0.2s;
}

.providers button:hover {
  background: #2d2d2d;
  border-color: #444;
}

.providers button.active {
  background: #094771;
  border-color: #0078d4;
  color: #fff;
}

.providers button img {
  width: 18px;
  height: 18px;
}

.task-input {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.task-input textarea {
  flex: 1;
  padding: 12px;
  border: 1px solid #333;
  border-radius: 6px;
  background: #1e1e1e;
  color: #ccc;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
}

.task-input textarea:focus {
  outline: none;
  border-color: #0078d4;
}

.task-input button {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  background: #0078d4;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.task-input button:hover:not(:disabled) {
  background: #006cbd;
}

.task-input button:disabled {
  background: #404040;
  cursor: not-allowed;
}

.interactive-input {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #252526;
  border-radius: 6px;
}

.interactive-input span {
  color: #ffc107;
}

.interactive-input input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #333;
  border-radius: 4px;
  background: #1e1e1e;
  color: #ccc;
  font-family: inherit;
}

.interactive-input input:focus {
  outline: none;
  border-color: #0078d4;
}

.actions {
  display: flex;
  gap: 12px;
}

.actions button {
  padding: 10px 20px;
  border: 1px solid #333;
  border-radius: 6px;
  background: #252526;
  color: #ccc;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.actions button:hover:not(:disabled) {
  background: #2d2d2d;
  border-color: #444;
}

.actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>
