/**
 * ClarificationResponseForm - Input form in the green (action) zone.
 *
 * Renders:
 * - Action description text
 * - Radio options for response choices
 * - Conditional file upload dropzone when selected option has shows_file_upload
 * - Conditional textarea when selected option has shows_additional_input
 */
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState, useCallback, useRef } from 'react';
import { cn } from '../../utils/cn.js';
import { IoCloudUploadOutline } from 'react-icons/io5';
import { FileBar } from '../shared/file_bar/index.js';
import { use_response_files } from './use_response_files.js';
export const ClarificationResponseForm = React.memo(function ClarificationResponseForm({ action_description, response_options, initial_choice, initial_comment, initial_files, read_only = false, on_submit, hide_submit, on_change, file_manager, radio_accent, submit_bg, response_validation, file_validations, on_validation_click, file_validation_details, file_pipeline_status, submit_label, }) {
    const [choice, set_choice] = useState(initial_choice ?? '');
    const [comment, set_comment] = useState(initial_comment ?? '');
    // Sync choice/comment from props when they change externally
    const prev_initial_ref = useRef({ choice: initial_choice, comment: initial_comment });
    if (initial_choice !== prev_initial_ref.current.choice) {
        prev_initial_ref.current.choice = initial_choice;
        set_choice(initial_choice ?? '');
    }
    if (initial_comment !== prev_initial_ref.current.comment) {
        prev_initial_ref.current.comment = initial_comment;
        set_comment(initial_comment ?? '');
    }
    // File upload state via extracted hook
    const { files, uploading, file_input_ref, handle_file_drop, handle_file_select, handle_remove_file } = use_response_files({
        initial_files,
        file_manager,
        on_change: on_change ? (updated_files) => {
            on_change({
                response_choice: choice || undefined,
                user_comment: comment || undefined,
                response_files: updated_files.length > 0 ? updated_files : undefined,
            });
        } : undefined,
    });
    // Fire on_change whenever choice or comment change
    const notify_change = useCallback((c, cm) => {
        on_change?.({
            response_choice: c || undefined,
            user_comment: cm || undefined,
            response_files: files.length > 0 ? files : undefined,
        });
    }, [on_change, files]);
    const selected_option = response_options.find(opt => opt.value === choice);
    const requires_comment = selected_option?.shows_additional_input === true && !comment.trim();
    const handle_submit = useCallback(() => {
        if (!on_submit || !choice)
            return;
        on_submit({
            response_choice: choice,
            user_comment: comment || undefined,
            response_files: files.length > 0 ? files : undefined,
        });
    }, [on_submit, choice, comment, files]);
    // Generate a unique radio group name per instance to avoid conflicts
    const radio_name = useRef(`clarification_response_${Math.random().toString(36).slice(2, 8)}`);
    return (_jsxs("div", { className: "cls_clarification_response_form space-y-3", children: [action_description && (_jsx("p", { className: "text-sm text-foreground", children: action_description })), _jsx("div", { className: "space-y-2", children: response_options.map((option) => {
                    const is_selected = choice === option.value;
                    return (_jsxs("div", { children: [_jsxs("label", { className: "flex items-start gap-2.5 cursor-pointer text-sm group", title: option.description || undefined, children: [_jsx("input", { type: "radio", name: radio_name.current, value: option.value, checked: is_selected, onChange: () => { set_choice(option.value); notify_change(option.value, comment); }, disabled: read_only, className: cn('mt-0.5', radio_accent ?? 'accent-blue-600') }), _jsxs("span", { className: "text-foreground group-hover:text-foreground/80", children: [option.label, option.description && (_jsxs("span", { className: "text-xs text-muted-foreground ml-1.5", children: ["\u2014 ", option.description] }))] })] }), is_selected && option.shows_file_upload && (_jsxs("div", { className: "ml-7 mt-2", children: [_jsxs("div", { className: "border-2 border-dashed border-blue-300 dark:border-blue-700 rounded-md p-3 text-center cursor-pointer hover:bg-blue-50/50 dark:hover:bg-blue-900/20 transition-colors", onDrop: handle_file_drop, onDragOver: (e) => e.preventDefault(), onClick: () => file_input_ref.current?.click(), children: [uploading ? (_jsxs("svg", { className: "w-5 h-5 mx-auto text-blue-500 mb-1 animate-spin", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", 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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] })) : (_jsx(IoCloudUploadOutline, { className: "w-5 h-5 mx-auto text-blue-500 mb-1" })), _jsx("p", { className: "text-sm text-muted-foreground", children: uploading ? 'Uploading...' : 'Drag & drop files here, or click to browse' })] }), _jsx("input", { ref: file_input_ref, type: "file", multiple: true, className: "hidden", onChange: handle_file_select }), files.length > 0 && (_jsx("div", { className: "mt-2 space-y-1", children: files.map((f) => (_jsx(FileBar, { attachment: f, on_remove: !read_only ? () => handle_remove_file(f.file_id) : undefined, validation: file_validations?.[f.file_id] ?? null, on_validation_click: on_validation_click, validation_details: file_validation_details?.[f.file_id], pipeline_status_text: file_pipeline_status?.[f.file_id] }, f.file_id))) }))] })), is_selected && option.shows_additional_input && (_jsxs("div", { className: "ml-7 mt-2", children: [_jsxs("label", { className: "text-xs font-medium text-muted-foreground block mb-1", children: ["Please provide a reason ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx("textarea", { className: "w-full px-3 py-2 text-sm border rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-y min-h-[60px]", placeholder: "Please explain why...", value: comment, onChange: (e) => { set_comment(e.target.value); notify_change(choice, e.target.value); }, disabled: read_only, rows: 2 })] }))] }, option.value));
                }) }), !read_only && requires_comment && (_jsx("p", { className: "text-xs text-amber-600", children: "Please provide a reason to continue." })), !read_only && on_submit && !hide_submit && (_jsx("button", { onClick: handle_submit, disabled: !choice || requires_comment || response_validation?.status === 'validating' || response_validation?.status === 'failed', className: cn('px-4 py-2 text-sm font-medium rounded-md text-white disabled:opacity-50 disabled:cursor-not-allowed transition-colors', submit_bg ?? 'bg-blue-600 hover:bg-blue-700'), children: submit_label ?? 'Submit Response' }))] }));
});
//# sourceMappingURL=clarification_response_form.js.map