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

  const { entries }: { entries: AccessEntry[] } = $props();

  function formatDate(value: string): string {
    return new Date(value).toLocaleString();
  }
</script>

<section class="mt-6 rounded-3xl border border-white/10 bg-slate-900/80 p-6 shadow-xl shadow-slate-950/20 sm:p-8">
  <h3 class="text-xl font-semibold text-white">Recent access</h3>
  <div class="mt-6 overflow-hidden rounded-2xl border border-white/10">
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-white/10 text-left text-sm text-slate-300">
        <thead class="bg-white/5 text-xs uppercase tracking-[0.2em] text-slate-500">
          <tr>
            <th class="px-4 py-3 font-medium">Principal</th>
            <th class="px-4 py-3 font-medium">IP</th>
            <th class="px-4 py-3 font-medium">Last accessed</th>
            <th class="px-4 py-3 font-medium">Last path</th>
            <th class="px-4 py-3 font-medium">Agent</th>
            <th class="px-4 py-3 font-medium">Requests</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-white/5 bg-slate-950/30">
          {#each entries as entry}
            <tr class="hover:bg-white/[0.03]">
              <td class="px-4 py-3 align-top"><code class="rounded bg-white/5 px-2 py-1 font-mono text-xs text-cyan-100">{entry.key_id}</code></td>
              <td class="px-4 py-3 align-top"><code class="text-xs text-slate-200">{entry.remote_addr || '—'}</code></td>
              <td class="px-4 py-3 align-top text-slate-200">{formatDate(entry.last_accessed_at)}</td>
              <td class="px-4 py-3 align-top"><code class="text-slate-100">{entry.last_path}</code></td>
              <td class="max-w-[16rem] truncate px-4 py-3 align-top text-xs text-slate-400">{entry.user_agent ?? '—'}</td>
              <td class="px-4 py-3 align-top font-semibold text-white">{entry.request_count}</td>
            </tr>
          {/each}
        </tbody>
      </table>
    </div>
  </div>
</section>
