<template>
  <UDashboardPanel id="connect-saas">
    <template #header>
      <UDashboardNavbar title="Connect SaaS">
        <template #leading>
          <UDashboardSidebarCollapse />
        </template>

        <template #right>
          <UButton to="/connect/ecosystem" size="sm">
            Écosystème
          </UButton>
        </template>
      </UDashboardNavbar>

      <UDashboardToolbar>
        <template #left>
          <UBadge variant="subtle" size="lg">
            {{ saasServices.length }} services SaaS
          </UBadge>
        </template>

        <template #right>
          <UBadge variant="subtle" class="text-xs">
            {{ categories.length }} catégories
          </UBadge>
          <UBadge variant="subtle" class="text-xs">
            Intégration 1-clic
          </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">
            Applications SaaS
          </h1>
          <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
            Intégrez facilement vos services SaaS favoris avec notre plateforme de connectivité unifiée
          </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-grid-3x3" class="w-6 h-6 text-primary" />
              </div>
              <div class="text-2xl font-bold mb-1">
                {{ saasServices.length }}+
              </div>
              <div class="text-sm text-gray-600 dark:text-gray-400">
                Services SaaS
              </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-zap" class="w-6 h-6 text-primary" />
              </div>
              <div class="text-2xl font-bold mb-1">
                1-clic
              </div>
              <div class="text-sm text-gray-600 dark:text-gray-400">
                Intégration
              </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-activity" class="w-6 h-6 text-primary" />
              </div>
              <div class="text-2xl font-bold mb-1">
                99.9%
              </div>
              <div class="text-sm text-gray-600 dark:text-gray-400">
                Disponibilité
              </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-shield-check" class="w-6 h-6 text-primary" />
              </div>
              <div class="text-2xl font-bold mb-1">
                SOC 2
              </div>
              <div class="text-sm text-gray-600 dark:text-gray-400">
                Certifié
              </div>
            </div>
          </UCard>
        </div>

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

        <!-- Services SaaS -->
        <div>
          <h2 class="text-2xl font-bold mb-8">
            Services disponibles
          </h2>
          
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <UCard 
              v-for="service in filteredServices" 
              :key="service.id"
              class="hover:shadow-lg transition-shadow duration-300"
            >
              <template #header>
                <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="service.icon" class="w-6 h-6 text-primary" />
                  </div>
                  <div>
                    <h3 class="font-semibold">
                      {{ service.name }}
                    </h3>
                    <p class="text-xs text-gray-600 dark:text-gray-300">
                      {{ service.category }}
                    </p>
                  </div>
                </div>
              </template>

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

                <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" />
                  {{ service.users }}+ utilisateurs
                </div>

                <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
                  <UIcon name="i-lucide-star" class="w-4 h-4" />
                  {{ service.rating }}/5 ({{ service.reviews }} avis)
                </div>

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

                <div class="flex items-center justify-between pt-2 border-t">
                  <span class="text-sm font-medium">
                    Tarification
                  </span>
                  <span class="text-sm font-semibold text-primary">
                    {{ service.pricing }}
                  </span>
                </div>
              </div>

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

        <!-- Avantages -->
        <div>
          <h2 class="text-2xl font-bold mb-8 text-center">
            Pourquoi choisir notre plateforme SaaS ?
          </h2>

          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="text-center">
              <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <UIcon name="i-lucide-zap" size="24" class="text-primary" />
              </div>
              <h3 class="font-semibold mb-2">
                Intégration Rapide
              </h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Connectez vos applications en 1-clic
              </p>
            </div>

            <div class="text-center">
              <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <UIcon name="i-lucide-shield-check" size="24" class="text-primary" />
              </div>
              <h3 class="font-semibold mb-2">
                Sécurité
              </h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Chiffrement end-to-end et conformité
              </p>
            </div>

            <div class="text-center">
              <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <UIcon name="i-lucide-trending-up" size="24" class="text-primary" />
              </div>
              <h3 class="font-semibold mb-2">
                Évolutivité
              </h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Adaptation automatique à vos besoins
              </p>
            </div>

            <div class="text-center">
              <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <UIcon name="i-lucide-headphones" size="24" class="text-primary" />
              </div>
              <h3 class="font-semibold mb-2">
                Support 24/7
              </h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Assistance technique permanente
              </p>
            </div>
          </div>
        </div>

        <!-- Processus d'intégration -->
        <div>
          <h2 class="text-2xl font-bold mb-8 text-center">
            Comment ça marche ?
          </h2>

          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="text-center">
              <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <span class="text-2xl font-bold text-primary">1</span>
              </div>
              <h3 class="font-semibold mb-2">
                Sélectionnez
              </h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Choisissez les services SaaS à connecter
              </p>
            </div>

            <div class="text-center">
              <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <span class="text-2xl font-bold text-primary">2</span>
              </div>
              <h3 class="font-semibold mb-2">
                Configurez
              </h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Paramètres de connectivité en quelques clics
              </p>
            </div>

            <div class="text-center">
              <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <span class="text-2xl font-bold text-primary">3</span>
              </div>
              <h3 class="font-semibold mb-2">
                Utilisez
              </h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Applications connectées instantanément
              </p>
            </div>
          </div>
        </div>
      </div>
    </template>
  </UDashboardPanel>
