<!-- src/pages/transactions/authorize/index.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>
          <li>Transactions</li>
          <li>Authorize</li>
        </ul>
      </div>
      <!-- Page Header with Stats -->
      <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mt-4 mb-6">
        <div>
          <h1 class="text-2xl md:text-3xl font-bold flex items-center gap-3">
            <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary to-primary/60 flex items-center justify-center shadow-lg">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 text-primary-content">
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />
              </svg>
            </div>
            Authorize.net Transactions
          </h1>
          <p class="text-base-content/60 mt-1 ml-13">View payment gateway history and status</p>
        </div>

        <!-- Quick Stats -->
        <div class="flex flex-wrap gap-3">
          <div class="stat-pill">
            <span class="stat-pill-value">{{ transactions.length }}</span>
            <span class="stat-pill-label">Total Records</span>
          </div>
        </div>
      </div>

      <!-- Main Content Card -->
      <div class="modern-table-card">

        <!-- DESKTOP VIEW: Table -->
        <div class="overflow-x-auto hidden xl:block">
          <table class="modern-table">
            <thead>
              <tr>
                <th>Transaction #</th>
                <th>Transaction ID</th>
                <th>Customer</th>
                <th>Date</th>
                <th>Status</th>
                <th>Pre-Auth Amount</th>
                <th>Charge Amount</th>
                <th>Type</th>
                <th>Source</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              <template v-for="transaction in transactions" :key="transaction.id">
                <tr class="table-row-hover">
                  
                  <td>{{ transaction.id }}</td>
                  <td>{{ transaction.auth_net_transaction_id || 'N/A' }}</td>
                  <td>
                
                    
                   {{ transaction.customer_name || 'N/A' }}
                  </td>
                  <td>{{ formatDate(transaction.created_at) }}</td>
                  <td>
                    <span :class="'badge badge-sm ' + getStatusClass(transaction.status)">{{ getStatusText(transaction.status) }}</span>
                  </td>
                  <td>
                    ${{ transaction.preauthorize_amount || '0.00' }}
                  </td>
                  <td>
                    ${{ transaction.charge_amount || '0.00' }}
                  </td>
              <td>
                {{ transaction.transaction_type === 0 ? 'Charge' : transaction.transaction_type === 1 ? 'Auth' : 'Capture' }}
              </td>
              <td>
               
               {{ getSourceText(transaction) }}
              </td>
                  <td>
                    <div class="flex gap-1">
                      <router-link v-if="transaction.delivery_id" :to="{ name: 'deliveryOrder', params: { id: transaction.delivery_id } }" class="btn btn-xs btn-info">
                        View
                      </router-link>
                      <router-link v-if="transaction.auto_id" :to="{ name: 'automaticView', params: { id: transaction.auto_id } }" class="btn btn-xs btn-primary">
                        View
                      </router-link>
                      <template v-if="(Number(transaction.preauthorize_amount) >= 0 && Number(transaction.charge_amount) === 0 && (transaction.delivery_id || transaction.service_id))">
                        <router-link v-if="!transaction.auth_net_transaction_id" :to="getPreauthRoute(transaction)" class="btn btn-xs btn-warning">
                          Preauth/Charge
                        </router-link>
                        <router-link v-else-if="Number(transaction.preauthorize_amount) > 0" :to="getCaptureRoute(transaction)" class="btn btn-xs btn-primary">
                          Capture
                        </router-link>
                      </template>
                    </div>
                  </td>
                </tr>
                <!-- Rejection Reason Row (Full Width) -->
                <tr v-if="transaction.rejection_reason && transaction.rejection_reason.trim()" class="bg-transparent border-t border-gray-300">
                  <td colspan="10" class="px-4 py-3 text-red-800 font-medium">
                    <div class="flex items-center">
                      <svg class="w-5 h-5 mr-2 text-red-500" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                      </svg>
                      <span class="text-red-700">{{ transaction.rejection_reason }}</span>
                    </div>
                  </td>
                </tr>
              </template>
            </tbody>
          </table>
        </div>

        <!-- MOBILE VIEW: Cards -->
        <div class="xl:hidden space-y-4 px-4 pb-4">
          <div v-for="transaction in transactions" :key="transaction.id" class="mobile-card">
            <div class="p-3">
              <div class="flex justify-between items-start">
                <div>
                  <div class="text-base font-bold">
                    <router-link v-if="transaction.customer_id" :to="{ name: 'customerProfile', params: { id: transaction.customer_id } }" class="link link-hover">
                      {{ transaction.customer_name || 'N/A' }}
                    </router-link>
                    <span v-else>{{ transaction.customer_name || 'N/A' }}</span>
                  </div>
                  <p class="text-xs text-base-content/60">Transaction #{{ transaction.id }}</p>
                </div>
                <div :class="'badge badge-sm border-0 ' + getStatusClass(transaction.status)">
                  {{ getStatusText(transaction.status) }}
                </div>
              </div>

              <div class="text-sm mt-3 grid grid-cols-2 gap-x-4 gap-y-2">
                <div class="col-span-2">
                  <p class="text-xs text-base-content/50">Transaction ID</p>
                  <p class="font-mono text-xs">{{ transaction.auth_net_transaction_id || 'N/A' }}</p>
                </div>
                <div>
                   <p class="text-xs text-base-content/50">Date</p>
                   <p>{{ formatDate(transaction.created_at) }}</p>
                </div>
                <div>
                   <p class="text-xs text-base-content/50">Type</p>
                   <p>{{ transaction.transaction_type === 0 ? 'Charge' : transaction.transaction_type === 1 ? 'Auth' : 'Capture' }}</p>
                </div>
                <div>
                   <p class="text-xs text-base-content/50">Pre-Auth</p>
                   <p class="font-mono">${{ transaction.preauthorize_amount || '0.00' }}</p>
                </div>
                <div>
                   <p class="text-xs text-base-content/50">Charge</p>
                   <p class="font-mono font-bold">${{ transaction.charge_amount || '0.00' }}</p>
                </div>
                <div class="col-span-2">
                    <p class="text-xs text-base-content/50">Source</p>
                    <p class="text-xs">
                    <router-link v-if="transaction.delivery_id" :to="{ name: 'deliveryOrder', params: { id: transaction.delivery_id } }" class="link link-primary">{{ getSourceText(transaction) }}</router-link><span v-else>{{ getSourceText(transaction) }}</span>
                    </p>
                </div>
              </div>
              
              <!-- Rejection Reason in Mobile View -->
              <div v-if="transaction.rejection_reason && transaction.rejection_reason.trim()" class="bg-error/10 border border-error/20 rounded-lg p-3 mt-3">
                <div class="flex items-start">
                  <svg class="w-4 h-4 mr-2 text-error mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                  </svg>
                  <span class="text-error text-sm font-medium">{{ transaction.rejection_reason }}</span>
                </div>
              </div>
              
              <!-- Action Buttons -->
              <div class="flex gap-2 pt-3 mt-3 border-t border-base-content/10 flex-wrap">
                <router-link v-if="transaction.delivery_id" :to="{ name: 'deliveryOrder', params: { id: transaction.delivery_id } }" class="btn btn-xs btn-info flex-1">
                  View Delivery
                </router-link>
                <router-link v-if="transaction.auto_id" :to="{ name: 'automaticView', params: { id: transaction.auto_id } }" class="btn btn-xs btn-primary flex-1">
                  View Auto
                </router-link>
                <template v-if="(Number(transaction.preauthorize_amount) >= 0 && Number(transaction.charge_amount) === 0 && (transaction.delivery_id || transaction.service_id))">
                  <router-link v-if="!transaction.auth_net_transaction_id" :to="getPreauthRoute(transaction)" class="btn btn-xs btn-warning flex-1">
                    Preauth/Charge
                  </router-link>
                  <router-link v-else-if="Number(transaction.preauthorize_amount) > 0" :to="getCaptureRoute(transaction)" class="btn btn-xs btn-primary flex-1">
                    Capture
                  </router-link>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
