"use client";
import { useState } from "react";
import { Check, Copy, Download, Link2, Quote } from "lucide-react";
import { t, type Locale } from "@/lib/i18n";
export function CiteMenu({ locale, slug, apa, chicago, shareUrl }: { locale: Locale; slug: string; apa: string; chicago: string; shareUrl: string }) {
  const d = t(locale); const [copied, setCopied] = useState<string | null>(null); const [open, setOpen] = useState(false);
  const copy = async (key: string, text: string) => { try { await navigator.clipboard.writeText(text); setCopied(key); setTimeout(() => setCopied(null), 1800); } catch { /* clipboard unavailable */ } };
  return (
    <div className="relative">
      <button type="button" className="btn" aria-expanded={open} aria-haspopup="dialog" onClick={() => setOpen((o) => !o)}><Quote size={16} aria-hidden /> {d.paper.cite}</button>
      {open && (
        <div role="dialog" aria-label={d.paper.cite} className="absolute z-30 mt-2 w-[min(92vw,34rem)] card p-4 text-sm left-0 sm:left-auto">
          <p className="label mb-1">APA</p><p className="text-fg-2 leading-relaxed">{apa}</p>
          <p className="label mt-3 mb-1">Chicago</p><p className="text-fg-2 leading-relaxed">{chicago}</p>
          <div className="mt-3 flex flex-wrap gap-2">
            <button type="button" className="btn btn-sm" onClick={() => copy("apa", apa)}>{copied === "apa" ? <Check size={14} aria-hidden /> : <Copy size={14} aria-hidden />} {d.paper.copyCitation}</button>
            <a className="btn btn-sm no-underline" href={`/api/v1/papers/${slug}/citation.bib`} download><Download size={14} aria-hidden /> {d.paper.bibtex}</a>
            <a className="btn btn-sm no-underline" href={`/api/v1/papers/${slug}/citation.ris`} download><Download size={14} aria-hidden /> {d.paper.ris}</a>
            <button type="button" className="btn btn-sm" onClick={() => copy("url", shareUrl)}>{copied === "url" ? <Check size={14} aria-hidden /> : <Link2 size={14} aria-hidden />} {copied === "url" ? d.paper.copied : d.paper.share}</button>
          </div>
        </div>
      )}
    </div>
  );
}