/**
 * Inline document-type tag with hover-pencil edit affordance.
 *
 * Renders the current document type as a pill. On hover (or when `force_show=true`)
 * a small pencil icon appears alongside it; clicking opens a dropdown of the
 * available document types. Selecting one fires `on_change` and the parent is
 * expected to update the file's classification + re-run validations.
 *
 * Reusable across file_bar (thread-form) and any other surface that shows a
 * file's document_type pill.
 */
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import * as PopoverPrimitive from '@radix-ui/react-popover';
import { cn } from '../../utils/cn.js';
import { LuPencil, LuCheck } from 'react-icons/lu';
export function DocumentTypeEditor({ current, available, on_change, disabled, force_show_pencil, className, }) {
    const [open, set_open] = React.useState(false);
    const [saving, set_saving] = React.useState(false);
    const display = (current && current.length > 0 ? current : 'unknown').replace(/_/g, ' ');
    const editable = !disabled && !!on_change && available.length > 0;
    const handle_pick = async (type_id) => {
        if (!on_change || type_id === current) {
            set_open(false);
            return;
        }
        set_saving(true);
        try {
            await on_change(type_id);
        }
        finally {
            set_saving(false);
            set_open(false);
        }
    };
    // Use Radix Popover so the dropdown lives in a portal and isn't clipped by
    // the file-bar's overflow-hidden wrapper. modal=false because we want clicks
    // outside to close without trapping focus.
    return (_jsxs(PopoverPrimitive.Root, { open: open, onOpenChange: set_open, children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsxs("button", { type: "button", disabled: !editable, className: cn('group/doctype inline-flex items-center gap-1 text-[10px] text-[#64748B] bg-[#F1F5F9] border border-[#E2E8F0] px-1.5 py-0.5 rounded', editable && 'hover:bg-[#E2E8F0] hover:text-[#334155] cursor-pointer transition-colors', !editable && 'cursor-default', className), title: editable ? 'Click to change document type' : undefined, children: [saving ? (_jsxs("svg", { className: "w-3 h-3 animate-spin", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })] })) : null, _jsx("span", { children: display }), editable && !saving && (_jsx(LuPencil, { className: cn('w-2.5 h-2.5 -mr-0.5 transition-opacity', force_show_pencil
                                ? 'opacity-70'
                                : 'opacity-0 group-hover/doctype:opacity-70') }))] }) }), _jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { align: "start", sideOffset: 4, 
                    // Inline styles bypass the bg-popover Tailwind variable that doesn't
                    // resolve for code under node_modules paths (per CLAUDE.md gotcha).
                    style: {
                        backgroundColor: '#ffffff',
                        border: '1px solid #E2E8F0',
                        boxShadow: '0 4px 12px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(15, 23, 42, 0.06)',
                        zIndex: 9999,
                        minWidth: '16rem',
                        maxHeight: '18rem',
                        overflowY: 'auto',
                        borderRadius: '6px',
                        padding: '4px',
                    }, children: _jsx("ul", { role: "listbox", className: "space-y-0.5", children: available.map(opt => {
                            const is_current = opt.type_id === current;
                            return (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => handle_pick(opt.type_id), className: cn('w-full flex items-start gap-2 px-2 py-1.5 text-left rounded', 'hover:bg-[#F1F5F9] transition-colors', is_current && 'bg-[#EFF6FF]'), role: "option", "aria-selected": is_current, children: [_jsx(LuCheck, { className: cn('w-3.5 h-3.5 mt-0.5 shrink-0', is_current ? 'text-[#2563EB]' : 'opacity-0') }), _jsxs("span", { className: "flex flex-col min-w-0", children: [_jsx("span", { className: "text-[12px] font-medium text-[#0F172A]", children: opt.type_label }), opt.description && (_jsx("span", { className: "text-[11px] text-[#64748B] truncate", children: opt.description }))] })] }) }, opt.type_id));
                        }) }) }) })] }));
}
//# sourceMappingURL=document_type_editor.js.map