</template>

<script lang="ts">
import {defineComponent} from 'vue'
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 {AuthorizeTransaction} from '../../../types/models'

export default defineComponent({
  name: 'transactionsAuthorize',

  components: {
    Header,
    SideBar,
  },

  data() {
    return {
      transactions: [] as AuthorizeTransaction[],
    }
  },

  created() {
    this.getTransactions()
  },
  methods: {
    getTransactions() {
      let path = import.meta.env.VITE_BASE_URL + '/payment/transactions/authorize/1';
      axios({
        method: 'get',
        url: path,
        headers: authHeader(),
      }).then((response: any) => {
        this.transactions = response.data?.transactions || response.data || []
      }).catch(() => {
        this.transactions = []
      })
    },
    getStatusClass(status: number) {
      return status === 0 ? 'badge-success' : 'badge-error'
    },
    getStatusText(status: number) {
      return status === 0 ? 'Approved' : 'Declined'
    },
    getSourceText(transaction: AuthorizeTransaction) {
      if (transaction.auto_id) {
        return 'Automatic'
      } else if (transaction.delivery_id) {
        return 'Delivery - ' + transaction.delivery_id
      } else if (transaction.service_id) {
        return 'Service - ' + transaction.service_id
      } else {
        return 'Other'
      }
    },
    formatDate(dateStr: string) {
      if (!dateStr) return 'N/A';
      return dateStr.split('T')[0]; // YYYY-MM-DD
    },
    getCaptureRoute(transaction: AuthorizeTransaction) {
      if (transaction.service_id) {
        return { name: 'chargeServiceAuthorize', params: { id: transaction.service_id } };
      } else if (transaction.delivery_id) {
        return { name: 'captureAuthorize', params: { id: transaction.delivery_id } };
      }
      return {}; // fallback, though condition should prevent this
    },
    getPreauthRoute(transaction: AuthorizeTransaction) {
      if (transaction.service_id) {
        return { name: 'chargeServiceAuthorize', params: { id: transaction.service_id } };
      } else if (transaction.delivery_id) {
        return { name: 'authorizePreauthCharge', params: { id: transaction.delivery_id } };
      }
      return {}; // fallback, though condition should prevent this
    },
  },
})
</script>

<style scoped>
</style>
