<template>
  <div class="space-y-4">
    <div class="flex justify-between items-center">
      <h3 class="text-lg font-semibold text-white">Configured Webhooks</h3>
      <button
        @click="$emit('add')"
        class="px-4 py-2 bg-gradient-to-r from-cyan-500 to-blue-500 text-white rounded-lg hover:shadow-cyan-500/50 hover:scale-105 transition-all duration-300 flex items-center gap-2"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
        Add Webhook
      </button>
    </div>

    <div v-if="webhooks.length === 0" class="text-center py-8 text-white/50">
      No webhooks configured yet. Click "Add Webhook" to create one.
    </div>

    <div v-else class="space-y-3">
      <div
        v-for="webhook in webhooks"
        :key="webhook.id"
        class="bg-white/5 backdrop-blur-md border border-white/10 rounded-xl p-4 hover:border-cyan-400/50 transition-all duration-300"
      >
        <div class="flex justify-between items-start">
          <div class="space-y-1">
            <div class="flex items-center gap-2">
              <h4 class="font-medium text-white">{{ webhook.name }}</h4>
              <span
                v-if="webhook.enabled"
                class="px-2 py-0.5 text-xs bg-green-500/20 text-green-400 rounded-full"
              >
                Enabled
              </span>
              <span
                v-else
                class="px-2 py-0.5 text-xs bg-red-500/20 text-red-400 rounded-full"
              >
                Disabled
              </span>
              <span
                v-if="webhook.template"
                class="px-2 py-0.5 text-xs bg-blue-500/20 text-blue-400 rounded-full"
              >
                {{ webhook.template }}
              </span>
            </div>
            <p class="text-sm text-white/70">{{ webhook.url }}</p>
            <p class="text-xs text-white/50">
              Subscribed to: {{ webhook.subscribedActions.join(', ') || 'None' }}
            </p>
          </div>
          <div class="flex gap-2">
            <button
              @click="$emit('edit', webhook)"
              class="p-2 text-cyan-400 hover:text-cyan-300 hover:bg-cyan-500/10 rounded-lg transition-colors"
              title="Edit webhook"
            >
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
              </svg>
            </button>
            <button
              @click="$emit('delete', webhook.id)"
              class="p-2 text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded-lg transition-colors"
              title="Delete webhook"
            >
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Webhook } from '../types/webhook'

defineProps<{
  webhooks: Webhook[]
}>()

defineEmits<{
  (e: 'add'): void
  (e: 'edit', webhook: Webhook): void
  (e: 'delete', id: string): void
}>()
</script>
