import { Copy } from 'lucide-react'
import { toast } from 'sonner'

import { Button } from '@evobgp/ui/components/button'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@evobgp/ui/components/dialog'

interface ApiKeyTokenDialogProps {
  open: boolean
  token: string
  onOpenChange: (open: boolean) => void
}

export function ApiKeyTokenDialog({ open, token, onOpenChange }: ApiKeyTokenDialogProps) {
  async function copyToken() {
    if (!token) return
    try {
      await navigator.clipboard.writeText(token)
      toast.success('Скопировано')
    } catch {
      toast.error('Не удалось скопировать')
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Сохраните токен</DialogTitle>
          <DialogDescription>
            Он больше не будет показан. Скопируйте в безопасное хранилище.
          </DialogDescription>
        </DialogHeader>
        <div className="break-all rounded-md border bg-muted/40 p-3 font-mono text-xs">{token}</div>
        <DialogFooter>
          <Button variant="outline" onClick={copyToken}>
            <Copy />
            Копировать
          </Button>
          <Button onClick={() => onOpenChange(false)}>Готово</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}