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

interface SslCertificate { id: number; domain: string; issuer: string; valid_from: string; valid_to: string; is_auto_renew: boolean }
interface Props { service: Service; certificates: SslCertificate[] }

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

function isExpiring(validTo: string): boolean {
  const d = new Date(validTo)
  const now = new Date()
  const diff = d.getTime() - now.getTime()
  return diff < 30 * 24 * 60 * 60 * 1000
}
</script>

<template>
  <ServiceTabLayout :service="service" :tabs="tabs" :current-tab="`/services/${service.id}/hosting-panel/ssl`">
    <VCard elevation="0">
      <VCardTitle class="d-flex align-center gap-2">
        <VIcon icon="tabler-lock" color="primary" />
        SSL Certificates
      </VCardTitle>
      <VCardText>
        <VTable v-if="certificates.length > 0" hover>
          <thead>
            <tr>
              <th class="font-weight-bold">Domain</th>
              <th class="font-weight-bold">Issuer</th>
              <th class="font-weight-bold">Valid Until</th>
              <th class="font-weight-bold">Auto Renew</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="cert in certificates" :key="cert.id">
              <td class="font-weight-medium">{{ cert.domain }}</td>
              <td>{{ cert.issuer }}</td>
              <td>
                <span :class="{ 'text-error': isExpiring(cert.valid_to) }">
                  {{ new Date(cert.valid_to).toLocaleDateString() }}
                </span>
                <VChip v-if="isExpiring(cert.valid_to)" size="x-small" color="warning" class="ms-2">Expiring</VChip>
              </td>
              <td>
                <VIcon :icon="cert.is_auto_renew ? 'tabler-check' : 'tabler-x'" :color="cert.is_auto_renew ? 'success' : 'secondary'" size="20" />
              </td>
            </tr>
          </tbody>
        </VTable>
        <div v-else class="text-center pa-8 text-medium-emphasis">
          <VIcon icon="tabler-lock-off" size="48" class="mb-2" />
          <div class="text-body-1 mb-2">No SSL certificates</div>
          <div class="text-body-2">SSL management requires Enhance API configuration.</div>
        </div>
      </VCardText>
    </VCard>
  </ServiceTabLayout>
</template>
