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

const keys = ref<any[]>([])
const loading = ref(true)
const showImport = ref(false)
const deletingId = ref<number | null>(null)

async function load() {
  loading.value = true
  try {
    keys.value = (await vault.listKeys()) as any[]
  } finally {
    loading.value = false
  }
}

async function confirmDelete(key: any) {
  if (!confirm(`Delete SSH key "${key.name}"? This cannot be undone.`)) return
  deletingId.value = key.id
  try {
    await vault.deleteKey(key.id)
    await load()
  } finally {
    deletingId.value = null
  }
}

function formatDate(iso: string) {
  return new Date(iso).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
}

onMounted(load)
</script>

<template>
  <div class="max-w-4xl mx-auto p-6">
    <div class="flex items-center justify-between mb-6">
      <div class="flex items-center gap-3">
        <NuxtLink to="/vault" class="text-gray-500 hover:text-gray-300 text-sm">Vault</NuxtLink>
        <span class="text-gray-700">/</span>
        <h2 class="text-xl font-bold text-white">SSH Keys</h2>
      </div>
      <button @click="showImport = true"
        class="px-3 py-1.5 bg-wraith-600 hover:bg-wraith-700 text-white text-sm rounded">
        Import Key
      </button>
    </div>

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

    <div v-else-if="keys.length === 0" class="text-center py-12 text-gray-600">
      <p>No SSH keys yet.</p>
      <button @click="showImport = true" class="mt-3 text-wraith-400 hover:text-wraith-300 text-sm">
        Import your first key
      </button>
    </div>

    <div v-else class="bg-gray-800 rounded-lg border border-gray-700 overflow-hidden">
      <table class="w-full text-sm">
        <thead>
          <tr class="border-b border-gray-700 text-gray-400">
            <th class="text-left px-4 py-3 font-medium">Name</th>
            <th class="text-left px-4 py-3 font-medium">Type</th>
            <th class="text-left px-4 py-3 font-medium">Fingerprint</th>
            <th class="text-left px-4 py-3 font-medium">Created</th>
            <th class="px-4 py-3"></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="key in keys" :key="key.id"
            class="border-b border-gray-700/50 hover:bg-gray-700/30">
            <td class="px-4 py-3 text-white font-medium">{{ key.name }}</td>
            <td class="px-4 py-3">
              <span class="px-2 py-0.5 bg-gray-700 text-gray-300 rounded text-xs font-mono">
                {{ key.keyType || 'rsa' }}
              </span>
            </td>
            <td class="px-4 py-3 text-gray-400 font-mono text-xs">
              {{ key.fingerprint || '—' }}
            </td>
            <td class="px-4 py-3 text-gray-400">{{ formatDate(key.createdAt) }}</td>
            <td class="px-4 py-3 text-right">
              <button @click="confirmDelete(key)"
                :disabled="deletingId === key.id"
                class="text-xs text-red-400 hover:text-red-300 disabled:opacity-50">
                {{ deletingId === key.id ? 'Deleting...' : 'Delete' }}
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <KeyImportDialog v-model:visible="showImport" @imported="load" />
  </div>
</template>
