<template>
  <form class="irandargah-settings-form" @submit.prevent="handleSubmit">
    <div v-for="(section, sectionKey) in gateway.settings_sections" :key="sectionKey" class="irandargah-settings-section">
      <h3 class="irandargah-section-title">{{ section.title }}</h3>
      <div v-for="(field, fieldKey) in section.fields" :key="fieldKey" class="irandargah-form-group">
        <label class="irandargah-label">
          {{ field.title }}
          <span v-if="field.description" class="irandargah-help-tip" :title="field.description">?</span>
        </label>
        <input
          v-if="field.type === 'text'"
          type="text"
          class="irandargah-input"
          :value="settings[fieldKey] || field.value || ''"
          @input="handleChange(fieldKey, $event.target.value)"
        />
        <textarea
          v-else-if="field.type === 'textarea'"
          class="irandargah-textarea"
          :value="settings[fieldKey] || field.value || ''"
          @input="handleChange(fieldKey, $event.target.value)"
          rows="4"
        />
        <label v-else-if="field.type === 'checkbox'" class="irandargah-checkbox">
          <input
            type="checkbox"
            :checked="settings[fieldKey] === 'yes' || field.value === 'yes'"
            @change="handleChange(fieldKey, $event.target.checked ? 'yes' : 'no')"
          />
          <span class="irandargah-checkbox-label">{{ field.label }}</span>
        </label>
      </div>
    </div>
    <div class="irandargah-form-actions">
      <button type="submit" class="irandargah-btn irandargah-btn-success" :disabled="saving">
        {{ saving ? 'در حال ذخیره...' : 'ذخیره تنظیمات' }}
      </button>
      <button type="button" class="irandargah-btn irandargah-btn-secondary" @click="$emit('close')">
        انصراف
      </button>
    </div>
  </form>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';

export default {
  name: 'SettingsForm',
  props: {
    gateway: {
      type: Object,
      required: true
    }
  },
  emits: ['close'],
  setup(props) {
    const settings = ref({ ...props.gateway.settings });
    const saving = ref(false);

    const handleChange = (key, value) => {
      settings.value[key] = value;
    };

    const handleSubmit = async () => {
      saving.value = true;
      try {
        const response = await axios.post(
          `${window.irandargahData.restUrl}save-settings`,
          {
            gateway_id: props.gateway.id,
            settings: settings.value
          },
          {
            headers: {
              'X-WP-Nonce': window.irandargahData.restNonce
            }
          }
        );
        if (response.data.success) {
          alert('تنظیمات با موفقیت ذخیره شد.');
          window.location.reload();
        }
      } catch (error) {
        console.error('Error saving settings:', error);
        alert('خطا در ذخیره‌سازی تنظیمات');
      } finally {
        saving.value = false;
      }
    };

    return {
      settings,
      saving,
      handleChange,
      handleSubmit
    };
  }
};
</script>

