<template>
  <section class="py-8 space-y-6">
    <div class="flex items-center justify-between">
      <h2 class="text-2xl font-semibold">Cash Calendar</h2>
      <UBadge color="red" variant="subtle">Week 7 cushion breach</UBadge>
    </div>

    <UCard>
      <template #header>
        <h3 class="text-lg font-medium">13-Week Cash Flow</h3>
      </template>
      <div class="space-y-4">
        <div class="text-sm text-gray-600">
          Week-by-week cash inflows and outflows with minimum cushion tracking.
        </div>
        
        <div class="grid grid-cols-7 gap-2 text-xs font-medium text-gray-500">
          <div>Week</div>
          <div>Inflow</div>
          <div>Outflow</div>
          <div>Net</div>
          <div>Balance</div>
          <div>Cushion</div>
          <div>Status</div>
        </div>
        
        <div v-for="week in weeks" :key="week.number" 
             class="grid grid-cols-7 gap-2 text-sm py-2 border-b border-gray-100"
             :class="{ 'bg-red-50': week.breachesCushion }">
          <div class="font-medium">{{ week.number }}</div>
          <div class="text-green-600">+€{{ week.inflow.toLocaleString() }}</div>
          <div class="text-red-600">-€{{ week.outflow.toLocaleString() }}</div>
          <div :class="week.net >= 0 ? 'text-green-600' : 'text-red-600'">
            {{ week.net >= 0 ? '+' : '' }}€{{ week.net.toLocaleString() }}
          </div>
          <div class="font-medium">€{{ week.balance.toLocaleString() }}</div>
          <div :class="week.breachesCushion ? 'text-red-600 font-medium' : 'text-gray-600'">
            €{{ week.cushion.toLocaleString() }}
          </div>
          <div>
            <UBadge v-if="week.breachesCushion" color="red" size="xs">
              Breach
            </UBadge>
            <UBadge v-else color="green" size="xs">
              OK
            </UBadge>
          </div>
        </div>
        
        <div class="mt-4 p-3 bg-orange-50 rounded-lg">
          <div class="flex items-center gap-2">
            <UIcon name="i-heroicons-exclamation-triangle" class="text-orange-500" />
            <span class="text-sm font-medium text-orange-800">
              This week would drop below your minimum cushion.
            </span>
          </div>
        </div>
      </div>
    </UCard>
  </section>
</template>

<script setup lang="ts">
const weeks = ref([
  { number: 1, inflow: 3000, outflow: 2200, net: 800, balance: 5800, cushion: 2800, breachesCushion: false },
  { number: 2, inflow: 2500, outflow: 2200, net: 300, balance: 6100, cushion: 3100, breachesCushion: false },
  { number: 3, inflow: 0, outflow: 2200, net: -2200, balance: 3900, cushion: 900, breachesCushion: false },
  { number: 4, inflow: 4000, outflow: 2200, net: 1800, balance: 5700, cushion: 2700, breachesCushion: false },
  { number: 5, inflow: 2000, outflow: 2200, net: -200, balance: 5500, cushion: 2500, breachesCushion: false },
  { number: 6, inflow: 1500, outflow: 2200, net: -700, balance: 4800, cushion: 1800, breachesCushion: false },
  { number: 7, inflow: 1000, outflow: 2200, net: -1200, balance: 3600, cushion: 600, breachesCushion: true },
  // ... more weeks
])
</script>
