<template>
  <div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
      <div>
        <h1 class="text-2xl font-bold text-[var(--wa-text)]">Webhooks</h1>
        <p class="text-[var(--wa-text-muted)]">Configura notificaciones para eventos de WhatsApp</p>
      </div>
      <UButton
        icon="i-lucide-plus"
        @click="showCreateModal = true"
      >
        Nuevo Webhook
      </UButton>
    </div>

    <!-- Webhooks List -->
    <div v-if="webhooks.length === 0" class="instance-card p-12 text-center">
      <UIcon name="i-lucide-webhook" class="w-16 h-16 text-[var(--wa-text-muted)] mx-auto mb-4" />
      <h3 class="text-xl font-semibold text-[var(--wa-text)] mb-2">No hay webhooks configurados</h3>
      <p class="text-[var(--wa-text-muted)] mb-6">Los webhooks te permiten recibir notificaciones en tiempo real cuando ocurren eventos en WhatsApp</p>
      <UButton
        icon="i-lucide-plus"
        @click="showCreateModal = true"
      >
        Crear Webhook
      </UButton>
    </div>

    <div v-else class="space-y-4">
      <WebhookCard
        v-for="webhook in webhooks"
        :key="webhook.id"
        :webhook="webhook"
        @edit="handleEdit"
        @delete="handleDelete"
        @test="handleTest"
        @toggle="handleToggle"
      />
    </div>

    <!-- Create Webhook Modal -->
    <WebhookFormModal
      v-model:open="showCreateModal"
      :webhook="editingWebhook"
      @saved="handleSaved"
    />
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'dashboard',
  title: 'Webhooks',
  icon: 'i-lucide-webhook'
})

const showCreateModal = ref(false)
const editingWebhook = ref<any>(null)

// TODO: Conectar con API real
const webhooks = ref<any[]>([])

const handleEdit = (webhook: any) => {
  editingWebhook.value = webhook
  showCreateModal.value = true
}

const handleDelete = async (webhookId: string) => {
  console.log('Deleting webhook', webhookId)
}

const handleTest = async (webhookId: string) => {
  console.log('Testing webhook', webhookId)
}

const handleToggle = async (webhookId: string, active: boolean) => {
  console.log('Toggle webhook', webhookId, active)
}

const handleSaved = (webhook: any) => {
  showCreateModal.value = false
  editingWebhook.value = null
  // TODO: Refresh list
}
</script>
