<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import {
  dataManagementAPI,
  type BackupAgentHealth
} from '@/api/admin/dataManagement'
import PostgresProfilesCard from './components/PostgresProfilesCard.vue'
import RedisProfilesCard from './components/RedisProfilesCard.vue'
import S3ProfilesCard from './components/S3ProfilesCard.vue'
import BackupJobsCard from './components/BackupJobsCard.vue'

const { t } = useI18n()

const agentHealth = ref<BackupAgentHealth | null>(null)

const postgresCard = ref<InstanceType<typeof PostgresProfilesCard> | null>(null)
const redisCard = ref<InstanceType<typeof RedisProfilesCard> | null>(null)
const s3Card = ref<InstanceType<typeof S3ProfilesCard> | null>(null)
const backupCard = ref<InstanceType<typeof BackupJobsCard> | null>(null)

function formatUptime(seconds: number): string {
  const days = Math.floor(seconds / 86400)
  const hours = Math.floor((seconds % 86400) / 3600)
  const mins = Math.floor((seconds % 3600) / 60)
  if (days > 0) return `${days}d ${hours}h`
  if (hours > 0) return `${hours}h ${mins}m`
  return `${mins}m`
}

async function fetchAgentHealth() {
  try {
    agentHealth.value = await dataManagementAPI.getAgentHealth()
  } catch (err: any) {
    console.error('[DataManagementView] Failed to fetch agent health', err)
  }
}

onMounted(fetchAgentHealth)
</script>

<template>
  <div class="space-y-6">
    <!-- Page Header -->
    <div class="flex items-center justify-between">
      <div>
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
          {{ t('admin.dataManagement.title') }}
        </h2>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
          {{ t('admin.dataManagement.description') }}
        </p>
      </div>
      <div class="flex items-center gap-2">
        <span
          class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium"
          :class="agentHealth?.enabled ? 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400' : 'bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400'"
        >
          {{ agentHealth?.enabled ? t('admin.dataManagement.agent.enabled') : t('admin.dataManagement.agent.disabled') }}
        </span>
      </div>
    </div>

    <!-- Agent Status Card -->
    <div class="card p-6">
      <div class="flex items-center justify-between">
        <div>
          <h3 class="text-base font-semibold text-gray-900 dark:text-white">
            {{ t('admin.dataManagement.agent.title') }}
          </h3>
          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
            {{ agentHealth?.reason || t('admin.dataManagement.agent.statusUnknown') }}
          </p>
        </div>
        <div v-if="agentHealth?.agent" class="text-right text-sm text-gray-500 dark:text-gray-400">
          <div>{{ t('admin.dataManagement.agent.version') }}: {{ agentHealth.agent.version }}</div>
          <div>{{ t('admin.dataManagement.agent.uptime') }}: {{ formatUptime(agentHealth.agent.uptime_seconds) }}</div>
        </div>
      </div>
    </div>

    <!-- PostgreSQL Profiles -->
    <PostgresProfilesCard ref="postgresCard" />

    <!-- Redis Profiles -->
    <RedisProfilesCard ref="redisCard" />

    <!-- S3 Profiles -->
    <S3ProfilesCard ref="s3Card" />

    <!-- Backup Jobs -->
    <BackupJobsCard ref="backupCard" />
  </div>
</template>
