<template>
  <v-card max-width="800" max-height="600" class="mx-auto" style="overflow-y: auto;">
    <v-card-title class="headline">
      Server status – {{ status.hostname }}
    </v-card-title>
    <v-card-text>
      <v-expansion-panels accordion>
        <!-- System Info -->
        <v-expansion-panel>
          <v-expansion-panel-header>System Info</v-expansion-panel-header>
          <v-expansion-panel-content>
            <v-row>
              <v-col cols="6">
                <strong>Uptime:</strong> {{ formatUptime(status.uptime) }}
              </v-col>
              <v-col cols="6">
                <strong>Load:</strong> {{ status.loadavg[0].toFixed(2) }} / {{ status.loadavg[1].toFixed(2) }} / {{ status.loadavg[2].toFixed(2) }}
                <v-progress-linear
                  :value="loadAvgPercent"
                  :color="getLoadAvgColor(status.loadavg[0])"
                  height="6"
                  rounded
                ></v-progress-linear>
                <div class="text-caption">
                  1-min Load: {{ status.loadavg[0].toFixed(2) }} ({{ loadAvgPercent.toFixed(1) }}% of max)
                </div>
              </v-col>
            </v-row>
          </v-expansion-panel-content>
        </v-expansion-panel>

        <!-- Memory -->
        <v-expansion-panel>
          <v-expansion-panel-header>Memory</v-expansion-panel-header>
          <v-expansion-panel-content>
            <v-progress-linear
              :value="memoryUsedPercent"
              :color="getProgressColor(memoryUsedPercent)"
              height="10"
              rounded
            ></v-progress-linear>
            <div class="text-caption mt-2">
              Used: {{ formatBytes(status.memory.total - status.memory.free) }} / Total: {{ formatBytes(status.memory.total) }} ({{ memoryUsedPercent.toFixed(1) }}%)
            </div>
          </v-expansion-panel-content>
        </v-expansion-panel>

        <!-- CPUs -->
        <v-expansion-panel>
          <v-expansion-panel-header>CPUs ({{ status.cpus.length }} cores)</v-expansion-panel-header>
          <v-expansion-panel-content>
            <v-row dense>
              <v-col v-for="(cpu, index) in status.cpus" :key="index" cols="12" sm="6">
                <v-card outlined class="pa-2">
                  <div class="text-caption">Core {{ index + 1 }}: {{ cpu.model }} @ {{ cpu.speed }} MHz</div>
                  <v-progress-linear
                    :value="cpuUsagePercent(cpu)"
                    :color="getProgressColor(cpuUsagePercent(cpu))"
                    height="8"
                    rounded
                  ></v-progress-linear>
                  <div class="text-caption">
                    Usage: {{ cpuUsagePercent(cpu).toFixed(1) }}% (Idle: {{ cpuIdlePercent(cpu).toFixed(1) }}%)
                  </div>
                </v-card>
              </v-col>
            </v-row>
          </v-expansion-panel-content>
        </v-expansion-panel>

        <!-- Network Interfaces -->
        <v-expansion-panel>
          <v-expansion-panel-header>Network Interfaces</v-expansion-panel-header>
          <v-expansion-panel-content>
            <v-list dense>
              <v-list-item v-for="(iface, name) in status.networkInterfaces" :key="name">
                <v-list-item-content>
                  <v-list-item-title>{{ name }}</v-list-item-title>
                  <v-list-item-subtitle v-for="(addr, idx) in iface" :key="idx">
                    {{ addr.family }}: {{ addr.address }} (Netmask: {{ addr.netmask }})
                  </v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-list>
          </v-expansion-panel-content>
        </v-expansion-panel>

        <!-- Storage -->
        <v-expansion-panel>
          <v-expansion-panel-header>Storage</v-expansion-panel-header>
          <v-expansion-panel-content>
            <!-- Root -->
            <div class="mb-4">
              <strong>Root (/):</strong>
              <v-progress-linear
                :value="status.storage.root.usedPercent"
                :color="getProgressColor(status.storage.root.usedPercent)"
                height="10"
                rounded
              ></v-progress-linear>
              <div class="text-caption">
                Used: {{ formatBytes(status.storage.root.used) }} / Total: {{ formatBytes(status.storage.root.total) }} ({{ status.storage.root.usedPercent.toFixed(1) }}%)
              </div>
            </div>
            <!-- Data subfolders -->
            <div>
              <strong>Data:</strong>
              <v-expansion-panels flat>
                <v-expansion-panel v-for="(folder, name) in status.storage.data" :key="name">
                  <v-expansion-panel-header disable-icon-rotate>{{ name }}</v-expansion-panel-header>
                  <v-expansion-panel-content>
                    <v-progress-linear
                      :value="folder.usedPercent"
                      :color="getProgressColor(folder.usedPercent)"
                      height="10"
                      rounded
                    ></v-progress-linear>
                    <div class="text-caption">
                      Used: {{ formatBytes(folder.used) }} / Total: {{ formatBytes(folder.total) }} ({{ folder.usedPercent.toFixed(1) }}%)
                    </div>
                  </v-expansion-panel-content>
                </v-expansion-panel>
              </v-expansion-panels>
            </div>
          </v-expansion-panel-content>
        </v-expansion-panel>

        <!-- Database -->
        <v-expansion-panel>
          <v-expansion-panel-header>Database</v-expansion-panel-header>
          <v-expansion-panel-content>
            <div class="mb-2">
              <strong>Total Size:</strong> {{ formatBytes(status.database.size) }}
            </div>
            <v-list dense>
              <v-list-item v-for="(project, name) in status.database.projects" :key="name">
                <v-list-item-content>
                  <v-list-item-title>{{ name }}</v-list-item-title>
                  <v-progress-linear
                    :value="project.percent"
                    :color="getProgressColor(project.percent)"
                    height="8"
                    rounded
                  ></v-progress-linear>
                  <v-list-item-subtitle>
                    Size: {{ formatBytes(project.size) }} ({{ project.percent.toFixed(2) }}%)
                  </v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-list>
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>
    </v-card-text>
  </v-card>
