app/components/WizardPoliciesStep.vue

<template>
  <div class="space-y-6">
    <div>
      <h3 class="text-lg font-medium mb-4">Wage & Policies</h3>
      <p class="text-gray-600 mb-6">
        Set your equal hourly wage and key policies.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- Core Wage Settings -->
      <UCard title="Equal Wage">
        <div class="space-y-4">
          <UFormField label="Hourly Wage" required>
            <UInput
              v-model.number="wageModel"
              type="number"
              min="0"
              step="0.01"
              placeholder="25.00">
              <template #leading>
                <span class="text-gray-500">€</span>
              </template>
            </UInput>
          </UFormField>

          <UFormField
            label="On-costs %"
            hint="Employer taxes, benefits, payroll fees">
            <UInput
              v-model.number="oncostModel"
              type="number"
              min="0"
              max="100"
              placeholder="25">
              <template #trailing>
                <span class="text-gray-500">%</span>
              </template>
            </UInput>
          </UFormField>
        </div>
      </UCard>

      <!-- Cash Management -->
      <UCard title="Cash Management">
        <div class="space-y-4">
          <UFormField
            label="Savings Target"
            hint="Months of burn to keep as reserves">
            <UInput
              v-model.number="savingsMonthsModel"
              type="number"
              min="0"
              step="0.5"
              placeholder="3">
              <template #trailing>
                <span class="text-gray-500">months</span>
              </template>
            </UInput>
          </UFormField>

          <UFormField
            label="Minimum Cash Cushion"
            hint="Weekly floor we won't breach">
            <UInput
              v-model.number="minCushionModel"
              type="number"
              min="0"
              placeholder="3000">
              <template #leading>
                <span class="text-gray-500">€</span>
              </template>
            </UInput>
          </UFormField>
        </div>
      </UCard>

      <!-- Deferred Pay Policy -->
      <UCard title="Deferred Pay">
        <div class="space-y-4">
          <UFormField
            label="Quarterly Cap"
            hint="Max deferred hours per member per quarter">
            <UInput
              v-model.number="deferredCapModel"
              type="number"
              min="0"
              placeholder="240">
              <template #trailing>
                <span class="text-gray-500">hours</span>
              </template>
            </UInput>
          </UFormField>

          <UFormField
            label="Sunset Period"
            hint="Months after which deferred pay expires">
            <UInput
              v-model.number="deferredSunsetModel"
              type="number"
              min="0"
              placeholder="12">
              <template #trailing>
                <span class="text-gray-500">months</span>
              </template>
            </UInput>
          </UFormField>
        </div>
      </UCard>

      <!-- Volunteer Scope -->
      <UCard title="Volunteer Scope">
        <div class="space-y-4">
          <UFormField label="Allowed Flows" hint="What work can be done unpaid">
            <div class="space-y-2">
              <UCheckbox
                v-for="flow in availableFlows"
                :key="flow.value"
                :id="'volunteer-flow-' + flow.value"
                :name="flow.value"
                :value="flow.value"
                :checked="selectedVolunteerFlows.includes(flow.value)"
                :label="flow.label"
                @change="toggleFlow(flow.value, $event)" />
            </div>
          </UFormField>
        </div>
      </UCard>
    </div>

    <!-- Summary -->
    <div class="bg-gray-50 rounded-lg p-4">
      <h4 class="font-medium text-sm mb-2">Policy Summary</h4>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
        <div>
          <span class="text-gray-600">Hourly wage:</span>
          <span class="font-medium ml-1">€{{ wageModel || 0 }}</span>
        </div>
        <div>
          <span class="text-gray-600">On-costs:</span>
          <span class="font-medium ml-1">{{ oncostModel || 0 }}%</span>
        </div>
        <div>
          <span class="text-gray-600">Savings target:</span>
          <span class="font-medium ml-1"
            >{{ savingsMonthsModel || 0 }} months</span
          >
        </div>
        <div>
          <span class="text-gray-600">Cash cushion:</span>
          <span class="font-medium ml-1">€{{ minCushionModel || 0 }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useDebounceFn } from "@vueuse/core";
const emit = defineEmits<{
  "save-status": [status: "saving" | "saved" | "error"];
}>();

// Store
const policiesStore = usePoliciesStore();

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;
}

// Two-way computed models bound directly to the store
const wageModel = computed({
  get: () => unref(policiesStore.equalHourlyWage) as number,
  set: (val: number | string) =>
    policiesStore.setEqualWage(parseNumberInput(val)),
});
const oncostModel = computed({
  get: () => unref(policiesStore.payrollOncostPct) as number,
  set: (val: number | string) =>
    policiesStore.setOncostPct(parseNumberInput(val)),
});
const savingsMonthsModel = computed({
  get: () => unref(policiesStore.savingsTargetMonths) as number,
  set: (val: number | string) =>
    policiesStore.setSavingsTargetMonths(parseNumberInput(val)),
});
const minCushionModel = computed({
  get: () => unref(policiesStore.minCashCushionAmount) as number,
  set: (val: number | string) =>
    policiesStore.setMinCashCushion(parseNumberInput(val)),
});
const deferredCapModel = computed({
  get: () => unref(policiesStore.deferredCapHoursPerQtr) as number,
  set: (val: number | string) =>
    policiesStore.setDeferredCap(parseNumberInput(val)),
});
const deferredSunsetModel = computed({
  get: () => unref(policiesStore.deferredSunsetMonths) as number,
  set: (val: number | string) =>
    policiesStore.setDeferredSunset(parseNumberInput(val)),
});

// Remove old local sync and debounce saving; direct v-model handles persistence

// Volunteer flows
const availableFlows = [
  { label: "Care Work", value: "Care" },
  { label: "Shared Learning", value: "SharedLearning" },
  { label: "Community Building", value: "Community" },
  { label: "Outreach", value: "Outreach" },
];

const selectedVolunteerFlows = ref([
  ...policiesStore.volunteerScope.allowedFlows,
]);

// Minimal save-status feedback on changes
function notifySaved() {
  emit("save-status", "saved");
}

function toggleFlow(flowValue: string, event: any) {
  const checked = event.target ? event.target.checked : event;
  console.log(
    "toggleFlow called:",
    flowValue,
    checked,
    "current array:",
    selectedVolunteerFlows.value
  );

  if (checked) {
    if (!selectedVolunteerFlows.value.includes(flowValue)) {
      selectedVolunteerFlows.value.push(flowValue);
    }
  } else {
    const index = selectedVolunteerFlows.value.indexOf(flowValue);
    if (index > -1) {
      selectedVolunteerFlows.value.splice(index, 1);
    }
  }

  console.log("after toggle:", selectedVolunteerFlows.value);
  saveVolunteerScope();
}

function saveVolunteerScope() {
  emit("save-status", "saving");

  try {
    policiesStore.setVolunteerScope(selectedVolunteerFlows.value);
    emit("save-status", "saved");
  } catch (error) {
    console.error("Failed to save volunteer scope:", error);
    emit("save-status", "error");
  }
}
</script>