<template>
  <UDashboardPanel id="ecosystem">
    <template #header>
      <UDashboardNavbar title="Écosystème">
        <template #leading>
          <UDashboardSidebarCollapse />
        </template>

        <template #right>
          <UButton to="/connect/saas" size="sm">
            SaaS
          </UButton>
        </template>
      </UDashboardNavbar>

      <UDashboardToolbar>
        <template #left>
          <UBadge variant="subtle" size="lg">
            {{ partners.length }} partenaires
          </UBadge>
        </template>

        <template #right>
          <UBadge variant="subtle" class="text-xs">
            {{ certifiedPartners.length }} certifiés
          </UBadge>
          <UBadge variant="subtle" class="text-xs">
            API ouverte
          </UBadge>
        </template>
      </UDashboardToolbar>
    </template>

    <template #body>
      <div class="space-y-12">
        <!-- Header Section -->
        <div class="text-center mb-8">
          <h1 class="text-3xl font-bold mb-4">
            Écosystème de Partenaires
          </h1>
          <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
            Connectez-vous à un écosystème riche de {{ partners.length }} partenaires technologiques et fournisseurs de services
          </p>
        </div>

        <!-- Statistiques -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
          <UCard class="text-center">
            <div class="p-6">
              <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mx-auto mb-3">
                <UIcon name="i-lucide-users" class="w-6 h-6 text-primary" />
              </div>
              <div class="text-2xl font-bold mb-1">
                {{ partners.length }}+
              </div>
              <div class="text-sm text-gray-600 dark:text-gray-400">
                Partenaires
              </div>
            </div>
          </UCard>

          <UCard class="text-center">
            <div class="p-6">
              <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mx-auto mb-3">
                <UIcon name="i-lucide-award" class="w-6 h-6 text-primary" />
              </div>
              <div class="text-2xl font-bold mb-1">
                {{ certifiedPartners.length }}
              </div>
              <div class="text-sm text-gray-600 dark:text-gray-400">
                Certifiés
              </div>
            </div>
          </UCard>

          <UCard class="text-center">
            <div class="p-6">
              <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mx-auto mb-3">
                <UIcon name="i-lucide-layers" class="w-6 h-6 text-primary" />
              </div>
              <div class="text-2xl font-bold mb-1">
                {{ categories.length }}
              </div>
              <div class="text-sm text-gray-600 dark:text-gray-400">
                Catégories
              </div>
            </div>
          </UCard>

          <UCard class="text-center">
            <div class="p-6">
              <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mx-auto mb-3">
                <UIcon name="i-lucide-code" class="w-6 h-6 text-primary" />
              </div>
              <div class="text-2xl font-bold mb-1">
                API
              </div>
              <div class="text-sm text-gray-600 dark:text-gray-400">
                Ouverte
              </div>
            </div>
          </UCard>
        </div>

        <!-- Partenaires Stratégiques -->
        <UCard>
          <template #header>
            <h2 class="text-xl font-semibold">
              Partenaires Stratégiques
            </h2>
          </template>

          <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
            <div 
              v-for="partner in strategicPartners" 
              :key="partner.id"
              class="flex flex-col items-center p-4 border rounded-lg hover:shadow-md transition-shadow cursor-pointer"
            >
              <div class="w-16 h-16 bg-primary/10 rounded-lg flex items-center justify-center mb-2">
                <UIcon :name="partner.icon" class="w-8 h-8 text-primary" />
              </div>
              <h3 class="font-semibold text-sm text-center">
                {{ partner.name }}
              </h3>
              <p class="text-xs text-gray-600 dark:text-gray-300 text-center mt-1">
                {{ partner.description }}
              </p>
            </div>
          </div>
        </UCard>

        <!-- Filtres -->
        <div>
          <UTabs v-model="selectedCategory" :items="tabs" class="w-full" />
        </div>

        <!-- Partenaires -->
        <div>
          <h2 class="text-2xl font-bold mb-8">
            Nos partenaires technologiques
          </h2>
          
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <UCard 
              v-for="partner in filteredPartners" 
              :key="partner.id"
              class="hover:shadow-lg transition-shadow duration-300"
            >
              <template #header>
                <div class="flex items-center justify-between">
                  <div class="flex items-center gap-3">
                    <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
                      <UIcon :name="partner.icon" class="w-6 h-6 text-primary" />
                    </div>
                    <div>
                      <h3 class="font-semibold">
                        {{ partner.name }}
                      </h3>
                      <p class="text-xs text-gray-600 dark:text-gray-300">
                        {{ partner.category }}
                      </p>
                    </div>
                  </div>
                  <UBadge 
                    v-if="partner.certified"
                    variant="solid" 
                    size="xs"
                  >
                    Certifié
                  </UBadge>
                </div>
              </template>

              <div class="space-y-3">
                <p class="text-sm text-gray-600 dark:text-gray-300">
                  {{ partner.description }}
                </p>

                <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
                  <UIcon name="i-lucide-map-pin" class="w-4 h-4" />
                  {{ partner.location }}
                </div>

                <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
                  <UIcon name="i-lucide-users" class="w-4 h-4" />
                  {{ partner.clients }}+ clients
                </div>

                <div class="flex flex-wrap gap-1 pt-2">
                  <UBadge 
                    v-for="service in partner.services" 
                    :key="service"
                    variant="subtle" 
                    size="xs"
                  >
                    {{ service }}
                  </UBadge>
                </div>

                <div class="flex items-center justify-between pt-2 border-t">
                  <span class="text-sm font-medium">
                    Intégration
                  </span>
                  <span class="text-sm font-semibold text-primary">
                    {{ partner.integration }}
                  </span>
                </div>
              </div>

              <template #footer>
                <UButton variant="outline" block>
                  Se connecter
                </UButton>
              </template>
            </UCard>
          </div>
        </div>

        <!-- Programme Partenaires -->
        <div>
          <h2 class="text-2xl font-bold mb-8 text-center">
            Programme Partenaires
          </h2>

          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="text-center p-6 border rounded-lg">
              <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <UIcon name="i-lucide-handshake" size="24" class="text-primary" />
              </div>
              <h3 class="font-semibold mb-2 text-lg">
                Partenaire Technologique
              </h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
                Intégrez vos solutions avec notre plateforme
              </p>
              <ul class="text-sm text-gray-600 dark:text-gray-300 space-y-1 mb-4">
                <li>• API complète</li>
                <li>• Documentation technique</li>
                <li>• Support dédié</li>
                <li>• Co-marketing</li>
              </ul>
              <UButton variant="outline" size="sm">
                Devenir partenaire
              </UButton>
            </div>

            <div class="text-center p-6 border rounded-lg">
              <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <UIcon name="i-lucide-award" size="24" class="text-primary" />
              </div>
              <h3 class="font-semibold mb-2 text-lg">
                Partenaire Certifié
              </h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
                Certification officielle et avantages premium
              </p>
              <ul class="text-sm text-gray-600 dark:text-gray-300 space-y-1 mb-4">
                <li>• Formation certifiante</li>
                <li>• Support prioritaire</li>
                <li>• Leads qualifiés</li>
                <li>• Badge officiel</li>
              </ul>
              <UButton variant="solid" size="sm">
                Se certifier
              </UButton>
            </div>

            <div class="text-center p-6 border rounded-lg">
              <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <UIcon name="i-lucide-star" size="24" class="text-primary" />
              </div>
              <h3 class="font-semibold mb-2 text-lg">
                Partenaire Premier
              </h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
                Niveau d'excellence et d'engagement maximum
              </p>
              <ul class="text-sm text-gray-600 dark:text-gray-300 space-y-1 mb-4">
                <li>• Roadmap partagée</li>
                <li>• Co-innovation</li>
                <li>• Événements exclusifs</li>
                <li>• Revenue share</li>
              </ul>
              <UButton variant="solid" size="sm">
                Programme Premier
              </UButton>
            </div>
          </div>
        </div>

        <!-- API & Développeurs -->
        <UCard>
          <template #header>
            <h2 class="text-xl font-semibold">
              API & Développeurs
            </h2>
          </template>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <h3 class="font-semibold mb-3">
                API RESTful
              </h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
                Intégrez facilement nos services dans vos applications avec notre API moderne et bien documentée.
              </p>
              
              <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 mb-4">
                <pre class="text-sm overflow-x-auto"><code>curl -X GET \
  https://api.wibx.com/v1/connections \
  -H "Authorization: Bearer {token}" \
  -H "Content-Type: application/json"</code></pre>
              </div>

              <div class="flex gap-2">
                <UButton variant="solid" size="sm">
                  Documentation API
                </UButton>
                <UButton variant="outline" size="sm">
                  Tester l'API
                </UButton>
              </div>
            </div>

            <div>
              <h3 class="font-semibold mb-3">
                SDKs Disponibles
              </h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
                Utilisez nos SDKs officiels pour une intégration rapide.
              </p>
              
              <div class="space-y-2 mb-4">
                <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
                  <UIcon name="i-lucide-code" class="w-4 h-4 text-primary" />
                  JavaScript/Node.js
                </div>
                <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
                  <UIcon name="i-lucide-code" class="w-4 h-4 text-primary" />
                  Python
                </div>
                <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
                  <UIcon name="i-lucide-code" class="w-4 h-4 text-primary" />
                  PHP
                </div>
                <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
                  <UIcon name="i-lucide-code" class="w-4 h-4 text-primary" />
                  Go
                </div>
              </div>

              <div class="flex gap-2">
                <UButton variant="solid" size="sm">
                  Télécharger SDKs
                </UButton>
                <UButton variant="outline" size="sm">
                  GitHub
                </UButton>
              </div>
            </div>
          </div>
        </UCard>
      </div>
    </template>
  </UDashboardPanel>
