<template>
  <div class="container">
    <div class="row general">
      <div class="text-center col-6">
        <h2>Cooperativas</h2>
        <p class="general-value">
          <strong>{{ companiesCount }}</strong>
        </p>
      </div>
      <div class="text-center col-6">
        <h2>Productos</h2>
        <p class="general-value">
          <strong>{{ productsCount }}</strong>
        </p>
      </div>
    </div>
    <hr />
    <trend-stats
      :chart-id="`1`"
      :color="`#39af77`"
      :name="`Nuevas cooperativas`"
      :values="companiesTimeline"
    />
    <trend-stats
      :chart-id="`2`"
      :color="`red`"
      :name="`Nuevos productos`"
      :values="productsTimeline"
    />
    <trend-stats
      :chart-id="`3`"
      :color="`purple`"
      :name="`Nuevos usuarios`"
      :values="usersTimeline"
    />
    <trend-stats
      :chart-id="`4`"
      :color="`blue`"
      :name="`Contactados`"
      :values="contactTimeline"
    />
    <trend-stats
      :chart-id="`5`"
      :color="`orange`"
      :name="`Redirecciones a producto`"
      :values="shoppingTimeline"
    />
  </div>
</template>

<script>
import { useAuthStore } from '@/stores/auth'

export default {
  setup() {
    definePageMeta({
      layout: 'admin',
      middleware: 'auth',
      auth: { authority: 'SITE_ADMIN' },
    })

    const auth = useAuthStore()
    return { auth }
  },

  data() {
    return {
      companiesCount: 0,
      productsCount: 0,
      companiesTimeline: [],
      productsTimeline: [],
      usersTimeline: [],
      contactTimeline: [],
      shoppingTimeline: [],
    }
  },
  async created() {
    const config = useRuntimeConfig()
    try {
      const stats = await $fetch('/admin_stats/', {
        baseURL: config.public.baseURL,
        method: 'GET',
        headers: {
          Authorization: `Bearer ${this.auth.access}`,
        },
      })
      if (stats) {
        this.companiesCount = stats.company_count
        this.productsCount = stats.product_count
        this.companiesTimeline = stats.companies_timeline
        this.productsTimeline = stats.products_timeline
        this.usersTimeline = stats.users_timeline
        this.contactTimeline = stats.contact_timeline
        this.shoppingTimeline = stats.shopping_timeline
      }
    } catch (error) {
      console.error('Error fetching admin stats:', error)
    }

  },

}
</script>


<style lang="scss" scoped>
.general-value {
  font-size: 50px;
}
</style>
