"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export type ClipboardFormat = "text" | "html" | "image" | "files" | "unknown";

export interface ClipboardContent {
  format: ClipboardFormat;
  text?: string;
  html?: string;
  imageUrl?: string;
  files?: File[];
}

export interface ClipboardPasteProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onPaste"> {
  onPaste?: (content: ClipboardContent) => void;
  showPreview?: boolean;
  maxPreviewLength?: number;
  label?: string;
  description?: string;
}

const ClipboardIcon = ({ className }: { className?: string }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={1.5}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden="true"
  >
    <rect x="8" y="2" width="8" height="4" rx="1" />
    <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
    <path d="M12 11v6" />
    <path d="M9 14h6" />
  </svg>
);

const TextIcon = ({ className }: { className?: string }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={1.5}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden="true"
  >
    <path d="M4 7V4h16v3" />
    <path d="M12 4v16" />
    <path d="M8 20h8" />
  </svg>
);

const HtmlIcon = ({ className }: { className?: string }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={1.5}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden="true"
  >
    <path d="M7 8l-4 4 4 4" />
    <path d="M17 8l4 4-4 4" />
    <path d="M14 4l-4 16" />
  </svg>
);

const ImageIcon = ({ className }: { className?: string }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={1.5}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden="true"
  >
    <rect x="3" y="3" width="18" height="18" rx="2" />
    <circle cx="8.5" cy="8.5" r="1.5" />
    <path d="M21 15l-5-5L5 21" />
  </svg>
);

const FilesIcon = ({ className }: { className?: string }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={1.5}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden="true"
  >
    <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
    <polyline points="14,2 14,8 20,8" />
    <path d="M8 13h8" />
    <path d="M8 17h8" />
  </svg>
);

const CheckIcon = ({ className }: { className?: string }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={2}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden="true"
  >
    <path d="M5 12l5 5L20 7" />
  </svg>
);

const formatLabels: Record<ClipboardFormat, string> = {
  text: "Plain text",
  html: "Rich text (HTML)",
  image: "Image",
  files: "Files",
  unknown: "Unknown format",
};

const FormatIcon: React.FC<{ format: ClipboardFormat; className?: string }> = ({
  format,
  className,
}) => {
  switch (format) {
    case "text":
      return <TextIcon className={className} />;
    case "html":
      return <HtmlIcon className={className} />;
    case "image":
      return <ImageIcon className={className} />;
    case "files":
      return <FilesIcon className={className} />;
    default:
      return <ClipboardIcon className={className} />;
  }
};

export const ClipboardPaste = React.forwardRef<
  HTMLDivElement,
  ClipboardPasteProps
