<template>
  <GnModal
    :open="props.open"
    title="API Key Created"
    @update:open="emit('close')"
  >
    <div class="show-token-body">
      <p class="show-token-warning">
        <i class="ph ph-warning-circle"></i>
        Copy this token now — it will <strong>never be shown again</strong>.
      </p>
      <div class="show-token-field">
        <code class="show-token-value">{{ props.token }}</code>
        <GnIconButton
          :icon="copied ? 'ph ph-check' : 'ph ph-copy'"
          :label="copied ? 'Copied!' : 'Copy to clipboard'"
          @click="copy(props.token)"
        />
      </div>
    </div>

    <template #actions>
      <GnButton variant="primary" @click="emit('close')">
        Done
      </GnButton>
    </template>
  </GnModal>
</template>

<script setup>
import { useCopy } from '@/composables/useCopy.js'

const props = defineProps({
  open: Boolean,
  token: String,
})

const emit = defineEmits(['close'])

const { copied, copy } = useCopy()
</script>

<style scoped lang="scss">
.show-token-body {
  min-width: 420px;
}

.show-token-warning {
  margin: 0 0 16px;
  font-size: 0.875rem;
  color: var(--color-warning, #e0af68);
  display: flex;
  align-items: center;
  gap: 6px;

  i {
    font-size: 1.1rem;
  }
}

.show-token-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface-panel, #1f2335);
  border: 1px solid var(--color-border, #3b4261);
  border-radius: 6px;
}

.show-token-value {
  flex: 1 1 0;
  font-family: monospace;
  font-size: 0.85rem;
  word-break: break-all;
  color: var(--color-text, #a9b1d6);
}
</style>