<template>
  <div class="space-y-6">
    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      <MetricCard
        title="Instancias Activas"
        :value="stats.connectedInstances"
        :total="stats.totalInstances"
        icon="i-lucide-smartphone"
        color="green"
      />
      <MetricCard
        title="Mensajes Hoy"
        :value="stats.messagesToday"
        icon="i-lucide-message-square"
        color="blue"
      />
      <MetricCard
        title="Webhooks Activos"
        :value="stats.activeWebhooks"
        icon="i-lucide-webhook"
        color="purple"
      />
      <MetricCard
        title="Chats Activos"
        :value="stats.activeChats"
        icon="i-lucide-users"
        color="amber"
      />
    </div>

    <!-- Quick Actions -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <!-- Instances Overview -->
      <div class="instance-card p-6">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-lg font-semibold text-[var(--wa-text)]">Instancias</h3>
          <UButton
            to="/instances"
            variant="ghost"
            size="sm"
            trailing-icon="i-lucide-arrow-right"
          >
            Ver todas
          </UButton>
        </div>

        <div v-if="instances.length === 0" class="text-center py-8">
          <UIcon name="i-lucide-smartphone" class="w-12 h-12 text-[var(--wa-text-muted)] mx-auto mb-3" />
          <p class="text-[var(--wa-text-muted)]">No hay instancias configuradas</p>
          <UButton
            to="/instances"
            variant="soft"
            class="mt-4"
          >
            Crear primera instancia
          </UButton>
        </div>

        <div v-else class="space-y-3">
          <div
            v-for="instance in instances.slice(0, 3)"
            :key="instance.id"
            class="flex items-center justify-between p-3 rounded-lg bg-[var(--wa-bg-light)]"
          >
            <div class="flex items-center gap-3">
              <span
                class="w-3 h-3 rounded-full"
                :class="instance.status === 'connected' ? 'bg-[var(--wa-green-light)]' : 'bg-red-500'"
              />
              <div>
                <p class="font-medium text-[var(--wa-text)]">{{ instance.name }}</p>
                <p class="text-sm text-[var(--wa-text-muted)]">{{ instance.phoneNumber || 'Sin conectar' }}</p>
              </div>
            </div>
            <StatusBadge :status="instance.status" />
          </div>
        </div>
      </div>

      <!-- Recent Activity -->
      <div class="instance-card p-6">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-lg font-semibold text-[var(--wa-text)]">Actividad Reciente</h3>
        </div>

        <div class="text-center py-8">
          <UIcon name="i-lucide-activity" class="w-12 h-12 text-[var(--wa-text-muted)] mx-auto mb-3" />
          <p class="text-[var(--wa-text-muted)]">La actividad aparecera aqui</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'dashboard',
  title: 'Dashboard',
  icon: 'i-lucide-layout-dashboard'
})

// TODO: Conectar con datos reales
const stats = ref({
  totalInstances: 0,
  connectedInstances: 0,
  messagesToday: 0,
  activeWebhooks: 0,
  activeChats: 0
})

const instances = ref<any[]>([])
</script>
