<!-- src/pages/pay/oil/pay_oil.vue -->
<template>
  <div class="flex">
 
    <div class="w-full px-4 md:px-10 py-4">
      <!-- Breadcrumbs & Title -->
      <div class="text-sm breadcrumbs">
        <ul>
          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
          <!-- Add a link to the customer's profile if the data is available -->
          <li v-if="customer && customer.id">
            <router-link :to="{ name: 'customerProfile', params: { id: customer.id } }">
              {{ customer.customer_first_name }} {{ customer.customer_last_name }}
            </router-link>
          </li>
          <li>Confirm Payment</li>
        </ul>
      </div>
      <h1 class="text-3xl font-bold mt-4 border-b border-gray-600 pb-2">
        Confirm Delivery #{{ delivery.id }}
      </h1>

      <!-- Main Content Grid -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 my-6">
        
        <!-- LEFT COLUMN: Customer and Delivery Details -->
        <div class="space-y-6">
          
          <!-- Customer Info Card -->
          <div class="bg-neutral rounded-lg p-5">
            <div class="flex justify-between items-center mb-4">
              <div>
                <div class="text-xl font-bold">{{ customer.customer_first_name }} {{ customer.customer_last_name }}</div>
                <div class="text-sm text-gray-400">Account: {{ customer.account_number }}</div>
              </div>
              <router-link v-if="customer && customer.id" :to="{ name: 'customerProfile', params: { id: customer.id } }" class="btn btn-secondary btn-sm">
                View Profile
              </router-link>
            </div>
            <div class="space-y-1">
              <div>{{ customer.customer_address }}</div>
              <div v-if="customer.customer_apt && customer.customer_apt !== 'None'">Apt: {{ customer.customer_apt }}</div>
              <div>{{ customer.customer_town }}, {{ customer.customer_state === 0 ? 'MA' : 'RI' }} {{ customer.customer_zip }}</div>
              <div class="mt-2">{{ customer.customer_phone_number }}</div>
            </div>
          </div>

          <!-- Delivery Details Card -->
          <div class="bg-neutral rounded-lg p-5">
            <h3 class="text-xl font-bold mb-4">Delivery Details</h3>
            <div class="space-y-3">
              <div>
                <div class="font-bold text-sm">Current Status</div>
                <div class="badge" :class="{ 'badge-info': delivery.delivery_status === 0, 'badge-success': delivery.delivery_status === 1, 'badge-warning': delivery.delivery_status > 1 }">
                  <span v-if="delivery.delivery_status == 0">Waiting</span>
                  <span v-else-if="delivery.delivery_status == 1">Delivered</span>
                  <span v-else-if="delivery.delivery_status == 2">Out_for_Delivery</span>
                  <span v-else-if="delivery.delivery_status == 3">Tomorrow_Delivery</span>
                  <span v-else-if="delivery.delivery_status == 4">Partial Delivery</span>
                  <span v-else-if="delivery.delivery_status == 5">Issue</span>
                  <span v-else-if="delivery.delivery_status == 9">Pending</span>
                  <span v-else-if="delivery.delivery_status == 10">Finalized</span>
                  <span v-else>Pending</span>
                </div>
              </div>
              <div>
                <div class="font-bold text-sm">Scheduled Date</div>
                <div>{{ delivery.expected_delivery_date }}</div>
              </div>
              <div>
                <div class="font-bold text-sm">Gallons Ordered</div>
                <div>
                  <span v-if="delivery.customer_asked_for_fill == 1" class="badge badge-info">FILL (250 gal estimate)</span>
                  <span v-else>{{ delivery.gallons_ordered }} Gallons</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- RIGHT COLUMN: Payment and Pricing Details -->
        <div class="space-y-6">
          <!-- Authorize.net Account Status Box -->
          <div v-if="customer.id" class="bg-base-100 rounded-lg p-4 border">
            <div class="flex flex-col xl:flex-row xl:items-center xl:justify-between gap-3">
              <div class="flex items-center gap-3 min-w-0 flex-1">
                <svg class="w-5 h-5 text-blue-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v4a3 3 0 003 3z"/>
                </svg>
                <span v-if="isLoadingAuthorize" class="text-sm font-medium">
                  <span class="loading loading-dots loading-xs mr-2"></span>
                  Loading...
                </span>
                <span v-else-if="authorizeCheck.valid_for_charging" class="text-sm font-medium">
                  Authorize Account ID: {{ customer.auth_net_profile_id }}
                </span>
                <span v-else class="text-sm font-medium text-red-600">
                  {{ getAccountStatusMessage() }}
                </span>
              </div>
              <div class="flex gap-2 flex-shrink-0" v-if="!isLoadingAuthorize">
                <!-- CREATE ACCOUNT SECTION - Only show when account doesn't exist -->
                <div v-if="!authorizeCheck.valid_for_charging" class="flex gap-2">
                  <button
                    v-if="credit_cards_count === 0"
                    @click="addCreditCard"
                    class="btn btn-primary btn-sm"
                  >
                    Add Card
                  </button>
                  <button
                    @click="createAuthorizeAccount"
                    :class="['btn btn-sm', credit_cards_count === 0 ? 'btn-disabled' : 'btn-primary']"
                    :disabled="credit_cards_count === 0"
                    v-if="credit_cards_count > 0"
                  >
                    Create Account
                  </button>
                  <button
                    v-else
                    @click="addCreditCard"
                    class="btn btn-secondary btn-sm"
                  >
                    Add Card First
                  </button>
                </div>

                <!-- DELETE ACCOUNT SECTION - Only show when account exists -->
                <div v-if="authorizeCheck.valid_for_charging" class="flex gap-2">
                  <button
                    @click="showDeleteAccountModal"
                    class="btn btn-error btn-sm"
                  >
                    Delete Account
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- Payment & Pricing Card -->
          <div class="bg-neutral rounded-lg p-5">
            <h3 class="text-xl font-bold mb-4">Payment & Pricing</h3>
            <div class="space-y-4">
              <!-- Payment Method -->
              <div>
                <div class="font-bold text-sm">Payment Method</div>
                <div class="text-lg">
                  <span v-if="delivery.payment_type == 0">Cash</span>
                  <span v-else-if="delivery.payment_type == 1">Credit Card</span>
                  <span v-else-if="delivery.payment_type == 2">Credit Card / Cash</span>
                  <span v-else-if="delivery.payment_type == 3">Check</span>
                  <span v-else-if="delivery.payment_type == 4">Other</span>
                </div>
                <!-- Show the selected card if payment is by credit -->
                <div v-if="delivery.payment_type == 1 || delivery.payment_type == 3" class="mt-2">
                  <div v-for="card in credit_cards" :key="card.id">
                    <div v-if="card.id === delivery.payment_card_id" class="bg-base-100 p-4 rounded-lg border">
                      <div class="flex justify-between items-center mb-2">
                        <div class="font-semibold">{{ card.type_of_card }}</div>
                        <div v-if="card.main_card" class="badge badge-primary">Primary</div>
                      </div>
                      <div class="mt-3 text-sm font-mono tracking-wider">
                        <p>{{ card.card_number }}</p>
                        <p>{{ card.name_on_card }}</p>
                        <p>
                          Exp:
                          <span v-if="Number(card.expiration_month) < 10">0</span>{{ card.expiration_month }} / {{ card.expiration_year }}
                        </p>
                        <p>CVV: {{ card.security_number }}</p>
                      </div>

                      <div class="divider my-2"></div>

                      <div class="flex justify-end gap-2">
                        <router-link :to="{ name: 'cardedit', params: { id: card.id }}" class="link link-hover text-xs">Edit</router-link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- Pricing Breakdown -->
              <div class="space-y-2 pt-2">
                <div class="flex justify-between text-sm">
                  <span>Price per Gallon</span>
                  <span>${{ delivery.customer_price }}</span>
                </div>
                <div class="flex justify-between text-sm">
                  <span>Gallons Ordered</span>
                  <span>
                    <span v-if="delivery.customer_asked_for_fill == 1" class="badge badge-info">FILL (250 gal estimate)</span>
                    <span v-else>{{ delivery.gallons_ordered }} Gallons</span>
                  </span>
                </div>
                <div v-if="delivery.prime == 1" class="flex justify-between text-sm">
                  <span>Prime Fee (Tier {{ delivery.pricing_tier_prime || 1 }})</span>
                  <span>+ ${{ Number(getTierPrice('prime', delivery.pricing_tier_prime)).toFixed(2) }}</span>
                </div>
                <div v-if="delivery.emergency == 1" class="flex justify-between text-sm">
                  <span>Emergency Fee (Tier {{ delivery.pricing_tier_emergency || 1 }})</span>
                  <span>+ ${{ Number(getTierPrice('emergency', delivery.pricing_tier_emergency)).toFixed(2) }}</span>
                </div>
                <div v-if="delivery.same_day == 1" class="flex justify-between text-sm">
                  <span>Same Day Fee (Tier {{ delivery.pricing_tier_same_day || 1 }})</span>
                  <span>+ ${{ Number(getTierPrice('same_day', delivery.pricing_tier_same_day)).toFixed(2) }}</span>
                </div>
                <div v-if="promo_active" class="flex justify-between text-sm text-success">
                  <span>Promo: {{ promo.name_of_promotion }}</span>
                  <span>- ${{ discount }}</span>
                </div>

                <div class="divider my-1"></div>

                <div class="flex justify-between items-center">
                  <span class="text-lg font-bold">Total to be Charged</span>
                  <span class="text-2xl font-bold text-accent">
                    ${{ calculateTotalAmount() }}
                  </span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- Actions Card -->
          <div class="bg-neutral rounded-lg p-5">
             <div class="flex flex-wrap gap-4 justify-between items-center">
                <!-- Pay Authorize Button - hidden when payment_type is 0 (Cash) -->
                <button v-if="delivery.payment_type !== 0" class="btn btn-success" :class="{ 'btn-disabled': !authorizeCheck.valid_for_charging }" :disabled="!authorizeCheck.valid_for_charging" @click="$router.push({ name: 'authorizePreauthCharge', params: { id: $route.params.id } })">
                  Pay Authorize.net
                </button>
                <!-- Pay Tiger Button - hidden when payment_type is 0 (Cash) -->
                <button v-if="delivery.payment_type !== 0" class="btn btn-warning" @click="checkoutOilUpdatePayment(1)">
                  Pay Tiger
                </button>
                <!-- Pay Cash Button - shown only when payment_type is 0 (Cash) -->
                <button v-if="delivery.payment_type === 0" class="btn btn-success" @click="$router.push({ name: 'deliveryOrder', params: { id: $route.params.id } })">
                  Pay Cash
                </button>
                <router-link v-if="delivery && delivery.id" :to="{ name: 'deliveryEdit', params: { id: delivery.id } }">
                  <button class="btn btn-sm btn-primary">Edit Delivery</button>
                </router-link>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>

  <!-- Delete Account Confirmation Modal -->
  <div class="modal" :class="{ 'modal-open': isDeleteAccountModalVisible }">
    <div class="modal-box">
      <h3 class="font-bold text-lg">Confirm Account Deletion</h3>
      <p class="py-4">This will permanently delete the Authorize.net account and remove all payment profiles. This action cannot be undone.</p>
      <div class="modal-action">
        <button @click="deleteAccount" class="btn btn-error">Delete Account</button>
        <button @click="isDeleteAccountModalVisible = false" class="btn">Cancel</button>
      </div>
    </div>
  </div>

  <!-- Create Account Progress Modal -->
  <div class="modal" :class="{ 'modal-open': isCreateAccountModalVisible }">
    <div class="modal-box">
      <h3 class="font-bold text-lg">Creating Authorize.net Account</h3>
      <div class="py-4 flex flex-col items-center">
        <div v-if="isCreatingAccount" class="text-center">
          <span class="text-lg mb-3">Setting up your payment account...</span>
          <div class="loading loading-spinner loading-lg text-primary mb-3"></div>
          <p class="text-sm text-gray-600">Please wait while we create your Authorize.net customer profile.</p>
        </div>
        <div v-else class="text-center">
          <div class="text-success mb-3">
            <svg class="w-12 h-12 mx-auto mb-2" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
            </svg>
          </div>
          <p class="text-lg font-semibold mb-2">Account Created Successfully!</p>
          <div class="bg-base-200 p-3 rounded-lg mb-4">
            <p class="text-sm mb-1">Authorize.net Profile ID:</p>
            <p class="font-mono font-bold text-success">{{ createdProfileId }}</p>
          </div>
          <p class="text-sm text-gray-600">Your payment account is now ready for transactions.</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Duplicate Account Error Modal -->
  <div class="modal" :class="{ 'modal-open': isDuplicateErrorModalVisible }">
    <div class="modal-box">
      <h3 class="font-bold text-lg text-error">⚠️ Duplicate Account Detected</h3>
      <div class="py-4 space-y-4">
        <div class="text-center">
          <svg class="w-16 h-16 mx-auto mb-4 text-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"/>
          </svg>
          <p class="text-lg font-semibold">Duplicate Account in Authorize.net</p>
          <p class="text-sm text-gray-600 mt-2">
            A duplicate account was found in your Authorize.net merchant account.
          </p>
          <p class="text-sm text-gray-600 mt-2">
            Customer ID: <strong>{{ customer.id }}</strong>
          </p>
        </div>

        <div class="bg-base-200 p-4 rounded-lg">
          <h4 class="font-semibold mb-2 text-warning">Action Required:</h4>
          <ul class="list-disc list-inside text-sm space-y-1">
            <li>Manually check your Authorize.net merchant dashboard</li>
            <li>Review existing customer profiles</li>
            <li>Contact support for linkage if needed</li>
          </ul>
          <p class="text-xs text-gray-500 mt-2">
            Inconsistency between your system and Authorize.net detected.
          </p>
        </div>

        <div class="text-center pt-2">
          <p class="text-xs text-gray-500">
            This profile may have been created previously and needs manual linking.
          </p>
        </div>
      </div>
      <div class="modal-action">
        <button class="btn btn-primary" @click="hideDuplicateErrorModal()">
          Acknowledge
        </button>
      </div>
    </div>
  </div>

  
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'
import authHeader from '../../../services/auth.header'
import Header from '../../../layouts/headers/headerauth.vue'
import SideBar from '../../../layouts/sidebar/sidebar.vue'
import type {
  AxiosResponse,
  DeliveryFormData,
  CustomerFormData,
  CreditCardFormData,
  PricingData,
  PromoData,
  DeliveryOrderResponse,
  DeliveryTotalResponse,
  OilPricingResponse,
  PromoResponse,
  WhoAmIResponse,
  AuthorizeCheckResponse,
  CreateAuthorizeAccountResponse,
  CardsOnFileResponse,
  UpdateStatusResponse
} from '../../../types/models'

