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

interface PhpSetting { key: string; value: string; description: string }
interface PhpConfig { version: string; available_versions: string[]; settings: PhpSetting[] }
interface Props { service: Service; phpConfig: PhpConfig }

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/php`">
    <VCard class="mb-6" elevation="0">
      <VCardTitle class="d-flex align-center gap-2">
        <VIcon icon="tabler-brand-php" color="primary" />
        PHP Configuration
      </VCardTitle>
      <VCardText>
        <VRow>
          <VCol cols="12" md="6">
            <VSelect
              :model-value="phpConfig.version"
              :items="phpConfig.available_versions"
              label="PHP Version"
              variant="outlined"
              readonly
              hint="PHP version changes require Enhance API configuration"
              persistent-hint
            />
          </VCol>
        </VRow>

        <div v-if="phpConfig.settings.length > 0" class="mt-6">
          <div class="text-subtitle-2 text-medium-emphasis mb-4">PHP SETTINGS</div>
          <VTable hover>
            <thead>
              <tr>
                <th class="font-weight-bold">Setting</th>
                <th class="font-weight-bold">Value</th>
                <th class="font-weight-bold">Description</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="setting in phpConfig.settings" :key="setting.key">
                <td class="font-weight-medium"><code>{{ setting.key }}</code></td>
                <td><code>{{ setting.value }}</code></td>
                <td class="text-body-2 text-medium-emphasis">{{ setting.description }}</td>
              </tr>
            </tbody>
          </VTable>
        </div>

        <VAlert v-else type="info" variant="tonal" class="mt-4">
          PHP configuration management requires Enhance API configuration.
        </VAlert>
      </VCardText>
    </VCard>
  </ServiceTabLayout>
</template>
