<template>
  <div class="space-y-6">
    <div class="flex items-center gap-4">
      <GlassButton @click="$router.back()" class="!px-3 !py-2">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
        </svg>
      </GlassButton>
      <h1 class="text-3xl font-bold text-white">Webhook Management</h1>
    </div>
    <p class="text-white/70">Server ID: {{ $route.params.id }}</p>
    
    <GlassCard class="p-6">
      <WebhookList
        :webhooks="webhooks"
        @add="showAddForm"
        @edit="showEditForm"
        @delete="deleteWebhook"
      />
    </GlassCard>

    <!-- Add/Edit Form Modal -->
    <Teleport to="body">
      <Transition name="modal">
        <div
          v-if="showForm"
          class="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4 z-50"
          @click.self="closeForm"
        >
          <div class="bg-gradient-to-br from-gray-900/90 to-gray-800/90 backdrop-blur-xl rounded-2xl p-6 border border-white/20 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
            <div class="flex justify-between items-center mb-4">
              <h2 class="text-xl font-semibold text-cyan-400">
                {{ editingWebhook ? 'Edit Webhook' : 'Add New Webhook' }}
              </h2>
              <button
                @click="closeForm"
                class="p-2 text-white/70 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
              >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
            <WebhookForm
              :webhook="editingWebhook"
              :submit-label="editingWebhook ? 'Update Webhook' : 'Create Webhook'"
              :show-cancel="true"
              @submit="saveWebhook"
              @cancel="closeForm"
            />
          </div>
        </div>
      </Transition>
    </Teleport>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import GlassCard from '../components/glass/GlassCard.vue'
import GlassButton from '../components/glass/GlassButton.vue'
import WebhookList from '../components/WebhookList.vue'
import WebhookForm from '../components/WebhookForm.vue'
import { mockWebhooks, type Webhook } from '../types/webhook'

const webhooks = ref<Webhook[]>([...mockWebhooks])
const showForm = ref(false)
const editingWebhook = ref<Webhook | undefined>(undefined)

const showAddForm = () => {
  editingWebhook.value = undefined
  showForm.value = true
}

const showEditForm = (webhook: Webhook) => {
  editingWebhook.value = webhook
  showForm.value = true
}

const closeForm = () => {
  showForm.value = false
  editingWebhook.value = undefined
}

const saveWebhook = (webhookData: Omit<Webhook, 'id' | 'createdAt' | 'updatedAt'>) => {
  if (editingWebhook.value) {
    // Update existing webhook
    const index = webhooks.value.findIndex(w => w.id === editingWebhook.value!.id)
    if (index !== -1) {
      webhooks.value[index] = {
        ...webhooks.value[index],
        ...webhookData,
        updatedAt: new Date().toISOString()
      }
    }
  } else {
    // Add new webhook
    const newWebhook: Webhook = {
      ...webhookData,
      id: Date.now().toString(),
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString()
    }
    webhooks.value.push(newWebhook)
  }
  closeForm()
}

const deleteWebhook = (id: string) => {
  if (confirm('Are you sure you want to delete this webhook?')) {
    webhooks.value = webhooks.value.filter(w => w.id !== id)
  }
}
</script>

<style scoped>
.modal-enter-active,
.modal-leave-active {
  transition: opacity 0.3s ease;
}
.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}
</style>