import { useVuelidate } from "@vuelidate/core";
import { notify } from "@kyvg/vue3-notification"
import { minLength, required } from "@vuelidate/validators";

const route = useRoute()
const router = useRouter()

// Reactive data
const loaded = ref(false)
const user = ref({
  user_id: 0,
})
const delivery = ref<DeliveryFormData>({
  id: 0,
  customer_id: 0,
  customer_name: '',
  customer_address: '',
  customer_town: '',
  customer_state: 0,
  customer_zip: '',
  gallons_ordered: 0,
  customer_asked_for_fill: 0,
  gallons_delivered: 0,
  customer_filled: 0,
  delivery_status: 0,
  when_ordered: '',
  when_delivered: '',
  expected_delivery_date: '',
  automatic: 0,
  oil_id: 0,
  supplier_price: 0,
  customer_price: 0,
  customer_temperature: 0,
  dispatcher_notes: '',
  prime: 0,
  promo_id: 0,
  emergency: 0,
  same_day: 0,
  payment_type: 0,
  payment_card_id: 0,
  driver_employee_id: 0,
  driver_first_name: '',
  driver_last_name: '',
  pre_charge_amount: 0,
  total_price: 0,
})
const credit_cards = ref<CreditCardFormData[]>([
  {
    id: 0,
    name_on_card: '',
    main_card: false,
    card_number: '',
    expiration_month: '',
    type_of_card: '',
    last_four_digits: '',
    expiration_year: '',
    security_number: '',
  }
])

