<script setup lang="ts">
useSeoMeta({
  title: 'API Services - Intégration Programmable | Wibx Tour',
  description: 'Automatisez vos connexions réseau avec nos APIs REST complètes. Documentation, SDK et exemples de code inclus.'
})

const apiEndpoints = [
  {
    title: 'Locations API',
    description: 'Récupérez la liste des data centers et points de présence disponibles',
    endpoint: 'GET /api/v1/locations',
    icon: 'i-lucide-map-pin',
    category: 'Infrastructure'
  },
  {
    title: 'Cloud Providers API',
    description: 'Accédez aux informations des fournisseurs cloud et leurs régions',
    endpoint: 'GET /api/v1/cloud-providers',
    icon: 'i-lucide-cloud',
    category: 'Cloud'
  },
  {
    title: 'Layer 2 Links API',
    description: 'Créez, modifiez et gérez vos connexions Layer 2',
    endpoint: 'POST /api/v1/l2-links',
    icon: 'i-lucide-link',
    category: 'Connectivity'
  },
  {
    title: 'Access Ports API',
    description: 'Demandez et gérez vos ports d\'accès dans les data centers',
    endpoint: 'POST /api/v1/access-ports',
    icon: 'i-lucide-plug',
    category: 'Infrastructure'
  },
  {
    title: 'Quotes API',
    description: 'Obtenez des devis instantanés pour vos connexions',
    endpoint: 'POST /api/v1/quotes',
    icon: 'i-lucide-calculator',
    category: 'Billing'
  },
  {
    title: 'Monitoring API',
    description: 'Surveillez vos connexions et récupérez les métriques',
    endpoint: 'GET /api/v1/monitoring',
    icon: 'i-lucide-activity',
    category: 'Monitoring'
  }
]

const rateInformation = [
  {
    title: 'Limites de Taux',
    content: 'Les APIs Wibx Tour sont limitées à 1000 requêtes par heure par clé API pour les comptes gratuits, et 10000 requêtes par heure pour les comptes premium. Les en-têtes de réponse incluent les informations de limite et de consommation.'
  },
  {
    title: 'Unités de Facturation',
    content: 'Les appels API sont facturés par tranche de 1000 requêtes. Les premiers 10000 appels par mois sont gratuits. Au-delà, le tarif est de €0.01 par tranche de 1000 requêtes pour les endpoints de consultation et €0.05 pour les endpoints de provisionnement.'
  },
  {
    title: 'Authentification',
    content: 'Toutes les requêtes API doivent inclure une clé API valide dans l\'en-tête Authorization: Bearer YOUR_API_KEY. Les clés API peuvent être générées depuis votre tableau de bord utilisateur.'
  },
  {
    title: 'Versioning',
    content: 'L\'API utilise un versioning basé sur l\'URL (/api/v1/). Les versions majeures sont maintenues pendant au moins 12 mois après la sortie d\'une nouvelle version. Les changements non-breaking sont déployés sans notification.'
  }
]

const exampleCode = `// Exemple d'utilisation de l'API Wibx Tour
const wibxApi = new WibxTourAPI({
  apiKey: 'your_api_key_here',
  baseURL: 'https://api.wibx-tour.com/v1'
});

// Récupérer les locations disponibles
const locations = await wibxApi.locations.list();
console.log('Locations disponibles:', locations);

// Créer une connexion Layer 2
const l2Link = await wibxApi.l2Links.create({
  name: 'Ma première connexion',
  sourceLocation: 'paris-dc1',
  destinationLocation: 'london-dc2',
  bandwidth: '1000', // 1 Gbps
  vlan: 100
});

console.log('Connexion créée:', l2Link);

// Surveiller la connexion
const metrics = await wibxApi.monitoring.getMetrics(l2Link.id, {
  period: '1h',
  metrics: ['bandwidth', 'latency', 'packet_loss']
});

console.log('Métriques:', metrics);`
</script>

