import { ArrowDownToLine, LoaderCircle } from "lucide-react";
import { useState, type MouseEvent } from "react";
import { useI18n } from "../../i18n";
import type { Attachment } from "../../types/post";
import { downloadAttachment } from "./utils/downloadFile";
import { formatBytes } from "./utils/formatBytes";

type AttachmentDownloadPillProps = {
  postId: string;
  attachment: Attachment;
  leadingLabel?: string;
  className?: string;
};

export function AttachmentDownloadPill({
  postId,
  attachment,
  leadingLabel,
  className = "absolute left-2 top-2",
}: AttachmentDownloadPillProps) {
  const { t } = useI18n();
  const [isDownloading, setIsDownloading] = useState(false);

  const handleDownload = (e: MouseEvent<HTMLButtonElement>) => {
    e.stopPropagation();
    if (isDownloading) return;
    setIsDownloading(true);
    void downloadAttachment(postId, attachment.id, attachment.filename)
      .finally(() => setIsDownloading(false))
      .catch(() => {});
  };

  return (
    <button
      type="button"
      onClick={handleDownload}
      disabled={isDownloading}
      className={`group z-10 inline-flex overflow-hidden rounded-full bg-black/45 text-[10px] text-white shadow-lg ring-1 ring-white/15 backdrop-blur-md transition hover:bg-black/60 disabled:cursor-wait ${className}`}
      aria-label={
        isDownloading ? t("downloading") : `Download ${attachment.filename}`
      }
      aria-busy={isDownloading}
    >
      <span className="flex h-6 w-6 items-center justify-center bg-white/10 transition group-hover:bg-white/15">
        {isDownloading ? (
          <LoaderCircle className="h-3 w-3 animate-spin" strokeWidth={2.3} />
        ) : (
          <ArrowDownToLine className="h-3 w-3" strokeWidth={2.3} />
        )}
      </span>
      <span className="flex h-6 items-center gap-0.5 px-1.5">
        {isDownloading ? (
          t("downloading")
        ) : (
          <>
            {leadingLabel ? (
              <>
                <span>{leadingLabel}</span>
                <span className="opacity-60">·</span>
              </>
            ) : null}
            <span>{formatBytes(attachment.sizeBytes)}</span>
          </>
        )}
      </span>
    </button>
  );
}