const stripe = ref(null)
const customer = ref<CustomerFormData>({
  id: 0,
  user_id: 0,
  customer_first_name: '',
  customer_last_name: '',
  customer_town: '',
  customer_address: '',
  customer_state: 0,
  customer_zip: '',
  customer_apt: '',
  customer_home_type: 0,
  customer_phone_number: '',
  account_number: '',
  auth_net_profile_id: null,
})
const pricing = ref<PricingData>({
  price_from_supplier: 0,
  price_for_customer: 0,
  price_for_employee: 0,
  price_same_day: 0,
  price_prime: 0,
  price_emergency: 0,
  date: "",
})
const promo_active = ref(false)
const promo = ref<PromoData>({
  name_of_promotion: '',
  description: '',
  money_off_delivery: 0,
  text_on_ticket: ''
})
const priceprime = ref(0)
const pricesameday = ref(0)
const priceemergency = ref(0)
const total_amount = ref(0)
const discount = ref(0)
const total_amount_after_discount = ref(0)
const credit_cards_count = ref(0)
const isLoadingAuthorize = ref(true)
const authorizeCheck = ref({ profile_exists: false, has_payment_methods: false, missing_components: [] as string[], valid_for_charging: false })
const isDeleteAccountModalVisible = ref(false)
const isCreateAccountModalVisible = ref(false)
const isCreatingAccount = ref(false)
const createdProfileId = ref('')
const isDuplicateErrorModalVisible = ref(false)

