<template>
  <Modal :is-open="isOpen" @close="close" title="Send feedback" :initialWidth="700" :initialHeight="520">
    <form class="h-full flex flex-col" @submit.prevent="submit" novalidate>
      <div class="flex-1 overflow-auto p-4 space-y-4 dark:bg-gray-800">
        <p class="text-sm text-gray-600 dark:text-gray-300">We’d love to hear your thoughts. Only the fields below are required and will be sent securely.</p>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="fb-name">Name</label>
            <input id="fb-name" v-model="name" type="text" class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none" placeholder="Jane Doe" />
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="fb-contact">Contact</label>
            <input id="fb-contact" v-model="contact" type="text" class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none" placeholder="email, matrix, discord, etc." />
          </div>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="fb-content">Content</label>
          <textarea
            id="fb-content"
            v-model="content"
            rows="6"
            class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
            placeholder="Describe your feedback here..."
            required
          ></textarea>
        </div>

        <p v-if="error" class="text-sm text-red-600 dark:text-red-400">{{ error }}</p>
        <p v-if="success" class="text-sm text-green-600 dark:text-green-400">{{ success }}</p>
      </div>

      <div class="border-t border-gray-200 dark:border-gray-700 p-3 flex justify-end gap-2">
        <button type="button" class="px-4 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-100" @click="close" :disabled="loading">Close</button>
        <button type="submit" class="px-4 py-2 rounded-lg bg-blue-500 hover:bg-blue-600 text-white disabled:opacity-60 disabled:cursor-not-allowed" :disabled="loading">
          <span v-if="!loading">Send feedback</span>
          <span v-else>Sending…</span>
        </button>
      </div>
    </form>
  </Modal>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import Modal from './utilities/Modal.vue';

  const props = defineProps<{ isOpen: boolean }>();
  const emit = defineEmits<{ (e: 'close'): void }>();

  const name = ref('');
  const contact = ref('');
  const content = ref('');
  const loading = ref(false);
  const error = ref('');
  const success = ref('');

  const close = () => emit('close');

  const submit = async () => {
    error.value = '';
    success.value = '';
    if (!content.value.trim()) {
      error.value = 'Please enter some feedback (content).';
      return;
    }

    loading.value = true;
    try {
      const res = await fetch('https://pb1.adhd.sh/api/collections/feedback/records', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          name: name.value || null,
          contact: contact.value || null,
          content: content.value,
        }),
      });

      if (!res.ok) {
        const text = await res.text().catch(() => '');
        throw new Error(text || `Request failed with status ${res.status}`);
      }

      success.value = 'Thank you! Your feedback was sent.';
      // Reset fields
      name.value = '';
      contact.value = '';
      content.value = '';

      // Optionally close after short delay
      setTimeout(() => close(), 600);
    } catch (e: any) {
      console.error('Failed to send feedback:', e);
      error.value = 'Failed to send feedback. Please try again later.';
    } finally {
      loading.value = false;
    }
  };
</script>