</template>

<script>
export default {
  name: "DougalServerStatus",
  props: {
    status: {
      type: Object,
      required: true
    }
  },
  computed: {
    memoryUsedPercent() {
      return ((this.status.memory.total - this.status.memory.free) / this.status.memory.total) * 100;
    },
    loadAvgPercent() {
      const maxLoad = this.status.cpus.length * 4; // Assume 4x cores as max for scaling
      return Math.min((this.status.loadavg[0] / maxLoad) * 100, 100); // Cap at 100%
    }
  },
  methods: {
    getProgressColor(value) {
      if (value >= 80) return 'error'; // Red for 80–100%
      if (value >= 60) return 'warning'; // Yellow for 60–80%
      return 'success'; // Green for 0–60%
    },
    getLoadAvgColor(load) {
      const coreCount = this.status.cpus.length;
      if (load >= coreCount * 2) return 'error'; // Red for load ≥ 2x cores
      if (load >= coreCount) return 'warning'; // Yellow for load ≥ 1x cores but < 2x
      return 'success'; // Green for load < 1x cores
    },
    formatBytes(bytes) {
      if (bytes === 0) return '0 Bytes';
      const k = 1024;
      const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    },
    formatUptime(seconds) {
      const days = Math.floor(seconds / 86400);
      seconds %= 86400;
      const hours = Math.floor(seconds / 3600);
      seconds %= 3600;
      const minutes = Math.floor(seconds / 60);
      return `${days}d ${hours}h ${minutes}m`;
    },
    cpuUsagePercent(cpu) {
      const total = cpu.times.user + cpu.times.nice + cpu.times.sys + cpu.times.idle + cpu.times.irq;
      return ((total - cpu.times.idle) / total) * 100;
    },
    cpuIdlePercent(cpu) {
      const total = cpu.times.user + cpu.times.nice + cpu.times.sys + cpu.times.idle + cpu.times.irq;
      return (cpu.times.idle / total) * 100;
    }
  }
};
</script>