// Validations
const validations = {
  CreateOilOrderForm: {
    basicInfo: {
      gallons_ordered: { required, minLength: minLength(1) },
      expected_delivery_date: { required },
    },
  },
}

const v$ = useVuelidate(validations)

// Lifecycle
onMounted(() => {
  userStatus()
  getOilOrder(route.params.id)
  sumdelivery(route.params.id);
  getOilPricing()
  updatestatus();
})

// Functions
const updatestatus = () => {
  let path = import.meta.env.VITE_BASE_URL + '/delivery/updatestatus';
  axios({
    method: 'get',
    url: path,
    headers: authHeader(),
  }).then((response: AxiosResponse<UpdateStatusResponse>) => {
    if (response.data.update)
      console.log("Updated Status of Deliveries")
  })
}

const sumdelivery = (delivery_id: number | string) => {
  let path = import.meta.env.VITE_BASE_URL + "/delivery/total/" + delivery_id;
  axios({
    method: "get",
    url: path,
    withCredentials: true,
  })
    .then((response: AxiosResponse<DeliveryTotalResponse>) => {
      if (response.data.ok) {
        priceprime.value = response.data.priceprime;
        pricesameday.value = response.data.pricesameday;
        priceemergency.value = response.data.priceemergency;
        total_amount.value = response.data.total_amount;
        discount.value = response.data.discount;
        total_amount_after_discount.value = response.data.total_amount_after_discount;
      }
    })
    .catch(() => {
      notify({
        title: "Error",
        text: "Could not get oil pricing 1",
        type: "error",
      });
    });
}

