<template>
  <Teleport to="body">
    <Transition name="identity-picker">
      <div
        v-if="show"
        class="fixed inset-0 z-[3100] flex items-center justify-center p-4"
        @click="$emit('cancel')"
      >
        <!-- Backdrop -->
        <div class="absolute inset-0 bg-black/60 backdrop-blur-md"></div>

        <!-- Main panel -->
        <div
          ref="modalRef"
          @click.stop
          class="relative z-10 w-full max-w-lg"
        >
          <!-- Header with animated key icon -->
          <div class="relative mb-6 flex flex-col items-center">
            <div class="key-glow-ring">
              <svg viewBox="0 0 120 120" class="w-20 h-20" xmlns="http://www.w3.org/2000/svg">
                <!-- Outer ring -->
                <circle cx="60" cy="60" r="54" fill="none" stroke="rgba(251,146,60,0.2)" stroke-width="1" />
                <circle cx="60" cy="60" r="54" fill="none" stroke="#fb923c" stroke-width="1.5"
                  stroke-dasharray="8 6" class="ring-spin" />
                <!-- Inner ring -->
                <circle cx="60" cy="60" r="38" fill="none" stroke="rgba(251,146,60,0.1)" stroke-width="1" />
                <circle cx="60" cy="60" r="38" fill="none" stroke="#fb923c" stroke-width="1"
                  stroke-dasharray="4 8" class="ring-spin-reverse" />
                <!-- Key icon -->
                <g transform="translate(60,60)" class="key-breathe">
                  <circle cx="0" cy="-8" r="10" fill="none" stroke="#fb923c" stroke-width="2" />
                  <circle cx="0" cy="-8" r="4" fill="#fb923c" opacity="0.4" />
                  <line x1="0" y1="2" x2="0" y2="22" stroke="#fb923c" stroke-width="2" />
                  <line x1="0" y1="14" x2="6" y2="14" stroke="#fb923c" stroke-width="2" />
                  <line x1="0" y1="19" x2="4" y2="19" stroke="#fb923c" stroke-width="2" />
                </g>
                <!-- Network dots -->
                <circle cx="16" cy="28" r="2" fill="#fb923c" opacity="0.5" class="node-pulse" style="--pulse-delay: 0s" />
                <circle cx="104" cy="32" r="2" fill="#fb923c" opacity="0.5" class="node-pulse" style="--pulse-delay: 0.5s" />
                <circle cx="20" cy="92" r="2" fill="#fb923c" opacity="0.5" class="node-pulse" style="--pulse-delay: 1s" />
                <circle cx="100" cy="88" r="2" fill="#fb923c" opacity="0.5" class="node-pulse" style="--pulse-delay: 1.5s" />
                <!-- Connection lines -->
                <line x1="16" y1="28" x2="40" y2="48" stroke="#fb923c" stroke-width="0.5" opacity="0.2" />
                <line x1="104" y1="32" x2="80" y2="48" stroke="#fb923c" stroke-width="0.5" opacity="0.2" />
                <line x1="20" y1="92" x2="40" y2="72" stroke="#fb923c" stroke-width="0.5" opacity="0.2" />
                <line x1="100" y1="88" x2="80" y2="72" stroke="#fb923c" stroke-width="0.5" opacity="0.2" />
              </svg>
            </div>

            <h2 class="mt-4 text-lg font-semibold text-white">Select Identity</h2>
            <p class="mt-1 text-xs text-white/50">Nostr authentication protocol</p>
          </div>

          <!-- Identity list -->
          <div class="glass-card p-4 space-y-3 max-h-[50vh] overflow-y-auto">
            <!-- Loading -->
            <div v-if="loading" class="flex items-center justify-center py-8">
              <svg class="animate-spin h-6 w-6 text-orange-400" viewBox="0 0 24 24" fill="none">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
              </svg>
              <span class="ml-3 text-white/60 text-sm">Loading identities...</span>
            </div>

            <!-- No identities -->
            <div v-else-if="identities.length === 0" class="text-center py-8">
              <p class="text-white/50 text-sm">No identities found.</p>
              <p class="text-white/30 text-xs mt-1">Create one in Settings &rarr; Credentials</p>
            </div>

            <!-- Identity cards -->
            <button
              v-for="identity in identities"
              :key="identity.id"
              type="button"
              class="w-full text-left p-3 rounded-lg border transition-all duration-200"
              :class="selectedId === identity.id
                ? 'bg-orange-500/10 border-orange-500/30'
                : 'bg-white/5 border-white/10 hover:bg-white/8 hover:border-white/15'"
              @click="selectedId = identity.id"
            >
              <div class="flex items-center gap-3">
                <!-- Avatar -->
                <div
                  class="w-9 h-9 rounded-lg flex items-center justify-center shrink-0 border"
                  :class="avatarClasses(identity.purpose)"
                >
                  <span class="text-sm font-bold">{{ identity.name.charAt(0).toUpperCase() }}</span>
                </div>

                <div class="flex-1 min-w-0">
                  <div class="flex items-center gap-2">
                    <span class="text-white font-semibold text-sm truncate">{{ identity.name }}</span>
                    <span v-if="identity.is_default" class="text-[10px] px-1.5 py-0.5 rounded bg-orange-500/20 text-orange-400">default</span>
                  </div>
                  <div class="mt-0.5">
                    <span v-if="identity.nostr_npub" class="text-white/40 text-xs font-mono truncate">{{ truncateNpub(identity.nostr_npub) }}</span>
                    <span v-else class="text-red-400/60 text-xs">No Nostr key</span>
                  </div>
                </div>

                <!-- Radio indicator -->
                <div class="shrink-0">
                  <div v-if="selectedId === identity.id" class="w-5 h-5 rounded-full bg-orange-500/30 border border-orange-400 flex items-center justify-center">
                    <div class="w-2.5 h-2.5 rounded-full bg-orange-400"></div>
                  </div>
                  <div v-else class="w-5 h-5 rounded-full border border-white/20"></div>
                </div>
              </div>
            </button>
          </div>

          <!-- Actions -->
          <div class="flex gap-3 mt-4">
            <button @click="$emit('cancel')" class="glass-button flex-1 py-3 rounded-lg text-sm font-medium text-white/80">
              Cancel
            </button>
            <button
              @click="confirm"
              :disabled="!selectedId || !hasNostrKey"
              class="flex-1 py-3 rounded-lg text-sm font-semibold transition-all duration-200 disabled:opacity-30 disabled:cursor-not-allowed"
              :class="selectedId && hasNostrKey
                ? 'bg-orange-500/20 border border-orange-500/40 text-orange-400 hover:bg-orange-500/30'
                : 'bg-white/5 border border-white/10 text-white/40'"
            >
              <svg class="w-4 h-4 mr-1.5 inline-block" 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>
              Authenticate
            </button>
          </div>

          <p class="mt-3 text-center text-[10px] text-white/25 tracking-wider">
            NIP-07 · SECP256K1 · Signed locally
          </p>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import { useModalKeyboard } from '@/composables/useModalKeyboard'
