<script lang="ts">
  import { goto } from "$app/navigation";

  export let data: {
    companyCount: number | null;
  };

  $: companyCount = data.companyCount;

  const quickActions = [
    {
      href: "/companies",
      name: "Companies",
      desc: "View and manage companies",
      icon: '<path d="M3 21h18"></path><path d="M5 21V7l8-4v18"></path><path d="M19 21V11l-6-4"></path><path d="M9 9h1"></path><path d="M9 13h1"></path><path d="M9 17h1"></path>',
    },
    {
      href: "/admin/users",
      name: "Manage Users",
      desc: "View, edit, and assign user roles",
      icon: '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path>',
    },
    {
      href: "/admin/roles",
      name: "Manage Roles",
      desc: "Configure roles and permissions",
      icon: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>',
    },
    {
      href: "/admin/credential-types",
      name: "Credential Types",
      desc: "Configure credential type definitions",
      icon: '<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path>',
    },
  ];
</script>

<!-- Stats overview -->
<div class="stats-grid">
  <div class="stat-card">
    <div class="stat-icon">
      <svg viewBox="0 0 24 24" fill="none" stroke-width="2">
        <path d="M3 21h18" />
        <path d="M5 21V7l8-4v18" />
        <path d="M19 21V11l-6-4" />
      </svg>
    </div>
    <div class="stat-info">
      <span class="stat-value">{companyCount ?? "—"}</span>
      <span class="stat-label">Companies</span>
    </div>
  </div>

  <div class="stat-card">
    <div class="stat-icon">
      <svg viewBox="0 0 24 24" fill="none" stroke-width="2">
        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
        <circle cx="9" cy="7" r="4" />
        <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
        <path d="M16 3.13a4 4 0 0 1 0 7.75" />
      </svg>
    </div>
    <div class="stat-info">
      <span class="stat-value">—</span>
      <span class="stat-label">Users</span>
    </div>
  </div>

  <div class="stat-card">
    <div class="stat-icon">
      <svg viewBox="0 0 24 24" fill="none" stroke-width="2">
        <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
        <path d="M7 11V7a5 5 0 0 1 10 0v4" />
      </svg>
    </div>
    <div class="stat-info">
      <span class="stat-value">—</span>
      <span class="stat-label">Credentials</span>
    </div>
  </div>

  <div class="stat-card">
    <div class="stat-icon">
      <svg viewBox="0 0 24 24" fill="none" stroke-width="2">
        <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
      </svg>
    </div>
    <div class="stat-info">
      <span class="stat-value">—</span>
      <span class="stat-label">Activity Today</span>
    </div>
  </div>
</div>

<!-- Quick actions -->
<h3 class="section-heading">Quick Actions</h3>
<div class="actions-grid">
  {#each quickActions as action}
    <a
      href={action.href}
      class="action-card"
      on:click|preventDefault={() => goto(action.href)}
    >
      <div class="action-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke-width="2">
          {@html action.icon}
        </svg>
      </div>
      <div class="action-text">
        <span class="action-name">{action.name}</span>
        <span class="action-desc">{action.desc}</span>
      </div>
      <svg
        class="action-arrow"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
      >
        <path d="M5 12h14M12 5l7 7-7 7" />
      </svg>
    </a>
  {/each}
</div>

<!-- Recent activity placeholder -->
<h3 class="section-heading">Recent Activity</h3>
<div class="activity-section">
  <div class="activity-empty">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <circle cx="12" cy="12" r="10" />
      <polyline points="12 6 12 12 16 14" />
    </svg>
    <span>Activity feed coming soon</span>
  </div>
</div>
