import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useRef, useState, } from "react";
import { Download, Eye, Loader2, Upload, X } from "lucide-react";
import { Button } from "../../components/ui/button";
import { MarkdownViewerPopover, isMarkdownFileName, } from "../../components/MarkdownViewerPopover";
import { cn } from "../../lib/utils";
function formatFileSize(bytes) {
    if (!Number.isFinite(bytes) || bytes <= 0)
        return "0 B";
    const units = ["B", "KB", "MB", "GB"];
    let size = bytes;
    let unit = 0;
    while (size >= 1024 && unit < units.length - 1) {
        size /= 1024;
        unit++;
    }
    const fixed = size >= 100 || unit === 0 ? 0 : 1;
    return `${size.toFixed(fixed)} ${units[unit]}`;
}
const isFileDrag = (event) => Array.from(event.dataTransfer.types).includes("Files");
export function TaskAttachmentDropZone(props) {
    const { attachments, loading = false, uploading = false, canUpload, deletingAttachmentId = null, onFilesAdded, onDownload, onDelete, onLoadMarkdown, } = props;
    const [isDragOver, setIsDragOver] = useState(false);
    const dragDepthRef = useRef(0);
    const fileInputRef = useRef(null);
    const canDrop = canUpload && !uploading && !loading;
    useEffect(() => {
        if (!canDrop) {
            dragDepthRef.current = 0;
            setIsDragOver(false);
        }
    }, [canDrop]);
    const handleDragEnter = useCallback((event) => {
        if (!isFileDrag(event))
            return;
        event.preventDefault();
        event.stopPropagation();
        dragDepthRef.current += 1;
        if (canDrop) {
            setIsDragOver(true);
        }
    }, [canDrop]);
    const handleDragOver = useCallback((event) => {
        if (!isFileDrag(event))
            return;
        event.preventDefault();
        event.stopPropagation();
        event.dataTransfer.dropEffect = canDrop ? "copy" : "none";
    }, [canDrop]);
    const handleDragLeave = useCallback((event) => {
        if (!isFileDrag(event))
            return;
        event.preventDefault();
        event.stopPropagation();
        dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
        if (dragDepthRef.current === 0) {
            setIsDragOver(false);
        }
    }, []);
    const handleDrop = useCallback((event) => {
        if (!isFileDrag(event))
            return;
        event.preventDefault();
        event.stopPropagation();
        dragDepthRef.current = 0;
        setIsDragOver(false);
        if (!canDrop)
            return;
        const files = Array.from(event.dataTransfer.files);
        if (files.length > 0) {
            void onFilesAdded(files);
        }
    }, [canDrop, onFilesAdded]);
    const handleBrowseFiles = useCallback(() => {
        if (!canDrop)
            return;
        fileInputRef.current?.click();
    }, [canDrop]);
    const handleFilesSelected = useCallback((event) => {
        const files = Array.from(event.target.files || []);
        if (files.length > 0) {
            void onFilesAdded(files);
        }
        event.target.value = "";
    }, [onFilesAdded]);
    const uploadPrompt = "Drag & drop or click to upload";
    const emptyMessage = loading
        ? "Loading attachments..."
        : canUpload
            ? uploadPrompt
            : "No attachments yet.";
    const uploadPromptContent = (_jsxs("span", { className: "inline-flex items-center justify-center gap-2", children: [_jsx(Upload, { strokeWidth: 1, className: "h-4 w-4 shrink-0" }), _jsx("span", { children: uploadPrompt })] }));
    return (_jsxs("div", { className: "relative", onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, "aria-busy": uploading || loading, children: [_jsx("input", { ref: fileInputRef, type: "file", multiple: true, className: "hidden", disabled: !canDrop, onChange: handleFilesSelected }), uploading ? (_jsxs("div", { className: "absolute inset-0 z-10 flex items-center justify-center gap-2 rounded-xl bg-white/60 backdrop-blur-[1px]", children: [_jsx(Loader2, { strokeWidth: 1, className: "text-feedback-blue h-5 w-5 animate-spin" }), _jsx("span", { className: "text-neutral-grey-50 text-sm font-medium", children: "Uploading attachments..." })] })) : null, isDragOver && !uploading ? (_jsx("div", { className: "bg-feedback-blue-light/70 pointer-events-none absolute inset-0 z-10 flex items-center justify-center rounded-xl backdrop-blur-[1px]", children: _jsxs("div", { className: "border-feedback-blue text-feedback-blue flex flex-col items-center gap-2 rounded-lg border-2 border-dashed bg-white/90 px-8 py-6 shadow-sm", children: [_jsx(Upload, { strokeWidth: 1, className: "h-8 w-8" }), _jsx("span", { className: "text-sm font-medium", children: "Drop files to upload them here" })] }) })) : null, attachments.length === 0 ? (canUpload ? (_jsx("button", { type: "button", className: cn("border-border-default text-neutral-grey-100 flex w-full items-center justify-center rounded-xl border-2 border-dashed bg-white/70 px-4 py-6 text-center text-xs italic transition-colors", canDrop &&
                    "hover:border-border-default hover:bg-neutral-grey-5 cursor-pointer", isDragOver && "border-feedback-blue bg-feedback-blue-light/40"), disabled: !canDrop, onClick: handleBrowseFiles, children: loading ? emptyMessage : uploadPromptContent })) : (_jsx("div", { className: "border-border-default text-neutral-grey-100 rounded-xl border-2 border-dashed bg-white/70 px-4 py-6 text-center text-xs italic", children: emptyMessage }))) : (_jsxs("div", { className: cn("grid gap-2 rounded-xl border-2 border-dashed transition-colors", canUpload
                    ? "border-border-default bg-white/50 p-2"
                    : "border-transparent", canDrop && "hover:border-border-default hover:bg-neutral-grey-5", isDragOver && "border-feedback-blue bg-feedback-blue-light/30"), children: [attachments.map((attachment) => (_jsxs("div", { className: "border-border-default flex items-center justify-between gap-3 rounded-lg border bg-white p-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("button", { type: "button", onClick: () => onDownload(attachment), className: "text-neutral-grey-100 hover:text-feedback-blue truncate text-left text-sm font-medium transition-colors", children: attachment.fileName }), _jsxs("div", { className: "text-neutral-grey-50 mt-0.5 text-[11px]", children: [formatFileSize(attachment.fileSize), " |", " ", new Date(attachment.uploadedAt).toLocaleString(undefined, {
                                                dateStyle: "medium",
                                                timeStyle: "short",
                                            }), " ", "| ", attachment.uploadedBy] })] }), _jsxs("div", { className: "flex items-center gap-1", children: [onLoadMarkdown &&
                                        isMarkdownFileName(attachment.fileName, attachment.fileType) ? (_jsx(MarkdownViewerPopover, { loadSource: () => onLoadMarkdown(attachment), cacheKey: attachment.attachmentId, title: attachment.fileName, label: "View", widthClassName: "w-[min(calc(100vw-2rem),36rem)]", align: "end", side: "bottom", children: _jsxs(Button, { type: "button", size: "sm", variant: "ghost", className: "text-neutral-grey-50 hover:text-neutral-grey-100 h-7 px-2 text-xs", children: [_jsx(Eye, { strokeWidth: 1, className: "mr-1 h-3 w-3" }), "View"] }) })) : null, _jsxs(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => onDownload(attachment), className: "text-neutral-grey-50 hover:text-neutral-grey-100 h-7 px-2 text-xs", children: [_jsx(Download, { strokeWidth: 1, className: "mr-1 h-3 w-3" }), "Download"] }), onDelete ? (_jsx(Button, { type: "button", size: "iconXs", variant: "ghost", onClick: () => void onDelete(attachment), disabled: deletingAttachmentId === attachment.attachmentId, className: "text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-100", title: `Remove ${attachment.fileName}`, "aria-label": `Remove ${attachment.fileName}`, children: _jsx(X, { strokeWidth: 1, className: "h-3.5 w-3.5" }) })) : null] })] }, attachment.attachmentId))), canUpload ? (_jsx("button", { type: "button", className: "text-neutral-grey-100 hover:bg-neutral-grey-5 disabled:hover:text-neutral-grey-100 rounded-lg bg-white/70 px-4 py-3 text-center text-xs italic transition-colors disabled:cursor-default disabled:hover:bg-white/70", disabled: !canDrop, onClick: handleBrowseFiles, children: uploadPromptContent })) : null] }))] }));
}
//# sourceMappingURL=TaskAttachmentDropZone.js.map