<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'

const props = withDefaults(defineProps<{
  typeSpeed?: number
}>(), {
  typeSpeed: 30
})

const emit = defineEmits<{
  done: [text: string]
}>()

const PLACEHOLDER_TEXT = 'Necesito que revises el componente de autenticación en el módulo de usuarios. ' +
  'Hay un problema con la validación de tokens JWT cuando el usuario tiene sesiones múltiples activas. ' +
  'El token se invalida correctamente en el servidor pero el cliente sigue usando el token anterior ' +
  'hasta que expira naturalmente. Quiero que implementes una verificación en tiempo real usando WebSocket ' +
  'para notificar al cliente cuando su token ha sido revocado desde otra sesión.'

const displayedText = ref('')
let intervalId: number | null = null
let charIndex = 0

onMounted(() => {
  intervalId = window.setInterval(() => {
    if (charIndex < PLACEHOLDER_TEXT.length) {
      displayedText.value += PLACEHOLDER_TEXT[charIndex]
      charIndex++
    } else {
      if (intervalId) clearInterval(intervalId)
      intervalId = null
      emit('done', displayedText.value)
    }
  }, props.typeSpeed)
})

onBeforeUnmount(() => {
  if (intervalId) clearInterval(intervalId)
})
</script>

<template>
  <div class="transcript-card">
    <div class="transcript-header">
      <span class="rec-dot"></span>
      <span class="rec-label">Transcribiendo...</span>
    </div>
    <div class="transcript-body">
      <span class="transcript-text">{{ displayedText }}</span>
      <span class="blink-cursor">|</span>
    </div>
  </div>
</template>

<style scoped>
.transcript-card {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 10px;
  padding: 12px;
  margin-top: 8px;
}

.transcript-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
  animation: rec-pulse 1s ease-in-out infinite;
}

.rec-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(239, 68, 68, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.transcript-body {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.transcript-text {
  white-space: pre-wrap;
}

.blink-cursor {
  color: rgba(255, 255, 255, 0.7);
  animation: cursor-blink 0.8s step-end infinite;
  font-weight: 300;
}

@keyframes rec-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px #ef4444; }
  50% { opacity: 0.4; box-shadow: 0 0 16px #ef4444; }
}

@keyframes cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
</style>
