<template>
  <Layout>
    <div class="py-6">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <AdminNavigation title="Certificate Credits" />
        
        <Breadcrumb :breadcrumbs="[
          { name: 'Admin', icon: 'fas fa-user-shield', url: '/admin' },
          { name: 'Management', icon: 'fas fa-cogs' },
          { name: 'Certificate Credits', icon: 'fas fa-coins' }
        ]" />

        <!-- Credits Summary -->
        <div class="bg-white overflow-hidden shadow rounded-lg mb-6">
          <div class="p-5">
            <div class="flex items-center">
              <div class="flex-shrink-0">
                <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center">
                  <i class="fas fa-coins text-white text-xl"></i>
                </div>
              </div>
              <div class="ml-5 w-0 flex-1">
                <dl>
                  <dt class="text-sm font-medium text-gray-500 truncate">Available Certificate Credits</dt>
                  <dd class="text-3xl font-bold text-green-600">{{ totalCredits }}</dd>
                  <dd class="text-sm text-gray-400">Credits remaining for certificate issuance</dd>
                </dl>
              </div>
              <div class="ml-5">
                <button @click="showPurchaseModal = true" :disabled="true" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded cursor-not-allowed disabled:opacity-50">
                  <i class="fas fa-lock mr-2"></i>Purchase Credits
                </button>
                <!-- <button @click="showPurchaseModal = true" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                  <i class="fas fa-plus mr-2"></i>Purchase Credits
                </button> -->
              </div>
            </div>
          </div>
        </div>

        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
          <div class="p-6">
            <h2 class="text-xl font-bold text-gray-900 mb-6">Credit Purchase History</h2>

            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                  <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Purchase Date</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Credits Purchased</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Credits Used</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Credits Remaining</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cost per Credit</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Cost</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Purchased By</th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                  <tr v-for="credit in credits.data" :key="credit.id">
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ formatDate(credit.created_at) }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ credit.credits_purchased }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ credit.credits_used }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium" :class="credit.credits_remaining > 0 ? 'text-green-600' : 'text-gray-400'">
                      {{ credit.credits_remaining }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">₦{{ credit.cost_per_credit }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">₦{{ credit.total_cost?.toLocaleString() }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      <div class="flex items-center">
                        <i class="fas fa-user-shield text-blue-500 mr-1"></i>
                        {{ credit.purchased_by_name }}
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>

            <!-- Pagination -->
            <div v-if="credits.links && credits.links.length > 3" class="mt-6">
              <nav class="flex justify-center">
                <div class="flex space-x-1">
                  <template v-for="link in credits.links" :key="link.label">
                    <Link v-if="link.url" :href="link.url" 
                          :class="link.active ? 'bg-blue-500 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'" 
                          class="px-3 py-2 text-sm border border-gray-300 rounded"
                          v-html="link.label">
                    </Link>
                    <span v-else 
                          class="px-3 py-2 text-sm border border-gray-300 rounded bg-gray-100 text-gray-400"
                          v-html="link.label">
                    </span>
                  </template>
                </div>
              </nav>
            </div>
          </div>
        </div>

        <!-- Purchase Credits Modal -->
        <div v-if="showPurchaseModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
          <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
            <div class="mt-3">
              <h3 class="text-lg font-medium text-gray-900 mb-4">Purchase Certificate Credits</h3>
              <form @submit.prevent="submitPurchase">
                <div class="mb-4">
                  <label class="block text-sm font-medium text-gray-700 mb-2">Number of Credits</label>
                  <input v-model="purchaseForm.credits_purchased" type="number" min="1" max="1000" class="w-full border-gray-300 rounded-md" required>
                </div>
                <div class="mb-4">
                  <label class="block text-sm font-medium text-gray-700 mb-2">Cost per Credit (₦)</label>
                  <input v-model="purchaseForm.cost_per_credit" type="number" step="0.01" min="0.01" class="w-full border-gray-300 rounded-md" required>
                </div>
                <div class="mb-4">
                  <label class="block text-sm font-medium text-gray-700 mb-2">Notes (Optional)</label>
                  <textarea v-model="purchaseForm.notes" class="w-full border-gray-300 rounded-md" rows="3"></textarea>
                </div>
                <div v-if="purchaseForm.credits_purchased && purchaseForm.cost_per_credit" class="mb-4 p-3 bg-blue-50 rounded">
                  <p class="text-sm text-blue-800">
                    <strong>Total Cost: ₦{{ (purchaseForm.credits_purchased * purchaseForm.cost_per_credit).toLocaleString() }}</strong>
                  </p>
                </div>
                <div class="flex justify-end space-x-2">
                  <button type="button" @click="closePurchaseModal" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded">Cancel</button>
                  <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Purchase Credits</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>

<script setup>
import Layout from '@/Components/Layout.vue'
import AdminNavigation from '@/Components/AdminNavigation.vue'
import Breadcrumb from '@/Components/Breadcrumb.vue'
import { Link, router } from '@inertiajs/vue3'
import { ref } from 'vue'

const props = defineProps({
  credits: Object,
  totalCredits: Number
})

const showPurchaseModal = ref(false)
const purchaseForm = ref({
  credits_purchased: '',
  cost_per_credit: '',
  notes: ''
})

const submitPurchase = () => {
  router.post('/admin/credits/purchase', purchaseForm.value, {
    onSuccess: () => closePurchaseModal()
  })
}

const closePurchaseModal = () => {
  showPurchaseModal.value = false
  purchaseForm.value = {
    credits_purchased: '',
    cost_per_credit: '',
    notes: ''
  }
}

const formatDate = (dateString) => {
  if (!dateString) return 'N/A'
  return new Date(dateString).toLocaleDateString()
}
</script>