<template class="body">
  <v-container fluid>
    <!-- Cabeçalho da página -->
<v-row>
  <v-col cols="12" class="d-flex align-center">
    <v-img
      src="/logo3.png"
      max-width="40"
      class="mr-3"
      :elevation="0"
      :class="'clean-image'"
    ></v-img>
    <div class="text">
      <h3>Dashboard Olha ai</h3>
      <p>Bem-vindo ao painel de controle</p>
    </div>
  </v-col>
</v-row>


    <!-- Cards de informações -->
    <v-row>
      <!-- Total de Usuários -->
      <v-col cols="12" md="3">
        <v-card class="cards">
          <v-card-title>
            <v-icon class="icon" left>mdi-account-group</v-icon>
            Colaboradores
          </v-card-title>
          <v-card-text>
            <v-row align="center">
              <v-col class="sub">
                <h2>{{ totalColaboradores }}</h2>
              </v-col>
            </v-row>
          </v-card-text>
        </v-card>
      </v-col>

      <!-- Trabalhando -->
      <v-col cols="12" md="3">
        <v-card class="cards">
          <v-card-title>
            <v-icon class="icon" left>mdi mdi-account-hard-hat</v-icon>
            Trabalhando
          </v-card-title>
          <v-card-text>
            <v-row align="center">
              <v-col class="sub">
                <h2>{{ totalAgentes }}</h2>
              </v-col>
            </v-row>
          </v-card-text>
        </v-card>
      </v-col>

      <!-- atrasados -->
      <v-col cols="12" md="3">
        <v-card class="cards">
          <v-card-title class="card-text justify-center mx-auto">
            <v-icon class="icon" left>mdi mdi-clock</v-icon>
            Atrasados
          </v-card-title>
          <v-card-text>
            <v-row align="center">
              <v-col class="sub">
                <h2>{{ temperaturaAgente }}</h2>
              </v-col>
            </v-row>
          </v-card-text>
        </v-card>
      </v-col>

      <!-- Total de Faltas -->
      <v-col cols="12" md="3">
        <v-card class="cards">
          <v-card-title>
            <v-icon class="icon" left>mdi mdi-account-multiple-remove-outline</v-icon>
            Faltas e Ausências
          </v-card-title>
          <v-card-text>
            <v-row align="center">
              <v-col class="sub">
                <h2>{{ totalFalhas }}</h2>
              </v-col>
            </v-row>
          </v-card-text>
          <v-btn block class="button">Ver Logs...</v-btn>
        </v-card>
      </v-col>
    </v-row>

    <!-- Gráfico de Colaboradores por categoria -->
    <v-row>
      <v-col cols="12" md="6">
        <v-card class="cards">
          <v-card-title>
            <v-icon class="icon" left>mdi-chart-bar</v-icon>
            Gráfico de Colaboradores por categoria
          </v-card-title>
          <v-card-subtitle>
            Trabalhando, Atrasados, Ausentes
          </v-card-subtitle>
          <v-card-text>
            <div>
              <apexchart type="bar" height="350" :options="chartOptions" :series="series" />
            </div>
          </v-card-text>
        </v-card>
      </v-col>

      <!-- Horas extras do mês -->
      <v-col cols="12" md="6">
        <v-card class="cards">
          <v-card-title>
            <v-icon class="icon" left>mdi-chart-bar</v-icon>
            Horas extras do mês
          </v-card-title>
          <v-card-subtitle>
            Colaboradores - Terceiros, Freelancer
          </v-card-subtitle>
          <v-card-text>
            <div :style="chartContainerStyle">
              <apexchart type="line" height="350" :options="chartOptions" :series="series" />
            </div>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>   
  </v-container>

  <!-- Card de logs 

  <v-col cols="12" md="12">
  <v-card class="cards">
    <v-card-item class="text">
      <v-card-title>
        <v-icon class="icon" left>mdi mdi-math-log</v-icon>
        Log dos Agentes
      </v-card-title>
    </v-card-item>

    <v-btn block class="button">Ver Logs...</v-btn>
  </v-card>
  </v-col> 

-->
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useUserStore } from '../stores/users';
import { useAgentStore } from '../stores/agentStore';
import VueApexCharts from 'vue3-apexcharts';

// Referências reativas para os valores
const totalColaboradores = ref(0);
const totalAgentes = ref(0);
const totalFalhas = ref(0);
const temperaturaAgente = ref(0);

// Dados de vendas por categoria de produto
const series = ref([]);

// Configurações do gráfico
const chartOptions = ref({
  chart: {
    type: 'bar',
  },
  plotOptions: {
    bar: {
      horizontal: false,
      columnWidth: '50%',
      endingShape: 'rounded',
      borderRadius: 20,
    },
  },
  dataLabels: {
    enabled: false,
  },
  xaxis: {
    categories: [], // Categorias de produtos
  },
  yaxis: {
    title: {
      text: 'Número de Colaboradores',
    },
  },
  fill: {
    type: 'gradient',
    gradient: {
      shade: 'dark',
      type: 'vertical',
      gradientToColors: ['#00eeef'],
      stops: [0, 50, 100],
    },
    opacity: 1,
  },
  tooltip: {
    y: {
      formatter: function (val) {
        return `${val} `;
      },
    },
  },
});

// Stores
const userStore = useUserStore();
const agentStore = useAgentStore();

// Função para carregar os dados
const loadData = async () => {
  try {
    // Atualizar total de usuários
    const users = await userStore.catchUsers();
    totalColaboradores.value = users.length;


    // Atualizar total de agentes
    const agents = agentStore.agents.filter(agent => !agent.isDeleted);
    totalAgentes.value = agents.length;

    // Atualizar temperatura dos agentes (exemplo: média de temperaturas)
    temperaturaAgente.value = agents.reduce((sum, agent) => sum + (agent.temperature || 0), 0) / agents.length;

    // Atualizar total de falhas (exemplo: agentes com status de falha)
    totalFalhas.value = agents.filter(agent => agent.status === 'falha').length;

    // Atualizar dados do gráfico
    series.value = [
      {
        name: 'Colaboradores',
        data: [15, 10, 20], // Substituir pelos dados reais
      },
    ];
    chartOptions.value.xaxis.categories = ['Trabalhando', 'Atrasados', 'Ausentes']; // Substituir pelas categorias reais
  } catch (error) {
    console.error('Erro ao carregar os dados:', error);
  }
};

// Carregar os dados ao montar o componente
onMounted(loadData);
</script>

<script>
export default {
  components: {
    apexchart: VueApexCharts,
  },
}
</script>

<style scoped>

.fill-height {
  min-height: 95vh;
}

.cards {
  text-align: center;
  color: rgba(0,0,0);
  border-radius: 50px;
  background: linear-gradient(145deg, #eeeded, #ffffff);
  box-shadow:  20px 20px 60px #d9d9d9,
              -20px -20px 60px #ffffff;
}

.button {
  background-color: rgba(76, 202, 240, 0.336);
  color: #000000;
}

.text {
  font-size: 18px;
  color: rgba(0,0,0);
}

.icon {
  color: rgba(0,0,0);
  font-size: 55px;
}

.sub {
  color:  #23408e;
  font-size: 20px;
}
</style>
