<template>
  <section class="py-8 space-y-6">
    <div class="flex items-center justify-between">
      <h2 class="text-2xl font-semibold">Policies & Privacy</h2>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <UCard>
        <template #header>
          <h3 class="text-lg font-medium">Wage & Costs</h3>
        </template>
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium mb-2">Equal Hourly Wage</label>
            <UInput
              v-model="policies.hourlyWage"
              type="number"
              :ui="{ wrapper: 'relative' }"
            >
              <template #leading>
                <span class="text-gray-500">€</span>
              </template>
            </UInput>
          </div>
          <div>
            <label class="block text-sm font-medium mb-2">Payroll On-costs (%)</label>
            <UInput
              v-model="policies.payrollOncost"
              type="number"
              :ui="{ wrapper: 'relative' }"
            >
              <template #trailing>
                <span class="text-gray-500">%</span>
              </template>
            </UInput>
          </div>
        </div>
      </UCard>

      <UCard>
        <template #header>
          <h3 class="text-lg font-medium">Cash Management</h3>
        </template>
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium mb-2">Savings Target (months)</label>
            <UInput
              v-model="policies.savingsTargetMonths"
              type="number"
              step="0.1"
            />
          </div>
          <div>
            <label class="block text-sm font-medium mb-2">Minimum Cash Cushion</label>
            <UInput
              v-model="policies.minCashCushion"
              type="number"
              :ui="{ wrapper: 'relative' }"
            >
              <template #leading>
                <span class="text-gray-500">€</span>
              </template>
            </UInput>
          </div>
        </div>
      </UCard>

      <UCard>
        <template #header>
          <h3 class="text-lg font-medium">Deferred Pay Limits</h3>
        </template>
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium mb-2">Cap (hours per quarter)</label>
            <UInput
              v-model="policies.deferredCapHours"
              type="number"
            />
          </div>
          <div>
            <label class="block text-sm font-medium mb-2">Sunset (months)</label>
            <UInput
              v-model="policies.deferredSunsetMonths"
              type="number"
            />
          </div>
        </div>
      </UCard>

      <UCard>
        <template #header>
          <h3 class="text-lg font-medium">Distribution Order</h3>
        </template>
        <div class="space-y-4">
          <p class="text-sm text-gray-600">
            Order of surplus distribution priorities.
          </p>
          <div class="space-y-2">
            <div v-for="(item, index) in distributionOrder" :key="item" 
                 class="flex items-center justify-between p-2 bg-gray-50 rounded">
              <span class="text-sm font-medium">{{ index + 1 }}. {{ item }}</span>
              <div class="flex gap-1">
                <UButton size="xs" variant="ghost" icon="i-heroicons-chevron-up" />
                <UButton size="xs" variant="ghost" icon="i-heroicons-chevron-down" />
              </div>
            </div>
          </div>
        </div>
      </UCard>
    </div>

    <div class="flex justify-end">
      <UButton color="primary">
        Save Policies
      </UButton>
    </div>
  </section>
</template>

<script setup lang="ts">
const policies = ref({
  hourlyWage: 20,
  payrollOncost: 25,
  savingsTargetMonths: 3,
  minCashCushion: 3000,
  deferredCapHours: 240,
  deferredSunsetMonths: 12
})

const distributionOrder = ref([
  'Deferred',
  'Savings', 
  'Hardship',
  'Training',
  'Patronage',
  'Retained'
])
</script>
