SIB/frontend/src/components/ReportModal.vue

<template>
  <Transition name="modal-fade">
    <div v-if="isOpen" class="modal-overlay" @click.self="close">
      <div class="modal-container glass-effect">
        <div class="modal-header">
          <div class="title-with-icon">
            <span class="material-icons report-icon">report_problem</span>
            <h2>Enviar Reporte</h2>
          </div>
          <button class="close-btn" @click="close">
            <span class="material-icons">close</span>
          </button>
        </div>

        <div class="modal-body">
          <p class="instruction">Cuéntanos qué sucede o envíanos una sugerencia. El equipo administrativo revisará tu mensaje.</p>
          
          <textarea 
            v-model="message" 
            placeholder="Escribe tu mensaje aquí..."
            class="report-textarea"
            :disabled="isSending"
          ></textarea>

          <div v-if="error" class="error-message">
            {{ error }}
          </div>

          <div v-if="success" class="success-message">
            ¡Reporte enviado con éxito! Gracias por tu colaboración.
          </div>
        </div>

        <div class="modal-footer">
          <button class="cancel-btn" @click="close" :disabled="isSending">Cancelar</button>
          <button 
            class="send-btn" 
            @click="handleSend" 
            :disabled="isSending || !message.trim() || success"
          >
            <span v-if="isSending" class="spinner-small"></span>
            <span v-else>Enviar Reporte</span>
          </button>
        </div>
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { reportsService } from '@/services/reportsService'

defineProps<{
  isOpen: boolean
}>()

const emit = defineEmits(['close'])

const message = ref('')
const isSending = ref(false)
const error = ref('')
const success = ref(false)

function close() {
  if (isSending.value) return
  emit('close')
  // Reset state after transition
  setTimeout(() => {
    message.value = ''
    error.value = ''
    success.value = false
  }, 300)
}

async function handleSend() {
  if (!message.value.trim()) return
  
  isSending.value = true
  error.value = ''
  
  try {
    await reportsService.sendReport(message.value)
    success.value = true
    setTimeout(() => {
      close()
    }, 2000)
  } catch (e) {
    error.value = 'Hubo un error al enviar el reporte. Por favor, intenta de nuevo.'
  } finally {
    isSending.value = false
  }
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-container {
  width: 100%;
  max-width: 500px;
  background: var(--bg-primary);
  border-radius: 28px;
  padding: 32px;
  border: 1px solid var(--border-color);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.title-with-icon {
  display: flex;
  align-items: center;
  gap: 12px;
}

.report-icon {
  color: var(--active-color);
  font-size: 28px;
}

h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
}

.close-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.close-btn:hover {
  color: #ef4444;
  transform: rotate(90deg);
}

.instruction {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 20px;
  line-height: 1.5;
}

.report-textarea {
  width: 100%;
  height: 150px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 16px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1rem;
  resize: none;
  transition: all 0.3s;
  margin-bottom: 16px;
}

.report-textarea:focus {
  outline: none;
  border-color: var(--active-color);
  background: rgba(254, 231, 21, 0.05);
}

.error-message {
  color: #ef4444;
  font-size: 0.85rem;
  margin-bottom: 16px;
  font-weight: 600;
}

.success-message {
  color: #22c55e;
  font-size: 0.95rem;
  margin-bottom: 16px;
  font-weight: 700;
  text-align: center;
  padding: 12px;
  background: rgba(34, 197, 94, 0.1);
  border-radius: 12px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.cancel-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 12px 24px;
  border-radius: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.cancel-btn:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.send-btn {
  background: var(--active-color);
  color: #101820;
  border: none;
  padding: 12px 24px;
  border-radius: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
}

.send-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(254, 231, 21, 0.3);
}

.send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.spinner-small {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(16, 24, 32, 0.2);
  border-top-color: #101820;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Transitions */
.modal-fade-enter-active,
.modal-fade-leave-active {
  transition: opacity 0.3s ease;
}

.modal-fade-enter-from,
.modal-fade-leave-to {
  opacity: 0;
}

.modal-fade-enter-active .modal-container {
  animation: modal-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modal-in {
  from { transform: scale(0.9) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
</style>