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

interface HardwareInfo {
  cpu: string | null
  memory: string | null
  disks: Array<{ name: string; size: string; type: string }>
  network_ports: Array<{ name: string; speed: string }>
}

interface Props {
  service: Service
  hardwareInfo: HardwareInfo
}

const props = defineProps<Props>()

const tabs = computed(() => [
  { label: 'Dashboard', icon: 'tabler-dashboard', to: `/services/${props.service.id}/dedicated-panel` },
  { label: 'Console', icon: 'tabler-terminal-2', to: `/services/${props.service.id}/dedicated-panel/console` },
  { label: 'Bandwidth', icon: 'tabler-chart-area-line', to: `/services/${props.service.id}/dedicated-panel/bandwidth` },
  { label: 'Network', icon: 'tabler-network', to: `/services/${props.service.id}/dedicated-panel/network` },
  { label: 'Reinstall', icon: 'tabler-reload', to: `/services/${props.service.id}/dedicated-panel/reinstall` },
  { label: 'Settings', icon: 'tabler-settings', to: `/services/${props.service.id}/dedicated-panel/settings` },
])
</script>

<template>
  <ServiceTabLayout
    :service="service"
    :tabs="tabs"
    :current-tab="`/services/${service.id}/dedicated-panel`"
  >
    <VRow>
      <VCol cols="12" lg="8">
        <!-- Status -->
        <VCard class="mb-6" elevation="0">
          <VCardTitle class="d-flex align-center gap-2">
            <VIcon icon="tabler-server-2" color="primary" />
            Server Overview
          </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>

        <!-- Hardware Information -->
        <VCard class="mb-6" elevation="0">
          <VCardTitle class="d-flex align-center gap-2">
            <VIcon icon="tabler-cpu" color="primary" />
            Hardware Information
          </VCardTitle>
          <VCardText>
            <VRow>
              <VCol cols="12" sm="6">
                <div class="text-caption text-medium-emphasis mb-1">CPU</div>
                <div class="text-body-1 font-weight-medium">
                  {{ hardwareInfo.cpu ?? 'Not available' }}
                </div>
              </VCol>
              <VCol cols="12" sm="6">
                <div class="text-caption text-medium-emphasis mb-1">MEMORY</div>
                <div class="text-body-1 font-weight-medium">
                  {{ hardwareInfo.memory ?? 'Not available' }}
                </div>
              </VCol>
            </VRow>

            <div v-if="hardwareInfo.disks.length > 0" class="mt-4">
              <div class="text-caption text-medium-emphasis mb-2">STORAGE</div>
              <VChip
                v-for="disk in hardwareInfo.disks"
                :key="disk.name"
                class="me-2 mb-2"
                variant="tonal"
              >
                {{ disk.name }}: {{ disk.size }} ({{ disk.type }})
              </VChip>
            </div>

            <VAlert
              v-if="!hardwareInfo.cpu && !hardwareInfo.memory"
              type="info"
              variant="tonal"
              class="mt-4"
            >
              Hardware information requires SynergyCP API configuration.
            </VAlert>
          </VCardText>
        </VCard>

        <!-- Quick Actions -->
        <VCard elevation="0">
          <VCardTitle class="d-flex align-center gap-2">
            <VIcon icon="tabler-bolt" color="primary" />
            Quick Actions
          </VCardTitle>
          <VCardText>
            <div class="d-flex flex-wrap gap-3">
              <Link :href="`/services/${service.id}/dedicated-panel/console`" class="text-decoration-none">
                <VBtn color="primary" variant="tonal" class="text-none">
                  <VIcon icon="tabler-terminal-2" start />
                  IPMI Console
                </VBtn>
              </Link>
              <Link :href="`/services/${service.id}/dedicated-panel/bandwidth`" class="text-decoration-none">
                <VBtn color="primary" variant="tonal" class="text-none">
                  <VIcon icon="tabler-chart-area-line" start />
                  Bandwidth
                </VBtn>
              </Link>
              <Link :href="`/services/${service.id}/dedicated-panel/network`" class="text-decoration-none">
                <VBtn color="primary" variant="tonal" class="text-none">
                  <VIcon icon="tabler-network" start />
                  Network
                </VBtn>
              </Link>
              <Link :href="`/services/${service.id}/dedicated-panel/reinstall`" class="text-decoration-none">
                <VBtn color="error" variant="tonal" class="text-none">
                  <VIcon icon="tabler-reload" start />
                  Reinstall OS
                </VBtn>
              </Link>
            </div>
          </VCardText>
        </VCard>
      </VCol>

      <VCol cols="12" lg="4">
        <VCard elevation="0">
          <VCardTitle class="d-flex align-center gap-2">
            <VIcon icon="tabler-info-circle" color="primary" />
            Service Details
          </VCardTitle>
          <VCardText>
            <VList density="compact" class="pa-0">
              <VListItem class="px-0">
                <VListItemTitle class="text-caption text-medium-emphasis">Service ID</VListItemTitle>
                <VListItemSubtitle class="font-weight-medium">#{{ service.id }}</VListItemSubtitle>
              </VListItem>
              <VListItem class="px-0">
                <VListItemTitle class="text-caption text-medium-emphasis">Platform</VListItemTitle>
                <VListItemSubtitle class="font-weight-medium">SynergyCP</VListItemSubtitle>
              </VListItem>
              <VListItem v-if="service.provisioned_at" class="px-0">
                <VListItemTitle class="text-caption text-medium-emphasis">Provisioned</VListItemTitle>
                <VListItemSubtitle class="font-weight-medium">{{ new Date(service.provisioned_at).toLocaleDateString() }}</VListItemSubtitle>
              </VListItem>
            </VList>
          </VCardText>
        </VCard>
      </VCol>
    </VRow>
  </ServiceTabLayout>
</template>
