<template>
  <form @submit.prevent="handleSubmit" class="space-y-4">
    <div>
      <label class="block text-sm font-medium text-white/70 mb-1">Name</label>
      <input
        v-model="form.name"
        type="text"
        required
        placeholder="My Webhook"
        class="w-full bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-cyan-500"
      />
    </div>

    <div>
      <label class="block text-sm font-medium text-white/70 mb-1">URL</label>
      <input
        v-model="form.url"
        type="url"
        required
        placeholder="https://example.com/webhook"
        class="w-full bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-cyan-500"
      />
    </div>

    <TemplateDropdown v-model="form.template" />

    <CustomBodyEditor
      v-if="!form.template"
      v-model="form.customBody"
    />

    <HeaderKeyValue v-model="form.headers" />

    <ActionCheckboxes v-model="form.subscribedActions" />

    <div class="flex items-center gap-4">
      <label class="flex items-center gap-2 text-white/70 text-sm">
        <input
          v-model="form.verifySSL"
          type="checkbox"
          class="w-4 h-4 rounded border-white/20 bg-white/5 text-cyan-500 focus:ring-cyan-500 focus:ring-offset-0"
        />
        Verify SSL
      </label>

      <label class="flex items-center gap-2 text-white/70 text-sm">
        <input
          v-model="form.enabled"
          type="checkbox"
          class="w-4 h-4 rounded border-white/20 bg-white/5 text-cyan-500 focus:ring-cyan-500 focus:ring-offset-0"
        />
        Enabled
      </label>
    </div>

    <div class="flex gap-3 pt-2">
      <button
        type="submit"
        class="px-6 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"
      >
        {{ submitLabel }}
      </button>
      <button
        v-if="showCancel"
        type="button"
        @click="$emit('cancel')"
        class="px-6 py-2 bg-white/10 text-white rounded-lg hover:bg-white/20 transition-colors"
      >
        Cancel
      </button>
    </div>
  </form>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue'
import type { Webhook, WebhookHeader } from '../types/webhook'
import TemplateDropdown from './TemplateDropdown.vue'
import CustomBodyEditor from './CustomBodyEditor.vue'
import HeaderKeyValue from './HeaderKeyValue.vue'
import ActionCheckboxes from './ActionCheckboxes.vue'

const props = defineProps<{
  webhook?: Webhook
  submitLabel?: string
  showCancel?: boolean
}>()

const emit = defineEmits<{
  (e: 'submit', webhook: Omit<Webhook, 'id' | 'createdAt' | 'updatedAt'>): void
  (e: 'cancel'): void
}>()

const getDefaultForm = (): Omit<Webhook, 'id' | 'createdAt' | 'updatedAt'> => ({
  name: '',
  url: '',
  template: '',
  customBody: '',
  headers: [{ key: '', value: '' }],
  subscribedActions: [],
  verifySSL: true,
  enabled: true
})

const form = reactive<Omit<Webhook, 'id' | 'createdAt' | 'updatedAt'>>(getDefaultForm())

watch(() => props.webhook, (newWebhook) => {
  if (newWebhook) {
    Object.assign(form, {
      name: newWebhook.name,
      url: newWebhook.url,
      template: newWebhook.template,
      customBody: newWebhook.customBody,
      headers: [...newWebhook.headers],
      subscribedActions: [...newWebhook.subscribedActions],
      verifySSL: newWebhook.verifySSL,
      enabled: newWebhook.enabled
    })
  } else {
    Object.assign(form, getDefaultForm())
  }
}, { immediate: true })

const handleSubmit = () => {
  emit('submit', { ...form })
}
</script>
