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

const props = defineProps({
  users: Object,
  filters: Object,
  total_users: Number,
});

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

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

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

<template>
  <AdminLayout>
    <template #title>Users</template>
    <Head title="Users - 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">Users</h2>
        <p class="text-sm text-gray-500">{{ total_users }} total users</p>
      </div>
      <div class="flex gap-3">
        <input v-model="search" type="text" placeholder="Search name or email..." 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="filter" class="px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-[#4F46E5] outline-none">
          <option value="">All Users</option>
          <option value="with_license">With License</option>
          <option value="without_license">Without License</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">User</th>
              <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Email</th>
              <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Licenses</th>
              <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Registered</th>
              <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Status</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-100">
            <tr v-for="user in users.data" :key="user.id">
              <td class="px-6 py-4">
                <div class="flex items-center space-x-3">
                  <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 text-xs font-medium">{{ user.initials }}</div>
                  <span class="text-sm font-medium text-gray-900">{{ user.name }}</span>
                </div>
              </td>
              <td class="px-6 py-4 text-sm text-gray-600">{{ user.email }}</td>
              <td class="px-6 py-4 text-sm text-gray-600">{{ user.licenses_count }}</td>
              <td class="px-6 py-4 text-sm text-gray-500">{{ user.created_at }}</td>
              <td class="px-6 py-4">
                <span :class="{
                  'bg-green-100 text-green-800': user.status === 'Active',
                  'bg-yellow-100 text-yellow-800': user.status === 'Trial',
                  'bg-gray-100 text-gray-600': user.status === 'Inactive',
                }" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium">{{ user.status }}</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- Pagination -->
      <div v-if="users.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 {{ users.from }}-{{ users.to }} of {{ users.total }}</p>
        <div class="flex gap-2">
          <Link v-for="link in users.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>
