<script lang="ts">
  import type { StatusResponse } from '../../types';

  const { data }: { data: StatusResponse } = $props();
</script>

<div class="mt-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
  <div class="rounded-2xl border border-white/10 bg-white/5 p-5">
    <p class="text-sm uppercase tracking-[0.2em] text-slate-400">Connected users</p>
    <p class="mt-2 text-3xl font-semibold text-white">{data.connected_count}</p>
  </div>
  <div class="rounded-2xl border border-white/10 bg-white/5 p-5">
    <p class="text-sm uppercase tracking-[0.2em] text-slate-400">Known principals</p>
    <p class="mt-2 text-3xl font-semibold text-white">{data.total_known}</p>
  </div>
  <div class="rounded-2xl border border-white/10 bg-white/5 p-5">
    <p class="text-sm uppercase tracking-[0.2em] text-slate-400">Total requests</p>
    <p class="mt-2 text-3xl font-semibold text-white">{data.metrics.total_requests}</p>
  </div>
  <div class="rounded-2xl border border-white/10 bg-white/5 p-5">
    <p class="text-sm uppercase tracking-[0.2em] text-slate-400">Unique IPs</p>
    <p class="mt-2 text-3xl font-semibold text-white">{data.metrics.unique_ips}</p>
  </div>
  <div class="rounded-2xl border border-white/10 bg-white/5 p-5">
    <p class="text-sm uppercase tracking-[0.2em] text-slate-400">Unique agents</p>
    <p class="mt-2 text-3xl font-semibold text-white">{data.metrics.unique_agents}</p>
  </div>
  <div class="rounded-2xl border border-white/10 bg-white/5 p-5">
    <p class="text-sm uppercase tracking-[0.2em] text-slate-400">Unique MCP tools</p>
    <p class="mt-2 text-3xl font-semibold text-white">{data.metrics.unique_tools}</p>
  </div>
  <div class="rounded-2xl border border-white/10 bg-white/5 p-5">
    <p class="text-sm uppercase tracking-[0.2em] text-slate-400">Version</p>
    <p class="mt-2 break-all text-2xl font-semibold text-white">{data.version}</p>
  </div>
</div>

<div class="mt-4 rounded-2xl border border-white/10 bg-slate-950/40 p-4 text-xs text-slate-400">
  <p><span class="text-slate-200">Build date:</span> {data.build_date}</p>
  <p class="mt-1"><span class="text-slate-200">Commit:</span> {data.commit}</p>
  <p class="mt-1"><span class="text-slate-200">OAuth enabled:</span> {data.oauth_enabled ? 'yes' : 'no'}</p>
</div>
