<template>
  <div class="p-8">
    <h1 class="text-2xl font-bold mb-4">Simple Test Page</h1>

    <div class="space-y-4">
      <p>This is a simple test page to verify basic functionality.</p>

      <div class="p-4 bg-blue-50 border rounded">
        <p>
          Testing composable:
          {{ composableWorking ? "Working" : "Not working" }}
        </p>
        <p>Current balance: {{ currentBalance }}</p>
        <p>Transactions count: {{ transactionCount }}</p>
      </div>

      <div class="space-x-2">
        <button
          @click="setBalance"
          class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
          Set Balance to $50,000
        </button>
        <button
          @click="addSampleTransaction"
          class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">
          Add Sample Transaction
        </button>
      </div>

      <div
        v-if="errorMessage"
        class="p-4 bg-red-50 border border-red-200 rounded">
        <p class="text-red-700">Error: {{ errorMessage }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
const errorMessage = ref("");
const composableWorking = ref(false);
const currentBalance = ref(0);
const transactionCount = ref(0);

let cashFlow = null;

try {
  cashFlow = useCashFlow();
  composableWorking.value = true;

  // Watch for changes
  watchEffect(() => {
    if (cashFlow) {
      currentBalance.value = cashFlow.currentBalance.value;
      transactionCount.value = cashFlow.transactions.value.length;
    }
  });
} catch (error) {
  errorMessage.value = `Failed to initialize cashFlow: ${error.message}`;
  console.error("CashFlow error:", error);
}

const setBalance = () => {
  try {
    if (cashFlow) {
      cashFlow.setCurrentBalance(50000);
    }
  } catch (error) {
    errorMessage.value = `Failed to set balance: ${error.message}`;
  }
};

const addSampleTransaction = () => {
  try {
    if (cashFlow) {
      const sampleTransaction = {
        id: `sample-${Date.now()}`,
        date: new Date(),
        description: "Sample Transaction",
        amount: 1000,
        category: "Income",
        type: "one-time",
        probability: 1.0,
        isConfirmed: true,
      };

      cashFlow.updateTransactions([
        ...cashFlow.transactions.value,
        sampleTransaction,
      ]);
    }
  } catch (error) {
    errorMessage.value = `Failed to add transaction: ${error.message}`;
  }
};
</script>
