import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { cn } from '../../utils/cn.js';
import { DataFormLabel } from './shared/data_form_label.js';
import { DataFormBadge } from './shared/data_form_badge.js';
/**
 * Check if a field tree (recursively) contains a given field ID
 */
function tree_contains(fields, field_id) {
    if (!fields)
        return false;
    for (const f of fields) {
        if (f.id === field_id)
            return true;
        if (f.fields && tree_contains(f.fields, field_id))
            return true;
    }
    return false;
}
function GhostField({ field, config, upload_enabled, badge_column_width, value_column_width, force_layout, is_active, children, }) {
    // Active field in a vertical group — render PdfPanel here
    if (is_active) {
        return (_jsx("div", { "data-ghost-field-id": field.id, style: { visibility: 'visible' }, children: _jsx("div", { style: { position: 'sticky', top: 0, height: 'calc(100vh - 40px)' }, children: children }) }));
    }
    const layout = force_layout || field.label_position || 'inline';
    const is_inline = layout === 'inline';
    const has_badge = Boolean(field.badge || field.formula_label);
    const show_file_area = upload_enabled;
    const value_width = field.value_width || value_column_width || '200px';
    if (is_inline) {
        return (_jsxs("div", { className: "cls_data_form_field_row flex items-center gap-2 py-1", "data-ghost-field-id": field.id, children: [_jsx("div", { className: "cls_data_form_label_col flex-1 min-w-0", children: _jsx(DataFormLabel, { field: field, config: config }) }), has_badge && (_jsx(DataFormBadge, { badge: field.badge, formula_label: field.formula_label, config: config, column_width: badge_column_width })), _jsx("div", { className: "cls_data_form_value_col shrink-0", style: { width: value_width, height: 36 } }), show_file_area && (_jsx("div", { className: "shrink-0 ml-1", style: { width: 26 } }))] }));
    }
    // Stacked layout (used in horizontal groups)
    return (_jsxs("div", { className: "cls_data_form_field_stacked flex flex-col gap-1 py-1", "data-ghost-field-id": field.id, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(DataFormLabel, { field: field, config: config }), has_badge && (_jsx(DataFormBadge, { badge: field.badge, formula_label: field.formula_label, config: config }))] }), _jsxs("div", { className: "flex items-start gap-1", children: [_jsx("div", { className: "flex-1 min-w-0", style: { height: 36 } }), show_file_area && (_jsx("div", { className: "shrink-0 ml-1", style: { width: 26 } }))] })] }));
}
function GhostGroup({ group, config, upload_enabled, active_field_id, collapsible = false, is_collapsed = false, children, }) {
    const fields = group.fields || [];
    const orientation = group.orientation || 'vertical';
    const is_horizontal = orientation === 'horizontal';
    const has_header = Boolean(group.label);
    const is_collapsible = collapsible && has_header;
    // For horizontal groups, check if the active field is inside this group.
    // If so, render the PdfPanel at full width after the flex row instead of
    // inside a flex:1 item (which would constrain the panel width).
    const horizontal_has_active = is_horizontal && tree_contains(fields, active_field_id);
    const variant_style = group.style_variant && config.style_resolver.has_style(group.style_variant)
        ? config.style_resolver.to_style(group.style_variant)
        : undefined;
    const column_headers = group.column_headers;
    return (_jsxs("div", { className: cn('cls_data_form_group', 'mb-2'), children: [has_header && (_jsxs("div", { className: cn('cls_data_form_group_header', 'flex items-center gap-2 py-1.5 px-2 mb-1', is_collapsible && 'cursor-pointer select-none'), style: {
                    ...variant_style,
                    ...(!variant_style && !group.item_code ? { borderBottom: '1px solid #e5e7eb' } : {}),
                }, children: [is_collapsible && (_jsx("svg", { className: cn('w-3.5 h-3.5 shrink-0 transition-transform', is_collapsed && '-rotate-90'), fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })), group.item_code ? (_jsx(DataFormLabel, { field: group, config: config })) : (_jsx("span", { className: "font-semibold text-sm text-gray-900", children: group.label })), (group.badge || group.formula_label) && (_jsx(DataFormBadge, { badge: group.badge, formula_label: group.formula_label, config: config }))] })), !(is_collapsible && is_collapsed) && (_jsxs(_Fragment, { children: [column_headers && column_headers.length > 0 && (_jsxs("div", { className: "cls_data_form_column_headers flex items-center gap-2 px-2 py-1 border-b border-gray-200 mb-1", children: [_jsx("div", { className: "flex-1" }), group.badge_column_width && (_jsx("div", { style: { width: group.badge_column_width }, className: "shrink-0" })), column_headers.map((header, idx) => (_jsx("div", { className: "shrink-0 text-xs font-medium text-gray-500 text-center", style: { width: header.width || group.value_column_width || '200px' }, children: header.label }, idx)))] })), _jsx("div", { className: cn('cls_data_form_group_fields', is_horizontal ? 'flex flex-wrap gap-4' : 'flex flex-col'), children: fields.map((field) => {
                            if (field.visibility === 'hidden')
                                return null;
                            // Nested group (recursive)
                            if (field.field_type === 'group') {
                                const group_el = (_jsx(GhostGroup, { group: field, config: config, upload_enabled: upload_enabled, active_field_id: active_field_id, children: children }, field.id));
                                if (is_horizontal) {
                                    return (_jsx("div", { style: { flex: 1, minWidth: 0 }, children: group_el }, field.id));
                                }
                                return group_el;
                            }
                            // In a horizontal group with the active field, render all fields
                            // as non-active ghost placeholders (PdfPanel is placed after the row)
                            const field_is_active = horizontal_has_active ? false : (field.id === active_field_id);
                            const field_el = (_jsx(GhostField, { field: field, config: config, upload_enabled: upload_enabled, badge_column_width: group.badge_column_width, value_column_width: group.value_column_width, force_layout: is_horizontal ? 'stacked' : undefined, is_active: field_is_active, children: children }, field.id));
                            if (is_horizontal) {
                                return (_jsx("div", { style: { flex: 1, minWidth: 0 }, children: field_el }, field.id));
                            }
                            return field_el;
                        }) }), horizontal_has_active && (_jsx("div", { style: { visibility: 'visible' }, children: _jsx("div", { style: { position: 'sticky', top: 0, height: 'calc(100vh - 40px)' }, children: children }) }))] }))] }));
}
function GhostSection({ section, config, upload_enabled, active_field_id, show_header, collapsible, is_collapsed, collapsible_groups, collapsed_groups_set, children, }) {
    const groups = section.groups || [];
    const section_name = section.section_name || '';
    const variant_style = section.style_variant && config.style_resolver.has_style(section.style_variant)
        ? config.style_resolver.to_style(section.style_variant)
        : undefined;
    return (_jsxs("div", { className: cn('cls_data_form_section', 'mb-4'), children: [show_header && section_name && (_jsxs("div", { className: cn('cls_data_form_section_header', 'flex items-center gap-2 py-2 px-3 rounded-t', collapsible && 'cursor-pointer select-none', !variant_style && 'bg-gray-100 border-b border-gray-200'), style: variant_style, children: [collapsible && (_jsx("svg", { className: cn('w-4 h-4 shrink-0 transition-transform', is_collapsed && '-rotate-90'), fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })), _jsx("span", { className: "font-semibold text-sm", children: section_name })] })), !is_collapsed && (_jsxs("div", { className: cn('cls_data_form_section_content', 'px-1 pt-1'), children: [groups.map((group) => {
                        if (group.visibility === 'hidden')
                            return null;
                        return (_jsx(GhostGroup, { group: group, config: config, upload_enabled: upload_enabled, active_field_id: active_field_id, collapsible: group.collapsible ?? collapsible_groups, is_collapsed: collapsed_groups_set?.has(group.id) ?? false, children: children }, group.id));
                    }), groups.length === 0 && (_jsx("div", { className: "text-sm text-gray-400 py-4 text-center italic", children: "No fields in this section" }))] }))] }));
}
// ─── Ghost Form Panel (top-level) ────────────────────────────
export function GhostFormPanel({ sections, config, active_field_id, collapsed_set, show_section_headers, upload_enabled, collapsible_sections, collapsible_groups, collapsed_groups_set, children, }) {
    return (_jsxs("div", { className: "cls_data_form_ghost w-full", style: { visibility: 'hidden' }, children: [sections.map((section, index) => {
                const section_name = section.section_name || `section_${index}`;
                return (_jsx(GhostSection, { section: section, section_index: index, config: config, upload_enabled: upload_enabled, active_field_id: active_field_id, show_header: show_section_headers, collapsible: collapsible_sections, is_collapsed: collapsed_set.has(section_name), collapsible_groups: collapsible_groups, collapsed_groups_set: collapsed_groups_set, children: children }, section_name));
            }), _jsx("div", { style: { height: 'calc(100vh - 80px)' } })] }));
}
//# sourceMappingURL=ghost_form_panel.js.map