<template>
  <div class="p-6 max-w-5xl mx-auto">
    <div class="mb-6">
      <h1 class="text-text-primary text-xl font-semibold mb-1">Log Sources</h1>
      <p class="text-text-dim text-sm">All hosts and services in the ingested corpus.</p>
    </div>

    <div v-if="loading" class="text-text-dim py-8 text-center text-sm">Loading…</div>

    <div v-else-if="sources.length === 0" class="text-text-dim py-12 text-center">
      <p class="mb-1">No log sources found.</p>
      <p class="text-sm">Run the ingest pipeline: <code class="bg-surface-raised px-1 rounded">python scripts/ingest_corpus.py</code></p>
    </div>

    <div v-else class="rounded border border-surface-border overflow-hidden">
      <table class="w-full text-sm">
        <thead class="bg-surface-raised border-b border-surface-border">
          <tr>
            <th class="text-left px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider">Source</th>
            <th class="text-right px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider">Entries</th>
            <th class="text-right px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider">Errors</th>
            <th class="text-left px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider">Earliest</th>
            <th class="text-left px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider">Latest</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="src in sources"
            :key="src.source_id"
            class="border-b border-surface-border hover:bg-surface-raised transition-colors"
          >
            <td class="px-4 py-2.5 text-accent">{{ src.source_id }}</td>
            <td class="px-4 py-2.5 text-text-muted text-right tabular-nums">{{ src.entry_count.toLocaleString() }}</td>
            <td class="px-4 py-2.5 text-right tabular-nums">
              <span :class="src.error_count > 0 ? 'text-sev-error' : 'text-text-dim'">
                {{ src.error_count.toLocaleString() }}
              </span>
            </td>
            <td class="px-4 py-2.5 text-text-dim text-xs">{{ formatTs(src.earliest) }}</td>
            <td class="px-4 py-2.5 text-text-dim text-xs">{{ formatTs(src.latest) }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { LogSource } from '@/stores/search'

const sources = ref<LogSource[]>([])
const loading = ref(true)

const BASE = import.meta.env.BASE_URL.replace(/\/$/, '')

onMounted(async () => {
  try {
    const res = await fetch(`${BASE}/api/sources`)
    if (res.ok) {
      const data = await res.json()
      sources.value = data.sources
    }
  } finally {
    loading.value = false
  }
})

function formatTs(iso: string | null): string {
  if (!iso) return '—'
  try {
    return new Date(iso).toLocaleString(undefined, {
      year: 'numeric', month: 'short', day: 'numeric',
      hour: '2-digit', minute: '2-digit',
    })
  } catch {
    return iso
  }
}
</script>
