import type { LinkSafetyModalProps } from "streamdown"
import * as React from "react"

import { Button } from "../ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "../ui/dialog"

export function ExternalLinkDialog({ isOpen, onClose, onConfirm, url }: LinkSafetyModalProps) {
  const [copied, setCopied] = React.useState(false)

  const close = () => {
    setCopied(false)
    onClose()
  }

  const copyUrl = async () => {
    await navigator.clipboard.writeText(url)
    setCopied(true)
  }

  const openUrl = () => {
    onConfirm()
    close()
  }

  return (
    <Dialog open={isOpen} onOpenChange={(open) => { if (!open) close() }}>
      <DialogContent className="max-h-[calc(100dvh-2rem)] min-w-0 overflow-hidden sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Open external link?</DialogTitle>
          <DialogDescription>You’re about to visit an external website.</DialogDescription>
        </DialogHeader>
        <div className="max-h-32 overflow-auto rounded-md bg-muted p-3 font-mono text-xs wrap-break-word">
          {url}
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => void copyUrl()}>{copied ? "Copied" : "Copy link"}</Button>
          <Button onClick={openUrl}>Open link</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}