const getPromo = (promo_id: number) => {
  let path = import.meta.env.VITE_BASE_URL + "/promo/" + promo_id;
  axios({
    method: "get",
    url: path,
    withCredentials: true,
    headers: authHeader(),
  })
    .then((response: AxiosResponse<PromoResponse>) => {
      if (response.data) {
        promo.value = response.data
      }
    })
}

const userStatus = () => {
  let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
  axios({
    method: 'get',
    url: path,
    withCredentials: true,
    headers: authHeader(),
  })
    .then((response: AxiosResponse<WhoAmIResponse>) => {
      if (response.data.ok) {
        user.value = response.data.user;
      }
    })
}

const getOilPricing = () => {
  let path = import.meta.env.VITE_BASE_URL + "/info/price/oil/table";
  axios({
    method: "get",
    url: path,
    withCredentials: true,
  })
    .then((response: AxiosResponse<{ ok?: boolean; pricing?: OilPricingResponse }>) => {
      pricing.value = response.data?.pricing || (response.data as unknown as PricingData);
    })
    .catch(() => {
      notify({
        title: "Error",
        text: "Could not get oil pricing 2",
        type: "error",
      });
    });
}

const getOilOrder = (delivery_id: number | string) => {
  let path = import.meta.env.VITE_BASE_URL + "/delivery/order/" + delivery_id;
  axios({
    method: "get",
    url: path,
    withCredentials: true,
  })
    .then((response: AxiosResponse<DeliveryOrderResponse>) => {
      console.log("=== DEBUG: API Response:", response.data);
      if (response.data && response.data.ok) {
        console.log("=== DEBUG: Delivery data from API:", response.data.delivery);
        console.log("=== DEBUG: Delivery ID from API:", response.data.delivery?.id);
        delivery.value = response.data.delivery as unknown as DeliveryFormData;
        console.log("=== DEBUG: Delivery object after assignment:", delivery.value);
        console.log("=== DEBUG: Delivery ID after assignment:", delivery.value.id);
        getCustomer(delivery.value.customer_id)
        getCreditCards(delivery.value.customer_id)
        getCreditCardsCount(delivery.value.customer_id)
        if (delivery.value.promo_id != null) {
            getPromo(delivery.value.promo_id);
            promo_active.value = true;
          }
      } else {
        console.error("API Error:", response.data.error || "Failed to fetch delivery data.");
      }
    })
    .catch((error: Error) => {
      console.error("=== DEBUG: API Error in getOilOrder:", error);
      notify({
        title: "Error",
        text: "Could not get delivery",
        type: "error",
      });
    });
}

