<template>
  <div class="space-y-6">
    <!-- Header -->
    <div>
      <h1 class="text-2xl font-bold text-[var(--wa-text)]">Documentacion de API</h1>
      <p class="text-[var(--wa-text-muted)]">Guia para integrar WhatsApp Nucleo con tus sistemas</p>
    </div>

    <!-- Authentication -->
    <div class="instance-card p-6">
      <h2 class="text-lg font-semibold text-[var(--wa-text)] mb-4">Autenticacion</h2>
      <p class="text-[var(--wa-text-muted)] mb-4">
        Todas las llamadas a la API externa requieren un API Key en el header <code class="bg-[var(--wa-bg-light)] px-2 py-1 rounded">Authorization</code>.
      </p>

      <div class="bg-[var(--wa-bg)] p-4 rounded-lg font-mono text-sm">
        <span class="text-[var(--wa-text-muted)]"># Ejemplo de autenticacion</span><br>
        <span class="text-[var(--wa-blue)]">curl</span> -X POST https://whatsapp.nucleoriofrio.com/api/messages/send \<br>
        &nbsp;&nbsp;-H <span class="text-[var(--wa-green-light)]">"Authorization: Bearer YOUR_API_KEY"</span> \<br>
        &nbsp;&nbsp;-H <span class="text-[var(--wa-green-light)]">"Content-Type: application/json"</span> \<br>
        &nbsp;&nbsp;-d '{"instanceId": "...", "to": "...", "message": "..."}'
      </div>
    </div>

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

      <div class="space-y-4">
        <!-- Send Message -->
        <div class="border border-[var(--wa-border)] rounded-lg p-4">
          <div class="flex items-center gap-2 mb-2">
            <span class="bg-green-600 text-white text-xs px-2 py-1 rounded font-semibold">POST</span>
            <code class="text-[var(--wa-text)]">/api/messages/send</code>
          </div>
          <p class="text-[var(--wa-text-muted)] text-sm mb-3">Envia un mensaje de texto a un numero de WhatsApp</p>

          <div class="bg-[var(--wa-bg)] p-3 rounded text-sm font-mono">
            <span class="text-[var(--wa-text-muted)]">// Request body</span><br>
            {<br>
            &nbsp;&nbsp;"instanceId": <span class="text-[var(--wa-green-light)]">"uuid-de-instancia"</span>,<br>
            &nbsp;&nbsp;"to": <span class="text-[var(--wa-green-light)]">"5491123456789"</span>,<br>
            &nbsp;&nbsp;"message": <span class="text-[var(--wa-green-light)]">"Hola desde la API!"</span><br>
            }
          </div>
        </div>

        <!-- List Instances -->
        <div class="border border-[var(--wa-border)] rounded-lg p-4">
          <div class="flex items-center gap-2 mb-2">
            <span class="bg-blue-600 text-white text-xs px-2 py-1 rounded font-semibold">GET</span>
            <code class="text-[var(--wa-text)]">/api/instances</code>
          </div>
          <p class="text-[var(--wa-text-muted)] text-sm">Obtiene la lista de instancias disponibles</p>
        </div>

        <!-- Get Instance Status -->
        <div class="border border-[var(--wa-border)] rounded-lg p-4">
          <div class="flex items-center gap-2 mb-2">
            <span class="bg-blue-600 text-white text-xs px-2 py-1 rounded font-semibold">GET</span>
            <code class="text-[var(--wa-text)]">/api/instances/:id/status</code>
          </div>
          <p class="text-[var(--wa-text-muted)] text-sm">Obtiene el estado de conexion de una instancia</p>
        </div>
      </div>
    </div>

    <!-- Webhook Events -->
    <div class="instance-card p-6">
      <h2 class="text-lg font-semibold text-[var(--wa-text)] mb-4">Eventos de Webhook</h2>
      <p class="text-[var(--wa-text-muted)] mb-4">
        Los webhooks envian notificaciones cuando ocurren estos eventos:
      </p>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-[var(--wa-bg-light)] p-4 rounded-lg">
          <code class="text-[var(--wa-green-light)]">message.received</code>
          <p class="text-sm text-[var(--wa-text-muted)] mt-1">Se recibio un mensaje</p>
        </div>
        <div class="bg-[var(--wa-bg-light)] p-4 rounded-lg">
          <code class="text-[var(--wa-green-light)]">message.sent</code>
          <p class="text-sm text-[var(--wa-text-muted)] mt-1">Se envio un mensaje</p>
        </div>
        <div class="bg-[var(--wa-bg-light)] p-4 rounded-lg">
          <code class="text-[var(--wa-green-light)]">instance.connected</code>
          <p class="text-sm text-[var(--wa-text-muted)] mt-1">Instancia conectada</p>
        </div>
        <div class="bg-[var(--wa-bg-light)] p-4 rounded-lg">
          <code class="text-[var(--wa-green-light)]">instance.disconnected</code>
          <p class="text-sm text-[var(--wa-text-muted)] mt-1">Instancia desconectada</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'dashboard',
  title: 'API Docs',
  icon: 'i-lucide-code'
})
</script>
