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

interface Props {
  service: Service
}

const props = defineProps<Props>()

const settingsForm = useForm({
  hostname: props.service.hostname ?? '',
  boot_order: 'disk',
})

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 saveSettings(): void {
  settingsForm.put(`/services/${props.service.id}/vps-panel/settings`, {
    preserveScroll: true,
  })
}
</script>

<template>
  <ServiceTabLayout
    :service="service"
    :tabs="tabs"
    :current-tab="`/services/${service.id}/vps-panel/settings`"
  >
    <VCard elevation="0">
      <VCardTitle class="d-flex align-center gap-2">
        <VIcon icon="tabler-settings" color="primary" />
        Server Settings
      </VCardTitle>
      <VCardText>
        <VRow>
          <VCol cols="12" md="6">
            <VTextField
              v-model="settingsForm.hostname"
              label="Hostname"
              variant="outlined"
              placeholder="server1.example.com"
              :error-messages="settingsForm.errors.hostname"
            />
          </VCol>
          <VCol cols="12" md="6">
            <VSelect
              v-model="settingsForm.boot_order"
              :items="[
                { title: 'Disk (Default)', value: 'disk' },
                { title: 'CD-ROM', value: 'cdrom' },
                { title: 'Network', value: 'network' },
              ]"
              label="Boot Order"
              variant="outlined"
              :error-messages="settingsForm.errors.boot_order"
            />
          </VCol>
        </VRow>
      </VCardText>
      <VCardActions>
        <VSpacer />
        <VBtn
          color="primary"
          :loading="settingsForm.processing"
          class="text-none"
          @click="saveSettings"
        >
          <VIcon icon="tabler-device-floppy" start />
          Save Settings
        </VBtn>
      </VCardActions>
    </VCard>
  </ServiceTabLayout>
</template>
