<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { configApi } from '../../services/configApi'
import { useUiStore } from '../../stores/ui'
import type { Subscription } from '../../types'

const ui = useUiStore()
const emit = defineEmits<{ select: [docNumber: string] }>()
const subscriptions = ref<Subscription[]>([])
const loading = ref(false)

async function load() {
  loading.value = true
  try {
    const { data } = await configApi.listSubscriptions()
    subscriptions.value = data.subscriptions
  } catch {
    ui.showToast('Failed to load subscriptions', 'error')
  } finally {
    loading.value = false
  }
}

async function remove(id: string) {
  try {
    await configApi.deleteSubscription(id)
    subscriptions.value = subscriptions.value.filter(s => s.id !== id)
    ui.showToast('Subscription removed', 'success')
  } catch {
    ui.showToast('Failed to delete', 'error')
  }
}

async function toggle(sub: Subscription) {
  try {
    await configApi.updateSubscription(sub.id, { is_active: !sub.is_active })
    sub.is_active = !sub.is_active
  } catch {
    ui.showToast('Failed to update', 'error')
  }
}

onMounted(load)
defineExpose({ load })
</script>

<template>
  <div class="card">
    <div class="flex items-center justify-between mb-3">
      <h3 class="font-semibold text-sm">Active Subscriptions</h3>
      <button @click="load" class="text-xs text-dark-400 hover:text-dark-200">Refresh</button>
    </div>

    <div v-if="loading" class="text-dark-500 text-sm py-4 text-center">Loading...</div>
    <div v-else-if="!subscriptions.length" class="text-dark-500 text-sm py-4 text-center">
      No subscriptions yet. Subscribe to a Belegnummer above.
    </div>
    <table v-else class="w-full text-sm">
      <thead>
        <tr class="text-left text-xs text-dark-500 border-b border-dark-700">
          <th class="pb-2">Document</th>
          <th class="pb-2">Email</th>
          <th class="pb-2">System</th>
          <th class="pb-2">Status</th>
          <th class="pb-2 text-right">Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="sub in subscriptions" :key="sub.id" class="border-b border-dark-800">
          <td class="py-2 font-mono cursor-pointer hover:text-primary-400" @click="emit('select', sub.doc_number)">{{ sub.doc_number }}</td>
          <td class="py-2">{{ sub.email }}</td>
          <td class="py-2 text-dark-400">{{ sub.source_system || 'All' }}</td>
          <td class="py-2">
            <span :class="sub.is_active ? 'text-green-400' : 'text-dark-500'" class="text-xs font-medium">
              {{ sub.is_active ? 'Active' : 'Paused' }}
            </span>
          </td>
          <td class="py-2 text-right space-x-2">
            <button @click="toggle(sub)" class="text-xs text-dark-400 hover:text-dark-200">
              {{ sub.is_active ? 'Pause' : 'Resume' }}
            </button>
            <button @click="remove(sub.id)" class="text-xs text-red-400 hover:text-red-300">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
