'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
 * Clarification settings panel for a validation rule.
 * Configures what happens when the rule detects an issue.
 */
import { useCallback, useRef, useState } from 'react';
import { cn } from '../../../utils/cn.js';
import { EditorSection, EditorLabel, EditorSelect, EditorInput, EditorTextArea, EditorHelpText, } from '../../shared/editor_theme/index.js';
import { DEFAULT_CLARIFICATION_TEMPLATES } from '../../../config/clarification_templates.js';
import { LuGripVertical, LuList, LuMessageSquare, LuPlus, LuTrash2 } from 'react-icons/lu';
const CLARIFICATION_TYPE_OPTIONS = [
    { value: 'invalid_document', label: 'Invalid Document' },
    { value: 'additional_info_required', label: 'Additional Info Required' },
    { value: 'none', label: 'No Clarification (log only)' },
];
/** Known response actions that drive downstream behavior (file replacement, ignoring, etc.) */
const RESPONSE_ACTION_OPTIONS = [
    { value: 'ignore', label: 'Ignore file', description: "Don't use this file for any processing", default_label: 'Ignore this file', shows_file_upload: false, shows_additional_input: false },
    { value: 'provide_new_keep_existing', label: 'Provide new (keep existing)', description: 'Add further files while keeping the current one(s)', default_label: 'Provide new and keep existing', shows_file_upload: true, shows_additional_input: false },
    { value: 'replace_document', label: 'Replace document', description: 'Replace this file with new one(s) provided here', default_label: 'Replace document', shows_file_upload: true, shows_additional_input: false },
    { value: 'submit_for_review', label: 'Submit as is', description: 'Submit to Tax Agent as is', default_label: 'Submit as is', shows_file_upload: false, shows_additional_input: true },
];
export function ClarificationSettings({ rule, on_update, disabled = false, className, available_response_sets = [], }) {
    const has_response_sets = available_response_sets.length > 0;
    const uses_response_set = !!rule.response_set_id;
    const handle_response_set_change = useCallback((e) => {
        const set_id = e.target.value || undefined;
        on_update({
            response_set_id: set_id,
            // Clear custom options when a response set is selected
            ...(set_id ? { custom_response_options: undefined } : {}),
        });
    }, [on_update]);
    const template = rule.clarification_type !== 'none'
        ? DEFAULT_CLARIFICATION_TEMPLATES[rule.clarification_type]
        : null;
    const handle_type_change = useCallback((e) => {
        on_update({
            clarification_type: e.target.value,
            // Reset customizations when type changes
            custom_issue_description: undefined,
            custom_action_description: undefined,
            custom_response_options: undefined,
        });
    }, [on_update]);
    const handle_add_option = useCallback(() => {
        const current = rule.custom_response_options
            ?? template?.response_options
            ?? [];
        const first_action = RESPONSE_ACTION_OPTIONS[0];
        on_update({
            custom_response_options: [
                ...current,
                {
                    value: first_action.value,
                    label: first_action.default_label,
                    shows_file_upload: first_action.shows_file_upload,
                    shows_additional_input: first_action.shows_additional_input,
                },
            ],
        });
    }, [rule.custom_response_options, template, on_update]);
    const handle_update_option = useCallback((index, updates) => {
        const current = rule.custom_response_options
            ?? template?.response_options
            ?? [];
        const updated = current.map((opt, i) => i === index ? { ...opt, ...updates } : opt);
        on_update({ custom_response_options: updated });
    }, [rule.custom_response_options, template, on_update]);
    const handle_remove_option = useCallback((index) => {
        const current = rule.custom_response_options
            ?? template?.response_options
            ?? [];
        on_update({ custom_response_options: current.filter((_, i) => i !== index) });
    }, [rule.custom_response_options, template, on_update]);
    const handle_reorder_option = useCallback((from_index, to_index) => {
        if (from_index === to_index)
            return;
        const current = [...(rule.custom_response_options ?? template?.response_options ?? [])];
        const [moved] = current.splice(from_index, 1);
        current.splice(to_index, 0, moved);
        on_update({ custom_response_options: current });
    }, [rule.custom_response_options, template, on_update]);
    const drag_index_ref = useRef(null);
    const [drop_target_index, set_drop_target_index] = useState(null);
    const response_options = rule.custom_response_options ?? template?.response_options ?? [];
    return (_jsxs("div", { className: cn('space-y-0', className), children: [_jsxs(EditorSection, { children: [_jsx(EditorLabel, { icon: LuMessageSquare, children: "Clarification Type" }), _jsx(EditorSelect, { value: rule.clarification_type, onChange: handle_type_change, disabled: disabled, children: CLARIFICATION_TYPE_OPTIONS.map(opt => (_jsx("option", { value: opt.value, children: opt.label }, opt.value))) }), _jsx(EditorHelpText, { children: "Determines the template used when this rule detects an issue." })] }), rule.clarification_type !== 'none' && (_jsxs(_Fragment, { children: [_jsxs(EditorSection, { children: [_jsx(EditorLabel, { children: "Custom Issue Description" }), _jsx(EditorTextArea, { value: rule.custom_issue_description ?? '', onChange: e => on_update({ custom_issue_description: e.target.value || undefined }), placeholder: template?.default_issue_description ?? 'Uses template default...', disabled: disabled, rows: 3 }), _jsx(EditorHelpText, { children: "Overrides the template's default issue description. Leave empty to use template default." })] }), _jsxs(EditorSection, { children: [_jsx(EditorLabel, { children: "Custom Action Description" }), _jsx(EditorTextArea, { value: rule.custom_action_description ?? '', onChange: e => on_update({ custom_action_description: e.target.value || undefined }), placeholder: template?.default_action_description ?? 'Uses template default...', disabled: disabled, rows: 2 })] }), has_response_sets && (_jsxs(EditorSection, { children: [_jsx(EditorLabel, { icon: LuList, children: "Response Set" }), _jsxs(EditorSelect, { value: rule.response_set_id ?? '', onChange: handle_response_set_change, disabled: disabled, children: [_jsx("option", { value: "", children: "Custom (define below)" }), available_response_sets.map(rs => (_jsx("option", { value: rs.set_id, children: rs.set_label }, rs.set_id)))] }), _jsx(EditorHelpText, { children: uses_response_set
                                    ? `Using "${available_response_sets.find(rs => rs.set_id === rule.response_set_id)?.set_label ?? rule.response_set_id}" response set. Custom options below are ignored.`
                                    : 'Select a pre-configured response set, or define custom options below.' })] })), _jsxs(EditorSection, { last: true, children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsxs(EditorLabel, { children: ["Response Options", uses_response_set ? ' (overridden by response set)' : ''] }), !disabled && !uses_response_set && (_jsxs("button", { type: "button", onClick: handle_add_option, className: "inline-flex items-center gap-1 px-2 py-1 text-xs rounded-md bg-muted hover:bg-muted/80 transition-colors", children: [_jsx(LuPlus, { className: "h-3 w-3" }), "Add Option"] }))] }), _jsx("div", { className: cn('space-y-2', uses_response_set && 'opacity-40 pointer-events-none'), children: response_options.map((opt, idx) => (_jsxs("div", { draggable: !disabled && !uses_response_set, onDragStart: e => {
                                        drag_index_ref.current = idx;
                                        e.dataTransfer.effectAllowed = 'move';
                                    }, onDragOver: e => {
                                        e.preventDefault();
                                        e.dataTransfer.dropEffect = 'move';
                                        if (drag_index_ref.current !== null && drag_index_ref.current !== idx) {
                                            set_drop_target_index(idx);
                                        }
                                    }, onDragLeave: () => {
                                        set_drop_target_index(prev => prev === idx ? null : prev);
                                    }, onDrop: e => {
                                        e.preventDefault();
                                        if (drag_index_ref.current !== null) {
                                            handle_reorder_option(drag_index_ref.current, idx);
                                        }
                                        drag_index_ref.current = null;
                                        set_drop_target_index(null);
                                    }, onDragEnd: () => {
                                        drag_index_ref.current = null;
                                        set_drop_target_index(null);
                                    }, className: cn('flex items-start gap-2 p-2 border rounded-md bg-muted/10 transition-colors', drop_target_index === idx && 'border-primary bg-primary/5'), children: [!disabled && (_jsx("div", { className: "cursor-grab active:cursor-grabbing pt-2 text-muted-foreground hover:text-foreground", children: _jsx(LuGripVertical, { className: "h-4 w-4" }) })), _jsxs("div", { className: "flex-shrink-0 pt-1", children: [_jsxs("select", { value: opt.value, onChange: e => {
                                                        const action = RESPONSE_ACTION_OPTIONS.find(a => a.value === e.target.value);
                                                        if (action) {
                                                            handle_update_option(idx, {
                                                                value: action.value,
                                                                label: action.default_label,
                                                                description: action.description,
                                                                shows_file_upload: action.shows_file_upload,
                                                                shows_additional_input: action.shows_additional_input,
                                                            });
                                                        }
                                                        else {
                                                            handle_update_option(idx, { value: e.target.value });
                                                        }
                                                    }, disabled: disabled, className: "text-xs border rounded px-2 py-1.5 bg-transparent w-[170px]", style: { backgroundColor: 'hsl(var(--popover))' }, children: [RESPONSE_ACTION_OPTIONS.map(a => (_jsx("option", { value: a.value, children: a.label }, a.value))), !RESPONSE_ACTION_OPTIONS.some(a => a.value === opt.value) && (_jsxs("option", { value: opt.value, children: [opt.value, " (custom)"] }))] }), _jsx("div", { className: "text-[10px] text-muted-foreground/60 mt-0.5 max-w-[170px]", children: RESPONSE_ACTION_OPTIONS.find(a => a.value === opt.value)?.description ?? '' })] }), _jsxs("div", { className: "flex-1 space-y-1.5", children: [_jsx(EditorInput, { value: opt.label, onChange: e => handle_update_option(idx, { label: e.target.value }), placeholder: "Option label shown to client...", disabled: disabled, field_width: "full" }), _jsx("input", { type: "text", value: opt.description ?? '', onChange: e => handle_update_option(idx, { description: e.target.value || undefined }), placeholder: "Hover text (optional \u2014 shown as tooltip to client)", disabled: disabled, className: "w-full text-xs border rounded px-2 py-1 bg-transparent text-muted-foreground placeholder:text-muted-foreground/40" }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("label", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx("input", { type: "checkbox", checked: opt.shows_file_upload ?? false, onChange: e => handle_update_option(idx, { shows_file_upload: e.target.checked }), disabled: disabled, className: "rounded" }), "File upload"] }), _jsxs("label", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx("input", { type: "checkbox", checked: opt.shows_additional_input ?? false, onChange: e => handle_update_option(idx, { shows_additional_input: e.target.checked }), disabled: disabled, className: "rounded" }), "Additional input"] })] })] }), !disabled && (_jsx("button", { type: "button", onClick: () => handle_remove_option(idx), className: "p-1 text-muted-foreground hover:text-destructive transition-colors", children: _jsx(LuTrash2, { className: "h-3.5 w-3.5" }) }))] }, opt.value))) }), !rule.custom_response_options && template && (_jsx(EditorHelpText, { children: "Showing template defaults. Edit any option to create custom overrides." }))] })] }))] }));
}
//# sourceMappingURL=clarification_settings.js.map