import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import { CheckCircle2, AlertCircle, FolderOpen } from "lucide-react";
import { Button } from "../../components/ui/button";
import { Input } from "../../components/ui/input";
import { ItemCollectionEditorDialog } from "./ItemCollectionEditorDialog";
import { getItemCollectionSummary } from "../services/taskService";
const GUID_PATTERN = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$/;
export function isGuid(value) {
    return typeof value === "string" && GUID_PATTERN.test(value.trim());
}
function formatSummary(summary) {
    const countLabel = `${summary.itemCount} ${summary.itemCount === 1 ? "item" : "items"}`;
    if (summary.name)
        return `${summary.name} (${countLabel})`;
    if (!summary.itemNames?.length)
        return `Empty collection (${countLabel})`;
    const list = summary.itemNames.join(", ");
    const preview = summary.hasMore ? `${list}...` : list;
    return `${preview} (${countLabel})`;
}
export function ItemCollectionPicker(props) {
    const { value, onChange, disabled = false, compact = false, displayNameOnly = false } = props;
    const [dialogOpen, setDialogOpen] = useState(false);
    const [summary, setSummary] = useState(null);
    const trimmedValue = value.trim();
    const hasValue = trimmedValue.length > 0;
    const valid = isGuid(trimmedValue);
    useEffect(() => {
        if (!valid || !trimmedValue) {
            setSummary(null);
            return;
        }
        let disposed = false;
        getItemCollectionSummary(trimmedValue).then((result) => {
            if (disposed || result.type !== "success" || !result.data)
                return;
            setSummary(result.data);
        });
        return () => {
            disposed = true;
        };
    }, [trimmedValue, valid]);
    const displayValue = displayNameOnly && valid && hasValue
        ? summary
            ? formatSummary(summary)
            : "Loading…"
        : value;
    const inputReadOnly = displayNameOnly && valid && hasValue;
    return (_jsxs("div", { className: compact ? "space-y-0.5" : "space-y-1", children: [_jsxs("div", { className: `flex ${compact ? "gap-1.5" : "gap-2"}`, children: [_jsx(Input, { value: displayValue, disabled: disabled, readOnly: inputReadOnly, onChange: (event) => !inputReadOnly && onChange(event.target.value), placeholder: "Select items", className: `min-w-0 flex-1 ${compact ? "h-7 text-xs" : ""}` }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: disabled, onClick: () => setDialogOpen(true), title: "Select items or create item collection", className: compact ? "h-7 shrink-0 px-2" : "shrink-0", children: [_jsx(FolderOpen, { className: compact ? "h-3.5 w-3.5" : "h-4 w-4" }), _jsx("span", { className: compact ? "ml-1 text-[11px]" : "ml-1.5", children: "Select items" })] })] }), displayNameOnly ? (hasValue && !valid ? (_jsxs("div", { className: "flex items-center gap-1 text-[11px] text-amber-700", children: [_jsx(AlertCircle, { className: "h-3.5 w-3.5" }), "Enter a valid GUID"] })) : null) : hasValue ? (valid ? (_jsxs("div", { className: "flex items-center gap-1 text-[11px]", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5 shrink-0 text-emerald-700" }), _jsx("span", { className: "text-emerald-700 truncate", title: summary ? formatSummary(summary) : undefined, children: summary ? formatSummary(summary) : "Loading…" })] })) : (_jsxs("div", { className: "flex items-center gap-1 text-[11px] text-amber-700", children: [_jsx(AlertCircle, { className: "h-3.5 w-3.5" }), "Enter a valid GUID"] }))) : (_jsx("div", { className: "text-[11px] text-slate-500", children: "Paste a GUID or click Select items to create a new collection" })), _jsx(ItemCollectionEditorDialog, { open: dialogOpen, onOpenChange: setDialogOpen, existingCollectionId: valid && hasValue ? trimmedValue : undefined, onConfirm: (collectionId) => {
                    onChange(collectionId);
                    setDialogOpen(false);
                } })] }));
}
//# sourceMappingURL=ItemCollectionPicker.js.map