<script lang="ts">
  import type { CompanyData, ConfigurationData } from "../types";
  import type { Credential } from "$lib/optima-api/modules/credentials";
  import type { UnifiSite } from "$lib/optima-api/modules/unifi";

  export let company: CompanyData | null;
  export let credentials: Credential[];
  export let configurations: ConfigurationData[];
  export let unifiSites: UnifiSite[];
</script>

<div class="overview-tab">
  <div class="overview-section">
    <h3 class="overview-section-title">
      <svg
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        width="16"
        height="16"
      >
        <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
        <circle cx="12" cy="7" r="4" />
      </svg>
      Company Details
    </h3>
    <div class="overview-details-grid">
      <div class="overview-detail-item">
        <span class="overview-detail-label">Name</span>
        <span class="overview-detail-value">{company?.name ?? "—"}</span>
      </div>
      <div class="overview-detail-item">
        <span class="overview-detail-label">ID</span>
        <span class="overview-detail-value mono">{company?.id ?? "—"}</span>
      </div>
    </div>
  </div>

  <div class="overview-section">
    <h3 class="overview-section-title">
      <svg
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        width="16"
        height="16"
      >
        <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
      </svg>
      At a Glance
    </h3>
    <div class="overview-stats-grid">
      <div class="overview-stat-card">
        <span class="overview-stat-value">{credentials.length}</span>
        <span class="overview-stat-label">Credentials</span>
      </div>
      <div class="overview-stat-card">
        <span class="overview-stat-value">{configurations.length}</span>
        <span class="overview-stat-label">Configurations</span>
      </div>
      <div class="overview-stat-card">
        <span class="overview-stat-value">{unifiSites.length}</span>
        <span class="overview-stat-label">UniFi Sites</span>
      </div>
    </div>
  </div>

  <div class="overview-section">
    <h3 class="overview-section-title">
      <svg
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        width="16"
        height="16"
      >
        <circle cx="12" cy="12" r="10" />
        <path d="M12 6v6l4 2" />
      </svg>
      Recent Activity
    </h3>
    <p class="overview-placeholder">Activity feed coming soon.</p>
  </div>
</div>
