'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Preview Panel - Inline real-time preview of the form template
 * Shows the full formset with the selected field/group highlighted
 * Updated for multi-section support
 */
import { useState, useRef, useEffect, useMemo } from 'react';
import { HiRefresh, HiUser, HiChevronLeft, HiChevronRight } from 'react-icons/hi';
import { useTemplateGenerator } from '../context.js';
import { HazoCollabFormSet } from '../../_internal_form_set.js';
import { get_field_by_path, is_section_path, parse_path } from '../utils/template_utils.js';
import { cn } from '../../../utils/cn.js';
export function PreviewPanel({ chat_group_id }) {
    const { state } = useTemplateGenerator();
    const [preview_key, set_preview_key] = useState(0);
    const [form_data, set_form_data] = useState({});
    const [selected_role, set_selected_role] = useState(undefined);
    const [active_section_index, set_active_section_index] = useState(0);
    const content_ref = useRef(null);
    // Get available roles from icons_behaviour (now at form-set level)
    const roles = useMemo(() => {
        return state.icons_behaviour?.roles ?? [];
    }, [state.icons_behaviour]);
    // Auto-select section based on selected item
    useEffect(() => {
        if (state.selected_path) {
            const { section_index } = parse_path(state.selected_path);
            if (section_index >= 0 && section_index < state.sections.length) {
                set_active_section_index(section_index);
            }
        }
    }, [state.selected_path, state.sections.length]);
    // Get the selected field's ID for highlighting
    const selected_field_id = useMemo(() => {
        if (!state.selected_path || is_section_path(state.selected_path))
            return null;
        const field = get_field_by_path(state.sections, state.selected_path);
        return field?.id ?? null;
    }, [state.sections, state.selected_path]);
    // Get the current section for preview
    const current_section = state.sections[active_section_index];
    // Auto-scroll to selected item when selection changes
    useEffect(() => {
        if (!selected_field_id || !content_ref.current)
            return;
        // Small delay to ensure DOM is updated after re-render
        const timer = setTimeout(() => {
            const selector = `[data-field-id="${selected_field_id}"], [data-group-id="${selected_field_id}"]`;
            const element = content_ref.current?.querySelector(selector);
            if (element) {
                element.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
        }, 100);
        return () => clearTimeout(timer);
    }, [selected_field_id]);
    const handle_reset = () => {
        set_preview_key(k => k + 1);
        set_form_data({});
    };
    const handle_prev_section = () => {
        set_active_section_index(i => Math.max(0, i - 1));
    };
    const handle_next_section = () => {
        set_active_section_index(i => Math.min(state.sections.length - 1, i + 1));
    };
    // Check if current section has any content
    const has_content = current_section && (current_section.groups?.length ?? 0) > 0;
    return (_jsxs("div", { className: "h-full flex flex-col bg-muted/20", children: [_jsxs("div", { className: "p-3 border-b bg-muted/30 flex items-center justify-between shrink-0", children: [_jsx("h3", { className: "text-sm font-medium", children: "Preview" }), _jsxs("div", { className: "flex items-center gap-2", children: [roles.length > 0 && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(HiUser, { className: "w-4 h-4 text-muted-foreground" }), _jsxs("select", { value: selected_role ?? '', onChange: (e) => set_selected_role(e.target.value || undefined), className: "text-xs px-2 py-1 border rounded bg-background", children: [_jsx("option", { value: "", children: "No role" }), roles.map((role) => (_jsx("option", { value: role.role_id, children: role.role_name }, role.role_id)))] })] })), _jsx("button", { onClick: handle_reset, className: "p-1.5 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors", title: "Reset preview", children: _jsx(HiRefresh, { className: "w-4 h-4" }) })] })] }), state.sections.length > 1 && (_jsxs("div", { className: "px-3 py-2 border-b bg-muted/20 flex items-center justify-between shrink-0", children: [_jsx("button", { onClick: handle_prev_section, disabled: active_section_index === 0, className: "p-1 rounded hover:bg-muted disabled:opacity-30 disabled:cursor-not-allowed", children: _jsx(HiChevronLeft, { className: "w-4 h-4" }) }), _jsxs("div", { className: "text-xs text-center", children: [_jsx("div", { className: "font-medium", children: current_section?.section_name || 'Untitled' }), _jsxs("div", { className: "text-muted-foreground", children: [active_section_index + 1, " of ", state.sections.length] })] }), _jsx("button", { onClick: handle_next_section, disabled: active_section_index === state.sections.length - 1, className: "p-1 rounded hover:bg-muted disabled:opacity-30 disabled:cursor-not-allowed", children: _jsx(HiChevronRight, { className: "w-4 h-4" }) })] })), _jsxs("div", { ref: content_ref, className: cn('flex-1 overflow-auto p-4', 'preview-panel-container'), children: [selected_field_id && (_jsx("style", { children: `
            .preview-panel-container [data-field-id="${selected_field_id}"],
            .preview-panel-container [data-group-id="${selected_field_id}"] {
              outline: 2px solid hsl(var(--primary));
              outline-offset: 4px;
              border-radius: 4px;
            }
          ` })), has_content ? (_jsx("div", { className: "max-w-lg mx-auto", children: _jsx(HazoCollabFormSet, { section: current_section, icons_behaviour: state.icons_behaviour, chat_group_id: chat_group_id, on_form_data_change: set_form_data, 
                            // Set author role to show visibility/lock icons when enabled at field level
                            user_role: "author", 
                            // Pass the selected role for icons_behaviour
                            active_role: selected_role, 
                            // Disable all form-level controls so only field-level settings apply
                            enable_notes: false, enable_chat: false, enable_data_ok: false, enable_visibility_toggle: false, enable_lock: false, enable_delete: false }, `${preview_key}-${active_section_index}`) })) : (_jsx("div", { className: "h-full flex items-center justify-center text-muted-foreground", children: _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-sm", children: "No fields to preview" }), _jsx("p", { className: "text-xs mt-1", children: "Add fields to see a live preview" })] }) }))] })] }));
}
//# sourceMappingURL=preview_panel.js.map