<!-- #region AdminHubPage [C:2] [TYPE Page] [SEMANTICS sveltekit, admin, hub, overview] -->
<!-- @ingroup Routes -->
<!-- @BRIEF Admin hub page — overview of admin tools with navigation cards. -->
<!-- @LAYER Page -->
<!--
@SEMANTICS: admin, hub, overview
@PURPOSE:   Central landing page for /admin with cards linking to each admin section.
@LAYER     Page
@RELATION  IMPLEMENTS -> [EXT:frontend:RoutePages]
@UX_STATE  Ready -> Admin section cards rendered as navigation links.
@INVARIANT Each card links to an existing /admin/* sub-route.
@RATIONALE Created to fix 404 on /admin breadcrumb click. The breadcrumb
           "Admin" at /admin/users links to /admin, which had no +page.svelte.
           Now shows a hub page with cards for users, roles, settings, llm.
-->
<script lang="ts">
  import { t } from '$lib/i18n/index.svelte.js';
  import { PageHeader, Card, Icon } from '$lib/ui';

  interface AdminSection {
    label: string;
    path: string;
    description: string;
    icon: string;
  }

  const sections: AdminSection[] = [
    {
      label: $t.nav.admin_users,
      path: '/admin/users',
      description: $t.nav.admin_users_desc,
      icon: 'users',
    },
    {
      label: $t.nav.admin_roles,
      path: '/admin/roles',
      description: $t.nav.admin_roles_desc,
      icon: 'shield',
    },
    {
      label: $t.nav.admin_settings,
      path: '/admin/settings',
      description: $t.nav.admin_settings_desc,
      icon: 'cog',
    },
    {
      label: $t.nav.admin_llm,
      path: '/admin/settings/llm',
      description: $t.nav.admin_llm_desc,
      icon: 'sparkles',
    },
  ];
</script>

<div class="container mx-auto p-4 max-w-6xl">
  <PageHeader title={$t.nav.admin} />

  <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-4">
    {#each sections as section}
      <a
        href={section.path}
        class="group block rounded-lg border border-border bg-surface-card p-5 transition-all hover:border-primary hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-ring"
      >
        <div class="flex items-start gap-4">
          <div class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-surface-muted text-destructive group-hover:bg-destructive/10 transition-colors">
            <Icon name={section.icon} class="h-5 w-5" />
          </div>
          <div class="flex-1 min-w-0">
            <h3 class="text-base font-semibold text-text group-hover:text-primary transition-colors">
              {section.label}
            </h3>
            <p class="mt-1 text-sm text-text-muted line-clamp-2">
              {section.description}
            </p>
          </div>
          <svg class="h-5 w-5 flex-shrink-0 text-text-subtle group-hover:text-primary transition-colors" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
          </svg>
        </div>
      </a>
    {/each}
  </div>
</div>
<!-- #endregion AdminHubPage -->
