<template>
  <div class="space-y-6">
    <h1 class="text-2xl font-bold text-slate-900">SMS Gateway</h1>
    <div class="flex gap-3 flex-wrap">
      <select v-model="statusFilter" class="border border-slate-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
        <option value="">All Statuses</option>
        <option value="pending">Pending</option>
        <option value="sent">Sent</option>
        <option value="failed">Failed</option>
        <option value="cancelled">Cancelled</option>
      </select>
    </div>
    <div class="bg-white rounded-xl overflow-hidden" style="box-shadow:0 2px 8px #0000000A">
      <div v-if="loading" class="p-8 text-center text-sm text-slate-400 animate-pulse">Loading…</div>
      <div v-else-if="jobs.length === 0" class="p-12 text-center text-slate-400">No SMS jobs found</div>
      <table v-else class="w-full text-sm">
        <thead class="bg-slate-50 border-b border-slate-100">
          <tr class="text-left text-xs text-slate-500 font-semibold uppercase tracking-wide">
            <th class="px-5 py-3">Recipient</th>
            <th class="px-5 py-3">Message</th>
            <th class="px-5 py-3">Sender</th>
            <th class="px-5 py-3">Status</th>
            <th class="px-5 py-3">Trigger</th>
            <th class="px-5 py-3">Created</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-50">
          <tr v-for="j in jobs" :key="j.id" class="hover:bg-slate-50">
            <td class="px-5 py-3 font-mono text-xs">{{ j.recipient_phone }}</td>
            <td class="px-5 py-3 text-slate-600 max-w-xs truncate">{{ j.message }}</td>
            <td class="px-5 py-3 font-mono text-xs">{{ j.sender_name }}</td>
            <td class="px-5 py-3"><StatusBadge :status="j.status" /></td>
            <td class="px-5 py-3 text-slate-500 text-xs">{{ j.trigger || '—' }}</td>
            <td class="px-5 py-3 text-slate-500 text-xs">{{ new Date(j.created_at).toLocaleString() }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import { getSmsJobs } from '@/lib/api'
import StatusBadge from '@/components/ui/StatusBadge.vue'
const jobs = ref<any[]>([])
const loading = ref(false)
const statusFilter = ref('')
async function fetchJobs() {
  loading.value = true
  try { const r = await getSmsJobs({ status: statusFilter.value || undefined }); jobs.value = r.items }
  finally { loading.value = false }
}
watch(statusFilter, fetchJobs)
onMounted(fetchJobs)
</script>
