<script setup lang="ts">
import { sub } from 'date-fns'
import type { DropdownMenuItem } from '@nuxt/ui'
import type { Period, Range } from '~/types'

const { isNotificationsSlideoverOpen } = useDashboard()

const items = [[{
  label: 'New mail',
  icon: 'i-lucide-send',
  to: '/inbox'
}, {
  label: 'New customer',
  icon: 'i-lucide-user-plus',
  to: '/customers'
}]] satisfies DropdownMenuItem[][]

const range = shallowRef<Range>({
  start: sub(new Date(), { days: 14 }),
  end: new Date()
})
const period = ref<Period>('daily')

useSeoMeta({
  title: 'Wibx Tour Layer 2 - Connectivité Cloud et Réseau',
  description: 'Plateforme de connectivité réseau Layer 2 pour cloud, data centers et services managés'
})

const cloudProviders = [
  { name: 'AWS', logo: 'i-simple-icons-amazonaws', status: 'Direct Connect' },
  { name: 'Azure', logo: 'i-simple-icons-microsoftazure', status: 'Partner' },
  { name: 'Google Cloud', logo: 'i-simple-icons-googlecloud', status: 'Direct Connect' },
  { name: 'Oracle Cloud', logo: 'i-simple-icons-oracle', status: 'New' },
  { name: 'IBM Cloud', logo: 'i-simple-icons-ibm', status: 'Partner' },
  { name: 'Alibaba Cloud', logo: 'i-simple-icons-alibabacloud', status: 'New' }
]

const mainServices = [
  {
    title: 'Connect Cloud',
    description: 'Connectez-vous directement aux plus grands fournisseurs cloud avec des liens Layer 2 privés.',
    icon: 'i-lucide-cloud',
    to: '/connect/clouds',
    features: ['AWS Direct Connect', 'Azure ExpressRoute', 'Google Cloud Interconnect']
  },
  {
    title: 'Marketplace',
    description: 'Accédez à notre écosystème de partenaires et services via notre marketplace intégré.',
    icon: 'i-lucide-store',
    to: '/services/marketplace',
    features: ['500+ Partenaires', 'APIs Intégrées', 'Facturation Unifiée']
  },
  {
    title: 'Instant Layer 2',
    description: 'Provisionnement instantané de liens Layer 2 avec SLA garanti et monitoring en temps réel.',
    icon: 'i-lucide-zap',
    to: '/services/layer2',
    features: ['Déploiement < 5min', 'SLA 99.9%', 'Monitoring 24/7']
  }
]
</script>

<template>
  <UDashboardPanel id="home">
    <template #header>
      <UDashboardNavbar title="Accueil">
        <template #leading>
          <UDashboardSidebarCollapse />
        </template>

        <template #right>
          <UButton to="/services/layer2" size="sm">
            Créer une Connexion
            </UButton>
        </template>
      </UDashboardNavbar>

      <UDashboardToolbar>
        <template #left>
          <UBadge variant="subtle" size="lg">
            Plateforme Wibx Tour Layer 2
          </UBadge>
        </template>
      </UDashboardToolbar>
    </template>

    <template #body>
      <div class="space-y-12">
        <!-- Hero Section -->
        <UHero>
          <template #title>
            Connectivité <span class="text-primary">Layer 2</span> Instantanée et Sécurisée
          </template>

          <template #description>
            Wibx Tour Layer 2 vous permet de connecter instantanément vos infrastructures aux clouds,
            data centers et services managés avec des performances garanties et une sécurité de niveau entreprise.
          </template>

          <template #links>
            <UButton to="/services/layer2" size="lg" class="mr-4">
              Commencer Maintenant
            </UButton>
            <UButton to="/resources/api-docs" variant="outline" size="lg">
              Voir la Documentation
            </UButton>
          </template>
        </UHero>

        <!-- Services principaux -->
        <div>
          <h2 class="text-2xl font-bold mb-2">Services Principaux</h2>
          <p class="text-gray-600 dark:text-gray-400 mb-8">
            Découvrez nos solutions de connectivité réseau pour tous vos besoins
          </p>

          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <UCard
              v-for="service in mainServices"
              :key="service.title"
              class="hover:shadow-lg transition-shadow duration-300"
            >
              <template #header>
                <div class="flex items-center gap-4">
                  <UIcon :name="service.icon" size="32" class="text-primary" />
                  <div>
                    <h3 class="text-lg font-semibold">{{ service.title }}</h3>
                  </div>
                </div>
              </template>

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

              <div class="space-y-2 mb-4">
                <div
                  v-for="feature in service.features"
                  :key="feature"
                  class="flex items-center gap-2 text-sm"
                >
                  <UIcon name="i-lucide-check" class="text-green-500" />
                  <span>{{ feature }}</span>
                </div>
              </div>

              <template #footer>
                <UButton :to="service.to" variant="outline" block>
                  En savoir plus
                </UButton>
              </template>
            </UCard>
          </div>
        </div>

        <!-- Partenaires Cloud -->
        <div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-8">
          <h2 class="text-2xl font-bold mb-2">Partenaires Cloud</h2>
          <p class="text-gray-600 dark:text-gray-400 mb-8">
            Connectez-vous aux plus grands fournisseurs cloud avec des liens directs
          </p>

          <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
            <div
              v-for="provider in cloudProviders"
              :key="provider.name"
              class="flex flex-col items-center text-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow"
            >
              <UIcon :name="provider.logo" size="48" class="mb-3 text-gray-600 dark:text-gray-300" />
              <h4 class="font-medium mb-2">{{ provider.name }}</h4>
              <UBadge
                :variant="provider.status === 'Direct Connect' ? 'solid' : provider.status === 'New' ? 'outline' : 'subtle'"
                size="sm"
              >
                {{ provider.status }}
              </UBadge>
            </div>
          </div>

          <div class="text-center mt-8">
            <UButton to="/connect/clouds" size="lg">
              Voir Tous les Clouds
            </UButton>
          </div>
        </div>

        <!-- Avantages -->
        <div>
          <h2 class="text-2xl font-bold mb-8 text-center">
            Pourquoi Choisir Wibx Tour ?
          </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">Déploiement Rapide</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Provisionnement en moins de 5 minutes
              </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é Garantie</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Connexions privées et chiffrées
              </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-activity" size="24" class="text-primary" />
              </div>
              <h3 class="font-semibold mb-2">Monitoring 24/7</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Surveillance continue de vos liens
              </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-dollar-sign" size="24" class="text-primary" />
              </div>
              <h3 class="font-semibold mb-2">Tarification Transparente</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Pas de frais cachés, facturation au réel
              </p>
            </div>
          </div>
        </div>

        <!-- Call to Action -->
        <div class="bg-primary text-white rounded-lg p-8 text-center">
          <h2 class="text-3xl font-bold mb-4">
            Prêt à Commencer ?
          </h2>
          <p class="text-xl mb-8 opacity-90">
            Créez votre premier lien Layer 2 en quelques minutes
          </p>
          <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <UButton to="/signup" size="lg" variant="outline" color="white">
              Créer un Compte
            </UButton>
            <UButton to="/services/api" size="lg" variant="ghost" color="white">
              Explorer les APIs
            </UButton>
          </div>
        </div>
      </div>
    </template>
  </UDashboardPanel>
</template>
