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

interface Props { service: Service }

const props = defineProps<Props>()
const tabs = computed(() => [
  { label: 'Dashboard', icon: 'tabler-dashboard', to: `/services/${props.service.id}/hosting-panel` },
  { label: 'Files', icon: 'tabler-folder', to: `/services/${props.service.id}/hosting-panel/files` },
  { label: 'Databases', icon: 'tabler-database', to: `/services/${props.service.id}/hosting-panel/databases` },
  { label: 'Email', icon: 'tabler-mail', to: `/services/${props.service.id}/hosting-panel/email` },
  { label: 'Domains', icon: 'tabler-world', to: `/services/${props.service.id}/hosting-panel/domains` },
  { label: 'DNS', icon: 'tabler-dns', to: `/services/${props.service.id}/hosting-panel/dns` },
  { label: 'SSL', icon: 'tabler-lock', to: `/services/${props.service.id}/hosting-panel/ssl` },
  { label: 'PHP', icon: 'tabler-brand-php', to: `/services/${props.service.id}/hosting-panel/php` },
  { label: 'Cron', icon: 'tabler-clock', to: `/services/${props.service.id}/hosting-panel/cron` },
  { label: 'Settings', icon: 'tabler-settings', to: `/services/${props.service.id}/hosting-panel/settings` },
])
</script>

<template>
  <ServiceTabLayout :service="service" :tabs="tabs" :current-tab="`/services/${service.id}/hosting-panel/settings`">
    <VCard elevation="0">
      <VCardTitle class="d-flex align-center gap-2">
        <VIcon icon="tabler-settings" color="primary" />
        Hosting Settings
      </VCardTitle>
      <VCardText>
        <VRow>
          <VCol cols="12" md="6">
            <VTextField :model-value="service.domain ?? ''" label="Primary Domain" variant="outlined" readonly />
          </VCol>
          <VCol cols="12" md="6">
            <VTextField :model-value="service.plan?.name ?? '--'" label="Current Plan" variant="outlined" readonly />
          </VCol>
          <VCol cols="12" md="6">
            <VTextField :model-value="service.ipv4_address ?? ''" label="Server IP" variant="outlined" readonly />
          </VCol>
          <VCol cols="12" md="6">
            <VTextField :model-value="service.provisioning_info?.username as string ?? ''" label="Username" variant="outlined" readonly />
          </VCol>
        </VRow>

        <VAlert type="info" variant="tonal" class="mt-4">
          Hosting settings management requires Enhance API configuration.
          For advanced settings, use the Enhance control panel directly.
        </VAlert>
      </VCardText>
    </VCard>
  </ServiceTabLayout>
</template>
