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

interface Template {
  id: number
  name: string
  os_family: string
}

interface Props {
  service: Service
  templates: Template[]
}

const props = defineProps<Props>()

const selectedTemplate = ref<number | null>(null)
const confirmText = ref<string>('')

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

const canReinstall = computed<boolean>(() => {
  return selectedTemplate.value !== null && confirmText.value === 'REINSTALL'
})
</script>

<template>
  <ServiceTabLayout
    :service="service"
    :tabs="tabs"
    :current-tab="`/services/${service.id}/dedicated-panel/reinstall`"
  >
    <VCard elevation="0">
      <VCardTitle class="d-flex align-center gap-2">
        <VIcon icon="tabler-reload" color="error" />
        Reinstall Operating System
      </VCardTitle>
      <VCardText>
        <VAlert type="error" variant="tonal" class="mb-6" prominent>
          <VAlertTitle class="font-weight-bold">Warning: Data Loss</VAlertTitle>
          Reinstalling the operating system will erase all data on this server. This action cannot be undone.
        </VAlert>

        <div v-if="templates.length > 0">
          <div class="text-subtitle-2 text-medium-emphasis mb-4">SELECT OPERATING SYSTEM</div>
          <VRow>
            <VCol
              v-for="template in templates"
              :key="template.id"
              cols="12"
              sm="6"
              md="4"
            >
              <VCard
                variant="outlined"
                :color="selectedTemplate === template.id ? 'primary' : undefined"
                class="cursor-pointer h-100"
                @click="selectedTemplate = template.id"
              >
                <VCardText class="d-flex align-center gap-3 pa-4">
                  <VRadio :model-value="selectedTemplate === template.id" :value="true" />
                  <VIcon icon="tabler-server" size="28" />
                  <div>
                    <div class="font-weight-medium">{{ template.name }}</div>
                    <div class="text-caption text-medium-emphasis">{{ template.os_family }}</div>
                  </div>
                </VCardText>
              </VCard>
            </VCol>
          </VRow>
        </div>

        <VAlert v-else type="info" variant="tonal" class="mb-4">
          OS templates are not available. This feature requires SynergyCP API configuration.
        </VAlert>

        <VDivider class="my-6" />

        <div class="text-subtitle-2 text-medium-emphasis mb-4">TYPE "REINSTALL" TO CONFIRM</div>
        <VTextField
          v-model="confirmText"
          label="Type REINSTALL to confirm"
          variant="outlined"
          placeholder="REINSTALL"
          class="mb-4"
          style="max-width: 300px;"
        />

        <VBtn
          color="error"
          size="large"
          class="text-none"
          :disabled="!canReinstall"
        >
          <VIcon icon="tabler-alert-triangle" start />
          Reinstall OS
        </VBtn>
      </VCardText>
    </VCard>
  </ServiceTabLayout>
</template>
