<template>
  <section>
    <div class="panel-title">
      <h2>Atlas Footprint</h2>
      <span class="pill mono">{{ nodes.length }} nodes total</span>
    </div>
    <div class="grid three">
      <div class="card stat">
        <div class="label">Control plane</div>
        <div class="value accent">{{ controlPlane }}</div>
        <p>HA rpi5 set with dedicated db node (titan-db).</p>
      </div>
      <div class="card stat">
        <div class="label">Pi workers</div>
        <div class="value">{{ piWorkers }}</div>
        <p>Pi5s handle most workloads; Pi4s mount astreae/asteria disks.</p>
      </div>
      <div class="card stat">
        <div class="label">Accelerators</div>
        <div class="value">{{ accelerators }}</div>
        <p>Jetson pair for AI, GPU mini-pc titan-22 for Jellyfin.</p>
      </div>
      <div class="card stat">
        <div class="label">Dedicated hosts</div>
        <div class="value">{{ specialty.length }}</div>
        <p>Database node and jumphost kept outside the Atlas cluster.</p>
      </div>
      <div class="card stat">
        <div class="label">Storage fabric</div>
        <div class="value">Longhorn</div>
        <p>Backs Jellyfin, Nextcloud, Harbor, and CI artifacts.</p>
      </div>
      <div class="card stat" v-if="offline.length">
        <div class="label">Attention</div>
        <div class="value danger">{{ offline.length }} offline</div>
        <p class="mono">Impacted: {{ offlineNames }}</p>
      </div>
    </div>
    <div class="divider"></div>
    <div class="specialty">
      <div v-for="node in specialty" :key="node.name" class="mini-card">
        <div class="label">{{ node.alias || node.name }}</div>
        <div class="value">{{ node.role }}</div>
        <small>Status: {{ node.status }}</small>
      </div>
    </div>
  </section>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  hardware: Object,
});

const nodes = computed(() => props.hardware?.clusters?.[0]?.nodes || []);
const specialty = computed(() => props.hardware?.specialty || []);

const controlPlane = computed(() => nodes.value.filter((n) => n.role.includes("control")).length);
const piWorkers = computed(() => nodes.value.filter((n) => n.role.includes("worker")).length);
const accelerators = computed(() => nodes.value.filter((n) => n.role.includes("jetson") || n.role.includes("gpu")).length);
const offline = computed(() => nodes.value.filter((n) => n.status === "offline"));
const offlineNames = computed(() => offline.value.map((n) => n.name).join(", "));
</script>

<style scoped>
.stat {
  min-height: 150px;
}

.label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--text-muted);
}

.value {
  font-size: 28px;
  font-weight: 700;
  margin: 8px 0;
  color: var(--text-strong);
}

.danger {
  color: var(--accent-rose);
}

.specialty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.mini-card {
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
}
</style>
