<template>
  <Teleport to="body">
    <div class="fixed inset-0 z-50 flex items-center justify-center">
      <!-- Backdrop -->
      <div
        class="absolute inset-0 bg-black/60"
        @click="emit('reject')"
      />

      <!-- Dialog -->
      <div class="relative bg-[var(--wraith-bg-secondary)] border border-[var(--wraith-border)] rounded-lg shadow-2xl w-[480px] max-w-[90vw]">
        <!-- Header -->
        <div
          class="flex items-center gap-3 px-5 py-4 border-b border-[var(--wraith-border)]"
          :class="isChanged ? 'bg-red-500/10' : ''"
        >
          <!-- Warning icon for changed keys -->
          <svg
            v-if="isChanged"
            class="w-6 h-6 text-[var(--wraith-accent-red)] shrink-0"
            viewBox="0 0 16 16"
            fill="currentColor"
          >
            <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575L6.457 1.047zM8 5a.75.75 0 0 0-.75.75v2.5a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8 5zm1 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0z" />
          </svg>
          <!-- Lock icon for new keys -->
          <svg
            v-else
            class="w-6 h-6 text-[var(--wraith-accent-blue)] shrink-0"
            viewBox="0 0 16 16"
            fill="currentColor"
          >
            <path d="M4 4a4 4 0 0 1 8 0v2h.25c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 12.25 15h-8.5A1.75 1.75 0 0 1 2 13.25v-5.5C2 6.784 2.784 6 3.75 6H4V4zm8.25 3.5h-8.5a.25.25 0 0 0-.25.25v5.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25zM10.5 4a2.5 2.5 0 1 0-5 0v2h5V4z" />
          </svg>

          <div>
            <h2 class="text-sm font-semibold text-[var(--wraith-text-primary)]">
              {{ isChanged ? 'HOST KEY HAS CHANGED' : 'Unknown Host Key' }}
            </h2>
            <p class="text-xs text-[var(--wraith-text-muted)] mt-0.5">
              {{ isChanged ? 'The server key does not match the stored key!' : 'This host has not been seen before.' }}
            </p>
          </div>
        </div>

        <!-- Body -->
        <div class="px-5 py-4 space-y-3">
          <p v-if="isChanged" class="text-xs text-[var(--wraith-accent-red)]">
            WARNING: This could indicate a man-in-the-middle attack. Only accept if you know the host key was recently changed.
          </p>

          <div class="space-y-2">
            <div class="flex items-center gap-2 text-xs">
              <span class="text-[var(--wraith-text-muted)] w-16 shrink-0">Host:</span>
              <span class="text-[var(--wraith-text-primary)] font-mono">{{ hostname }}</span>
            </div>
            <div class="flex items-center gap-2 text-xs">
              <span class="text-[var(--wraith-text-muted)] w-16 shrink-0">Key type:</span>
              <span class="text-[var(--wraith-text-primary)] font-mono">{{ keyType }}</span>
            </div>
            <div class="flex items-start gap-2 text-xs">
              <span class="text-[var(--wraith-text-muted)] w-16 shrink-0">Fingerprint:</span>
              <span class="text-[var(--wraith-accent-blue)] font-mono break-all select-text">{{ fingerprint }}</span>
            </div>
          </div>
        </div>

        <!-- Footer -->
        <div class="flex items-center justify-end gap-3 px-5 py-3 border-t border-[var(--wraith-border)]">
          <button
            class="px-4 py-1.5 text-xs rounded bg-[var(--wraith-bg-tertiary)] text-[var(--wraith-text-secondary)] hover:text-[var(--wraith-text-primary)] hover:bg-[var(--wraith-border)] transition-colors cursor-pointer"
            @click="emit('reject')"
          >
            Reject
          </button>
          <button
            class="px-4 py-1.5 text-xs rounded transition-colors cursor-pointer"
            :class="
              isChanged
                ? 'bg-[var(--wraith-accent-red)] text-white hover:bg-red-600'
                : 'bg-[var(--wraith-accent-blue)] text-white hover:bg-blue-600'
            "
            @click="emit('accept')"
          >
            {{ isChanged ? 'Accept Anyway' : 'Accept' }}
          </button>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
defineProps<{
  hostname: string;
  keyType: string;
  fingerprint: string;
  isChanged: boolean;
}>();

const emit = defineEmits<{
  accept: [];
  reject: [];
}>();
</script>
