/**
 * Thread composer — combined text + file dropzone.
 * Always-visible textarea that also accepts file drops.
 * Attached files shown as chips below the text area.
 */
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useCallback, useRef } from 'react';
import { cn, RoleAvatar, PdfIcon } from './shared.js';
export function ThreadComposer({ role, user_name, on_send, on_send_comment, on_upload_files, on_add_question }) {
    const [text, set_text] = useState('');
    const [files, set_files] = useState([]);
    const [dragging, set_dragging] = useState(false);
    const [focused, set_focused] = useState(false);
    const file_input_ref = useRef(null);
    const drag_counter = useRef(0);
    const has_content = text.trim().length > 0 || files.length > 0;
    const handle_send = useCallback(() => {
        const trimmed = text.trim();
        if (!trimmed && files.length === 0)
            return;
        if (on_send) {
            on_send(trimmed, files);
        }
        else {
            if (trimmed)
                on_send_comment?.(trimmed);
            if (files.length > 0)
                on_upload_files?.(files);
        }
        set_text('');
        set_files([]);
    }, [text, files, on_send, on_send_comment, on_upload_files]);
    const handle_key_down = useCallback((e) => {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            handle_send();
        }
    }, [handle_send]);
    const add_files = useCallback((new_files) => {
        set_files(prev => [...prev, ...new_files]);
    }, []);
    const remove_file = useCallback((index) => {
        set_files(prev => prev.filter((_, i) => i !== index));
    }, []);
    // ── Drag & Drop ──
    const handle_drag_enter = useCallback((e) => {
        e.preventDefault();
        e.stopPropagation();
        drag_counter.current++;
        if (e.dataTransfer.types.includes('Files')) {
            set_dragging(true);
        }
    }, []);
    const handle_drag_leave = useCallback((e) => {
        e.preventDefault();
        e.stopPropagation();
        drag_counter.current--;
        if (drag_counter.current === 0) {
            set_dragging(false);
        }
    }, []);
    const handle_drag_over = useCallback((e) => {
        e.preventDefault();
        e.stopPropagation();
    }, []);
    const handle_drop = useCallback((e) => {
        e.preventDefault();
        e.stopPropagation();
        set_dragging(false);
        drag_counter.current = 0;
        const dropped = Array.from(e.dataTransfer.files);
        if (dropped.length > 0) {
            add_files(dropped);
        }
    }, [add_files]);
    const handle_file_input = useCallback((e) => {
        const selected = e.target.files;
        if (selected && selected.length > 0) {
            add_files(Array.from(selected));
        }
        e.target.value = '';
    }, [add_files]);
    const format_size = (bytes) => {
        if (bytes < 1024)
            return `${bytes}B`;
        if (bytes < 1048576)
            return `${Math.round(bytes / 1024)}KB`;
        return `${(bytes / 1048576).toFixed(1)}MB`;
    };
    return (_jsxs("div", { className: "pt-3 mt-4 border-t border-[#E2E8F0]", children: [_jsxs("div", { onDragEnter: handle_drag_enter, onDragLeave: handle_drag_leave, onDragOver: handle_drag_over, onDrop: handle_drop, className: cn('relative rounded-md border transition-colors', dragging ? 'border-[#2563EB] bg-[#EFF6FF] border-dashed' : focused ? 'border-[#2563EB] ring-1 ring-[#2563EB]' : 'border-[#E2E8F0]'), children: [dragging && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-[#EFF6FF]/80 rounded-md z-10 pointer-events-none", children: _jsxs("div", { className: "text-[13px] text-[#2563EB] font-medium flex items-center gap-2", children: [_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" }) }), "Drop files here"] }) })), _jsx("textarea", { value: text, onChange: (e) => set_text(e.target.value), onKeyDown: handle_key_down, onFocus: () => set_focused(true), onBlur: () => set_focused(false), className: "w-full px-3 py-2.5 text-[13px] resize-none focus:outline-none placeholder:text-[#CBD5E1] bg-white rounded-md", rows: files.length > 0 ? 2 : 3, placeholder: "Write your message or drop files here..." }), files.length > 0 && (_jsx("div", { className: "px-3 pb-2.5 flex flex-wrap gap-1.5", children: files.map((file, i) => (_jsxs("div", { className: "inline-flex items-center gap-1.5 bg-[#F1F5F9] border border-[#E2E8F0] rounded px-2 py-1 text-[12px] text-[#334155] group", children: [_jsx(PdfIcon, { className: "w-3 h-3" }), _jsx("span", { className: "truncate max-w-40", children: file.name }), _jsx("span", { className: "text-[#94A3B8] text-[10px]", children: format_size(file.size) }), _jsx("button", { onClick: () => remove_file(i), className: "text-[#94A3B8] hover:text-[#EF4444] ml-0.5 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity", children: _jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }, `${file.name}-${i}`))) }))] }), _jsxs("div", { className: "flex items-center gap-2 mt-2", children: [_jsx(RoleAvatar, { role: role, name: user_name, size: "sm" }), _jsxs("button", { onClick: () => file_input_ref.current?.click(), className: "flex items-center gap-1.5 text-[13px] border border-[#E2E8F0] text-[#64748B] rounded-md px-3 py-1.5 hover:bg-[#F8FAFC] hover:text-[#334155] transition-colors cursor-pointer", children: [_jsx("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" }) }), "Attach Files"] }), _jsx("div", { className: "flex-1" }), role === 'agent' && (_jsx("button", { onClick: on_add_question, className: "flex items-center gap-1.5 text-[13px] border border-[#2563EB]/30 text-[#2563EB] rounded-md px-3 py-1.5 hover:bg-[#EFF6FF] transition-colors cursor-pointer", children: "+ Question" })), _jsx("button", { onClick: handle_send, disabled: !has_content, className: cn('text-[13px] font-medium px-4 py-1.5 rounded-md cursor-pointer transition-colors', has_content ? 'bg-[#2563EB] text-white hover:bg-[#1D4ED8]' : 'bg-[#F1F5F9] text-[#CBD5E1] cursor-not-allowed'), children: "Send" }), _jsx("input", { ref: file_input_ref, type: "file", multiple: true, onChange: handle_file_input, className: "hidden" })] })] }));
}
//# sourceMappingURL=thread_composer.js.map