<script setup lang="ts">
useSeoMeta({
  title: 'Marketplace - Services et Partenaires | Wibx Tour',
  description: 'Découvrez notre écosystème de 500+ partenaires et services cloud intégrés'
})

const categories = [
  { key: 'all', label: 'Tous', count: 523 },
  { key: 'security', label: 'Sécurité', count: 89 },
  { key: 'storage', label: 'Stockage', count: 156 },
  { key: 'analytics', label: 'Analytics', count: 67 },
  { key: 'ai-ml', label: 'IA & ML', count: 45 },
  { key: 'backup', label: 'Sauvegarde', count: 78 },
  { key: 'monitoring', label: 'Monitoring', count: 88 }
]

const selectedCategory = ref('all')

const services = [
  {
    name: 'CloudFlare Security',
    provider: 'CloudFlare',
    category: 'security',
    description: 'Protection DDoS et firewall applicatif de nouvelle génération',
    logo: 'i-simple-icons-cloudflare',
    rating: 4.8,
    reviews: 1250,
    price: 'À partir de €29/mois',
    features: ['DDoS Protection', 'WAF', 'Bot Management', 'Rate Limiting'],
    integration: 'Direct',
    popular: true
  },
  {
    name: 'Veeam Backup',
    provider: 'Veeam',
    category: 'backup',
    description: 'Solution de sauvegarde et récupération pour environnements virtualisés',
    logo: 'i-lucide-database',
    rating: 4.6,
    reviews: 892,
    price: 'À partir de €89/mois',
    features: ['Backup Automatique', 'Réplication', 'Récupération Instantanée'],
    integration: 'API'
  },
  {
    name: 'Splunk Analytics',
    provider: 'Splunk',
    category: 'analytics',
    description: 'Plateforme d\'analyse de données et de logs en temps réel',
    logo: 'i-lucide-bar-chart-3',
    rating: 4.7,
    reviews: 678,
    price: 'À partir de €199/mois',
    features: ['Log Analysis', 'SIEM', 'APM', 'Machine Learning'],
    integration: 'Direct'
  },
  {
    name: 'AWS Lambda',
    provider: 'Amazon Web Services',
    category: 'ai-ml',
    description: 'Calcul serverless pour l\'exécution de code sans gestion de serveurs',
    logo: 'i-simple-icons-amazonaws',
    rating: 4.5,
    reviews: 2150,
    price: 'Pay per use',
    features: ['Serverless', 'Auto Scaling', 'Event Driven', 'Multi-Language'],
    integration: 'Native',
    popular: true
  },
  {
    name: 'Azure Blob Storage',
    provider: 'Microsoft',
    category: 'storage',
    description: 'Stockage d\'objets massivement évolutif pour données non structurées',
    logo: 'i-simple-icons-microsoftazure',
    rating: 4.4,
    reviews: 1456,
    price: 'À partir de €0.02/GB',
    features: ['Hot/Cold Tiers', 'Géo-Réplication', 'CDN Integration'],
    integration: 'Native'
  },
  {
    name: 'Datadog Monitoring',
    provider: 'Datadog',
    category: 'monitoring',
    description: 'Plateforme de monitoring et observabilité pour applications cloud',
    logo: 'i-lucide-activity',
    rating: 4.6,
    reviews: 934,
    price: 'À partir de €15/host/mois',
    features: ['APM', 'Infrastructure Monitoring', 'Logs', 'Alertes'],
    integration: 'API'
  }
]

const filteredServices = computed(() => {
  if (selectedCategory.value === 'all') {
    return services
  }
  return services.filter(service => service.category === selectedCategory.value)
})

const getIntegrationColor = (integration: string) => {
  switch (integration) {
    case 'Native': return 'green'
    case 'Direct': return 'blue'
    case 'API': return 'orange'
    default: return 'gray'
  }
}
</script>

