'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Preview Dialog - Live preview of the form template
 * Uses shadcn Dialog for proper modal behavior
 * Updated for multi-section support
 */
import { useState, useRef, useMemo } from 'react';
import { HiRefresh, HiCode, HiUser } from 'react-icons/hi';
import { FaLayerGroup } from 'react-icons/fa';
import { Dialog, DialogContent, DialogHeader, DialogTitle, } from '../../shared/dialog/index.js';
import { useTemplateGenerator } from '../context.js';
import { HazoCollabFormSet } from '../../_internal_form_set.js';
import { cn } from '../../../utils/cn.js';
// Dialog styles - ~60% of viewport, centered
const dialogStyles = {
    position: 'fixed',
    top: '20vh',
    left: '20vw',
    width: '60vw',
    height: '60vh',
    maxWidth: 'none',
    maxHeight: 'none',
    transform: 'none',
    display: 'flex',
    flexDirection: 'column',
};
export function PreviewDialog({ open, on_close, chat_group_id }) {
    const { state } = useTemplateGenerator();
    const [preview_key, set_preview_key] = useState(0);
    const [show_json, set_show_json] = useState(false);
    const [form_data, set_form_data] = useState({});
    const [active_section_index, set_active_section_index] = useState(0);
    const [selected_role, set_selected_role] = useState(undefined);
    const content_ref = useRef(null);
    const handle_reset = () => {
        set_preview_key(k => k + 1);
        set_form_data({});
    };
    // Get sections from state
    const sections = state.sections;
    // Get available roles from icons_behaviour (now at form-set level)
    const roles = useMemo(() => {
        return state.icons_behaviour?.roles ?? [];
    }, [state.icons_behaviour]);
    // Get current section
    const current_section = sections[active_section_index];
    // Build FormSetData for JSON display
    const form_set_data = useMemo(() => ({
        sections: state.sections,
        icons_behaviour: state.icons_behaviour,
    }), [state.sections, state.icons_behaviour]);
    return (_jsx(Dialog, { open: open, onOpenChange: (is_open) => !is_open && on_close(), children: _jsxs(DialogContent, { style: dialogStyles, className: "p-0 overflow-hidden", children: [_jsxs(DialogHeader, { className: "flex-row items-center justify-between p-4 border-b space-y-0", children: [_jsx(DialogTitle, { children: "Form Preview" }), _jsxs("div", { className: "flex items-center gap-2 mr-10", children: [roles.length > 0 && (_jsxs("div", { className: "flex items-center gap-1.5 px-2 py-1 border rounded bg-muted/30", 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-sm bg-transparent border-0 focus:ring-0 pr-6", 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: () => set_show_json(!show_json), className: cn('p-2 rounded hover:bg-muted', show_json && 'bg-muted'), title: "Toggle JSON view", children: _jsx(HiCode, { className: "w-5 h-5" }) }), _jsx("button", { onClick: handle_reset, className: "p-2 rounded hover:bg-muted", title: "Reset form", children: _jsx(HiRefresh, { className: "w-5 h-5" }) })] })] }), _jsxs("div", { className: "flex-1 flex overflow-hidden min-h-0", children: [sections.length > 0 && (_jsxs("div", { className: "w-44 border-r bg-muted/30 flex flex-col shrink-0", children: [_jsx("div", { className: "p-3 border-b", children: _jsx("h3", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Sections" }) }), _jsx("div", { className: "flex-1 overflow-auto p-2", children: _jsx("nav", { className: "space-y-1", children: sections.map((section, index) => (_jsxs("button", { onClick: () => set_active_section_index(index), className: cn('w-full flex items-center gap-2 px-3 py-2 text-sm rounded-md text-left transition-colors', active_section_index === index
                                                ? 'bg-primary text-primary-foreground'
                                                : 'hover:bg-muted'), children: [_jsx(FaLayerGroup, { className: "w-3.5 h-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: section.section_name || 'Untitled' })] }, index))) }) })] })), _jsx("div", { ref: content_ref, className: cn('flex-1 overflow-auto p-6', show_json && 'border-r'), children: current_section ? (_jsx("div", { className: "max-w-2xl 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, active_role: selected_role, enable_notes: true }, `${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 sections to preview" }), _jsx("p", { className: "text-xs mt-1", children: "Add a section to see a preview" })] }) })) }), show_json && (_jsx("div", { className: "w-80 bg-muted/30 flex flex-col shrink-0 overflow-hidden", children: _jsx("div", { className: "flex-1 overflow-auto p-4", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium mb-2", children: "Template JSON (FormSetData)" }), _jsx("pre", { className: "p-3 bg-background rounded border text-xs overflow-auto max-h-[30vh]", children: JSON.stringify(form_set_data, null, 2) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium mb-2", children: "Form Data" }), _jsx("pre", { className: "p-3 bg-background rounded border text-xs overflow-auto max-h-[25vh]", children: JSON.stringify(form_data, null, 2) })] })] }) }) }))] }), _jsx("div", { className: "p-3 border-t bg-muted/30 shrink-0", children: _jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [_jsx("div", { children: state.validation_errors.length > 0 ? (_jsxs("span", { className: "text-destructive", children: [state.validation_errors.length, " validation error", state.validation_errors.length > 1 ? 's' : ''] })) : (_jsx("span", { className: "text-green-600", children: "Template is valid" })) }), _jsxs("div", { children: [_jsxs("span", { className: "mr-3", children: [sections.length, " section", sections.length !== 1 ? 's' : ''] }), "Press ", _jsx("kbd", { className: "px-1.5 py-0.5 bg-muted rounded text-xs", children: "Esc" }), " to close"] })] }) })] }) }));
}
//# sourceMappingURL=preview_dialog.js.map