<template>
  <div class="p-6 max-w-5xl mx-auto space-y-8">

    <!-- Stat cards -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
      <div class="rounded border border-surface-border bg-surface-raised p-5">
        <p class="text-text-dim text-xs uppercase tracking-widest mb-2">Criticals (24h)</p>
        <p class="text-3xl font-semibold tabular-nums" :class="stats?.criticals_24h ? 'text-sev-critical' : 'text-text-muted'">
          {{ loading ? '…' : (stats?.criticals_24h ?? 0) }}
        </p>
      </div>
      <div class="rounded border border-surface-border bg-surface-raised p-5">
        <p class="text-text-dim text-xs uppercase tracking-widest mb-2">Errors (24h)</p>
        <p class="text-3xl font-semibold tabular-nums" :class="stats?.errors_24h ? 'text-sev-error' : 'text-text-muted'">
          {{ loading ? '…' : (stats?.errors_24h ?? 0) }}
        </p>
      </div>
      <div
        class="rounded border bg-surface-raised p-5 cursor-pointer hover:bg-surface transition-colors"
        :class="activeIncidents > 0 ? 'border-sev-warn' : 'border-surface-border'"
        @click="$router.push('/incidents')"
      >
        <p class="text-text-dim text-xs uppercase tracking-widest mb-2">Active Incidents</p>
        <p class="text-3xl font-semibold tabular-nums" :class="activeIncidents > 0 ? 'text-sev-warn' : 'text-text-muted'">
          {{ incidentsLoading ? '…' : activeIncidents }}
        </p>
      </div>
    </div>

    <!-- Source health (24h) -->
    <div>
      <h2 class="text-text-primary text-sm font-semibold uppercase tracking-wider mb-3">Source Health — Last 24 Hours</h2>

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

      <div v-else-if="!stats?.source_health?.length" class="text-text-dim text-sm py-4">
        No log entries in the last 24 hours.
        <RouterLink to="/sources" class="text-accent hover:underline ml-1">View all sources →</RouterLink>
      </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 w-4"></th>
              <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">Events</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">Latest</th>
              <th class="px-4 py-2.5"></th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="src in stats.source_health"
              :key="src.source_id"
              class="border-b border-surface-border hover:bg-surface-raised transition-colors"
            >
              <td class="pl-4 py-2.5">
                <span
                  class="inline-block w-2 h-2 rounded-full"
                  :class="healthDot(src.error_count, src.entry_count)"
                ></span>
              </td>
              <td class="px-4 py-2.5 text-accent font-mono text-xs">{{ 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">{{ shortTs(src.latest) }}</td>
              <td class="px-4 py-2.5 text-right">
                <button
                  class="text-text-dim hover:text-accent text-xs px-2 py-1 rounded hover:bg-surface transition-colors"
                  @click="diagnoseSource(src.source_id)"
                >diagnose</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Recent criticals -->
    <div v-if="stats?.recent_criticals?.length">
      <h2 class="text-text-primary text-sm font-semibold uppercase tracking-wider mb-3">Recent Criticals</h2>
      <div class="rounded border border-surface-border overflow-hidden">
        <div
          v-for="entry in stats.recent_criticals"
          :key="entry.entry_id"
          class="border-b border-surface-border border-l-2 border-l-sev-critical px-4 py-3 hover:bg-surface-raised transition-colors"
        >
          <div class="flex items-center gap-2 mb-1 flex-wrap">
            <span class="text-sev-critical text-xs font-semibold">CRITICAL</span>
            <span class="text-accent text-xs">{{ entry.source_id }}</span>
            <span v-if="entry.timestamp_iso" class="text-text-dim text-xs">{{ shortTs(entry.timestamp_iso) }}</span>
          </div>
          <p class="text-text-primary text-sm font-mono leading-relaxed line-clamp-2">{{ entry.text }}</p>
        </div>
      </div>
    </div>

    <!-- Zero state: everything clean -->
    <div
      v-if="!loading && stats && stats.criticals_24h === 0 && stats.errors_24h === 0 && activeIncidents === 0"
      class="rounded border border-surface-border bg-surface-raised p-8 text-center"
    >
      <p class="text-text-muted text-base mb-1">No errors or criticals in the last 24 hours.</p>
      <p class="text-text-dim text-sm">Use <RouterLink to="/search" class="text-accent hover:underline">Search</RouterLink> or <RouterLink to="/diagnose" class="text-accent hover:underline">Diagnose</RouterLink> to investigate further.</p>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

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

interface SourceHealth {
  source_id: string
  entry_count: number
  error_count: number
  latest: string | null
}

interface StatsResponse {
  window_hours: number
  total_24h: number
  criticals_24h: number
  errors_24h: number
  source_health: SourceHealth[]
  recent_criticals: Array<{
    entry_id: string
    source_id: string
    timestamp_iso: string | null
    severity: string
    text: string
  }>
}

interface Incident {
  id: string
  ended_at: string | null
}

const stats = ref<StatsResponse | null>(null)
const loading = ref(true)
const incidents = ref<Incident[]>([])
const incidentsLoading = ref(true)

const activeIncidents = computed(() =>
  incidents.value.filter(i => !i.ended_at).length
)

onMounted(async () => {
  await Promise.all([loadStats(), loadIncidents()])
})

async function loadStats() {
  try {
    const res = await fetch(`${BASE}/api/stats`)
    if (res.ok) stats.value = await res.json()
  } finally {
    loading.value = false
  }
}

async function loadIncidents() {
  try {
    const res = await fetch(`${BASE}/api/incidents`)
    if (res.ok) incidents.value = (await res.json()).incidents
  } finally {
    incidentsLoading.value = false
  }
}

function healthDot(errors: number, total: number): string {
  if (errors === 0) return 'bg-green-500'
  const ratio = errors / Math.max(total, 1)
  if (ratio > 0.1) return 'bg-sev-error'
  return 'bg-sev-warn'
}

function diagnoseSource(sourceId: string) {
  router.push({ path: '/diagnose', query: { q: sourceId } })
}

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