<template>
  <UDashboardPanel id="api-services">
    <template #header>
      <UDashboardNavbar title="API Services">
        <template #leading>
          <UDashboardSidebarCollapse />
        </template>

        <template #right>
          <UButton size="sm" class="mr-2">
            Obtenir une Clé API
          </UButton>
          <UButton to="#documentation" variant="outline" size="sm">
            Voir la Documentation
          </UButton>
        </template>
      </UDashboardNavbar>

      <UDashboardToolbar>
        <template #left>
          <UBadge variant="subtle" size="lg">
            APIs REST Complètes - Pour Développeurs
          </UBadge>
        </template>
      </UDashboardToolbar>
    </template>

    <template #body>
      <div class="space-y-12">
        <!-- Hero Description -->
        <div>
          <p class="text-lg text-gray-600 dark:text-gray-400">
            Automatisez la gestion de vos connexions réseau avec nos APIs REST puissantes et faciles à utiliser.
            SDK, documentation complète et exemples de code inclus.
          </p>
        </div>

        <!-- API Endpoints Grid -->
        <div>
          <h2 class="text-2xl font-bold mb-2">Endpoints Principaux</h2>
          <p class="text-gray-600 dark:text-gray-400 mb-8">
            Explorez nos APIs pour intégrer Wibx Tour dans vos applications
          </p>

          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <UCard
              v-for="api in apiEndpoints"
              :key="api.title"
              class="hover:shadow-lg transition-shadow duration-300"
            >
              <template #header>
                <div class="flex items-center gap-4">
                  <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
                    <UIcon :name="api.icon" size="24" class="text-primary" />
                  </div>
                  <div>
                    <UBadge variant="soft" size="sm" class="mb-1">
                      {{ api.category }}
                    </UBadge>
                    <h3 class="font-semibold">{{ api.title }}</h3>
                  </div>
                </div>
              </template>

              <p class="text-gray-600 dark:text-gray-300 mb-4">
                {{ api.description }}
              </p>

              <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 text-sm font-mono">
                {{ api.endpoint }}
              </div>

              <template #footer>
                <UButton variant="outline" block class="mt-4">
                  Voir la Doc
                </UButton>
              </template>
            </UCard>
          </div>
        </div>

        <!-- Code Example -->
        <div id="documentation" class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-8">
          <h2 class="text-2xl font-bold mb-2">Exemple d'Utilisation</h2>
          <p class="text-gray-600 dark:text-gray-400 mb-8">
            Commencez rapidement avec notre SDK JavaScript
          </p>

          <div class="bg-gray-900 rounded-lg p-6 overflow-x-auto">
            <pre class="text-green-400 text-sm"><code>{{ exampleCode }}</code></pre>
          </div>

          <div class="flex justify-center mt-8">
            <div class="flex gap-4">
              <UButton variant="outline">
                <UIcon name="i-simple-icons-npm" class="mr-2" />
                npm install wibx-tour-sdk
              </UButton>
              <UButton variant="outline">
                <UIcon name="i-simple-icons-github" class="mr-2" />
                Voir sur GitHub
              </UButton>
            </div>
          </div>
        </div>

        <!-- Rate Limits and Billing -->
        <div>
          <h2 class="text-2xl font-bold mb-2">Tarification et Limites</h2>
          <p class="text-gray-600 dark:text-gray-400 mb-8">
            Informations sur les limites d'utilisation et la facturation des APIs
          </p>
          <UAccordion :items="rateInformation" />
        </div>

        <!-- SDK and Tools -->
        <div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-8">
          <h2 class="text-2xl font-bold mb-2">SDKs et Outils</h2>
          <p class="text-gray-600 dark:text-gray-400 mb-8">
            Bibliothèques officielles pour accélérer votre développement
          </p>

          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <UCard class="text-center">
              <template #header>
                <div class="flex justify-center">
                  <UIcon name="i-simple-icons-javascript" size="48" class="text-yellow-500" />
                </div>
              </template>
              <h3 class="font-semibold mb-2">JavaScript/Node.js</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
                SDK officiel pour Node.js et navigateurs
              </p>
              <UButton variant="outline" size="sm" block>
                Installer
              </UButton>
            </UCard>

            <UCard class="text-center">
              <template #header>
                <div class="flex justify-center">
                  <UIcon name="i-simple-icons-python" size="48" class="text-blue-500" />
                </div>
              </template>
              <h3 class="font-semibold mb-2">Python</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
                Bibliothèque Python pour intégration facile
              </p>
              <UButton variant="outline" size="sm" block>
                Installer
              </UButton>
            </UCard>

            <UCard class="text-center">
              <template #header>
                <div class="flex justify-center">
                  <UIcon name="i-simple-icons-go" size="48" class="text-cyan-500" />
                </div>
              </template>
              <h3 class="font-semibold mb-2">Go</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
                Module Go pour applications haute performance
              </p>
              <UButton variant="outline" size="sm" block>
                Installer
              </UButton>
            </UCard>

            <UCard class="text-center">
              <template #header>
                <div class="flex justify-center">
                  <UIcon name="i-lucide-terminal" size="48" class="text-gray-500" />
                </div>
              </template>
              <h3 class="font-semibold mb-2">CLI Tool</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
                Outil en ligne de commande pour administration
              </p>
              <UButton variant="outline" size="sm" block>
                Télécharger
              </UButton>
            </UCard>
          </div>
        </div>

        <!-- Support -->
        <div>
          <h2 class="text-2xl font-bold mb-8 text-center">Support Développeurs</h2>

          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <UCard class="text-center">
              <template #header>
                <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900/20 rounded-full flex items-center justify-center mx-auto">
                  <UIcon name="i-lucide-book" size="24" class="text-blue-600 dark:text-blue-400" />
                </div>
              </template>
              <h3 class="font-semibold mb-2">Documentation</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
                Documentation complète avec exemples et guides
              </p>
              <UButton variant="outline" block>
                Consulter
              </UButton>
            </UCard>

            <UCard class="text-center">
              <template #header>
                <div class="w-16 h-16 bg-green-100 dark:bg-green-900/20 rounded-full flex items-center justify-center mx-auto">
                  <UIcon name="i-lucide-message-circle" size="24" class="text-green-600 dark:text-green-400" />
                </div>
              </template>
              <h3 class="font-semibold mb-2">Support Technique</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
                Équipe dédiée pour les intégrations complexes
              </p>
              <UButton variant="outline" block>
                Contacter
              </UButton>
            </UCard>

            <UCard class="text-center">
              <template #header>
                <div class="w-16 h-16 bg-purple-100 dark:bg-purple-900/20 rounded-full flex items-center justify-center mx-auto">
                  <UIcon name="i-lucide-users" size="24" class="text-purple-600 dark:text-purple-400" />
                </div>
              </template>
              <h3 class="font-semibold mb-2">Communauté</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
                Rejoignez notre communauté de développeurs
              </p>
              <UButton variant="outline" block>
                Rejoindre
              </UButton>
            </UCard>
          </div>
        </div>
      </div>
    </template>
  </UDashboardPanel>
</template> 