import { rpcClient } from '@/api/rpc-client'

interface Identity {
  id: string
  name: string
  purpose: string
  pubkey: string
  did: string
  is_default: boolean
  nostr_pubkey?: string
  nostr_npub?: string
}

const props = defineProps<{
  show: boolean
  appName: string
}>()

const emit = defineEmits<{
  select: [identity: Identity]
  cancel: []
}>()

const modalRef = ref<HTMLElement | null>(null)
const identities = ref<Identity[]>([])
const selectedId = ref<string | null>(null)
const loading = ref(false)

useModalKeyboard(modalRef, computed(() => props.show), () => emit('cancel'))

const hasNostrKey = computed(() => {
  const selected = identities.value.find(i => i.id === selectedId.value)
  return selected?.nostr_pubkey != null
})

watch(() => props.show, async (open) => {
  if (open) {
    await loadIdentities()
  }
})

onMounted(() => {
  if (props.show) loadIdentities()
})

async function loadIdentities() {
  loading.value = true
  try {
    const res = await rpcClient.call<{ identities: Identity[] }>({ method: 'identity.list' })
    identities.value = res.identities || []
    const defaultId = identities.value.find(i => i.is_default && i.nostr_pubkey)
      || identities.value.find(i => i.nostr_pubkey)
    if (defaultId) {
      selectedId.value = defaultId.id
    }
  } catch {
    identities.value = []
  } finally {
    loading.value = false
  }
}

function confirm() {
  const selected = identities.value.find(i => i.id === selectedId.value)
  if (selected) {
    emit('select', selected)
  }
}

function truncateNpub(npub: string): string {
  if (npub.length <= 20) return npub
  return npub.slice(0, 12) + '...' + npub.slice(-6)
}

function avatarClasses(purpose: string): string {
  switch (purpose) {
    case 'business': return 'bg-blue-500/15 text-blue-400 border-blue-500/25'
    case 'anonymous': return 'bg-purple-500/15 text-purple-400 border-purple-500/25'
    default: return 'bg-orange-500/15 text-orange-400 border-orange-500/25'
  }
}
</script>

<style scoped>
/* Glow ring around key icon */
.key-glow-ring {
  position: relative;
  padding: 8px;
}
.key-glow-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 146, 60, 0.12) 0%, transparent 70%);
  animation: glow-pulse 3s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* Rotating rings */
.ring-spin {
  animation: ring-rotate 20s linear infinite;
  transform-origin: 60px 60px;
}
.ring-spin-reverse {
  animation: ring-rotate 15s linear infinite reverse;
  transform-origin: 60px 60px;
}

@keyframes ring-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Key breathing animation */
.key-breathe {
  animation: breathe 4s ease-in-out infinite;
  transform-origin: 0 6px;
}

@keyframes breathe {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* Network node pulse */
.node-pulse {
  animation: node-blink 3s ease-in-out infinite;
  animation-delay: var(--pulse-delay, 0s);
}

@keyframes node-blink {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; r: 3; }
}

/* Transition */
.identity-picker-enter-active,
.identity-picker-leave-active {
  transition: opacity 0.3s ease;
}
.identity-picker-enter-active > .relative {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.identity-picker-leave-active > .relative {
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.identity-picker-enter-from {
  opacity: 0;
}
.identity-picker-enter-from > .relative {
  transform: translateY(20px) scale(0.96);
  opacity: 0;
}
.identity-picker-leave-to {
  opacity: 0;
}
.identity-picker-leave-to > .relative {
  transform: translateY(10px) scale(0.98);
  opacity: 0;
}
</style>
