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

const props = defineProps({
  logs: Object,
  filters: Object,
  domains: Array,
  today_count: Number,
  today_tokens: Number,
});

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

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

watch(domain, (val) => {
  router.get('/storesight/admin/ai-logs', { search: search.value, domain: val }, { preserveState: true, replace: true });
});

const typeBadge = (type) => {
  const map = {
    widget: 'bg-blue-100 text-blue-700',
    assistant: 'bg-green-100 text-green-700',
    report: 'bg-purple-100 text-purple-700',
  };
  return map[type] || 'bg-gray-100 text-gray-600';
};
</script>

<template>
  <AdminLayout>
    <template #title>AI Request Logs</template>
    <Head title="AI Logs - 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">AI Request Logs</h2>
        <p class="text-sm text-gray-500">{{ today_count.toLocaleString() }} requests today &middot; {{ today_tokens.toLocaleString() }} tokens used</p>
      </div>
      <div class="flex gap-3">
        <input v-model="search" type="text" placeholder="Search prompt or domain..." 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="domain" class="px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-[#4F46E5] outline-none">
          <option value="">All Domains</option>
          <option v-for="d in domains" :key="d" :value="d">{{ d }}</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">Time</th>
              <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">Prompt</th>
              <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Type</th>
              <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Tokens</th>
              <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Response</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-100">
            <tr v-for="log in logs.data" :key="log.id">
              <td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">{{ log.created_at }}</td>
              <td class="px-6 py-4 text-sm text-gray-600">{{ log.domain }}</td>
              <td class="px-6 py-4 text-sm text-gray-900 max-w-xs truncate">"{{ log.prompt }}"</td>
              <td class="px-6 py-4">
                <span :class="typeBadge(log.request_type)" class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium capitalize">{{ log.request_type }}</span>
              </td>
              <td class="px-6 py-4 text-sm text-gray-600">{{ log.tokens_used }}</td>
              <td class="px-6 py-4 text-sm text-gray-500">{{ (log.response_time_ms / 1000).toFixed(1) }}s</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-if="logs.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 {{ logs.from }}-{{ logs.to }} of {{ logs.total }}</p>
        <div class="flex gap-2">
          <Link v-for="link in logs.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>
