<script lang="ts" setup>
import { computed } from 'vue'
import { useForm } from '@inertiajs/vue3'
import ServiceTabLayout from '@/Components/Panel/ServiceTabLayout.vue'
import ResourceGauge from '@/Components/Panel/ResourceGauge.vue'
import ActivityLog from '@/Components/Panel/ActivityLog.vue'
import { resolveServiceStatusColor } from '@/utils/resolvers'
import type { Service } from '@/types'

interface ActivityEntry {
  action: string
  timestamp: string
  details: string
}

interface ServerStatus {
  status: string
  ip_address?: string
  hostname?: string
  platform_data?: Record<string, unknown>
}

interface Props {
  service: Service
  serverStatus: ServerStatus | null
  recentActivity: ActivityEntry[]
}

const props = defineProps<Props>()

const powerForm = useForm({})

const tabs = computed(() => [
  { label: 'Dashboard', icon: 'tabler-dashboard', to: `/services/${props.service.id}/vps-panel` },
  { label: 'Console', icon: 'tabler-terminal-2', to: `/services/${props.service.id}/vps-panel/console` },
  { label: 'Graphs', icon: 'tabler-chart-line', to: `/services/${props.service.id}/vps-panel/graphs` },
  { label: 'Firewall', icon: 'tabler-shield', to: `/services/${props.service.id}/vps-panel/firewall` },
  { label: 'Snapshots', icon: 'tabler-camera', to: `/services/${props.service.id}/vps-panel/snapshots` },
  { label: 'Backups', icon: 'tabler-database', to: `/services/${props.service.id}/vps-panel/backups` },
  { label: 'Network', icon: 'tabler-network', to: `/services/${props.service.id}/vps-panel/network` },
  { label: 'Rebuild', icon: 'tabler-reload', to: `/services/${props.service.id}/vps-panel/rebuild` },
  { label: 'Settings', icon: 'tabler-settings', to: `/services/${props.service.id}/vps-panel/settings` },
  { label: 'Activity', icon: 'tabler-history', to: `/services/${props.service.id}/vps-panel/activity` },
])

const cpuUsage = computed<number>(() => {
  const data = props.serverStatus?.platform_data as Record<string, number> | undefined
  return data?.cpu_usage ?? 0
})

const memoryUsage = computed<number>(() => {
  const data = props.serverStatus?.platform_data as Record<string, number> | undefined
  return data?.memory_usage ?? 0
})

const diskUsage = computed<number>(() => {
  const data = props.serverStatus?.platform_data as Record<string, number> | undefined
  return data?.disk_usage ?? 0
})

function performPowerAction(action: 'boot' | 'shutdown' | 'restart' | 'poweroff'): void {
  powerForm.post(`/services/${props.service.id}/vps/${action}`, {
    preserveScroll: true,
  })
}
</script>

<template>
  <ServiceTabLayout
    :service="service"
    :tabs="tabs"
    :current-tab="`/services/${service.id}/vps-panel`"
  >
    <VRow>
      <!-- Status & Quick Actions -->
      <VCol cols="12" lg="8">
        <VCard class="mb-6" elevation="0">
          <VCardTitle class="d-flex align-center gap-2">
            <VIcon icon="tabler-activity" color="primary" />
            Server Status
          </VCardTitle>
          <VCardText>
            <VRow>
              <VCol cols="12" sm="6" md="3">
                <div class="text-caption text-medium-emphasis mb-1">STATUS</div>
                <VChip
                  :color="resolveServiceStatusColor(service.status)"
                  class="text-capitalize"
                >
                  <VIcon icon="tabler-circle-filled" size="8" start />
                  {{ service.status }}
                </VChip>
              </VCol>
              <VCol cols="12" sm="6" md="3">
                <div class="text-caption text-medium-emphasis mb-1">IPv4 ADDRESS</div>
                <code v-if="service.ipv4_address">{{ service.ipv4_address }}</code>
                <span v-else class="text-medium-emphasis">Not assigned</span>
              </VCol>
              <VCol cols="12" sm="6" md="3">
                <div class="text-caption text-medium-emphasis mb-1">HOSTNAME</div>
                <code v-if="service.hostname">{{ service.hostname }}</code>
                <span v-else class="text-medium-emphasis">Not set</span>
              </VCol>
              <VCol cols="12" sm="6" md="3">
                <div class="text-caption text-medium-emphasis mb-1">PLAN</div>
                <span class="font-weight-medium">{{ service.plan?.name ?? '--' }}</span>
              </VCol>
            </VRow>
          </VCardText>
        </VCard>

        <!-- Power Controls -->
        <VCard class="mb-6" elevation="0">
          <VCardTitle class="d-flex align-center gap-2">
            <VIcon icon="tabler-power" color="primary" />
            Power Management
          </VCardTitle>
          <VCardText>
            <div class="d-flex flex-wrap gap-3">
              <VBtn
                color="success"
                variant="flat"
                :loading="powerForm.processing"
                class="text-none"
                @click="performPowerAction('boot')"
              >
                <VIcon icon="tabler-player-play" start />
                Boot
              </VBtn>
              <VBtn
                color="warning"
                variant="flat"
                :loading="powerForm.processing"
                class="text-none"
                @click="performPowerAction('restart')"
              >
                <VIcon icon="tabler-refresh" start />
                Restart
              </VBtn>
              <VBtn
                color="error"
                variant="flat"
                :loading="powerForm.processing"
                class="text-none"
                @click="performPowerAction('shutdown')"
              >
                <VIcon icon="tabler-player-stop" start />
                Shutdown
              </VBtn>
              <VBtn
                color="error"
                variant="outlined"
                :loading="powerForm.processing"
                class="text-none"
                @click="performPowerAction('poweroff')"
              >
                <VIcon icon="tabler-power" start />
                Force Power Off
              </VBtn>
            </div>
          </VCardText>
        </VCard>

        <!-- Resource Gauges -->
        <VCard class="mb-6" elevation="0">
          <VCardTitle class="d-flex align-center gap-2">
            <VIcon icon="tabler-cpu" color="primary" />
            Resource Usage
          </VCardTitle>
          <VCardText>
            <div class="d-flex flex-wrap justify-space-around gap-4">
              <ResourceGauge label="CPU" :value="cpuUsage" color="info" />
              <ResourceGauge label="Memory" :value="memoryUsage" color="success" />
              <ResourceGauge label="Disk" :value="diskUsage" color="warning" />
            </div>
            <VAlert
              v-if="!serverStatus"
              type="info"
              variant="tonal"
              class="mt-4"
            >
              Resource usage data requires API configuration. Connect VirtFusion to see live metrics.
            </VAlert>
          </VCardText>
        </VCard>
      </VCol>

      <!-- Sidebar: Recent Activity -->
      <VCol cols="12" lg="4">
        <VCard elevation="0">
          <VCardTitle class="d-flex align-center gap-2">
            <VIcon icon="tabler-history" color="primary" />
            Recent Activity
          </VCardTitle>
          <VCardText>
            <ActivityLog :activities="recentActivity" />
          </VCardText>
        </VCard>
      </VCol>
    </VRow>
  </ServiceTabLayout>
</template>