>(
  (
    {
      className,
      onPaste,
      showPreview = true,
      maxPreviewLength = 200,
      label = "Paste from clipboard",
      description = "Click or press Ctrl+V / Cmd+V to paste content",
      ...props
    },
    ref
  ) => {
    const [content, setContent] = React.useState<ClipboardContent | null>(null);
    const [isReading, setIsReading] = React.useState(false);
    const [isPasted, setIsPasted] = React.useState(false);
    const [error, setError] = React.useState<string | null>(null);
    const containerRef = React.useRef<HTMLDivElement>(null);

    React.useEffect(() => {
      return () => {
        if (content?.imageUrl) {
          URL.revokeObjectURL(content.imageUrl);
        }
      };
    }, [content]);

    const detectFormat = async (
      clipboardData: DataTransfer
    ): Promise<ClipboardContent> => {
      const types = clipboardData.types;

      if (types.includes("Files")) {
        const files = Array.from(clipboardData.files);
        const imageFile = files.find((f) => f.type.startsWith("image/"));
        if (imageFile) {
          return {
            format: "image",
            imageUrl: URL.createObjectURL(imageFile),
            files,
          };
        }
        return { format: "files", files };
      }

      if (types.includes("text/html")) {
        const html = clipboardData.getData("text/html");
        const text = clipboardData.getData("text/plain");
        return { format: "html", html, text };
      }

      if (types.includes("text/plain")) {
        const text = clipboardData.getData("text/plain");
        return { format: "text", text };
      }

      return { format: "unknown" };
    };

    const readClipboard = async () => {
      setIsReading(true);
      setError(null);

      try {
        if (!navigator.clipboard) {
          throw new Error("Clipboard API not available");
        }

        const items = await navigator.clipboard.read();
        let result: ClipboardContent = { format: "unknown" };

        for (const item of items) {
          if (item.types.includes("image/png")) {
            const blob = await item.getType("image/png");
            result = {
              format: "image",
              imageUrl: URL.createObjectURL(blob),
            };
            break;
          }

          if (item.types.includes("text/html")) {
            const blob = await item.getType("text/html");
            const html = await blob.text();
            let text: string | undefined;
            if (item.types.includes("text/plain")) {
              const textBlob = await item.getType("text/plain");
              text = await textBlob.text();
            }
            result = { format: "html", html, text };
            break;
          }

          if (item.types.includes("text/plain")) {
            const blob = await item.getType("text/plain");
            const text = await blob.text();
            result = { format: "text", text };
            break;
          }
        }

        if (result.format === "unknown") {
          const text = await navigator.clipboard.readText();
          if (text) {
            result = { format: "text", text };
          }
        }

        setContent(result);
        setIsPasted(true);
        onPaste?.(result);

        setTimeout(() => setIsPasted(false), 2000);
      } catch (err) {
        const message =
          err instanceof Error ? err.message : "Failed to read clipboard";
        if (message.includes("denied") || message.includes("permission")) {
          setError("Clipboard access denied. Please allow clipboard permissions.");
        } else {
          setError("Could not read clipboard. Try using Ctrl+V / Cmd+V instead.");
        }
      } finally {
        setIsReading(false);
      }
    };

    const handlePasteEvent = async (event: React.ClipboardEvent) => {
      event.preventDefault();
      setError(null);

      const clipboardData = event.clipboardData;
      if (!clipboardData) return;

      const result = await detectFormat(clipboardData);
      setContent(result);
      setIsPasted(true);
      onPaste?.(result);

      setTimeout(() => setIsPasted(false), 2000);
    };

    const handleKeyDown = (event: React.KeyboardEvent) => {
      if ((event.metaKey || event.ctrlKey) && event.key === "v") {
        // Let the paste event handle it
      }
    };

    const truncateText = (text: string) => {
      if (text.length <= maxPreviewLength) return text;
      return `${text.slice(0, maxPreviewLength)}...`;
    };

    return (
      <div
        ref={ref}
        className={cn("w-full max-w-lg", className)}
        {...props}
      >
        <div
          ref={containerRef}
          tabIndex={0}
          role="button"
          onClick={readClipboard}
          onPaste={handlePasteEvent}
          onKeyDown={handleKeyDown}
          className={cn(
            "flex flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed border-border bg-card px-6 py-8 text-center transition cursor-pointer",
            "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
            isPasted && "border-primary bg-muted"
          )}
        >
          <div
            className={cn(
              "flex h-12 w-12 items-center justify-center rounded-full border border-border bg-background transition-colors",
              isPasted ? "text-primary" : "text-muted-foreground"
            )}
          >
            {isReading ? (
              <div className="h-5 w-5 animate-spin rounded-full border-2 border-muted-foreground border-t-primary" />
            ) : isPasted ? (
              <CheckIcon className="h-5 w-5" />
            ) : (
              <ClipboardIcon className="h-5 w-5" />
            )}
          </div>
          <div className="space-y-1">
            <p className="text-sm font-semibold text-foreground">
              {isPasted ? "Content pasted!" : label}
            </p>
            <p className="text-xs text-muted-foreground">
              {isPasted ? `Detected: ${formatLabels[content?.format ?? "unknown"]}` : description}
            </p>
          </div>
        </div>

        {error ? (
          <p className="mt-2 text-sm text-destructive-foreground">{error}</p>
        ) : null}

        {showPreview && content ? (
          <div className="mt-4 rounded-lg border border-border bg-card p-4">
            <div className="mb-3 flex items-center gap-2">
              <FormatIcon format={content.format} className="h-4 w-4 text-muted-foreground" />
              <span className="text-xs font-semibold text-muted-foreground uppercase">
                {formatLabels[content.format]}
              </span>
            </div>

            {content.format === "image" && content.imageUrl ? (
              <div className="overflow-hidden rounded-md border border-border">
                <img
                  src={content.imageUrl}
                  alt="Pasted content"
                  className="max-h-48 w-full object-contain"
                />
              </div>
            ) : null}

            {content.format === "html" && content.text ? (
              <div className="space-y-2">
                <p className="text-sm text-foreground whitespace-pre-wrap break-words">
                  {truncateText(content.text)}
                </p>
                <p className="text-xs text-muted-foreground">
                  HTML formatting preserved
                </p>
              </div>
            ) : null}

            {content.format === "text" && content.text ? (
              <p className="text-sm text-foreground whitespace-pre-wrap break-words">
                {truncateText(content.text)}
              </p>
            ) : null}

            {content.format === "files" && content.files ? (
              <ul className="space-y-1">
                {content.files.map((file, index) => (
                  <li
                    key={`${file.name}-${index}`}
                    className="text-sm text-foreground"
                  >
                    {file.name}{" "}
                    <span className="text-muted-foreground">
                      ({(file.size / 1024).toFixed(1)} KB)
                    </span>
                  </li>
                ))}
              </ul>
            ) : null}

            {content.format === "unknown" ? (
              <p className="text-sm text-muted-foreground italic">
                No recognizable content detected
              </p>
            ) : null}
          </div>
        ) : null}
      </div>
    );
  }
);

ClipboardPaste.displayName = "ClipboardPaste";
Clipboard Paste

Dependencies

Files

Installation
