frontend/src/components/ModalWhatsappConexao.vue

<template>
  <Teleport to="body">
    <div class="fixed inset-0 z-[9999] flex items-center justify-center p-4" @click="$emit('close')">
      <div class="absolute inset-0 bg-black/40 dark:bg-black/60" />
      <div
        class="relative w-full max-w-sm overflow-hidden rounded-2xl border border-gray-200 bg-background text-foreground shadow-xl dark:border-gray-700"
        @click.stop
      >
        <div class="flex items-center justify-between gap-3 border-b border-gray-200 px-5 py-4 dark:border-gray-700">
          <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Conectar WhatsApp</h3>
          <button
            type="button"
            class="rounded-lg border border-transparent p-1.5 text-gray-500 transition-colors hover:border-gray-200 hover:bg-gray-100 dark:text-gray-400 dark:hover:border-gray-700 dark:hover:bg-white/5"
            @click="$emit('close')"
          >
            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        <div class="flex flex-col items-center gap-4 p-6">
          <template v-if="status === 'qr_pendente' && qrDataUrl">
            <img :src="qrDataUrl" alt="QR code de conexão do WhatsApp" class="h-56 w-56 rounded-lg border border-gray-200 dark:border-gray-700" />
            <p class="text-center text-sm text-gray-600 dark:text-gray-300">
              Abra o WhatsApp no celular que vai atender → Configurações → Aparelhos conectados → Conectar aparelho e escaneie o código acima.
            </p>
          </template>

          <template v-else-if="status === 'conectando'">
            <p class="text-sm text-gray-500 dark:text-gray-400">Gerando código de conexão...</p>
          </template>

          <template v-else-if="status === 'conectado'">
            <p class="text-sm font-medium text-emerald-600 dark:text-emerald-400">Conectado com sucesso!</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Número: {{ telefone }}</p>
          </template>

          <template v-else>
            <p class="text-sm text-gray-500 dark:text-gray-400">Sem conexão ativa.</p>
          </template>

          <p v-if="erro" class="w-full rounded-lg bg-red-50 px-4 py-3 text-xs text-red-800 dark:bg-red-900/30 dark:text-red-300">
            {{ erro }}
          </p>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script setup>
defineProps({
  status: { type: String, default: "desconectado" },
  qrDataUrl: { type: String, default: null },
  telefone: { type: String, default: null },
  erro: { type: String, default: "" }
});

defineEmits(["close"]);
</script>