const getCreditCards = (user_id: number) => {
  let path = import.meta.env.VITE_BASE_URL + '/payment/cards/' + user_id;
  axios({
    method: 'get',
    url: path,
    headers: authHeader(),
  }).then((response: AxiosResponse<CreditCardFormData[]>) => {
    credit_cards.value = response.data
  })
}

const getCreditCardsCount = (user_id: number) => {
  let path = import.meta.env.VITE_BASE_URL + '/payment/cards/onfile/' + user_id;
  axios({
    method: 'get',
    url: path,
    headers: authHeader(),
  }).then((response: AxiosResponse<CardsOnFileResponse>) => {
    credit_cards_count.value = response.data.cards
  })
}

const getCustomer = (userid: number) => {
  let path = import.meta.env.VITE_BASE_URL + '/customer/' + userid;
  axios({
    method: 'get',
    url: path,
    headers: authHeader(),
  }).then((response: AxiosResponse<CustomerFormData>) => {
    customer.value = response.data
    checkAuthorizeAccount();
  })
}

const getTierPrice = (serviceType: string, tier: number | undefined): number => {
  const tierNum = tier || 1;
  const key = `price_${serviceType}_tier${tierNum}` as keyof PricingData;
  const legacyKey = `price_${serviceType}` as keyof PricingData;
  const price = (pricing.value as any)[key] !== undefined ? (pricing.value as any)[key] : (pricing.value as any)[legacyKey];
  return Number(price || 0);
}

const calculateTotalAmount = () => {
  if (total_amount_after_discount.value == null || total_amount_after_discount.value === undefined) {
    return '0.00';
  }

  let totalNum = Number(total_amount_after_discount.value);
  if (isNaN(totalNum)) {
    return '0.00';
  }

  if (delivery.value && delivery.value.prime == 1) {
    totalNum += getTierPrice('prime', delivery.value.pricing_tier_prime);
  }
  if (delivery.value && delivery.value.same_day == 1) {
    totalNum += getTierPrice('same_day', delivery.value.pricing_tier_same_day);
  }
  if (delivery.value && delivery.value.emergency == 1) {
    totalNum += getTierPrice('emergency', delivery.value.pricing_tier_emergency);
  }

  return totalNum.toFixed(2);
}

