<template>
  <div class="terminal-emulator" ref="terminalContainer">
    <div class="terminal-emulator__output" ref="outputContainer">
      <div v-for="(line, index) in terminalStore.output" :key="index" class="terminal-line">
        <span v-html="ansiToHtml(line)"></span>
      </div>
      <div v-if="terminalStore.output.length === 0" class="terminal-emulator__welcome">
        Fischer AgentKit 智能终端 - 输入命令开始
      </div>
    </div>
    <div class="terminal-emulator__input">
      <span class="terminal-emulator__prompt">{{ terminalStore.cwd }}$</span>
      <input
        ref="inputRef"
        v-model="commandInput"
        class="terminal-emulator__input-field"
        placeholder="输入命令..."
        :disabled="terminalStore.isExecuting"
        @keydown.enter="executeCommand"
        @keydown.up.prevent="historyUp"
        @keydown.down.prevent="historyDown"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, nextTick, onMounted } from 'vue'
import { useTerminalStore } from '@/stores/terminal'

const terminalStore = useTerminalStore()
const commandInput = ref('')
const inputRef = ref<HTMLInputElement | null>(null)
const outputContainer = ref<HTMLElement | null>(null)
const historyIndex = ref(-1)

onMounted(() => {
  terminalStore.connectWebSocket()
})

// Auto-scroll to bottom
watch(
  () => terminalStore.output.length,
  async () => {
    await nextTick()
    if (outputContainer.value) {
      outputContainer.value.scrollTop = outputContainer.value.scrollHeight
    }
  }
)

function executeCommand(): void {
  const cmd = commandInput.value.trim()
  if (!cmd) return
  terminalStore.sendCommand(cmd)
  commandInput.value = ''
  historyIndex.value = -1
}

function historyUp(): void {
  const history = terminalStore.history
  if (history.length === 0) return
  if (historyIndex.value < history.length - 1) {
    historyIndex.value++
    commandInput.value = history[history.length - 1 - historyIndex.value].command
  }
}

function historyDown(): void {
  if (historyIndex.value > 0) {
    historyIndex.value--
    commandInput.value = terminalStore.history[terminalStore.history.length - 1 - historyIndex.value].command
  } else {
    historyIndex.value = -1
    commandInput.value = ''
  }
}

function ansiToHtml(text: string): string {
  // Basic ANSI color code conversion
  return text
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/\x1b\[32m/g, '<span style="color:#4caf50">')
    .replace(/\x1b\[33m/g, '<span style="color:#ff9800">')
    .replace(/\x1b\[31m/g, '<span style="color:#f44336">')
    .replace(/\x1b\[36m/g, '<span style="color:#00bcd4">')
    .replace(/\x1b\[0m/g, '</span>')
}
</script>

<style scoped>
.terminal-emulator {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #1e1e1e;
  border-radius: 6px;
  overflow: hidden;
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
}

.terminal-emulator__output {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #d4d4d4;
}

.terminal-emulator__welcome {
  color: #888;
  font-style: italic;
}

.terminal-emulator__input {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-top: 1px solid #333;
  background: #252526;
}

.terminal-emulator__prompt {
  color: #4caf50;
  margin-right: 8px;
  font-size: 13px;
  white-space: nowrap;
}

.terminal-emulator__input-field {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #d4d4d4;
  font-family: inherit;
  font-size: 13px;
}

.terminal-emulator__input-field::placeholder {
  color: #555;
}

.terminal-line {
  white-space: pre-wrap;
  word-break: break-all;
}
</style>
