<template>
  <Layout>
    <div class="py-6">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <PartnerNavigation title="Certificates" :subtitle="`${partner.center.name} - ${partner.name}`" />
        
        <Breadcrumb :breadcrumbs="[
          { name: 'Partner', icon: 'fas fa-user-tie', url: '/partner/dashboard' },
          { name: 'Enrollments', icon: 'fas fa-graduation-cap' },
          { name: 'Certificates', icon: 'fas fa-certificate' }
        ]" />

        <!-- Filters -->
        <div class="bg-white shadow mb-6">
          <div class="px-6 py-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Search</label>
                <input v-model="filterForm.search" @input="applyFilters" type="text" placeholder="Student name, code, or certificate number" class="w-full border-gray-300 rounded-md">
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Filter by Course</label>
                <select v-model="filterForm.course_id" @change="applyFilters" class="w-full border-gray-300 rounded-md">
                  <option value="">All Courses</option>
                  <option v-for="course in courses" :key="course.id" :value="course.id">
                    {{ course.name }}
                  </option>
                </select>
              </div>
              
              <div class="flex items-end">
                <button @click="clearFilters" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
                  <i class="fas fa-refresh mr-1"></i>
                  Clear Filters
                </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">Center Certificates</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">Certificate Number</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Student</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Course</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Issue Date</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Issued By</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                  <tr v-for="certificate in certificates.data" :key="certificate.id">
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-orange-600">
                      {{ certificate.certificate_number }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                      {{ certificate.student.name }}
                      <div class="text-xs text-gray-500">{{ certificate.student.state_code }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ certificate.course.name }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ formatDate(certificate.certification_date) }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      <div class="flex items-center">
                        <i :class="certificate.issued_by_type === 'admin' ? 'fas fa-user-shield text-blue-500' : 'fas fa-user-tie text-orange-500'" class="mr-1"></i>
                        {{ certificate.issued_by_name }}
                      </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                      <button @click="copyCertificateNumber(certificate.certificate_number)" class="inline-flex items-center px-2 py-1 bg-green-100 hover:bg-green-200 text-green-700 text-xs font-medium rounded transition-colors duration-200">
                        <i class="fas fa-copy mr-1"></i>Copy
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>

            <!-- Pagination -->
            <div v-if="certificates.links && certificates.links.length > 3" class="mt-6">
              <nav class="flex justify-center">
                <div class="flex space-x-1">
                  <template v-for="link in certificates.links" :key="link.label">
                    <Link v-if="link.url" :href="link.url" 
                          :class="link.active ? 'bg-orange-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>
      </div>
    </div>
  </Layout>
</template>

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

const props = defineProps({
  certificates: Object,
  courses: Array,
  partner: Object,
  filters: Object
})

const filterForm = ref({
  search: props.filters?.search || '',
  course_id: props.filters?.course_id || ''
})

const applyFilters = () => {
  router.get('/partner/certificates', filterForm.value, {
    preserveState: true,
    preserveScroll: true
  })
}

const clearFilters = () => {
  filterForm.value = { search: '', course_id: '' }
  router.get('/partner/certificates')
}

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

const copyCertificateNumber = async (certificateNumber) => {
  try {
    await navigator.clipboard.writeText(certificateNumber)
    alert('Certificate number copied to clipboard!')
  } catch (err) {
    const textArea = document.createElement('textarea')
    textArea.value = certificateNumber
    document.body.appendChild(textArea)
    textArea.select()
    document.execCommand('copy')
    document.body.removeChild(textArea)
    alert('Certificate number copied to clipboard!')
  }
}
</script>