<template>
  <div class="chat-input-bar">
    <div class="voice-btn-wrap">
      <button class="voice-btn" title="语音输入" @click="showVoiceHint">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <rect x="9" y="1" width="6" height="12" rx="3" />
          <path d="M5 11a7 7 0 0 0 14 0" />
          <line x1="12" y1="19" x2="12" y2="23" />
          <line x1="8" y1="23" x2="16" y2="23" />
        </svg>
      </button>
      <span class="voice-tooltip">演示模式，请直接输入文字</span>
    </div>
    <input
      ref="inputEl"
      v-model="store.inputText"
      type="text"
      class="chat-input"
      placeholder="请直接说出您的就诊需求，例如：我头疼三天，想挂号"
      :disabled="disabled"
      @keydown="onKeydown"
    />
    <button class="send-btn" title="发送" :disabled="!store.inputText.trim() || disabled" @click="submit">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <line x1="22" y1="2" x2="11" y2="13" />
        <polygon points="22,2 15,22 11,13 2,9" />
      </svg>
    </button>
  </div>
</template>

<script setup lang="ts">
import { useTerminalStore } from '../state/terminalStore';

function randomUUID(): string {
  try { return crypto.randomUUID(); } catch { /* HTTP */ }
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
    const r = (Math.random() * 16) | 0;
    return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
  });
}

defineProps<{ disabled?: boolean }>();
const emit = defineEmits<{ submit: [text: string] }>();
const store = useTerminalStore();

function submit() {
  if (store.sending) return;
  const text = store.inputText.trim();
  if (!text) return;
  store.inputText = '';
  emit('submit', text);
}

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

function showVoiceHint() {
  store.addMessage({
    id: randomUUID(),
    role: 'system',
    content: '语音能力将在后续版本接入，当前请使用文字输入。',
  });
}
</script>

<style scoped>
.chat-input-bar {
  padding: 16px 24px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--gap-sm);
  align-items: center;
  flex-shrink: 0;
}

.chat-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-body);
  background: var(--bg);
  color: var(--fg);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.chat-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.chat-input::placeholder {
  color: var(--muted);
}

.chat-input:disabled {
  opacity: 0.6;
}

.voice-btn-wrap {
  position: relative;
}

.voice-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--surface);
  display: grid;
  place-items: center;
  font-size: 20px;
  transition: background 0.15s ease, transform 0.1s ease;
  flex-shrink: 0;
}

.voice-btn:hover {
  background: color-mix(in oklch, var(--accent) 85%, black);
  transform: scale(1.05);
}

.voice-btn:active {
  transform: scale(0.97);
}

.voice-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--fg);
  color: var(--surface);
  font-size: var(--fs-xs);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.voice-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--fg);
}

.voice-btn-wrap:hover .voice-tooltip {
  opacity: 1;
}

.send-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--surface);
  display: grid;
  place-items: center;
  font-size: 18px;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.send-btn:hover:not(:disabled) {
  background: color-mix(in oklch, var(--accent) 85%, black);
}

.send-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
</style>
