<template>
  <div class="space-y-6">
    <!-- Header -->
    <div>
      <h1 class="text-2xl font-bold text-[var(--wa-text)]">Configuracion</h1>
      <p class="text-[var(--wa-text-muted)]">Ajustes del sistema WhatsApp Nucleo</p>
    </div>

    <!-- API Keys -->
    <div class="instance-card p-6">
      <h2 class="text-lg font-semibold text-[var(--wa-text)] mb-4">API Keys</h2>
      <p class="text-[var(--wa-text-muted)] mb-4">
        Gestiona las claves de acceso para la API externa
      </p>

      <div v-if="apiKeys.length === 0" class="text-center py-8">
        <p class="text-[var(--wa-text-muted)]">No hay API Keys configuradas</p>
      </div>

      <div v-else class="space-y-3 mb-4">
        <div
          v-for="key in apiKeys"
          :key="key.id"
          class="flex items-center justify-between p-3 rounded-lg bg-[var(--wa-bg-light)]"
        >
          <div>
            <p class="font-medium text-[var(--wa-text)]">{{ key.name }}</p>
            <p class="text-sm text-[var(--wa-text-muted)]">{{ key.keyPrefix }}... | Creada: {{ key.createdAt }}</p>
          </div>
          <UButton
            variant="ghost"
            color="red"
            icon="i-lucide-trash-2"
            @click="deleteApiKey(key.id)"
          />
        </div>
      </div>

      <UButton
        icon="i-lucide-plus"
        variant="soft"
        @click="showCreateKeyModal = true"
      >
        Crear API Key
      </UButton>
    </div>

    <!-- General Settings -->
    <div class="instance-card p-6">
      <h2 class="text-lg font-semibold text-[var(--wa-text)] mb-4">Configuracion General</h2>

      <div class="space-y-4">
        <div class="flex items-center justify-between">
          <div>
            <p class="font-medium text-[var(--wa-text)]">Limite de instancias</p>
            <p class="text-sm text-[var(--wa-text-muted)]">Maximo numero de instancias permitidas</p>
          </div>
          <UInput
            v-model.number="settings.maxInstances"
            type="number"
            class="w-24"
          />
        </div>

        <div class="flex items-center justify-between">
          <div>
            <p class="font-medium text-[var(--wa-text)]">Timeout de Webhooks</p>
            <p class="text-sm text-[var(--wa-text-muted)]">Tiempo maximo de espera para webhooks (ms)</p>
          </div>
          <UInput
            v-model.number="settings.webhookTimeout"
            type="number"
            class="w-24"
          />
        </div>

        <div class="flex items-center justify-between">
          <div>
            <p class="font-medium text-[var(--wa-text)]">Reintentos de Webhook</p>
            <p class="text-sm text-[var(--wa-text-muted)]">Intentos de reenvio si falla</p>
          </div>
          <UInput
            v-model.number="settings.webhookRetries"
            type="number"
            class="w-24"
          />
        </div>
      </div>
    </div>

    <!-- System Info -->
    <div class="instance-card p-6">
      <h2 class="text-lg font-semibold text-[var(--wa-text)] mb-4">Informacion del Sistema</h2>

      <div class="grid grid-cols-2 gap-4 text-sm">
        <div>
          <p class="text-[var(--wa-text-muted)]">Version</p>
          <p class="text-[var(--wa-text)]">1.0.0</p>
        </div>
        <div>
          <p class="text-[var(--wa-text-muted)]">Baileys</p>
          <p class="text-[var(--wa-text)]">v7.0.0-rc.9</p>
        </div>
        <div>
          <p class="text-[var(--wa-text-muted)]">Node.js</p>
          <p class="text-[var(--wa-text)]">v22.x</p>
        </div>
        <div>
          <p class="text-[var(--wa-text-muted)]">PostgreSQL</p>
          <p class="text-[var(--wa-text)]">v16</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'dashboard',
  title: 'Configuracion',
  icon: 'i-lucide-settings'
})

const showCreateKeyModal = ref(false)

// TODO: Conectar con API real
const apiKeys = ref<any[]>([])

const settings = ref({
  maxInstances: 10,
  webhookTimeout: 5000,
  webhookRetries: 3
})

const deleteApiKey = async (keyId: string) => {
  console.log('Deleting API key', keyId)
}
</script>
