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

interface IpEntry {
  address: string
  type: string
  primary: boolean
  rdns: string | null
}

interface BandwidthEntry {
  date: string
  in: number
  out: number
}

interface NetworkData {
  ips: IpEntry[]
  bandwidth: BandwidthEntry[]
}

interface Props {
  service: Service
  networkData: NetworkData
}

const props = defineProps<Props>()

const rdnsForm = useForm({
  ip: '',
  rdns: '',
})

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` },
])

function editRdns(ip: IpEntry): void {
  rdnsForm.ip = ip.address
  rdnsForm.rdns = ip.rdns ?? ''
}

function submitRdns(): void {
  rdnsForm.put(`/services/${props.service.id}/vps-panel/network/rdns`, {
    preserveScroll: true,
    onSuccess: () => {
      rdnsForm.reset()
    },
  })
}
</script>

<template>
  <ServiceTabLayout
    :service="service"
    :tabs="tabs"
    :current-tab="`/services/${service.id}/vps-panel/network`"
  >
    <VRow>
      <VCol cols="12">
        <!-- IP Addresses -->
        <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>
                  <th class="font-weight-bold">Reverse DNS</th>
                  <th class="text-end font-weight-bold">Actions</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>
                  <td>
                    <code v-if="ip.rdns">{{ ip.rdns }}</code>
                    <span v-else class="text-medium-emphasis">Not set</span>
                  </td>
                  <td class="text-end">
                    <VBtn
                      icon="tabler-edit"
                      variant="text"
                      size="small"
                      color="primary"
                      title="Edit rDNS"
                      @click="editRdns(ip)"
                    />
                  </td>
                </tr>
              </tbody>
            </VTable>

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

        <!-- rDNS Editor -->
        <VCard v-if="rdnsForm.ip" class="mb-6" elevation="0">
          <VCardTitle class="d-flex align-center gap-2">
            <VIcon icon="tabler-arrows-exchange" color="primary" />
            Update Reverse DNS for {{ rdnsForm.ip }}
          </VCardTitle>
          <VCardText>
            <VTextField
              v-model="rdnsForm.rdns"
              label="Reverse DNS Hostname"
              variant="outlined"
              placeholder="server1.example.com"
              :error-messages="rdnsForm.errors.rdns"
            />
          </VCardText>
          <VCardActions>
            <VSpacer />
            <VBtn variant="text" @click="rdnsForm.reset()">Cancel</VBtn>
            <VBtn
              color="primary"
              :loading="rdnsForm.processing"
              @click="submitRdns"
            >
              Update rDNS
            </VBtn>
          </VCardActions>
        </VCard>

        <!-- Bandwidth Overview -->
        <VCard elevation="0">
          <VCardTitle class="d-flex align-center gap-2">
            <VIcon icon="tabler-chart-area-line" color="primary" />
            Bandwidth Overview
          </VCardTitle>
          <VCardText>
            <BandwidthChart :data="networkData.bandwidth" period="24h" />
          </VCardText>
        </VCard>
      </VCol>
    </VRow>
  </ServiceTabLayout>
</template>
