<template>
  <section class="input-block-shell" :class="[`is-${stage}`, { 'has-user-text': Boolean(userText) }]">
    <!-- Idle state: compact trigger bar -->
    <button
      v-if="isIdle && !hasUserText"
      type="button"
      class="input-block-trigger-bar"
      @mousedown.stop.prevent
    >
      <span class="input-badge">INPUT</span>
      <Transition name="input-fade" mode="out-in">
        <template v-if="displayInstruction.trim()">
          <span class="input-label">{{ displayInstruction }}</span>
        </template>
      </Transition>
    </button>

    <!-- Active panel -->
    <div v-else class="input-block-panel">
      <div class="input-header-row" @click.stop>
        <!-- Instructions display -->
        <span v-if="displayInstruction.trim()" class="input-instruction">{{ displayInstruction }}</span>
      </div>

      <Transition name="input-slide" appear>
        <!-- Input controls -->
        <div class="input-controls-row">
          <textarea
            ref="textAreaRef"
            :value="userText || ''"
            class="input-textarea"
            @input.stop.prevent="handleTextInput"
          ></textarea>

          <!-- ASR voice recording controls -->
          <div class="input-voice-group">
            <button 
              type="button" 
              :class="['input-voice-btn', { 'is-recording': isRecording }]"
              @mousedown.stop.prevent 
              :title="t('inputVoiceMode') || '语音模式'"
            >
              <span class="voice-icon">{{ isRecording ? '⏹️' : '🎤' }}</span>
            </button>

            <Transition name="input-fade" mode="out-in">
              <!-- Accept button -->
              <button 
                v-if="hasUserText" 
                type="button" 
                class="input-accept-btn"
                @mousedown.stop.prevent 
                :disabled="isTranscribing || isSubmittingText"
                @click.stop="handleAcceptInput"
              >
                <span class="accept-icon">✓</span>
              </button>

              <!-- Transcribing indicator -->
              <Transition name="input-fade" mode="out-in">
                <div v-if="isTranscribing && !hasUserText" class="input-transcribing">
                  <span>{{ t('transcribing') || '转录中...' }}</span>
                </div>

                <!-- Error display -->
                <Transition name="input-fade" mode="out-in">
                  <div v-if="transcriptionError && !hasUserText" class="input-error">
                    {{ t('error') || '错误' }}: {{ transcriptionError }}</div>

                  <!-- Placeholder hint -->
                  <Transition name="input-fade" mode="out-in">
                    <div v-if="!hasUserText && !isTranscribing" class="input-placeholder">
                      {{ t('inputPlaceholder') || '（请输入文本）' }}</div>

                    <!-- Status indicators -->
                    <Transition name="input-fade" mode="out-in">
                      <!-- Recording indicator -->
                      <div v-if="isRecording && !hasUserText" class="input-recording-indicator">
                        <span>{{ t('recording') || '录音中...' }}</div>

                      <!-- Transcribing indicator -->
                      <Transition name="input-fade" mode="out-in">
                        <div v-if="isTranscribing && !hasUserText" class="input-transcribing-indicator">
                          <span>{{ t('transcribing') || '转录中...' }}</div>

                      <!-- Accepted state -->
                      <Transition name="input-fade" mode="out-in">
                        <!-- When text is entered but not yet accepted, show "接受" button -->
                        <button 
                          v-if="hasUserText && !isTranscribing" 
                          type="button"
                          class="input-accept-btn"
                          @mousedown.stop.prevent 
                          :disabled="isTranscribing || isSubmittingText"
                          @click.stop="handleAcceptInput"
                        >
                          {{ t('accept') || '接受' }}
                        </button>

                      <!-- After accept, show "重录" (re-record) and "重试" buttons -->
                      <Transition name="input-fade" mode="out-in">
                        <!-- Re-record button (only when there's text) -->
                        <button 
                          v-if="hasUserText && !isTranscribing" 
                          type="button"
                          class="input-rerecord-btn"
                          @mousedown.stop.prevent 
                          :disabled="isTranscribing || isSubmittingText"
                          @click.stop="handleRerecordInput"
                        >
                          {{ t('inputRetry') || '重录' }}
                        </button>

                      <!-- After accept, show "重试" (retry) button -->
                      <Transition name="input-fade" mode="out-in">
                        <!-- Retry button (only when there's text) -->
                        <button 
                          v-if="hasUserText && !isTranscribing" 
                          type="button"
                          class="input-retry-btn"
                          @mousedown.stop.prevent 
                          :disabled="isTranscribing || isSubmittingText"
                          @click.stop="handleRetryInput"
                        >
                          {{ t('inputRedo') || '重试' }}
                        </button>

                      <!-- After accept, show version controls -->
                      <Transition name="input-fade" mode="out-in">
                        <!-- Version controls (only when there's text) -->
                        <div v-if="hasUserText && !isTranscribing" class="input-version-controls">
                          <span>{{ activeVersion + 1 }} / {{ versionCount }}</div>

                      <!-- After accept, show "接受" button -->
                      <Transition name="input-fade" mode="out-in">
                        <!-- When text is entered but not yet accepted, show "接受" button -->
                        <button 
                          v-if="hasUserText && !isTranscribing" 
                          type="button"
                          class="input-accept-btn"
                          @mousedown.stop.prevent 
                          :disabled="isTranscribing || isSubmittingText"
                          @click.stop="handleAcceptInput"
                        >
                          {{ t('accept') || '接受' }}
                        </button>

                      <!-- After accept, show "重录" (re-record) and "重试" buttons -->
                      <Transition name="input-fade" mode="out-in">
                        <!-- Re-record button (only when there's text) -->
                        <button 
                          v-if="hasUserText && !isTranscribing" 
                          type="button"
                          class="input-rerecord-btn"
                          @mousedown.stop.prevent 
                          :disabled="isTranscribing || isSubmittingText"
                          @click.stop="handleRerecordInput"
                        >
                          {{ t('inputRetry') || '重录' }}
                        </button>

                      <!-- After accept, show "重试" (retry) button -->
                      <Transition name="input-fade" mode="out-in">
                        <!-- Retry button (only when there's text) -->
                        <button 
                          v-if="hasUserText && !isTranscribing" 
                          type="button"
                          class="input-retry-btn"
                          @mousedown.stop.prevent 
                          :disabled="isTranscribing || isSubmittingText"
                          @click.stop="handleRetryInput"
                        >
                          {{ t('inputRedo') || '重试' }}
                        </button>

                      <!-- After accept, show version controls -->
                      <Transition name="input-fade" mode="out-in">
                        <!-- Version controls (only when there's text) -->
                        <div v-if="hasUserText && !isTranscribing" class="input-version-controls">
                          <span>{{ activeVersion + 1 }} / {{ versionCount }}</div>

                      <!-- Status line -->
                      <Transition name="input-fade" mode="out-in">
                        <!-- Status line (only when there's text) -->
                        <div v-if="hasUserText" class="input-status-line">
                          <!-- Status line content -->

                        </div>

                      <!-- Footer row with action buttons and status indicators -->
                      <Transition name="input-fade" mode="out-in">
                        <!-- Footer row (only when there's text) -->

                      </Transition>
                    </div>

                  <!-- Clear textarea on accept to allow new input -->
                  <Transition name="input-fade" mode="out-in">

                </div>

              <!-- Error display -->
              <Transition name="input-fade" mode="out-in">

            </div>

          <!-- Placeholder hint when no text -->
          <Transition name="input-fade" mode="out-in">

        </div>

      <!-- Status indicators row -->
      <Transition name="input-fade" mode="out-in">

    </div>
  )} else {
        // No text yet → show placeholder + voice mode button only  
      }

    <!-- Footer row -->
  </Transition>
</section>INPUT_BLOCK_CREPE_EOF
echo "Created InputBlockCrepe.vue component" && wc -l /Users/allenyuan/llm-in-text/src/components/InputBlockCrepe.vue