<template>
  <div class="stats-footer-modern mt-3">
    <v-row dense>
      <v-col cols="4">
        <div class="stat-card-modern">
          <div class="stat-icon-modern">
            <v-icon :color="primaryColor" size="20">mdi-clock-outline</v-icon>
          </div>
          <div class="stat-value">{{ todayCount }}</div>
          <div class="stat-label">Hari Ini</div>
        </div>
      </v-col>
      <v-col cols="4">
        <div class="stat-card-modern">
          <div class="stat-icon-modern">
            <v-icon color="success" size="20">mdi-check-circle</v-icon>
          </div>
          <div class="stat-value">{{ completedCount }}</div>
          <div class="stat-label">Selesai</div>
        </div>
      </v-col>
      <v-col cols="4">
        <div class="stat-card-modern">
          <div class="stat-icon-modern">
            <v-icon :color="secondaryColor" size="20">mdi-account-group</v-icon>
          </div>
          <div class="stat-value">{{ pendingCount }}</div>
          <div class="stat-label">Menunggu</div>
        </div>
      </v-col>
    </v-row>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { CheckInHistoryItem } from '~/types/checkin'
import { PRIMARY_COLOR, SECONDARY_COLOR } from '~/constants/checkin'

interface Props {
  history: CheckInHistoryItem[]
  primaryColor?: string
  secondaryColor?: string
}

const props = withDefaults(defineProps<Props>(), {
  primaryColor: PRIMARY_COLOR,
  secondaryColor: SECONDARY_COLOR,
})

// Computed untuk menghitung stats
const todayCount = computed(() => {
  const today = new Date().toDateString()
  return props.history.filter(item => {
    const itemDate = new Date(item.checkInDate).toDateString()
    return itemDate === today
  }).length
})

const completedCount = computed(() => {
  return props.history.filter(item => 
    item.status === 'success' || item.status === 'ALLOWED'
  ).length
})

const pendingCount = computed(() => {
  return props.history.filter(item => 
    item.status === 'pending' || item.status === 'NOT_ALLOWED'
  ).length
})
</script>

<style scoped>
/* Stats Footer Modern */
.stats-footer-modern {
  animation: slideUp 0.5s ease-out 0.3s both;
}

@keyframes slideUp {
  from { 
    opacity: 0; 
    transform: translateY(10px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

.stat-card-modern {
  background: white;
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
  border: 1px solid #e5e7eb;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.stat-card-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1565C0 0%, #0D47A1 100%);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.stat-card-modern:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: #1565C0;
}

.stat-card-modern:hover::before {
  transform: scaleX(1);
}

.stat-icon-modern {
  margin-bottom: 12px;
  display: inline-flex;
  padding: 8px;
  background: #e3f2fd;
  border-radius: 10px;
}

.stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}

.stat-label {
  font-size: 11px;
  color: #6b7280;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
</style>