</template>

<script setup lang="ts">
// Métadonnées de la page
useSeoMeta({
  title: 'Connect SaaS - Wibx Tour Layer 2',
  description: 'Connectez facilement vos applications SaaS favorites avec notre plateforme unifiée. Intégration 1-clic, sécurité enterprise, support 24/7.'
})

// Données des services SaaS
const saasServices = ref([
  {
    id: 1,
    name: 'Salesforce',
    category: 'CRM',
    description: 'Plateforme CRM leader mondial pour la gestion des relations clients',
    icon: 'i-lucide-user-circle',
    users: '150K',
    rating: 4.8,
    reviews: 5420,
    features: ['CRM', 'Analytics', 'AI', 'Mobile'],
    pricing: 'À partir de 25€/mois'
  },
  {
    id: 2,
    name: 'Microsoft 365',
    category: 'Productivité',
    description: 'Suite bureautique complète avec Office, Teams et OneDrive',
    icon: 'i-lucide-briefcase',
    users: '300K',
    rating: 4.7,
    reviews: 8930,
    features: ['Office', 'Teams', 'OneDrive', 'SharePoint'],
    pricing: 'À partir de 12€/mois'
  },
  {
    id: 3,
    name: 'Slack',
    category: 'Communication',
    description: 'Plateforme de communication et collaboration en équipe',
    icon: 'i-lucide-message-circle',
    users: '120K',
    rating: 4.6,
    reviews: 3210,
    features: ['Chat', 'Channels', 'Video', 'Integrations'],
    pricing: 'À partir de 6€/mois'
  },
  {
    id: 4,
    name: 'Zoom',
    category: 'Communication',
    description: 'Solution de visioconférence et webinaires professionnels',
    icon: 'i-lucide-video',
    users: '200K',
    rating: 4.5,
    reviews: 6780,
    features: ['Video', 'Webinaires', 'Recording', 'Screen Share'],
    pricing: 'À partir de 14€/mois'
  },
  {
    id: 5,
    name: 'HubSpot',
    category: 'Marketing',
    description: 'Plateforme marketing automation et inbound marketing',
    icon: 'i-lucide-megaphone',
    users: '90K',
    rating: 4.7,
    reviews: 2340,
    features: ['Marketing', 'Automation', 'Analytics', 'CRM'],
    pricing: 'À partir de 45€/mois'
  },
  {
    id: 6,
    name: 'Notion',
    category: 'Productivité',
    description: 'Workspace tout-en-un pour notes, tâches et collaboration',
    icon: 'i-lucide-file-text',
    users: '60K',
    rating: 4.8,
    reviews: 2890,
    features: ['Notes', 'Databases', 'Tasks', 'Templates'],
    pricing: 'À partir de 8€/mois'
  }
])

// Filtres
const selectedCategory = ref('all')
const categories = computed(() => [...new Set(saasServices.value.map(service => service.category))])

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

const filteredServices = computed(() => {
  if (selectedCategory.value === 'all') {
    return saasServices.value
  }
  return saasServices.value.filter(service => service.category === selectedCategory.value)
})
</script>