const checkoutOilUpdatePayment = (payment_type: number) => {
  let path = import.meta.env.VITE_BASE_URL + "/delivery/cash/" + delivery.value.id + '/' + payment_type;
  axios({
    method: "PUT",
    url: path,
  })
    .then((response: AxiosResponse<{ ok: boolean }>) => {
      if (response.data.ok) {
        if (payment_type == 0) {
          notify({
            title: "Success",
            text: "marked payment as cash (COD)",
            type: "success",
          });
        }
        if (payment_type == 1) {
          notify({
            title: "Success",
            text: "marked payment as credit card",
            type: "success",
          });
        }

        if (payment_type == 2) {
          notify({
            title: "Success",
            text: "marked payment as cash (COD) and credit card partial payment",
            type: "success",
          });
        }
        if (payment_type == 3) {
          notify({
            title: "Success",
            text: "marked payment as check with credit card hold",
            type: "success",
          });
        }
        if (payment_type == 11) {
          notify({
            title: "Success",
            text: "marked payment as CC - Authorize (API)",
            type: "success",
          });
        }
        router.push({ name: "deliveryOrder", params: { id: delivery.value.id } });
      }
    })
    .catch(() => {
      notify({
        title: "Error",
        text: "Could not update wth cash",
        type: "error",
      });
    });
}

const checkAuthorizeAccount = async () => {
  if (!customer.value.id) return;

  isLoadingAuthorize.value = true;

  try {
    const path = `${import.meta.env.VITE_AUTHORIZE_URL}/user/check-authorize-account/${customer.value.id}`;
    const response = await axios.get(path, { headers: authHeader() });
    authorizeCheck.value = response.data;

    // Check if the API returned an error in the response body
    if (authorizeCheck.value.missing_components && authorizeCheck.value.missing_components.includes('api_error')) {
      console.log("API error detected in response, calling cleanup for customer:", customer.value.id);
      cleanupAuthorizeData();
      return; // Don't set loading to false yet, let cleanup handle it
    }
  } catch (error) {
    console.error("Failed to check authorize account:", error);
    notify({ title: "Error", text: "Could not check payment account status.", type: "error" });
    // Set default error state
    authorizeCheck.value = {
      profile_exists: false,
      has_payment_methods: false,
      missing_components: ['api_error'],
      valid_for_charging: false
    };
    // Automatically cleanup the local Authorize.Net data on API error
    console.log("Calling cleanupAuthorizedData for customer:", customer.value.id);
    cleanupAuthorizeData();
  } finally {
    isLoadingAuthorize.value = false;
  }
}

const createAuthorizeAccount = async () => {
  // Show the creating account modal
  isCreatingAccount.value = true;
  isCreateAccountModalVisible.value = true;

  try {
    const path = `${import.meta.env.VITE_AUTHORIZE_URL}/user/create-account/${customer.value.id}`;
    const response = await axios.post(path, {}, { headers: authHeader() });

    if (response.data.success) {
      // Update local state
      customer.value.auth_net_profile_id = response.data.profile_id;
      authorizeCheck.value.valid_for_charging = true;
      // authorizeCheck.value.profile_exists = true;
      authorizeCheck.value.has_payment_methods = true;
      authorizeCheck.value.missing_components = [];
      createdProfileId.value = response.data.profile_id;

      // Refresh credit cards to get updated payment profile IDs
      await getCreditCards(customer.value.id);

      // Switch modal to success view and close after delay
      setTimeout(() => {
        isCreatingAccount.value = false;
        setTimeout(() => {
          isCreateAccountModalVisible.value = false;
          createdProfileId.value = '';

          notify({
            title: "Success",
            text: "Authorize.net account created successfully!",
            type: "success"
          });
        }, 3000); // Show success message for 3 seconds
      }, 1000); // Brief delay to show success animation

    } else {
      // Hide modal on error
      isCreateAccountModalVisible.value = false;

      // Check for E00039 duplicate error
      const errorMessage = response.data.message || response.data.error_detail || "Failed to create Authorize.net account";

      if (response.data.is_duplicate || errorMessage.includes("E00039")) {
        // Show duplicate account popup
        setTimeout(() => {
          showDuplicateErrorModal();
        }, 300);
        return;
      } else {
        // Normal error notification
        notify({
          title: "Error",
          text: errorMessage,
          type: "error"
        });
      }
    }
  } catch (err: unknown) {
    const error = err as { response?: { data?: { error_detail?: string; detail?: string; message?: string; is_duplicate?: boolean } }; message?: string };
    console.error("Failed to create account:", error);
    isCreateAccountModalVisible.value = false;
    isCreatingAccount.value = false;

    // Check for E00039 duplicate error
    const errorMessage = error.response?.data?.error_detail ||
                       error.response?.data?.detail ||
                       error.response?.data?.message ||
                       error.message || "Failed to create Authorize.net account";

    if (error.response?.data?.is_duplicate || errorMessage.includes("E00039")) {
      // Show duplicate account popup
      setTimeout(() => {
        showDuplicateErrorModal();
      }, 300);
      return;
    }

    // Normal error notification
    notify({
      title: "Error",
      text: errorMessage,
      type: "error"
    });
  }
}

