<script setup>
const props = defineProps({
  pending: {
    type: Boolean,
    default: false
  },
  customers: {
    type: Array,
    default: () => []
  },
  selectedYear: {
    type: Number,
    required: true
  },
  monthlyTotals: {
    type: Object,
    default: () => ({})
  }
})

const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
</script>

<template>
  <!-- Monthly Totals Summary -->
  <div v-if="!pending && customers.length > 0" class="monthly-totals-summary">
    <h2 class="summary-title">Monthly Invoice Totals ({{ selectedYear }}) - All Customers</h2>
    <div class="months-grid">
      <div
        v-for="(month, index) in monthNames"
        :key="index"
        class="month-total-box"
        :class="{ 'has-data': monthlyTotals[index + 1]?.count > 0 }"
      >
        <div class="month-name">{{ month }}</div>
        <div class="month-amount">
          {{ new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyTotals[index + 1]?.total || 0) }}
        </div>
        <div class="month-count">{{ monthlyTotals[index + 1]?.count || 0 }} invoices</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.monthly-totals-summary {
  margin-bottom: 2rem;
  background: white;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

.summary-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 1rem;
}

.months-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.75rem;
  overflow-x: auto;
}

.month-total-box {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 1rem;
  text-align: center;
  transition: all 0.2s;
}

.month-total-box.has-data {
  background: #eff6ff;
  border-color: #3b82f6;
}

.month-total-box:hover.has-data {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.month-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 0.5rem;
}

.month-total-box.has-data .month-name {
  color: #1e40af;
}

.month-amount {
  font-size: 1.125rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.25rem;
}

.month-total-box.has-data .month-amount {
  color: #1e40af;
}

.month-count {
  font-size: 0.75rem;
  color: #6b7280;
}

@media (max-width: 768px) {
  .months-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
  }

  .month-total-box {
    padding: 0.75rem 0.5rem;
  }

  .month-amount {
    font-size: 0.875rem;
  }
}
</style>
