<template>
  <v-container fluid>
    <!-- Título -->
    <!-- Header da página -->
    <div class="header-container">
      <div class="header-left">
        <div class="icon-wrapper">
          <v-icon color="primary" size="32">mdi-clock-outline</v-icon>
        </div>
        <div class="header-title">
          <h1>Sistema de Ponto | Admin</h1>
        </div>
      </div>
      <div class="header-right">
  
        
        <v-badge dot color="error" class="notification-badge">
          <v-icon>mdi-bell</v-icon>
        </v-badge>
        <div class="admin-profile">
          <v-avatar class="mr-2" color="primary" size="40">
            <v-img src="/api/placeholder/40/40" alt="Administrador"></v-img>
          </v-avatar>
          <div class="admin-info">
            <span class="admin-name">Administrador</span>
            <span class="admin-role">Gestor</span>
          </div>
          <v-icon>mdi-chevron-down</v-icon>
        </div>
      </div>
    </div>
<!-- Título e descrição da seção -->
    <div class="section-header">
      <h2>Dashboard</h2>
    </div>

    <!-- Cards de Resumo -->
    <v-row class="mb-4">
      <v-col cols="12" md="3" v-for="card in cards" :key="card.label">
        <v-card class="summary-card">
          <v-card-text>
            <div class="summary-label">{{ card.label }}</div>
            <div class="summary-value">{{ card.value }}</div>
            <div class="summary-sub">{{ card.sub }}</div>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>

    <!-- Filtros Visão Geral / Solicitações -->
    <v-row class="mb-4">
      <v-col cols="12">
        <v-btn-toggle v-model="visaoSelecionada" divided>
          <v-btn value="geral" prepend-icon="mdi-chart-line">Visão Geral</v-btn>
          <v-btn value="pendentes" prepend-icon="mdi-information">Solicitações Pendentes</v-btn>
        </v-btn-toggle>
      </v-col>
    </v-row>

    <!-- Gráficos + Feriados -->
    <v-row>
      <v-col cols="12" md="4">
        <v-card>
          <v-card-title class="text-subtitle-1 font-weight-bold">Distribuição de Horas</v-card-title>
          <v-card-text class="text-center">Gráfico de distribuição de horas</v-card-text>
        </v-card>
      </v-col>

      <v-col cols="12" md="4">
        <v-card>
          <v-card-title class="text-subtitle-1 font-weight-bold">Marcações por Dia</v-card-title>
          <v-card-text class="text-center">Gráfico de marcações diárias</v-card-text>
        </v-card>
      </v-col>

      <v-col cols="12" md="4">
        <v-card>
          <v-card-title class="text-subtitle-1 font-weight-bold">
            <v-icon size="18" class="mr-1">mdi-calendar</v-icon>
            Próximos Feriados
          </v-card-title>
          <v-card-text>
            <div class="holiday-entry" v-for="feriado in proximosFeriados" :key="feriado.nome">
              <div>{{ feriado.nome }}</div>
              <div>{{ feriado.data }}</div>
            </div>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import api from '../services/api';
import { useHolidayStore } from '../stores/holiday';
import { useUserStore } from '../stores/users';

const holidayStore = useHolidayStore();
const userStore = useUserStore();

const cards = ref([
  {
    label: 'Total de Colaboradores',
    value: 0,
    sub: 'Colaboradores cadastrados no sistema'
  },
  {
    label: 'Marcações Hoje',
    value: '-',
    sub: 'Registros de ponto realizados hoje'
  },
  {
    label: 'Ajustes Pendentes',
    value: '-',
    sub: 'Solicitações aguardando aprovação'
  },
  {
    label: 'Horas Extras',
    value: '-',
    sub: 'Total de horas extras no mês'
  }
]);

const visaoSelecionada = ref('geral');

const proximosFeriados = ref([]);

onMounted(async () => {
  // Busca o total de colaboradores
  try {
      const response = await userStore.catchUsers(); // Retorna diretamente um array
      cards.value[0].value = response.length; // Calcula quantidade de usuários
    } catch (error) {
      console.error('Erro ao buscar colaboradores:', error);
    }

  // Busca feriados
  try {
    const response = await holidayStore.getHolidays(); // Aguarda a Promise e recebe um array
    console.log('Feriados:', response);
    const feriados = response
      .filter(f => new Date(f.date) > new Date())
      .sort((a, b) => new Date(a.date) - new Date(b.date))
      .slice(0, 3)
      .map(f => ({
        nome: f.name,
        data: new Date(f.date).toLocaleDateString('pt-BR')
      }));
    proximosFeriados.value = feriados;
  } catch (error) {
    console.error('Erro ao buscar feriados:', error);
  }
});
</script>

<style scoped>
.dashboard-title {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
}
.dashboard-subtitle {
  font-size: 14px;
  color: #64748b;
}
.summary-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  padding: 16px;
}
.summary-label {
  font-size: 14px;
  color: #64748b;
}
.summary-value {
  font-size: 24px;
  font-weight: bold;
  color: #1e293b;
}
.summary-sub {
  font-size: 13px;
  color: #94a3b8;
}
.holiday-entry {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f1f1f1;
}
.holiday-entry:last-child {
  border-bottom: none;
}
/* Estilo do cabeçalho */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 0 20px 0;
  border-bottom: 1px solid #eaecef;
}

.header-left {
  display: flex;
  align-items: center;
}

.icon-wrapper {
  background-color: #e3f2fd;
  border-radius: 8px;
  padding: 12px;
  margin-right: 12px;
}

.header-title h1 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #1e293b;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.back-button {
  color: #1976d2;
}

.new-holiday-btn {
  background-color: #1976d2;
  color: white;
}

.admin-profile {
  display: flex;
  align-items: center;
  margin-left: 16px;
  cursor: pointer;
}

.admin-info {
  display: flex;
  flex-direction: column;
  margin: 0 8px;
}

.admin-name {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
}

.admin-role {
  font-size: 12px;
  color: #64748b;
}

.notification-badge {
  margin: 0 8px;
}

</style>
