<!-- src/pages/authorize/PaymentForm.vue -->
<template>
  <div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4">HVAC Payment</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <div>
        <h2 class="text-xl font-semibold mb-2">Direct Charge</h2>
        <form @submit.prevent="submitDirectCharge">
          <div class="form-control">
            <label class="label">
              <span class="label-text">Card Number</span>
            </label>
            <input type="text" v-model="directCharge.cardNumber" class="input input-bordered" required />
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text">Expiration Date (MM/YY)</span>
            </label>
            <input type="text" v-model="directCharge.expirationDate" class="input input-bordered" required />
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text">CVV</span>
            </label>
            <input type="text" v-model="directCharge.cvv" class="input input-bordered" required />
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text">Amount</span>
            </label>
            <input type="number" v-model="directCharge.amount" class="input input-bordered" required />
          </div>
          <div class="form-control mt-6">
            <button type="submit" class="btn btn-primary">Charge</button>
          </div>
        </form>
      </div>

      <div>
        <h2 class="text-xl font-semibold mb-2">Authorize and Capture</h2>
        <form @submit.prevent="submitAuthorization">
          <div class="form-control">
            <label class="label">
              <span class="label-text">Card Number</span>
            </label>
            <input type="text" v-model="authorization.cardNumber" class="input input-bordered" required />
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text">Expiration Date (MM/YY)</span>
            </label>
            <input type="text" v-model="authorization.expirationDate" class="input input-bordered" required />
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text">CVV</span>
            </label>
            <input type="text" v-model="authorization.cvv" class="input input-bordered" required />
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text">Amount</span>
            </label>
            <input type="number" v-model="authorization.amount" class="input input-bordered" required />
          </div>
          <div class="form-control mt-6">
            <button type="submit" class="btn btn-secondary">Authorize</button>
          </div>
        </form>

        <div v-if="authorizedTransactionId" class="mt-8">
          <h3 class="text-lg font-semibold mb-2">Capture Authorized Amount</h3>
          <p>Authorized Transaction ID: {{ authorizedTransactionId }}</p>
          <form @submit.prevent="submitCapture">
            <div class="form-control">
              <label class="label">
                <span class="label-text">Capture Amount</span>
              </label>
              <input type="number" v-model="capture.amount" class="input input-bordered" required />
            </div>
            <div class="form-control mt-6">
              <button type="submit" class="btn btn-accent">Capture</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div v-if="transactionResult" class="mt-8 p-4 rounded-lg" :class="transactionResult.status === 0 || transactionResult.status === 1 || transactionResult.status === 2 ? 'bg-green-200' : 'bg-red-200'">
      <h3 class="font-bold">Transaction Result</h3>
      <p>Status: {{ transactionResult.status }}</p>
      <p v-if="transactionResult.transaction_id">Transaction ID: {{ transactionResult.transaction_id }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'
import { AuthorizeTransaction } from '../../types/models'

const API_URL = 'http://localhost:8000/api'; // Your FastAPI backend URL

// Reactive data
const directCharge = ref({
  cardNumber: '',
  expirationDate: '',
  cvv: '',
  amount: 0,
})

const authorization = ref({
  cardNumber: '',
  expirationDate: '',
  cvv: '',
  amount: 0,
})

const capture = ref({
  amount: 0,
})

const authorizedTransactionId = ref<string | null>(null)
const transactionResult = ref<AuthorizeTransaction | null>(null)
const customerId = ref(1) // Assuming a customer with ID 1 exists for this example

// Functions
const submitDirectCharge = async () => {
  try {
    const response = await axios.post(`${API_URL}/charge/?customer_id=${customerId.value}`, {
      card_number: directCharge.value.cardNumber,
      expiration_date: directCharge.value.expirationDate,
      cvv: directCharge.value.cvv,
      amount: directCharge.value.amount,
      transaction_type: 'charge'
    });
    transactionResult.value = response.data;
  } catch (error) {
    console.error(error);
    transactionResult.value = null;
  }
}

const submitAuthorization = async () => {
  try {
    const response = await axios.post(`${API_URL}/authorize/?customer_id=${customerId.value}`, {
      card_number: authorization.value.cardNumber,
      expiration_date: authorization.value.expirationDate,
      cvv: authorization.value.cvv,
      amount: authorization.value.amount,
      transaction_type: 'auth'
    });
    transactionResult.value = response.data;
    if (response.data.status === 'authorized') {
      authorizedTransactionId.value = response.data.auth_net_transaction_id;
      capture.value.amount = authorization.value.amount; // Pre-fill capture amount
    }
  } catch (error) {
    console.error(error);
    transactionResult.value = null;
  }
}

const submitCapture = async () => {
  try {
    const response = await axios.post(`${API_URL}/capture/`, {
      amount: capture.value.amount,
      auth_net_transaction_id: authorizedTransactionId.value
    });
    transactionResult.value = response.data;
  } catch (error) {
    console.error(error);
    transactionResult.value = null;
  }
}
</script>
