<!-- src/pages/customer/profile/profile/TransactionsTable.vue -->
<template>
  <div v-if="!transactions || transactions.length === 0" class="text-center p-10">
    <p>No transactions found.</p>
  </div>
  <div v-else>
    <!-- DESKTOP TABLE -->
    <div class="overflow-x-auto hidden lg:block bg-base-100 rounded-lg">
      <table class="table w-full">
        <thead>
          <tr>
            <th>Transaction Info</th>
            <th>Amounts & Type</th>
            <th>Details & Actions</th>
          </tr>
        </thead>
        <tbody>
          <template v-for="transaction in transactions" :key="transaction.id">
            <tr class="hover:bg-blue-600 hover:text-white">
              <td>
                <div class="space-y-1">
                  <div><strong>#{{ transaction.id }}</strong></div>
                  <div class="text-xs text-gray-500">{{ formatDate(transaction.created_at) }}</div>
                  <div><span :class="'badge badge-sm ' + getStatusClass(transaction.status)">{{ getStatusText(transaction.status) }}</span></div>
                </div>
              </td>
              <td>
                <div class="space-y-1">
                  <div class="text-xs">
                    <div><strong>Pre-Auth:</strong> ${{ transaction.preauthorize_amount || '0.00' }}</div>
                    <div><strong>Charge:</strong> ${{ transaction.charge_amount || '0.00' }}</div>
                  </div>
                  <div><strong>Type:</strong> <span :class="getTypeColor(transaction.transaction_type)">{{ transaction.transaction_type === 0 ? 'Charge' : transaction.transaction_type === 1 ? 'Auth' : transaction.transaction_type === 2 ? 'Capture' : 'Unknown' }}</span></div>
                </div>
              </td>
              <td>
                <div class="space-y-2">
                  <div>{{ getSourceText(transaction) }}</div>
                  <div>
                    <router-link v-if="transaction.delivery_id" :to="{ name: 'deliveryOrder', params: { id: transaction.delivery_id } }" class="btn btn-xs btn-info">
                      View Delivery
                    </router-link>
                  </div>
                </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="3" 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 CARDS -->
    <div class="lg:hidden space-y-4">
      <div v-for="transaction in transactions" :key="transaction.id" class="card bg-base-100 shadow-md">
        <div class="card-body p-4">
          <div class="flex justify-between items-start">
            <div>
              <h2 class="card-title text-base">Transaction #{{ transaction.id }}</h2>
              <p class="text-xs text-gray-400">{{ formatDate(transaction.created_at) }}</p>
            </div>
            <div :class="'badge badge-' + getStatusClass(transaction.status)">
              {{ getStatusText(transaction.status) }}
            </div>
          </div>

          <div class="text-sm mt-2 space-y-1">
            <p><strong>Transaction ID:</strong> {{ transaction.auth_net_transaction_id || 'N/A' }}</p>
            <p><strong>Pre-Auth:</strong> ${{ transaction.preauthorize_amount || '0.00' }}</p>
            <p><strong>Charge:</strong> ${{ transaction.charge_amount || '0.00' }}</p>
            <p><strong>Type:</strong> <span :class="getTypeColor(transaction.transaction_type)">{{ transaction.transaction_type === 0 ? 'Charge' : transaction.transaction_type === 1 ? 'Auth' : transaction.transaction_type === 2 ? 'Capture' : 'Unknown' }}</span></p>
            <p><strong>Source:</strong> {{ getSourceText(transaction) }}</p>
            <!-- Rejection Reason in Mobile View -->
            <div v-if="transaction.rejection_reason && transaction.rejection_reason.trim()" class="bg-transparent border border-gray-300 rounded-md p-3 mt-2">
              <div class="flex items-start">
                <svg class="w-4 h-4 mr-2 text-red-500 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-red-700 text-sm">{{ transaction.rejection_reason }}</span>
              </div>
            </div>
          </div>
          <!-- Action Buttons -->
          <div class="mt-3">
            <router-link v-if="transaction.delivery_id" :to="{ name: 'deliveryOrder', params: { id: transaction.delivery_id } }" class="btn btn-xs btn-info btn-block">
              View Delivery
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

interface Props {
  transactions: AuthorizeTransaction[];
}

defineProps<Props>();

const getStatusClass = (status: number) => status === 0 ? 'badge-success' : 'badge-error';
const getStatusText = (status: number) => status === 0 ? 'Approved' : 'Declined';
const 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';
  }
}
const formatDate = (dateStr: string) => dateStr ? dateStr.split('T')[0] : 'N/A'; // YYYY-MM-DD
const getTypeColor = (transactionType: number | undefined) => {
  switch (transactionType) {
    case 1: return 'text-blue-600';    // Auth
    case 0: return 'text-orange-600';   // Charge
    case 2: return 'text-purple-600';   // Capture
    case 3: return 'text-green-600';    // Delivery/Other
    default: return 'text-gray-600';
  }
}
</script>
