<template>
  <div
    class="d-flex align-start ga-2 px-3 py-2 shrink-0 cmd-bar cmd-bar--tall"
    :class="{ 'cmd-bar--inactive': disabled }"
    @contextmenu="$emit('context-menu', $event)"
  >
    <span class="cmd-bar__prompt font-mono text-primary shrink-0">❯</span>
    <div class="flex-grow-1 cmd-bar__input-wrap">
      <ShellHighlightField
        ref="fieldRef"
        :model-value="modelValue"
        multiline
        :rows="2"
        size="large"
        placeholder="输入命令，Enter 发送，Shift+Enter 换行"
        :disabled="disabled"
        @update:model-value="$emit('update:modelValue', $event)"
        @keydown="$emit('keydown', $event)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ShellHighlightField from '@/components/ShellHighlightField.vue'

defineProps<{
  modelValue: string
  /** 无活动会话时禁用输入 */
  disabled: boolean
}>()

defineEmits<{
  'update:modelValue': [value: string]
  keydown: [event: KeyboardEvent]
  'context-menu': [event: MouseEvent]
}>()

const fieldRef = ref<InstanceType<typeof ShellHighlightField> | null>(null)

function getInputEl() {
  return fieldRef.value?.getInputEl() ?? null
}

function getSelectionText() {
  return fieldRef.value?.getSelectionText() ?? ''
}

function selectAllInput() {
  fieldRef.value?.selectAllInput()
}

async function insertAtSelection(text: string) {
  await fieldRef.value?.insertAtSelection(text)
}

defineExpose({
  getInputEl,
  getSelectionText,
  selectAllInput,
  insertAtSelection,
})
</script>

<style scoped>
.cmd-bar {
  background: rgb(var(--v-theme-surface));
  border-top: 1px solid rgb(var(--v-theme-surface-variant));
}
.cmd-bar--tall {
  min-height: 72px;
}
.cmd-bar--inactive {
  opacity: 0.55;
}
.cmd-bar__prompt {
  font-size: 1.125rem;
  line-height: 1.55;
  padding-top: 12px;
}
.cmd-bar__input-wrap {
  min-width: 0;
}
.font-mono {
  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', Menlo, monospace;
}

/* 命令栏统一单色；ANSI 彩色仅由上方 xterm SSH 输出区呈现 */
:deep(.sh-keyword),
:deep(.sh-builtin),
:deep(.sh-sudo),
:deep(.sh-pipe),
:deep(.sh-operator),
:deep(.sh-redirect),
:deep(.sh-string),
:deep(.sh-flag),
:deep(.sh-variable),
:deep(.sh-backtick),
:deep(.sh-comment),
:deep(.sh-number),
:deep(.sh-path),
:deep(.sh-text) {
  color: rgb(var(--v-theme-on-surface));
  font-weight: inherit;
  font-style: inherit;
}
</style>
