// src/stores/payment.js
import { defineStore } from 'pinia';

export const usePaymentStore = defineStore('payment', {
  state: () => ({
    currentStep: 1,
    patientInfo: {
      name: '',
      amount: '',
      expiry: '',
    },
    // Berikan default object instead of null
    qrData: {
      qrvalue: null,
      display_nobill: null,
      display_name: null,
      display_amount: null
    },
  }),
  
  getters: {
    // Tambahkan getter untuk safe access
    hasQrData: (state) => state.qrData && state.qrData.qrvalue,
    safeQrValue: (state) => state.qrData?.qrvalue || 'https://www.google.com'
  },
  
  actions: {
    nextStep() {
      this.currentStep++;
    },
    prevStep() {
      this.currentStep--;
    },
    reset() {
      this.currentStep = 1;
      this.patientInfo = {
        name: '',
        amount: '',
        expiry: '',
      };
      // Reset ke default object, bukan null
      this.qrData = {
        qrvalue: null,
        display_nobill: null,
        display_name: null,
        display_amount: null
      };
    },
    updatePayment(apiResponse) {
      console.log("API Response:", apiResponse);
      
      // Validasi response
      if (!apiResponse?.data || !Array.isArray(apiResponse.data) || apiResponse.data.length === 0) {
        console.error("Invalid API response structure");
        return;
      }
      
      const apiData = apiResponse.data[0];
      console.log("API Data:", apiData);

      // Update qrData dengan validasi
      this.qrData = {
        qrvalue: apiData.qrvalue || null,
        display_nobill: apiData.display_nobill || null,
        display_name: apiData.display_name || null,
        display_amount: apiData.display_amount || null,
        ...apiData // spread untuk properti lain yang mungkin ada
      };
      
      // Update patientInfo
      this.patientInfo = {
        name: apiData.display_name || 'Unknown',
        amount: apiData.display_amount || '0',
        expiry: this.patientInfo.expiry, // keep existing value
      };

      console.log("Updated qrData:", this.qrData);
      console.log("Updated patientInfo:", this.patientInfo);

      // Ganti step
      this.currentStep = 2;
    },
  },
});