<template>
  <div class="management-page">
    <header class="page-header">
      <h1>💳 Payment Management</h1>
    </header>

    <div class="stats-row">
      <div class="stat-box">
        <h3>Total Payments</h3>
        <p>${{ formatNumber(totalPayments) }}</p>
      </div>
      <div class="stat-box">
        <h3>Pending</h3>
        <p>${{ formatNumber(pendingPayments) }}</p>
      </div>
      <div class="stat-box">
        <h3>Completed</h3>
        <p>${{ formatNumber(completedPayments) }}</p>
      </div>
    </div>

    <div v-if="loading" class="loading">Loading...</div>

    <div v-else class="list">
      <div v-for="payment in payments" :key="payment.id" class="card">
        <div class="info">
          <h3>Payment #{{ payment.id }}</h3>
          <p>Order #{{ payment.order?.order_number }}</p>
          <span :class="['badge', payment.status]">{{ payment.status }}</span>
        </div>
        <div class="details">
          <p class="amount">${{ payment.amount }}</p>
          <p class="method">{{ payment.payment_method }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import axios from 'axios'

export default {
  setup() {
    const payments = ref([])
    const loading = ref(true)

    const totalPayments = computed(() => 
      payments.value.reduce((sum, p) => sum + parseFloat(p.amount), 0)
    )
    const pendingPayments = computed(() => 
      payments.value.filter(p => p.status === 'pending').reduce((sum, p) => sum + parseFloat(p.amount), 0)
    )
    const completedPayments = computed(() => 
      payments.value.filter(p => p.status === 'completed').reduce((sum, p) => sum + parseFloat(p.amount), 0)
    )

    const loadPayments = async () => {
      try {
        const { data } = await axios.get('http://localhost:8000/api/admin/payments')
        payments.value = data.data
      } finally {
        loading.value = false
      }
    }

    const formatNumber = (num) => new Intl.NumberFormat().format(num || 0)

    onMounted(loadPayments)

    return { payments, loading, totalPayments, pendingPayments, completedPayments, formatNumber }
  }
}
</script>

<style scoped>
.management-page { padding: 2rem; background: transparent; min-height: 100vh; }
.page-header { margin-bottom: 2rem; }
.page-header h1 { margin: 0; font-size: 1.5rem; }
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.stat-box { background: white; padding: 1rem; border-radius: 12px; text-align: center; }
.stat-box h3 { margin: 0 0 0.5rem 0; font-size: 0.875rem; color: #6b7280; }
.stat-box p { margin: 0; font-size: 1.5rem; font-weight: 700; color: #10b981; }
.list { display: flex; flex-direction: column; gap: 1rem; }
.card { background: white; padding: 1rem; border-radius: 12px; display: flex; justify-content: space-between; }
.info h3 { margin: 0 0 0.5rem 0; }
.info p { margin: 0 0 0.5rem 0; color: #6b7280; font-size: 0.875rem; }
.badge { padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
.badge.completed { background: #d1fae5; color: #10b981; }
.badge.pending { background: #fef3c7; color: #f59e0b; }
.badge.failed { background: #fee2e2; color: #ef4444; }
.details { text-align: right; }
.amount { font-size: 1.25rem; font-weight: 700; color: #10b981; margin: 0 0 0.25rem 0; }
.method { font-size: 0.875rem; color: #6b7280; margin: 0; }
.loading { text-align: center; padding: 2rem; }
</style>
