<template>
  <div class="fc-extkey-bar">
    <span class="fc-extkey-bar__label">Extension API key:</span>
    <code class="fc-extkey-bar__value">{{ store.extensionKey || '…' }}</code>
    <v-btn size="small" variant="text" @click="copyKey" :disabled="!store.extensionKey">
      Copy
    </v-btn>
    <v-btn size="small" variant="outlined" color="warning" @click="confirmRotate">
      Rotate
    </v-btn>
    <v-dialog v-model="showRotateConfirm" max-width="420">
      <v-card>
        <v-card-title>Rotate extension API key?</v-card-title>
        <v-card-text>
          The old key stops working immediately. Update your browser extension
          with the new key after rotating.
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn variant="text" @click="showRotateConfirm = false">Cancel</v-btn>
          <v-btn color="warning" variant="flat" @click="doRotate">Rotate</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script setup>
import { toast } from '../../utils/toast.js'
import { onMounted, ref } from 'vue'
import { useCredentialsStore } from '../../stores/credentials.js'
import { copyText } from '../../utils/clipboard.js'

const store = useCredentialsStore()
const showRotateConfirm = ref(false)

onMounted(() => store.loadKey())

async function copyKey() {
  if (!store.extensionKey) return
  try {
    await copyText(store.extensionKey)
    toast({ text: 'Copied', type: 'success' })
  } catch {
    toast({ text: 'Copy failed', type: 'error' })
  }
}

function confirmRotate() { showRotateConfirm.value = true }

async function doRotate() {
  showRotateConfirm.value = false
  await store.rotateKey()
  toast({ text: 'Key rotated', type: 'success' })
}
</script>

<style scoped>
.fc-extkey-bar {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem; margin-bottom: 1rem;
  background: rgb(var(--v-theme-surface));
  border: 1px solid rgb(var(--v-theme-on-surface-variant) / 0.18);
  border-radius: 6px;
}
.fc-extkey-bar__label {
  color: rgb(var(--v-theme-on-surface-variant));
  font-size: 0.85rem;
}
.fc-extkey-bar__value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
