app/components/WizardPoliciesStep.vue

<template>
  <div class="max-w-4xl mx-auto space-y-6">
    <!-- Section Header with Export Controls -->
    <div class="flex items-center justify-between mb-8">
      <div>
        <h3 class="text-2xl font-black text-black mb-2">
          Set your wage & pay policy
        </h3>
        <p class="text-neutral-600">
          Choose how to allocate payroll among members and set the base hourly rate.
        </p>
      </div>
      <div class="flex items-center gap-3">
        <UButton
          variant="outline"
          color="gray"
          size="sm"
          @click="exportPolicies">
          <UIcon name="i-heroicons-arrow-down-tray" class="mr-1" />
          Export
        </UButton>
      </div>
    </div>

    <!-- Pay Policy Selection -->
    <div class="p-6 border-3 border-black rounded-xl bg-white shadow-md">
      <h4 class="font-bold mb-4">Pay Allocation Policy</h4>
      <div class="space-y-3">
        <label v-for="option in policyOptions" :key="option.value" class="flex items-start gap-3 cursor-pointer hover:bg-gray-50 p-2 rounded-lg transition-colors">
          <input
            type="radio"
            :value="option.value"
            v-model="selectedPolicy"
            @change="updatePolicy(option.value)"
            class="mt-1 w-4 h-4 text-black border-2 border-gray-300 focus:ring-2 focus:ring-black"
          />
          <span class="text-sm flex-1">{{ option.label }}</span>
        </label>
      </div>
      
      <!-- Role bands editor if role-banded is selected -->
      <div v-if="selectedPolicy === 'role-banded'" class="mt-4 p-4 bg-gray-50 rounded-lg">
        <h5 class="text-sm font-medium mb-3">Role Bands (monthly € or weight)</h5>
        <div class="space-y-2">
          <div v-for="member in uniqueRoles" :key="member.role" class="flex items-center gap-2">
            <span class="text-sm w-32">{{ member.role || 'No role' }}</span>
            <UInput
              v-model="roleBands[member.role || '']"
              type="text"
              placeholder="3000"
              size="sm"
              class="w-24"
              @update:model-value="updateRoleBands"
            />
          </div>
        </div>
      </div>
      
      <UAlert
        class="mt-4"
        color="primary"
        variant="soft"
        icon="i-heroicons-information-circle"
      >
        <template #description>
          Policies affect payroll allocation and member coverage. You can iterate later.
        </template>
      </UAlert>
    </div>
    
    <!-- Hourly Wage Input -->
    <div class="p-6 border-3 border-black rounded-xl bg-white shadow-md">
      <h4 class="font-bold mb-4">Base Hourly Wage</h4>
      <div class="max-w-md">
        <UInput
          v-model="wageText"
          type="text"
          placeholder="0.00"
          size="xl"
          class="text-4xl font-black w-full h-20"
          @update:model-value="validateAndSaveWage">
          <template #leading>
            <span class="text-neutral-500 text-3xl">€</span>
          </template>
        </UInput>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const emit = defineEmits<{
  "save-status": [status: "saving" | "saved" | "error"];
}>();

// Store
const coop = useCoopBuilder();
const store = useCoopBuilderStore();

// Initialize from store
const selectedPolicy = ref(coop.policy.value?.relationship || 'equal-pay')
const roleBands = ref(coop.policy.value?.roleBands || {})
const wageText = ref(String(store.equalHourlyWage || ''))

function parseNumberInput(val: unknown): number {
  if (typeof val === "number") return val;
  if (typeof val === "string") {
    const cleaned = val.replace(/,/g, ".").replace(/[^0-9.\-]/g, "");
    const parsed = parseFloat(cleaned);
    return Number.isFinite(parsed) ? parsed : 0;
  }
  return 0;
}

// Pay policy options
const policyOptions = [
  { value: 'equal-pay', label: 'Equal pay - Everyone gets the same monthly amount' },
  { value: 'needs-weighted', label: 'Needs-weighted - Allocate based on minimum needs' },
  { value: 'hours-weighted', label: 'Hours-weighted - Allocate based on hours worked' },
  { value: 'role-banded', label: 'Role-banded - Different amounts per role' }
]

// Already initialized above with store values

const uniqueRoles = computed(() => {
  const roles = new Set(coop.members.value.map(m => m.role || ''))
  return Array.from(roles).map(role => ({ role }))
})

function updatePolicy(value: string) {
  selectedPolicy.value = value
  coop.setPolicy(value as "equal-pay" | "needs-weighted" | "hours-weighted" | "role-banded")
  
  // Trigger payroll reallocation after policy change
  const allocatedMembers = coop.allocatePayroll()
  allocatedMembers.forEach(m => {
    coop.upsertMember(m)
  })
  
  emit("save-status", "saved");
}

function updateRoleBands() {
  coop.setRoleBands(roleBands.value)
  
  // Trigger payroll reallocation after role bands change
  if (selectedPolicy.value === 'role-banded') {
    const allocatedMembers = coop.allocatePayroll()
    allocatedMembers.forEach(m => {
      coop.upsertMember(m)
    })
  }
  
  emit("save-status", "saved");
}

// Text input for wage with validation (initialized above)

function validateAndSaveWage(value: string) {
  const cleanValue = value.replace(/[^\d.]/g, "");
  const numValue = parseFloat(cleanValue);

  wageText.value = cleanValue;

  if (!isNaN(numValue) && numValue >= 0) {
    coop.setEqualWage(numValue)
    
    // Trigger payroll reallocation after wage change
    const allocatedMembers = coop.allocatePayroll()
    allocatedMembers.forEach(m => {
      coop.upsertMember(m)
    })
    
    emit("save-status", "saved");
  }
}

function exportPolicies() {
  const exportData = {
    policies: {
      selectedPolicy: coop.policy.value?.relationship || selectedPolicy.value,
      roleBands: coop.policy.value?.roleBands || roleBands.value,
      equalHourlyWage: store.equalHourlyWage || parseFloat(wageText.value),
    },
    exportedAt: new Date().toISOString(),
    section: "policies",
  };

  const blob = new Blob([JSON.stringify(exportData, null, 2)], {
    type: "application/json",
  });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = `coop-policies-${new Date().toISOString().split("T")[0]}.json`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}
</script>