<template>
  <section class="py-8 space-y-6">
    <div class="flex items-center justify-between">
      <h2 class="text-2xl font-semibold">Value Accounting Session</h2>
      <UBadge color="primary" variant="subtle">January 2024</UBadge>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <UCard>
        <template #header>
          <h3 class="text-lg font-medium">Checklist</h3>
        </template>
        <div class="space-y-3">
          <div class="flex items-center gap-3">
            <UCheckbox v-model="checklist.monthClosed" />
            <span class="text-sm">Month closed & reviewed</span>
          </div>
          <div class="flex items-center gap-3">
            <UCheckbox v-model="checklist.contributionsLogged" />
            <span class="text-sm">Contributions logged</span>
          </div>
          <div class="flex items-center gap-3">
            <UCheckbox v-model="checklist.surplusCalculated" />
            <span class="text-sm">Surplus calculated</span>
          </div>
          <div class="flex items-center gap-3">
            <UCheckbox v-model="checklist.needsReviewed" />
            <span class="text-sm">Member needs reviewed</span>
          </div>
        </div>
      </UCard>

      <UCard>
        <template #header>
          <h3 class="text-lg font-medium">Available</h3>
        </template>
        <div class="space-y-3">
          <div class="flex justify-between text-sm">
            <span class="text-gray-600">Surplus</span>
            <span class="font-medium text-green-600">€1,200</span>
          </div>
          <div class="flex justify-between text-sm">
            <span class="text-gray-600">Deferred owed</span>
            <span class="font-medium text-orange-600">€800</span>
          </div>
          <div class="flex justify-between text-sm">
            <span class="text-gray-600">Savings target</span>
            <span class="font-medium text-blue-600">€2,000</span>
          </div>
        </div>
      </UCard>

      <UCard>
        <template #header>
          <h3 class="text-lg font-medium">Distribution</h3>
        </template>
        <div class="space-y-4">
          <div>
            <label class="block text-xs font-medium mb-1">Deferred Repay</label>
            <UInput v-model="distribution.deferred" type="number" size="sm" />
          </div>
          <div>
            <label class="block text-xs font-medium mb-1">Savings</label>
            <UInput v-model="distribution.savings" type="number" size="sm" />
          </div>
          <div>
            <label class="block text-xs font-medium mb-1">Training</label>
            <UInput v-model="distribution.training" type="number" size="sm" />
          </div>
          <div>
            <label class="block text-xs font-medium mb-1">Retained</label>
            <UInput v-model="distribution.retained" type="number" size="sm" readonly />
          </div>
        </div>
      </UCard>
    </div>

    <UCard>
      <template #header>
        <h3 class="text-lg font-medium">Decision Record</h3>
      </template>
      <div class="space-y-4">
        <UTextarea
          v-model="rationale"
          placeholder="Brief rationale for this month's distribution decisions..."
          rows="3"
        />
        <div class="flex justify-end gap-3">
          <UButton variant="ghost">
            Save Draft
          </UButton>
          <UButton color="primary" :disabled="!allChecklistComplete">
            Complete Session
          </UButton>
        </div>
      </div>
    </UCard>
  </section>
</template>

<script setup lang="ts">
const checklist = ref({
  monthClosed: false,
  contributionsLogged: false, 
  surplusCalculated: false,
  needsReviewed: false
})

const distribution = ref({
  deferred: 800,
  savings: 400,
  training: 0,
  retained: 0
})

const rationale = ref('')

const allChecklistComplete = computed(() => {
  return Object.values(checklist.value).every(Boolean)
})
</script>
