<template>
  <div class="pos-today-stats mb-4">
    <div class="d-flex align-items-center justify-content-between mb-3 mt-1">
      <div class="d-flex align-items-center">
        <div class="icon-avatar me-3 shadow-sm">
          <i class="fas fa-chart-line text-primary"></i>
        </div>
        <div>
          <h5 class="fw_7 mb-0">Today's Performance</h5>
          <span class="text-muted small">Daily sales summary</span>
        </div>
      </div>
      <div v-if="!loading" class="date-badge px-3 py-1 text-primary small fw_6 rounded-pill border">
        Today
      </div>
    </div>

    <div v-if="loading" class="text-center py-4 glass-card p-3 p-md-4 rounded-xl">
      <div class="spinner-border text-primary spinner-border-sm" role="status">
        <span class="sr-only">Loading...</span>
      </div>
      <p class="small text-muted mt-2 mb-0">Fetching stats...</p>
    </div>

    <div v-else class="glass-card p-3 p-md-4 rounded-xl">
        <div class="row text-center mt-2">
            <div class="col-6 border-right">
                <p class="small text-muted mb-1 text-uppercase ls_1">Transactions</p>
                <h3 class="mb-0 fw_7">{{ todayStats.count || 0 }}</h3>
            </div>
            <div class="col-6">
                <p class="small text-muted mb-1 text-uppercase ls_1">Total Sales</p>
                <h3 class="mb-0 fw_7">₱{{ formatAmount(todayStats.total) }}</h3>
            </div>
        </div>
        
        <div v-if="!loading && todayStats.store_name" class="mt-3 text-center border-top-dashed pt-3">
            <p class="small text-muted italic mb-0">
                Terminal: <span class="fw_6 text-primary">{{ todayStats.store_name }}</span>
            </p>
        </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { usePosStore } from '../../stores/pos'

const props = defineProps({
  loading: { type: Boolean, default: false }
})

const posStore = usePosStore()
const todayStats = computed(() => posStore.todayStats)

const formatAmount = (val) => {
  if (!val) return '0.00'
  return parseFloat(val).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}
</script>

<style scoped>
.pos-today-stats {
  transition: all 0.3s ease;
}
.ls_1 {
  letter-spacing: 1px;
}
.border-right {
    border-right: 1px solid var(--border-color);
}
.border-top-dashed {
    border-top: 1px dashed var(--border-color);
}
.icon-avatar {
    width: 44px;
    height: 44px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.date-badge {
    background: rgba(var(--primary-rgb), 0.05) !important;
}

.rounded-xl {
    border-radius: 20px !important;
}

:global(.dark-mode) .icon-avatar {
    background: #2d3138;
}

:global(.dark-mode) .icon-avatar i {
    color: #10b981 !important;
}
:global(.dark-mode) .date-badge {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
}
:global(.dark-mode) .text-primary {
    color: #10b981 !important;
}
</style>
