app/components/WizardCostsStep.vue

<template>
  <div class="space-y-6">
    <div>
      <h3 class="text-2xl font-black text-black mb-4">
        Where does your money go?
      </h3>
    </div>

    <!-- Overhead Costs -->
    <div class="space-y-4">
      <div
        v-if="overheadCosts.length > 0"
        class="flex items-center justify-between">
        <h4 class="text-lg font-bold text-black">Monthly Overhead</h4>
        <UButton
          size="sm"
          @click="addOverheadCost"
          variant="solid"
          color="success"
          :ui="{
            base: 'cursor-pointer hover:scale-105 transition-transform',
            leadingIcon: 'hover:rotate-90 transition-transform',
          }">
          <UIcon name="i-heroicons-plus" class="mr-1" />
          Add Cost
        </UButton>
      </div>

      <div
        v-if="overheadCosts.length === 0"
        class="text-center py-12 border-4 border-dashed border-black rounded-xl bg-white shadow-lg">
        <h4 class="font-medium text-neutral-900 mb-2">No overhead costs yet</h4>
        <p class="text-sm text-neutral-500 mb-4">
          Add costs like rent, tools, insurance, or other recurring expenses.
        </p>
        <UButton
          @click="addOverheadCost"
          size="lg"
          variant="solid"
          color="primary">
          <UIcon name="i-heroicons-plus" class="mr-2" />
          Add your first cost
        </UButton>
      </div>

      <div
        v-for="cost in overheadCosts"
        :key="cost.id"
        class="p-6 border-3 border-black rounded-xl bg-white shadow-md">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <UFormField label="Cost Name" required>
            <UInput
              v-model="cost.name"
              placeholder="Office rent"
              size="xl"
              class="text-lg font-medium w-full"
              @update:model-value="saveCost(cost)"
              @blur="saveCost(cost)" />
          </UFormField>

          <UFormField label="Monthly Amount" required>
            <UInput
              v-model="cost.amount"
              type="text"
              placeholder="800.00"
              size="xl"
              class="text-lg font-bold w-full"
              @update:model-value="validateAndSaveAmount($event, cost)"
              @blur="saveCost(cost)">
              <template #leading>
                <span class="text-neutral-500">€</span>
              </template>
            </UInput>
          </UFormField>

          <UFormField label="Category">
            <USelect
              v-model="cost.category"
              :items="categoryOptions"
              size="xl"
              class="text-lg font-medium w-full"
              @update:model-value="saveCost(cost)" />
          </UFormField>
        </div>

        <div class="flex justify-end mt-6 pt-6 border-t-3 border-black">
          <UButton
            size="xs"
            variant="solid"
            color="error"
            @click="removeCost(cost.id)"
            :ui="{
              base: 'cursor-pointer hover:opacity-90 transition-opacity',
            }">
            <UIcon name="i-heroicons-trash" class="w-4 h-4" />
          </UButton>
        </div>
      </div>

      <!-- Add Cost Button (when items exist) -->
      <div v-if="overheadCosts.length > 0" class="flex justify-center">
        <UButton
          @click="addOverheadCost"
          size="lg"
          variant="solid"
          color="success"
          :ui="{
            base: 'cursor-pointer hover:scale-105 transition-transform',
            leadingIcon: 'hover:rotate-90 transition-transform',
          }">
          <UIcon name="i-heroicons-plus" class="mr-2" />
          Add another cost
        </UButton>
      </div>
    </div>
  </div>
</template>

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

// Store
const budgetStore = useBudgetStore();
const { overheadCosts } = storeToRefs(budgetStore);

// Category options
const categoryOptions = [
  { label: "Operations", value: "Operations" },
  { label: "Tools & Software", value: "Tools" },
  { label: "Professional Services", value: "Professional" },
  { label: "Marketing", value: "Marketing" },
  { label: "Other", value: "Other" },
];

// Computeds
const totalMonthlyCosts = computed(() =>
  overheadCosts.value.reduce((sum, cost) => sum + (cost.amount || 0), 0)
);

const largestCost = computed(() => {
  if (overheadCosts.value.length === 0) return 0;
  return Math.max(...overheadCosts.value.map((c) => c.amount || 0));
});

const avgCostPerItem = computed(() => {
  if (overheadCosts.value.length === 0) return 0;
  return Math.round(totalMonthlyCosts.value / overheadCosts.value.length);
});

// Live-write with debounce
const debouncedSave = useDebounceFn((cost: any) => {
  emit("save-status", "saving");

  try {
    // Find and update existing cost
    const existingCost = overheadCosts.value.find((c) => c.id === cost.id);
    if (existingCost) {
      // Store will handle reactivity through the ref
      Object.assign(existingCost, cost);
    }

    emit("save-status", "saved");
  } catch (error) {
    console.error("Failed to save cost:", error);
    emit("save-status", "error");
  }
}, 300);

function saveCost(cost: any) {
  if (cost.name && cost.amount >= 0) {
    debouncedSave(cost);
  }
}

// Validation function for amount
function validateAndSaveAmount(value: string, cost: any) {
  const numValue = parseFloat(value.replace(/[^\d.]/g, ""));
  cost.amount = isNaN(numValue) ? 0 : Math.max(0, numValue);
  saveCost(cost);
}

function addOverheadCost() {
  const newCost = {
    id: Date.now().toString(),
    name: "",
    amount: 0,
    category: "Operations",
    recurring: true,
  };

  budgetStore.addOverheadLine({
    name: newCost.name,
    amountMonthly: newCost.amount,
    category: newCost.category,
  });
}

function removeCost(id: string) {
  budgetStore.removeOverheadLine(id);
}
</script>