<script setup lang="ts">
const vault = useVault()

const keyCount = ref(0)
const credCount = ref(0)
const loading = ref(true)

onMounted(async () => {
  try {
    const [keys, creds] = await Promise.all([
      vault.listKeys() as Promise<any[]>,
      vault.listCredentials() as Promise<any[]>,
    ])
    keyCount.value = keys.length
    credCount.value = creds.length
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <div class="max-w-3xl mx-auto p-6">
    <h2 class="text-xl font-bold text-white mb-6">Vault</h2>

    <div v-if="loading" class="text-gray-500 text-sm">Loading...</div>

    <div v-else class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <NuxtLink to="/vault/keys"
        class="block p-5 bg-gray-800 rounded-lg border border-gray-700 hover:border-wraith-500 transition-colors">
        <div class="flex items-center gap-3 mb-2">
          <svg class="w-6 h-6 text-wraith-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
          </svg>
          <h3 class="text-lg font-semibold text-white">SSH Keys</h3>
        </div>
        <p class="text-3xl font-bold text-wraith-400">{{ keyCount }}</p>
        <p class="text-sm text-gray-400 mt-1">{{ keyCount === 1 ? 'key' : 'keys' }} stored</p>
        <p class="text-xs text-gray-500 mt-3">Manage and import SSH private keys</p>
      </NuxtLink>

      <NuxtLink to="/vault/credentials"
        class="block p-5 bg-gray-800 rounded-lg border border-gray-700 hover:border-wraith-500 transition-colors">
        <div class="flex items-center gap-3 mb-2">
          <svg class="w-6 h-6 text-wraith-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
          </svg>
          <h3 class="text-lg font-semibold text-white">Credentials</h3>
        </div>
        <p class="text-3xl font-bold text-wraith-400">{{ credCount }}</p>
        <p class="text-sm text-gray-400 mt-1">{{ credCount === 1 ? 'credential' : 'credentials' }} stored</p>
        <p class="text-xs text-gray-500 mt-3">Manage passwords and SSH key credentials</p>
      </NuxtLink>
    </div>

    <div class="mt-8 p-4 bg-gray-800/50 rounded border border-gray-700">
      <p class="text-xs text-gray-500">
        All secrets are encrypted at rest using AES-256-GCM. Private keys and passwords are never exposed via the API.
      </p>
    </div>
  </div>
</template>
