"use client";

import { Copy, Download, FileDown } from "lucide-react";
import { toast } from "sonner";
import { useTranslations } from "next-intl";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";

export function ExportMarkdownButton({
  markdown,
  filename,
}: {
  markdown: string;
  filename: string;
}) {
  const t = useTranslations("common");

  async function handleCopy() {
    try {
      await navigator.clipboard.writeText(markdown);
      toast.success(t("copiedToClipboard"));
    } catch {
      toast.error(t("copyFailed"));
    }
  }

  function handleDownload() {
    const blob = new Blob([markdown], { type: "text/markdown;charset=utf-8" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = filename.endsWith(".md") ? filename : `${filename}.md`;
    document.body.appendChild(a);
    a.click();
    a.remove();
    URL.revokeObjectURL(url);
  }

  return (
    <DropdownMenu>
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger render={
            <DropdownMenuTrigger render={
              <Button variant="ghost" size="icon" aria-label={t("exportMarkdown")}>
                <FileDown className="h-4 w-4" />
              </Button>
            } />
          } />
          <TooltipContent>{t("exportMarkdown")}</TooltipContent>
        </Tooltip>
      </TooltipProvider>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => { void handleCopy(); }}>
          <Copy className="h-4 w-4" />
          {t("copyMarkdown")}
        </DropdownMenuItem>
        <DropdownMenuItem onClick={handleDownload}>
          <Download className="h-4 w-4" />
          {t("downloadMarkdown")}
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}