<script setup lang="ts">
import { ref } from 'vue'
import { useNostrStore } from '@/stores/nostr'
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { LogOut, Copy, Check, ShieldAlert } from 'lucide-vue-next'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const props = defineProps<{
  onLogout: () => void
}>()

const nostrStore = useNostrStore()
const isOpen = ref(false)
const hasCopied = ref(false)

const copyPrivateKey = async () => {
  if (!nostrStore.account?.privkey) return

  try {
    await navigator.clipboard.writeText(nostrStore.account.privkey)
    hasCopied.value = true
    setTimeout(() => {
      hasCopied.value = false
    }, 2000)
  } catch (err) {
    console.error('Failed to copy private key:', err)
  }
}

const handleLogout = () => {
  isOpen.value = false
  props.onLogout()
}
</script>

<template>
  <Dialog v-model:open="isOpen">
    <DialogTrigger as-child>
      <Button variant="ghost" size="icon" class="text-muted-foreground hover:text-foreground">
        <LogOut class="h-5 w-5" />
        <span class="sr-only">{{ t('nav.logout') }}</span>
      </Button>
    </DialogTrigger>
    <DialogContent class="sm:max-w-md">
      <DialogHeader class="space-y-4">
        <div class="mx-auto w-12 h-12 rounded-full bg-gradient-to-br from-primary to-primary/80 p-0.5">
          <div class="w-full h-full rounded-full bg-background flex items-center justify-center">
            <ShieldAlert class="h-6 w-6 text-primary" />
          </div>
        </div>
        <div class="text-center space-y-2">
          <DialogTitle class="text-xl font-semibold text-foreground">
            {{ t('auth.logout.title') }}
          </DialogTitle>
          <DialogDescription class="text-muted-foreground">
            {{ t('auth.logout.description') }}
          </DialogDescription>
        </div>
      </DialogHeader>
      <div class="flex flex-col gap-4 py-6">
        <Button class="w-full bg-muted hover:bg-muted/80 text-muted-foreground" variant="outline"
          @click="copyPrivateKey">
          <Copy v-if="!hasCopied" class="h-4 w-4 mr-2" />
          <Check v-else class="h-4 w-4 mr-2" />
          {{ hasCopied ? t('auth.logout.copied') : t('auth.logout.copyKey') }}
        </Button>
      </div>
      <DialogFooter class="flex flex-col sm:flex-row gap-2 sm:gap-3">
        <Button variant="ghost" @click="() => isOpen = false" class="flex-1 sm:flex-none hover:bg-muted">
          {{ t('auth.logout.cancel') }}
        </Button>
        <Button variant="destructive" @click="handleLogout" class="flex-1 sm:flex-none">
          <LogOut class="h-4 w-4 mr-2" />
          {{ t('auth.logout.confirm') }}
        </Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>

<style scoped>
/* Improved focus styles */
:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
  transition: outline-offset 0.2s ease;
}

/* Enhanced button hover states */
button:not(:disabled):hover {
  transform: translateY(-1px) scale(1.01);
}

button:not(:disabled):active {
  transform: translateY(0) scale(0.99);
}

/* Smooth transitions */
* {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
</style>
