<template>
  <div class="space-y-6 p-4">
    <!-- Fetch Privacy Settings -->
    <div class="space-y-4">
      <h3 class="text-lg font-medium text-[var(--wa-text)]">Obtener Configuracion de Privacidad</h3>
      <UButton
        :loading="loadingFetch"
        :disabled="!instanceId"
        @click="fetchPrivacy"
      >
        Obtener Configuracion
      </UButton>
    </div>

    <hr class="border-[var(--wa-border)]" />

    <!-- Update Privacy Setting -->
    <div class="space-y-4">
      <h3 class="text-lg font-medium text-[var(--wa-text)]">Actualizar Configuracion</h3>
      <div class="grid grid-cols-2 gap-4">
        <USelectMenu
          v-model="setting"
          :items="settingOptions"
          placeholder="Configuracion"
        />
        <USelectMenu
          v-model="value"
          :items="valueOptions"
          placeholder="Valor"
        />
      </div>
      <UButton
        :loading="loadingUpdate"
        :disabled="!instanceId || !setting || !value"
        @click="updatePrivacy"
      >
        Actualizar
      </UButton>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  instanceId: string | null
}>()

const emit = defineEmits<{
  (e: 'response', data: any): void
}>()

const setting = ref<{ label: string; value: string } | null>(null)
const value = ref<{ label: string; value: string } | null>(null)
const loadingFetch = ref(false)
const loadingUpdate = ref(false)

const settingOptions = [
  { label: 'Last Seen', value: 'lastSeen' },
  { label: 'Online', value: 'online' },
  { label: 'Profile Picture', value: 'profilePicture' },
  { label: 'Status', value: 'status' },
  { label: 'Groups Add', value: 'groupsAdd' },
  { label: 'Read Receipts', value: 'readReceipts' },
]

const valueOptions = computed(() => {
  if (setting.value?.value === 'online') {
    return [
      { label: 'all', value: 'all' },
      { label: 'match_last_seen', value: 'match_last_seen' },
    ]
  }
  if (setting.value?.value === 'readReceipts') {
    return [
      { label: 'all', value: 'all' },
      { label: 'none', value: 'none' },
    ]
  }
  return [
    { label: 'all', value: 'all' },
    { label: 'contacts', value: 'contacts' },
    { label: 'contact_blacklist', value: 'contact_blacklist' },
    { label: 'none', value: 'none' },
  ]
})

// Reset value when setting changes
watch(setting, () => {
  value.value = null
})

const fetchPrivacy = async () => {
  loadingFetch.value = true
  try {
    const result = await $fetch(`/api/debug/privacy?instanceId=${props.instanceId}`)
    emit('response', result)
  } catch (error: any) {
    emit('response', { success: false, error: error.data?.message || error.message })
  } finally {
    loadingFetch.value = false
  }
}

const updatePrivacy = async () => {
  if (!setting.value || !value.value) return

  loadingUpdate.value = true
  try {
    const result = await $fetch('/api/debug/privacy/update', {
      method: 'POST',
      body: {
        instanceId: props.instanceId,
        setting: setting.value.value,
        value: value.value.value
      }
    })
    emit('response', result)
  } catch (error: any) {
    emit('response', { success: false, error: error.data?.message || error.message })
  } finally {
    loadingUpdate.value = false
  }
}
</script>
