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

  const {
    data,
    loading,
    error,
    onrefresh
  }: {
    data: StatusResponse | null;
    loading: boolean;
    error: string;
    onrefresh: () => void;
  } = $props();
</script>

<section class="rounded-3xl border border-white/10 bg-slate-900/80 p-6 shadow-xl shadow-slate-950/20 sm:p-8">
  <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
    <div>
      <h2 class="text-2xl font-semibold text-white">System overview</h2>
      <p class="mt-1 text-sm text-slate-400">Current AMCS status behind the admin shell.</p>
    </div>
    <button
      class="inline-flex items-center justify-center rounded-xl border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-slate-200 transition hover:bg-white/10"
      onclick={onrefresh}
    >
      Refresh
    </button>
  </div>

  {#if loading}
    <div class="mt-6 rounded-2xl border border-dashed border-white/10 bg-slate-950/40 px-4 py-10 text-center text-slate-400">
      Loading status…
    </div>
  {:else if error}
    <div class="mt-6 rounded-2xl border border-rose-400/30 bg-rose-400/10 px-4 py-6 text-sm text-rose-100">
      <p class="font-semibold">Couldn't load the status snapshot.</p>
      <p class="mt-1 text-rose-100/80">{error}</p>
    </div>
  {:else if data}
    <StatusCards {data} />
  {/if}
</section>

{#if data && data.entries.length > 0}
  <AccessTable entries={data.entries} />
{/if}

{#if data}
  <div class="mt-6 grid gap-6 xl:grid-cols-3">
    <ConnectionBreakdown
      title="Requests By IP Address"
      entries={data.metrics.top_ips}
      emptyLabel="No connection requests recorded yet."
    />
    <ConnectionBreakdown
      title="Requests By User Agent"
      entries={data.metrics.top_agents}
      emptyLabel="No user agents recorded yet."
    />
    <ConnectionBreakdown
      title="Requests By MCP Tool"
      entries={data.metrics.top_tools}
      emptyLabel="No MCP tool calls recorded yet."
    />
  </div>
{/if}
