/* eslint-disable @next/next/no-img-element -- Local file preview requires raw <img>, not next/image */
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { X, Loader2Icon, DownloadIcon, StickyNoteIcon } from 'lucide-react';
import { cn } from '../../../lib/utils.js';
import { Dialog, DialogTrigger, DialogContent, DialogTitle } from '../../ui/dialog.js';
import { Textarea } from '../../ui/textarea.js';
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '../../ui/tooltip.js';
import { VisuallyHidden } from 'radix-ui';
import { formatFileSize, getFileIcon, getFileIconColor, } from '../../common/attachment-card/attachment-card.js';
const IMAGE_EXTS = new Set(['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.ico', '.bmp']);
function isImage(name) {
    const dot = name.lastIndexOf('.');
    return dot >= 0 && IMAGE_EXTS.has(name.slice(dot).toLowerCase());
}
function previewUrl(path, mimeType) {
    const params = new URLSearchParams({ path, mimeType });
    return `/api/attachments/preview?${params.toString()}`;
}
function getExtension(filename) {
    const dot = filename.lastIndexOf('.');
    return dot >= 0 ? filename.slice(dot).toLowerCase() : '';
}
export function AttachmentChip({ name, size, mimeType, path, onRemove, loading = false, disabled = false, notes, onNotesChange, }) {
    const ext = getExtension(name);
    const Icon = getFileIcon(ext);
    const iconColorClass = getFileIconColor(ext);
    const imageFile = isImage(name);
    if (loading) {
        return (_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-md border", children: _jsx(Loader2Icon, { className: "text-muted-foreground h-5 w-5 animate-spin" }) }));
    }
    if (imageFile) {
        const thumbnail = (_jsxs("button", { type: "button", className: "relative block cursor-pointer rounded-md", children: [_jsx("img", { src: previewUrl(path, mimeType), alt: name, title: name, className: "h-12 w-12 rounded-md border object-cover transition-opacity hover:opacity-80" }), notes ? (_jsx("span", { className: "ring-background absolute -right-1 -bottom-1 flex h-4 w-4 items-center justify-center rounded-full bg-amber-500 text-white shadow-sm ring-2", children: _jsx(StickyNoteIcon, { className: "h-2.5 w-2.5" }) })) : null] }));
        return (_jsx(TooltipProvider, { delayDuration: 200, children: _jsxs(Dialog, { children: [_jsxs(Tooltip, { children: [_jsxs("div", { className: "group relative", children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(DialogTrigger, { asChild: true, children: thumbnail }) }), !disabled && (_jsx("button", { type: "button", onClick: onRemove, className: "absolute -top-1.5 -right-1.5 hidden h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/70 text-white group-hover:flex", "aria-label": `Remove ${name}`, children: _jsx(X, { className: "h-3 w-3" }) }))] }), notes ? (_jsx(TooltipContent, { side: "top", sideOffset: 10, className: "z-[80] max-w-[220px]", children: _jsx("p", { className: "line-clamp-5 text-xs leading-snug whitespace-pre-wrap", children: notes }) })) : null] }), _jsxs(DialogContent, { className: "max-w-3xl gap-0 overflow-hidden border-0 p-0 [&>button:last-child]:!cursor-pointer [&>button:last-child]:!rounded-full [&>button:last-child]:!bg-black/70 [&>button:last-child]:!p-1.5 [&>button:last-child]:!text-white [&>button:last-child]:!opacity-100 [&>button:last-child]:!shadow-lg [&>button:last-child]:!backdrop-blur-md [&>button:last-child]:hover:!bg-black/90", children: [_jsx(VisuallyHidden.Root, { children: _jsxs(DialogTitle, { children: ["Preview: ", name] }) }), _jsx("div", { className: "relative bg-black/90", children: _jsx("img", { src: previewUrl(path, mimeType), alt: name, className: "h-auto max-h-[70vh] w-full object-contain" }) }), _jsxs("div", { className: "bg-background flex flex-col gap-2 px-4 py-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate text-sm font-medium", children: name }), _jsx("span", { className: "text-muted-foreground text-xs", children: formatFileSize(size) })] }), _jsx("a", { href: previewUrl(path, mimeType), download: name, className: "text-muted-foreground hover:text-foreground shrink-0 cursor-pointer rounded p-1.5 transition-colors", "aria-label": `Download ${name}`, children: _jsx(DownloadIcon, { className: "h-4 w-4" }) })] }), onNotesChange ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Textarea, { placeholder: "Add notes about this image\u2026", value: notes ?? '', onChange: (e) => onNotesChange(e.target.value), rows: 2, className: "resize-none text-sm", "aria-label": "Image notes" }), notes?.trim() ? (_jsx("span", { className: "text-muted-foreground text-xs", children: "Auto-saved" })) : null] })) : notes ? (_jsx("p", { className: "text-muted-foreground text-sm whitespace-pre-wrap", children: notes })) : null] })] })] }) }));
    }
    return (_jsxs("div", { className: "group relative flex items-center gap-2 rounded-full border py-1 ps-2 pe-3", children: [_jsx("div", { className: cn('flex h-6 w-6 shrink-0 items-center justify-center rounded-full', iconColorClass), children: _jsx(Icon, { className: "h-3 w-3" }) }), _jsx("span", { className: "max-w-[120px] truncate text-sm", children: name }), _jsx("span", { className: "text-muted-foreground text-xs", children: formatFileSize(size) }), !disabled && (_jsx("button", { type: "button", onClick: onRemove, className: "absolute -top-1.5 -right-1.5 hidden h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/70 text-white group-hover:flex", "aria-label": `Remove ${name}`, children: _jsx(X, { className: "h-3 w-3" }) }))] }));
}
