<script setup lang="ts">
const search = ref('')
const { data, pending, refresh } = useProviders('/providers')

// Ensure data is refreshed when page loads
onMounted(() => {
  refresh()
})

const providers = computed(() => {
  const list = data.value?.data ?? []
  if (!search.value) return list
  return list.filter((p: any) =>
    `${p.name} ${p.email} ${p.contact_name}`.toLowerCase().includes(search.value.toLowerCase())
  )
})
</script>

<template>
  <div class="p-8 space-y-8 bg-gray-50 min-h-screen">
    <div class="flex justify-between items-center">
      <div>
        <h1 class="text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Providers</h1>
        <p class="text-[13px] text-[var(--text-muted)]">Insurance carrier management</p>
      </div>
      <div class="flex items-center gap-3">
        <UBadge color="gray" variant="soft" size="lg">{{ providers.length }} providers</UBadge>
        <NuxtLink to="/providers/new">
          <UButton icon="i-heroicons-plus" color="primary">New Provider</UButton>
        </NuxtLink>
      </div>
    </div>

    <div class="flex gap-4">
      <UInput v-model="search" icon="i-heroicons-magnifying-glass" placeholder="Search providers..." class="w-72" />
      <UButton icon="i-heroicons-arrow-path" color="gray" variant="soft" :loading="pending" @click="refresh()">Refresh</UButton>
    </div>

    <div v-if="pending" class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      <UCard v-for="n in 6" :key="n"><div class="h-32 animate-pulse bg-gray-200 rounded" /></UCard>
    </div>

    <div v-else class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      <NuxtLink v-for="p in providers" :key="p.provider_id" :to="`/providers/${p.provider_id}`">
        <UCard class="hover:shadow-md transition-shadow cursor-pointer h-full">
          <div class="space-y-3">
            <div class="flex justify-between items-start">
              <p class="font-semibold text-[var(--text-primary)] text-lg">{{ p.name }}</p>
              <UBadge :color="p.active ? 'green' : 'red'" variant="soft" size="xs">
                {{ p.active ? 'Active' : 'Inactive' }}
              </UBadge>
            </div>
            <div class="space-y-1 text-sm">
              <div class="flex items-center gap-2 text-gray-500">
                <UIcon name="i-heroicons-envelope" class="w-4 h-4" />
                <span>{{ p.email }}</span>
              </div>
              <div class="flex items-center gap-2 text-gray-500">
                <UIcon name="i-heroicons-phone" class="w-4 h-4" />
                <span>{{ p.phone ?? '—' }}</span>
              </div>
              <div class="flex items-center gap-2 text-gray-500">
                <UIcon name="i-heroicons-user" class="w-4 h-4" />
                <span>{{ p.contact_name ?? '—' }}</span>
              </div>
            </div>
            <div class="flex justify-between items-center pt-2 border-t text-xs text-gray-400">
              <span>RUC: {{ p.ruc ?? '—' }}</span>
              <UIcon name="i-heroicons-chevron-right" class="w-4 h-4" />
            </div>
          </div>
        </UCard>
      </NuxtLink>

      <div v-if="providers.length === 0" class="col-span-3 text-center py-16 text-gray-400">
        <UIcon name="i-heroicons-building-office" class="w-12 h-12 mx-auto mb-4" />
        <p class="text-lg font-medium">No providers found</p>
      </div>
    </div>
  </div>
</template>