</template>

<script setup lang="ts">
// Métadonnées de la page
useSeoMeta({
  title: 'Écosystème - Wibx Tour Layer 2',
  description: 'Découvrez notre écosystème de partenaires technologiques. API ouverte, intégrations natives, programme de certification.'
})

// Partenaires stratégiques
const strategicPartners = ref([
  { id: 1, name: 'AWS', description: 'Cloud Computing', icon: 'i-lucide-cloud' },
  { id: 2, name: 'Microsoft', description: 'Azure & Office 365', icon: 'i-lucide-building' },
  { id: 3, name: 'Google', description: 'Google Cloud', icon: 'i-lucide-search' },
  { id: 4, name: 'Salesforce', description: 'CRM Platform', icon: 'i-lucide-user-circle' },
  { id: 5, name: 'Oracle', description: 'Database & Cloud', icon: 'i-lucide-database' },
  { id: 6, name: 'SAP', description: 'Enterprise Software', icon: 'i-lucide-briefcase' }
])

// Données des partenaires
const partners = ref([
  {
    id: 1,
    name: 'Cloudflare',
    category: 'Sécurité',
    description: 'Protection DDoS et CDN global pour une sécurité et performance optimales',
    icon: 'i-lucide-shield',
    location: 'Global',
    clients: '26M',
    services: ['DDoS Protection', 'CDN', 'WAF', 'DNS'],
    integration: 'API native',
    certified: true
  },
  {
    id: 2,
    name: 'Equinix',
    category: 'Infrastructure',
    description: 'Leader mondial des centres de données et de l\'interconnexion',
    icon: 'i-lucide-server',
    location: 'Worldwide',
    clients: '10K',
    services: ['Colocation', 'Interconnexion', 'Edge Computing'],
    integration: 'Connexion directe',
    certified: true
  },
  {
    id: 3,
    name: 'Fortinet',
    category: 'Sécurité',
    description: 'Solutions de cybersécurité et pare-feu nouvelle génération',
    icon: 'i-lucide-lock',
    location: 'Global',
    clients: '540K',
    services: ['Firewall', 'SD-WAN', 'Endpoint Protection'],
    integration: 'API REST',
    certified: true
  },
  {
    id: 4,
    name: 'Cisco',
    category: 'Réseau',
    description: 'Équipements réseau et solutions de connectivité enterprise',
    icon: 'i-lucide-network',
    location: 'Worldwide',
    clients: '1M',
    services: ['Switching', 'Routing', 'SD-WAN', 'Wireless'],
    integration: 'SNMP/API',
    certified: true
  },
  {
    id: 5,
    name: 'VMware',
    category: 'Virtualisation',
    description: 'Solutions de virtualisation et cloud computing',
    icon: 'i-lucide-layers',
    location: 'Global',
    clients: '500K',
    services: ['vSphere', 'NSX', 'vSAN', 'Cloud'],
    integration: 'vCenter API',
    certified: true
  },
  {
    id: 6,
    name: 'Okta',
    category: 'Identité',
    description: 'Gestion d\'identité et accès cloud',
    icon: 'i-lucide-user-check',
    location: 'Cloud',
    clients: '15K',
    services: ['SSO', 'MFA', 'Identity Management'],
    integration: 'REST API',
    certified: true
  }
])

// Filtres
const selectedCategory = ref('all')
const categories = computed(() => [...new Set(partners.value.map(partner => partner.category))])
const certifiedPartners = computed(() => partners.value.filter(partner => partner.certified))

const tabs = computed(() => [
  { value: 'all', label: 'Tous les partenaires' },
  ...categories.value.map(category => ({ value: category, label: category }))
])

const filteredPartners = computed(() => {
  if (selectedCategory.value === 'all') {
    return partners.value
  }
  return partners.value.filter(partner => partner.category === selectedCategory.value)
})
</script>