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

interface IpEntry {
  address: string
  type: string
  primary: boolean
}

interface Vlan {
  id: number
  name: string
  tag: number
}

interface NetworkData {
  ips: IpEntry[]
  vlans: Vlan[]
}

interface Props {
  service: Service
  networkData: NetworkData
}

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/network`"
  >
    <VCard class="mb-6" elevation="0">
      <VCardTitle class="d-flex align-center gap-2">
        <VIcon icon="tabler-network" color="primary" />
        IP Addresses
      </VCardTitle>
      <VCardText>
        <VTable v-if="networkData.ips.length > 0" hover>
          <thead>
            <tr>
              <th class="font-weight-bold">Address</th>
              <th class="font-weight-bold">Type</th>
              <th class="font-weight-bold">Primary</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="ip in networkData.ips" :key="ip.address">
              <td><code>{{ ip.address }}</code></td>
              <td>
                <VChip :color="ip.type === 'IPv4' ? 'info' : 'secondary'" size="small">
                  {{ ip.type }}
                </VChip>
              </td>
              <td>
                <VIcon
                  :icon="ip.primary ? 'tabler-check' : 'tabler-x'"
                  :color="ip.primary ? 'success' : 'secondary'"
                  size="20"
                />
              </td>
            </tr>
          </tbody>
        </VTable>

        <div v-else class="text-center pa-6 text-medium-emphasis">
          No IP addresses assigned
        </div>
      </VCardText>
    </VCard>

    <VCard v-if="networkData.vlans.length > 0" elevation="0">
      <VCardTitle class="d-flex align-center gap-2">
        <VIcon icon="tabler-topology-ring-3" color="primary" />
        VLANs
      </VCardTitle>
      <VCardText>
        <VTable hover>
          <thead>
            <tr>
              <th class="font-weight-bold">Name</th>
              <th class="font-weight-bold">VLAN Tag</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="vlan in networkData.vlans" :key="vlan.id">
              <td class="font-weight-medium">{{ vlan.name }}</td>
              <td><code>{{ vlan.tag }}</code></td>
            </tr>
          </tbody>
        </VTable>
      </VCardText>
    </VCard>
  </ServiceTabLayout>
</template>