const showDeleteAccountModal = () => {
  isDeleteAccountModalVisible.value = true;
}

const showDuplicateErrorModal = () => {
  isDuplicateErrorModalVisible.value = true;
}

const hideDuplicateErrorModal = () => {
  isDuplicateErrorModalVisible.value = false;
}

const addCreditCard = () => {
  // Redirect to add card page
  router.push({ name: 'cardadd', params: { customerId: customer.value.id } });
}

const deleteAccount = async () => {
  isDeleteAccountModalVisible.value = false;

  try {
    const path = `${import.meta.env.VITE_AUTHORIZE_URL}/user/delete-account/${customer.value.id}`;
    const response = await axios.delete(path, { headers: authHeader() });

    if (response.data.success) {
      // Update local state
      customer.value.auth_net_profile_id = null;
      authorizeCheck.value.valid_for_charging = false;
      authorizeCheck.value.profile_exists = false;
      authorizeCheck.value.has_payment_methods = false;

      // Refresh credit cards list (IDs should now be null)
      getCreditCards(customer.value.id);

      notify({
        title: "Success",
        text: "Authorize.net account deleted successfully",
        type: "success"
      });
    } else {
      notify({
        title: "Warning",
        text: response.data.message || "Account deletion completed with warnings",
        type: "warning"
      });
    }
  } catch (error: unknown) {
    console.error("Failed to delete account:", error);
    notify({
      title: "Error",
      text: "Failed to delete Authorize.net account",
      type: "error"
    });
  }
}

const cleanupAuthorizeData = async () => {
  try {
    const path = `${import.meta.env.VITE_BASE_URL}/payment/authorize/cleanup/${customer.value.id}`;
    const response = await axios.post(path, {}, { headers: authHeader() });

    if (response.data.ok) {
      // Update local state to reflect cleanup
      customer.value.auth_net_profile_id = null;
      authorizeCheck.value.valid_for_charging = false;
      authorizeCheck.value.profile_exists = false;
      authorizeCheck.value.has_payment_methods = false;

      // Refresh credit cards to reflect null payment profile IDs
      getCreditCards(customer.value.id);

      console.log("Successfully cleaned up Authorize.Net data:", response.data.message);
    } else {
      console.error("Failed to cleanup Authorize.Net data:", response.data.error);
    }
  } catch (error) {
    console.error("Error during cleanup:", error);
  }
}

const getAccountStatusMessage = (): string => {
  if (!authorizeCheck.value || !authorizeCheck.value.missing_components) {
    return 'Account setup incomplete';
  }

  const missing = authorizeCheck.value.missing_components;
  if (missing.includes('customer_not_found')) {
    return 'Customer not found in Authorize.net';
  } else if (missing.includes('authorize_net_profile')) {
    return 'No Authorize.net profile configured';
  } else if (missing.includes('authorize_net_profile_invalid')) {
    return 'Authorize.net profile is invalid';
  } else if (missing.includes('payment_method')) {
    return 'No payment methods configured';
  } else if (missing.includes('api_error')) {
    return 'Error checking account status';
  } else {
    return 'Account requires setup';
  }
}
</script>

<style scoped></style>
