<script setup>
import { Head, Link, router } from '@inertiajs/vue3';
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { ref, watch } from 'vue';

const props = defineProps({
  activations: Object,
  filters: Object,
  total_active: Number,
});

const search = ref(props.filters.search || '');
const status = ref(props.filters.status || '');

let searchTimeout;
watch(search, (val) => {
  clearTimeout(searchTimeout);
  searchTimeout = setTimeout(() => {
    router.get('/storesight/admin/activations', { search: val, status: status.value }, { preserveState: true, replace: true });
  }, 300);
});

watch(status, (val) => {
  router.get('/storesight/admin/activations', { search: search.value, status: val }, { preserveState: true, replace: true });
});
</script>

<template>
  <AdminLayout>
    <template #title>Activations</template>
    <Head title="Activations - Admin" />

    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 gap-4">
      <div>
        <h2 class="text-xl font-bold text-gray-900">Site Activations</h2>
        <p class="text-sm text-gray-500">{{ total_active }} active sites</p>
      </div>
      <div class="flex gap-3">
        <input v-model="search" type="text" placeholder="Search domain or license..." class="px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-[#4F46E5] focus:border-[#4F46E5] outline-none w-64">
        <select v-model="status" class="px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-[#4F46E5] outline-none">
          <option value="">All Statuses</option>
          <option value="active">Active</option>
          <option value="inactive">Inactive</option>
          <option value="revoked">Revoked</option>
        </select>
      </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
      <div class="overflow-x-auto">
        <table class="w-full">
          <thead class="bg-gray-50">
            <tr>
              <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Domain</th>
              <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">License</th>
              <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">User</th>
              <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Status</th>
              <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Activated</th>
              <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Last Seen</th>
              <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Requests (24h)</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-100">
            <tr v-for="act in activations.data" :key="act.id">
              <td class="px-6 py-4 text-sm font-medium text-gray-900">{{ act.domain }}</td>
              <td class="px-6 py-4 font-mono text-xs text-gray-600">{{ act.license_key }}</td>
              <td class="px-6 py-4 text-sm text-gray-600">{{ act.user_name }}</td>
              <td class="px-6 py-4">
                <div class="flex items-center space-x-2">
                  <span :class="{
                    'bg-green-400': act.status === 'active',
                    'bg-yellow-400': act.status === 'inactive',
                    'bg-red-400': act.status === 'revoked',
                  }" class="w-2 h-2 rounded-full"></span>
                  <span class="text-sm capitalize text-gray-600">{{ act.status }}</span>
                </div>
              </td>
              <td class="px-6 py-4 text-sm text-gray-500">{{ act.activated_at || '—' }}</td>
              <td class="px-6 py-4 text-sm text-gray-500">{{ act.last_seen_at || '—' }}</td>
              <td class="px-6 py-4 text-sm text-gray-600">{{ act.requests_24h }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-if="activations.last_page > 1" class="px-6 py-4 border-t border-gray-100 flex items-center justify-between">
        <p class="text-sm text-gray-500">Showing {{ activations.from }}-{{ activations.to }} of {{ activations.total }}</p>
        <div class="flex gap-2">
          <Link v-for="link in activations.links" :key="link.label" :href="link.url || '#'" :class="link.active ? 'bg-[#4F46E5] text-white' : link.url ? 'bg-white text-gray-700 hover:bg-gray-50' : 'bg-gray-100 text-gray-400 cursor-not-allowed'" class="px-3 py-1 border border-gray-200 rounded text-sm" v-html="link.label" />
        </div>
      </div>
    </div>
  </AdminLayout>
</template>
