<template>
  <div class="api-keys-panel">
    <div class="api-keys-header">
      <h2 class="api-keys-title">API Keys</h2>
      <GnButton variant="primary" icon="ph ph-plus" @click="openCreateModal">
        New Key
      </GnButton>
    </div>

    <p class="api-keys-description">
      API keys allow headless clients (scripts, voice assistants, IoT devices)
      to authenticate without browser-based OAuth.
    </p>

    <GnAlert v-if="authStore.isNoAuthMode" variant="warning" class="api-keys-warning">
      <i class="ph ph-warning-circle"></i>
      Authorization is currently disabled. Any keys created here are tied to the
      local anonymous user and grant full access to this Navi instance.
    </GnAlert>

    <div v-if="tokensStore.loading" class="api-keys-loading">
      <GnLoader circle label="Loading API keys" />
    </div>

    <GnTable
      v-else
      :columns="columns"
      :rows="tokensStore.tokens"
      empty-text="No API keys yet. Create one to get started."
    >
      <template #cell-token_prefix="{ row }">
        <code>{{ row.token_prefix }}</code>
      </template>
      <template #cell-created_at="{ row }">
        {{ formatDate(row.created_at) }}
      </template>
      <template #cell-last_used_at="{ row }">
        {{ formatDate(row.last_used_at) || 'Never' }}
      </template>
      <template #cell-actions="{ row }">
        <GnIconButton
          icon="ph ph-trash"
          label="Revoke"
          @click="onRevoke(row.id, row.name)"
        />
      </template>
    </GnTable>

    <CreateKeyModal
      :open="createModalOpen"
      :creating="tokensStore.creating"
      @close="createModalOpen = false"
      @submit="onCreate"
    />

    <ShowTokenModal
      :open="showTokenModal"
      :token="createdToken"
      @close="showTokenModal = false"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useApiTokensStore } from '@/stores/apiTokens.js'
import { useAuthStore } from '@/stores/auth.js'
import { useConfirm } from '@/composables/useConfirm.js'
import { useToast } from 'gnexus-ui-kit/vue'
import CreateKeyModal from './CreateKeyModal.vue'
import ShowTokenModal from './ShowTokenModal.vue'

const tokensStore = useApiTokensStore()
const authStore = useAuthStore()
const confirm = useConfirm()
const toast = useToast()

const createModalOpen = ref(false)
const showTokenModal = ref(false)
const createdToken = ref('')

const columns = [
  { key: 'name', label: 'Name' },
  { key: 'token_prefix', label: 'Key' },
  { key: 'created_at', label: 'Created' },
  { key: 'last_used_at', label: 'Last used' },
  { key: 'actions', label: '' },
]

onMounted(() => {
  tokensStore.fetchTokens()
})

function openCreateModal() {
  createModalOpen.value = true
}

async function onCreate(name) {
  try {
    const token = await tokensStore.createToken(name)
    createModalOpen.value = false
    createdToken.value = token.token
    showTokenModal.value = true
  } catch (err) {
    toast.error({ title: 'Failed to create key', text: err.message })
  }
}

async function onRevoke(id, name) {
  const ok = await confirm(`Revoke API key "${name}"? This cannot be undone.`)
  if (!ok) return
  try {
    await tokensStore.revokeToken(id)
    toast.success({ title: 'API key revoked' })
  } catch (err) {
    toast.error({ title: 'Failed to revoke key', text: err.message })
  }
}

function formatDate(iso) {
  if (!iso) return null
  const d = new Date(iso)
  return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
}
</script>

<style scoped lang="scss">
.api-keys-panel {
  margin-bottom: 24px;
}

.api-keys-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.api-keys-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--gn-color-text-medium);
}

.api-keys-description {
  margin: 0 0 16px;
  font-size: 0.875rem;
  color: var(--gn-color-text-medium);
}

.api-keys-warning {
  margin-bottom: 16px;

  i {
    font-size: 16px;
    flex-shrink: 0;
  }
}

.api-keys-loading {
  padding: 24px;
  text-align: center;
}

.api-keys-panel code {
  font-family: var(--gn-font-family-base);
  color: var(--gn-color-text-medium);
}
</style>