<template>
  <UDashboardPanel id="marketplace">
    <template #header>
      <UDashboardNavbar title="Marketplace">
        <template #leading>
          <UDashboardSidebarCollapse />
        </template>

        <template #right>
          <UButton size="sm" class="mr-2">
            Devenir Partenaire
          </UButton>
          <UButton variant="outline" size="sm">
            <UIcon name="i-lucide-filter" class="mr-2" />
            Filtres
          </UButton>
        </template>
      </UDashboardNavbar>

      <UDashboardToolbar>
        <template #left>
          <UBadge variant="subtle" size="lg">
            500+ Services et Partenaires - Écosystème Intégré
          </UBadge>
        </template>
      </UDashboardToolbar>
    </template>

    <template #body>
      <div class="space-y-8">
        <!-- Hero Description -->
        <div>
          <p class="text-lg text-gray-600 dark:text-gray-400">
            Accédez à notre écosystème de plus de 500 partenaires et services cloud intégrés.
            Déployez et gérez vos services depuis une interface unique avec facturation centralisée.
          </p>
        </div>

        <!-- Catégories -->
        <div>
          <h3 class="font-semibold mb-4">Catégories</h3>
          <div class="flex flex-wrap gap-2">
            <UButton
              v-for="category in categories"
              :key="category.key"
              :variant="selectedCategory === category.key ? 'solid' : 'outline'"
              size="sm"
              @click="selectedCategory = category.key"
            >
              {{ category.label }}
              <UBadge
                variant="subtle"
                size="sm"
                class="ml-2"
              >
                {{ category.count }}
              </UBadge>
            </UButton>
          </div>
        </div>

        <!-- Services Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <UCard
            v-for="service in filteredServices"
            :key="service.name"
            class="hover:shadow-lg transition-shadow duration-300"
            :class="service.popular ? 'ring-2 ring-primary/20' : ''"
          >
            <template #header>
              <div class="flex items-start justify-between">
                <div class="flex items-center gap-3">
                  <div class="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-lg flex items-center justify-center">
                    <UIcon :name="service.logo" size="24" />
                  </div>
                  <div>
                    <h3 class="font-semibold">{{ service.name }}</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">{{ service.provider }}</p>
                  </div>
                </div>
                <div class="flex items-center gap-2">
                  <UBadge
                    v-if="service.popular"
                    variant="solid"
                    size="sm"
                  >
                    Populaire
                  </UBadge>
                  <UBadge
                    :color="getIntegrationColor(service.integration)"
                    variant="soft"
                    size="sm"
                  >
                    {{ service.integration }}
                  </UBadge>
                </div>
              </div>
            </template>

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

              <!-- Rating et Prix -->
              <div class="flex items-center justify-between">
                <div class="flex items-center gap-1">
                  <UIcon name="i-lucide-star" size="16" class="text-yellow-500" />
                  <span class="text-sm font-medium">{{ service.rating }}</span>
                  <span class="text-xs text-gray-500">({{ service.reviews }})</span>
                </div>
                <span class="text-sm font-medium text-primary">{{ service.price }}</span>
              </div>

              <!-- Fonctionnalités -->
              <div>
                <p class="text-xs font-medium text-gray-600 dark:text-gray-400 mb-2">Fonctionnalités Clés</p>
                <div class="flex flex-wrap gap-1">
                  <UBadge
                    v-for="feature in service.features"
                    :key="feature"
                    variant="outline"
                    size="sm"
                  >
                    {{ feature }}
                  </UBadge>
                </div>
              </div>
            </div>

            <template #footer>
              <div class="flex gap-2">
                <UButton block>
                  Installer
                </UButton>
                <UButton variant="outline" square>
                  <UIcon name="i-lucide-info" />
                </UButton>
              </div>
            </template>
          </UCard>
        </div>

        <!-- Stats du Marketplace -->
        <div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-8">
          <h2 class="text-2xl font-bold mb-8 text-center">Marketplace en Chiffres</h2>
          <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
            <div class="text-center">
              <div class="text-3xl font-bold text-primary mb-2">500+</div>
              <div class="text-sm text-gray-600 dark:text-gray-400">Services Disponibles</div>
            </div>
            <div class="text-center">
              <div class="text-3xl font-bold text-primary mb-2">150+</div>
              <div class="text-sm text-gray-600 dark:text-gray-400">Partenaires Certifiés</div>
            </div>
            <div class="text-center">
              <div class="text-3xl font-bold text-primary mb-2">50K+</div>
              <div class="text-sm text-gray-600 dark:text-gray-400">Déploiements Mensuels</div>
            </div>
            <div class="text-center">
              <div class="text-3xl font-bold text-primary mb-2">99.5%</div>
              <div class="text-sm text-gray-600 dark:text-gray-400">Taux de Satisfaction</div>
            </div>
          </div>
        </div>

        <!-- Avantages -->
        <div>
          <h2 class="text-2xl font-bold mb-8 text-center">Avantages du Marketplace</h2>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="text-center p-6 border border-gray-200 dark:border-gray-700 rounded-lg">
              <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900/20 rounded-full flex items-center justify-center mx-auto mb-4">
                <UIcon name="i-lucide-credit-card" size="24" class="text-blue-600 dark:text-blue-400" />
              </div>
              <h3 class="font-semibold mb-2">Facturation Unifiée</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Une seule facture pour tous vos services cloud et partenaires
              </p>
            </div>

            <div class="text-center p-6 border border-gray-200 dark:border-gray-700 rounded-lg">
              <div class="w-16 h-16 bg-green-100 dark:bg-green-900/20 rounded-full flex items-center justify-center mx-auto mb-4">
                <UIcon name="i-lucide-zap" size="24" class="text-green-600 dark:text-green-400" />
              </div>
              <h3 class="font-semibold mb-2">Déploiement Instantané</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Activez vos services en quelques clics avec provisionnement automatique
              </p>
            </div>

            <div class="text-center p-6 border border-gray-200 dark:border-gray-700 rounded-lg">
              <div class="w-16 h-16 bg-purple-100 dark:bg-purple-900/20 rounded-full flex items-center justify-center mx-auto mb-4">
                <UIcon name="i-lucide-shield-check" size="24" class="text-purple-600 dark:text-purple-400" />
              </div>
              <h3 class="font-semibold mb-2">Sécurité Certifiée</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Tous nos partenaires sont certifiés et audités pour la sécurité
              </p>
            </div>
          </div>
        </div>

        <!-- Call to Action -->
        <div class="bg-primary text-white rounded-lg p-8 text-center">
          <h2 class="text-2xl font-bold mb-4">Développez Votre Écosystème</h2>
          <p class="text-lg mb-8 opacity-90">
            Explorez nos 500+ services et trouvez les solutions parfaites pour votre entreprise
          </p>
          <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <UButton size="lg" variant="outline" color="white">
              Explorer le Catalogue
            </UButton>
            <UButton size="lg" variant="ghost" color="white">
              Devenir Partenaire
            </UButton>
          </div>
        </div>
      </div>
    </template>
  </UDashboardPanel>
</template> 