/**
 * General Chat View Section
 * 
 * Settings for the main chat interface elements:
 * Header, Window, Bubble, Messages, Input, Quick Buttons
 * 
 * @since 1.5.0
 */

import React from 'react';
import { 
    MessageSquare, 
    Box, 
    Layout,
    Circle,
    User,
    Bot,
    Keyboard,
} from 'lucide-react';
import { t } from '@/lib/i18n';
import { useLanguage } from '@/contexts/LanguageContext';
import { WidgetSectionBase, WidgetSectionTab } from './WidgetSectionBase';
import { LinkedFieldEditor } from '../LinkedFieldEditor';
import { ChatSimulator } from '../ChatSimulator';
import { TypographyControl, TypographySettings } from '../TypographyControl';
import { 
    ElementSettings, 
    PresetGlobalValues, 
    FieldValue,
    ButtonStyleSettings,
    createDefaultButtonStyle,
    createCustomValue,
    createGlobalRef,
    resolveFieldValue,
} from '../../../types/appearance';
import { mergeElementSettings } from '../../../utils/appearanceMerge';
import { ButtonStyleEditor } from '../../common/ButtonStyleEditor';
import { BorderRadiusFieldEditor } from '../../common/BorderRadiusFieldEditor';
import { PaddingFieldEditor } from '../../common/PaddingFieldEditor';
import { BoxShadowFieldEditor } from '../../common/BoxShadowFieldEditor';
// NumberWithUnitInput removed - all size fields now use LinkedFieldEditor for global linking
import { FourSideBoxEditor } from '../../common/FourSideBoxEditor';
import { BorderWidthEditor, BorderWidthValue } from '../../common/BorderWidthEditor';
import { BorderStyleSelect } from '../../common/BorderStyleSelect';
import { PositionSelect } from '../../common/PositionSelect';
import { AnimationSelect } from '../../common/AnimationSelect';
import { LucideIconPicker, HEADER_LUCIDE_ICON_MAP } from '../../common/LucideIconPicker';
import type { HeaderAvatarIconName } from '../../../types/appearance';

interface GeneralChatViewSectionProps {
    settings: ElementSettings | null;
    globalValues: PresetGlobalValues;
    onChange: (settings: ElementSettings) => void;
    /** Callback to save current typography as a new global custom scale */
    onSaveAsGlobalTypographyScale?: (scale: { id: string; name: string; fontSize: string; fontWeight: string; lineHeight: string; textTransform: string; fontStyle: string; textDecoration: string; letterSpacing: string; textShadow: string }) => void;
    disabled?: boolean;
    /** When true, make settings pane non-clickable (pointer-events: none) */
    disableSettingsPointerEvents?: boolean;
    /** Optional action when locked overlay button is clicked */
    onLockedHoverActionClick?: () => void;
    /** Language of the preset being previewed ('he' | 'en'). Drives RTL/LTR and demo text in the preview. */
    presetLanguage?: string;
}

export const GeneralChatViewSection: React.FC<GeneralChatViewSectionProps> = ({
    settings,
    globalValues,
    onChange,
    onSaveAsGlobalTypographyScale,
    disabled = false,
    disableSettingsPointerEvents = false,
    onLockedHoverActionClick,
    presetLanguage,
}) => {
    const { currentLanguage } = useLanguage();
    const isRTL = currentLanguage === 'he';

    const currentSettings: ElementSettings = React.useMemo(
        () => mergeElementSettings(settings),
        [settings]
    );

    // Generic handler for updating nested settings
    const handleFieldChange = <K extends keyof ElementSettings>(
        elementKey: K,
        fieldKey: keyof ElementSettings[K],
        value: unknown
    ) => {
        onChange({
            ...currentSettings,
            [elementKey]: {
                ...currentSettings[elementKey],
                [fieldKey]: value,
            },
        });
    };
    
    // Handler for typography changes (keeps the object structure)
    const handleTypographyChange = <K extends keyof ElementSettings>(
        elementKey: K,
        typography: TypographySettings
    ) => {
        onChange({
            ...currentSettings,
            [elementKey]: {
                ...currentSettings[elementKey],
                typography,
            },
        });
    };

    // Handler for secondary typography fields (e.g. header subtitle typography)
    const handleTypographyFieldChange = <K extends keyof ElementSettings>(
        elementKey: K,
        fieldKey: keyof ElementSettings[K],
        typography: TypographySettings
    ) => {
        onChange({
            ...currentSettings,
            [elementKey]: {
                ...currentSettings[elementKey],
                [fieldKey]: typography,
            },
        });
    };

    // Handler for ButtonStyleSettings changes
    const handleButtonStyleChange = (
        elementKey: 'inputArea' | 'header',
        fieldKey: 'sendButton' | 'buttonStyle' | 'closeButtonStyle' | 'resetButtonStyle' | 'minimizeButtonStyle',
        buttonStyle: ButtonStyleSettings
    ) => {
        onChange({
            ...currentSettings,
            [elementKey]: {
                ...currentSettings[elementKey],
                [fieldKey]: buttonStyle,
            },
        });
    };

    // Create tabs for each element
    const tabs: WidgetSectionTab[] = [
        {
            id: 'header',
            label: t('Header'),
            icon: <Layout size={14} />,
            content: (
                <div className="space-y-6">
                    <div className="bg-white border border-gray-200 rounded-lg p-4">
                        <h4 className="text-base font-semibold text-gray-800 mb-3">{t('Colors')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Background Color')}
                                value={currentSettings.header.background}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('header', 'background', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={currentSettings.header.text}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('header', 'text', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                    </div>
                    <div className="bg-white border border-gray-200 rounded-lg p-4">
                        <h4 className="text-base font-semibold text-gray-800 mb-3">{t('Typography')}</h4>
                        <TypographyControl
                            label={t('Title text styling')}
                            value={currentSettings.header.typography || {}}
                            globalValues={globalValues}
                            onChange={(typography) => handleTypographyChange('header', typography)}
                            onSaveAsGlobalScale={onSaveAsGlobalTypographyScale}
                            disabled={disabled}
                        />
                        <div className="mt-4">
                            <TypographyControl
                                label={t('Subtitle text styling')}
                                value={(currentSettings.header as unknown as { subtitleTypography?: TypographySettings }).subtitleTypography || {}}
                                globalValues={globalValues}
                                onChange={(typography) => handleTypographyFieldChange('header', 'subtitleTypography' as never, typography)}
                                onSaveAsGlobalScale={onSaveAsGlobalTypographyScale}
                                disabled={disabled}
                            />
                        </div>
                    </div>
                    <div className="bg-white border border-gray-200 rounded-lg p-4">
                        <h4 className="text-base font-semibold text-gray-800 mb-3">{t('Icon / Avatar')}</h4>
                        <div className="space-y-3">
                            <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">{t('Icon')}</label>
                                <LucideIconPicker
                                    value={(() => {
                                        const raw = String((currentSettings.header as unknown as { avatarIcon?: unknown }).avatarIcon || 'bot');
                                        const legacyMap: Record<string, HeaderAvatarIconName> = {
                                            robot: 'bot',
                                            chat: 'message-circle',
                                            message: 'message-circle',
                                            sparkles: 'sparkles',
                                            headphones: 'headphones',
                                        };
                                        const mapped = legacyMap[raw] || raw;
                                        return (HEADER_LUCIDE_ICON_MAP as Record<string, unknown>)[mapped]
                                            ? (mapped as HeaderAvatarIconName)
                                            : ('bot' as HeaderAvatarIconName);
                                    })()}
                                    onChange={(icon) => handleFieldChange('header', 'avatarIcon' as never, icon)}
                                    disabled={disabled}
                                />
                            </div>
                            <LinkedFieldEditor
                                label={t('Inner Icon Size')}
                                value={(currentSettings.header as unknown as { avatarIconSize?: FieldValue }).avatarIconSize ?? createCustomValue('18px')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('header', 'avatarIconSize' as never, v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="18px"
                            />
                            <LinkedFieldEditor
                                label={t('Size')}
                                value={(currentSettings.header as unknown as { avatarSize?: FieldValue }).avatarSize ?? createCustomValue('40px')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('header', 'avatarSize' as never, v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="40px"
                            />
                            <LinkedFieldEditor
                                label={t('Wrapper Background')}
                                value={(currentSettings.header as unknown as { avatarBackground?: FieldValue }).avatarBackground || createCustomValue('rgba(255,255,255,0.2)')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('header', 'avatarBackground' as never, v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Inner Icon Color')}
                                value={(currentSettings.header as unknown as { avatarIconColor?: FieldValue }).avatarIconColor || createGlobalRef('colors.textLight')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('header', 'avatarIconColor' as never, v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <BorderRadiusFieldEditor
                                label={t('Wrapper Border Radius')}
                                value={(currentSettings.header as unknown as { avatarBorderRadius?: FieldValue }).avatarBorderRadius || createGlobalRef('effects.borderRadiusFull')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('header', 'avatarBorderRadius' as never, v)}
                                disabled={disabled}
                                defaultGlobalRef="effects.borderRadiusFull"
                            />
                            <BorderStyleSelect
                                label={t('Wrapper Border Style')}
                                value={String((currentSettings.header as unknown as { avatarBorderStyle?: string }).avatarBorderStyle || 'solid') as 'none' | 'solid' | 'dashed' | 'dotted'}
                                onChange={(v) => handleFieldChange('header', 'avatarBorderStyle' as never, v)}
                                disabled={disabled}
                            />
                            <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">{t('Wrapper Border Width')}</label>
                                <BorderWidthEditor
                                    value={((): BorderWidthValue => {
                                        const bw = (currentSettings.header as unknown as { avatarBorderWidth?: unknown }).avatarBorderWidth;
                                        if (bw && typeof bw === 'object') {
                                            const o = bw as Record<string, unknown>;
                                            if (typeof o.top === 'string' && typeof o.right === 'string' && typeof o.bottom === 'string' && typeof o.left === 'string') {
                                                return { top: o.top, right: o.right, bottom: o.bottom, left: o.left };
                                            }
                                        }
                                        const resolved = resolveFieldValue((bw as FieldValue) || createCustomValue('2px'), globalValues) || '2px';
                                        return { top: resolved, right: resolved, bottom: resolved, left: resolved };
                                    })()}
                                    onChange={(v) => handleFieldChange('header', 'avatarBorderWidth' as never, v as unknown as never)}
                                    disabled={disabled}
                                    label=""
                                />
                            </div>
                            <LinkedFieldEditor
                                label={t('Wrapper Border Color')}
                                value={(currentSettings.header as unknown as { avatarBorderColor?: FieldValue }).avatarBorderColor || createCustomValue('rgba(255,255,255,0.2)')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('header', 'avatarBorderColor' as never, v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <div className="pt-2 border-t border-gray-100">
                                <div className="text-sm font-medium text-gray-700 mb-2">{t('Status Indicator')}</div>
                                <div className="space-y-3">
                                    <LinkedFieldEditor
                                        label={t('Dot Size')}
                                        value={(currentSettings.header as unknown as { statusIndicatorSize?: FieldValue }).statusIndicatorSize ?? createCustomValue('12px')}
                                        globalValues={globalValues}
                                        onChange={(v) => handleFieldChange('header', 'statusIndicatorSize' as never, v)}
                                        fieldType="size"
                                        allowGlobalLink={true}
                                        disabled={disabled}
                                        placeholder="12px"
                                    />
                                    <LinkedFieldEditor
                                        label={t('Dot Color')}
                                        value={(currentSettings.header as unknown as { statusIndicatorBackground?: FieldValue }).statusIndicatorBackground ?? createCustomValue('#4ADE80')}
                                        globalValues={globalValues}
                                        onChange={(v) => handleFieldChange('header', 'statusIndicatorBackground' as never, v)}
                                        fieldType="color"
                                        disabled={disabled}
                                    />
                                    <LinkedFieldEditor
                                        label={t('Border Width')}
                                        value={(currentSettings.header as unknown as { statusIndicatorBorderWidth?: FieldValue }).statusIndicatorBorderWidth ?? createCustomValue('2px')}
                                        globalValues={globalValues}
                                        onChange={(v) => handleFieldChange('header', 'statusIndicatorBorderWidth' as never, v)}
                                        fieldType="size"
                                        allowGlobalLink={true}
                                        disabled={disabled}
                                        placeholder="2px"
                                    />
                                    <LinkedFieldEditor
                                        label={t('Border Color')}
                                        value={(currentSettings.header as unknown as { statusIndicatorBorderColor?: FieldValue }).statusIndicatorBorderColor ?? createCustomValue('#FFFFFF')}
                                        globalValues={globalValues}
                                        onChange={(v) => handleFieldChange('header', 'statusIndicatorBorderColor' as never, v)}
                                        fieldType="color"
                                        disabled={disabled}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="bg-white border border-gray-200 rounded-lg p-4">
                        <h4 className="text-base font-semibold text-gray-800 mb-3">{t('Dimensions')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Height')}
                                value={currentSettings.header.height}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('header', 'height', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                placeholder="60px"
                                disabled={disabled}
                            />
                            <PaddingFieldEditor
                                label={t('Inner Padding')}
                                value={currentSettings.header.padding}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('header', 'padding', v)}
                                disabled={disabled}
                                fallback="0 16px"
                            />

                            <div className="pt-2 border-t border-gray-100">
                                <div className="text-sm font-medium text-gray-700 mb-2">{t('Header Border')}</div>
                                <div className="space-y-3">
                                    <BorderRadiusFieldEditor
                                        label={t('Border Radius')}
                                        value={(currentSettings.header as unknown as { borderRadius?: FieldValue }).borderRadius || createGlobalRef('effects.borderRadiusLarge')}
                                        globalValues={globalValues}
                                        onChange={(v) => handleFieldChange('header', 'borderRadius' as never, v)}
                                        disabled={disabled}
                                        defaultGlobalRef="effects.borderRadiusLarge"
                                    />
                                    <BorderStyleSelect
                                        label={t('Border Style')}
                                        value={((currentSettings.header as unknown as { borderStyle?: any }).borderStyle || 'none') as any}
                                        onChange={(v) => handleFieldChange('header', 'borderStyle' as never, v as any)}
                                        disabled={disabled}
                                    />
                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 mb-1">{t('Border Width')}</label>
                                        <BorderWidthEditor
                                            value={((): BorderWidthValue => {
                                                const bw = (currentSettings.header as unknown as { borderWidth?: unknown }).borderWidth;
                                                if (bw && typeof bw === 'object') {
                                                    const o = bw as Record<string, unknown>;
                                                    if (typeof o.top === 'string' && typeof o.right === 'string' && typeof o.bottom === 'string' && typeof o.left === 'string') {
                                                        return { top: o.top, right: o.right, bottom: o.bottom, left: o.left };
                                                    }
                                                }
                                                const resolved = resolveFieldValue((bw as FieldValue) || createCustomValue('0px'), globalValues) || '0px';
                                                return { top: resolved, right: resolved, bottom: resolved, left: resolved };
                                            })()}
                                            onChange={(v) => handleFieldChange('header', 'borderWidth' as never, v as unknown as never)}
                                            disabled={disabled}
                                            label=""
                                        />
                                    </div>
                                    <LinkedFieldEditor
                                        label={t('Border Color')}
                                        value={(currentSettings.header as unknown as { borderColor?: FieldValue }).borderColor || createCustomValue('transparent')}
                                        globalValues={globalValues}
                                        onChange={(v) => handleFieldChange('header', 'borderColor' as never, v)}
                                        fieldType="color"
                                        disabled={disabled}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="bg-white border border-gray-200 rounded-lg p-4">
                        <h4 className="text-base font-semibold text-gray-800 mb-3">{t('Header Buttons (Reset / Close)')}</h4>
                        <div className="space-y-4">
                            {/* Shared button container size - icon sizes are per-button via ButtonStyleEditor */}
                            <LinkedFieldEditor
                                label={t('Button size (minimum)')}
                                value={(currentSettings.header as unknown as { actionButtonSize?: FieldValue }).actionButtonSize || createCustomValue('36px')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('header', 'actionButtonSize' as never, v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                placeholder="36px"
                                disabled={disabled}
                            />
                            <div>
                                <ButtonStyleEditor
                                    value={(currentSettings.header as unknown as { resetButtonStyle?: ButtonStyleSettings }).resetButtonStyle || createDefaultButtonStyle('ghost')}
                                    onChange={(v) => handleButtonStyleChange('header', 'resetButtonStyle', v)}
                                    globalValues={globalValues}
                                    label={t('Reset button styling')}
                                    disabled={disabled}
                                    showIcon={true}
                                    showIconPicker={true}
                                    hideIconPosition={true}
                                    showTypography={false}
                                />
                            </div>
                            <div>
                                <ButtonStyleEditor
                                    value={(currentSettings.header as unknown as { closeButtonStyle?: ButtonStyleSettings }).closeButtonStyle || createDefaultButtonStyle('ghost')}
                                    onChange={(v) => handleButtonStyleChange('header', 'closeButtonStyle', v)}
                                    globalValues={globalValues}
                                    label={t('Close button styling')}
                                    disabled={disabled}
                                    showIcon={true}
                                    showIconPicker={true}
                                    hideIconPosition={true}
                                    showTypography={false}
                                />
                            </div>
                            <div>
                                <ButtonStyleEditor
                                    value={(currentSettings.header as unknown as { minimizeButtonStyle?: ButtonStyleSettings }).minimizeButtonStyle || createDefaultButtonStyle('ghost')}
                                    onChange={(v) => handleButtonStyleChange('header', 'minimizeButtonStyle', v)}
                                    globalValues={globalValues}
                                    label={t('Minimize button styling')}
                                    disabled={disabled}
                                    showIcon={true}
                                    showIconPicker={true}
                                    hideIconPosition={true}
                                    showTypography={false}
                                />
                            </div>
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'window',
            label: t('Window'),
            icon: <Box size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Dimensions')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Width')}
                                value={currentSettings.chatWindow.width}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('chatWindow', 'width', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                placeholder="380px"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Height')}
                                value={currentSettings.chatWindow.height}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('chatWindow', 'height', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                placeholder="600px"
                                disabled={disabled}
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Styling')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Background Color')}
                                value={currentSettings.chatWindow.background}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('chatWindow', 'background', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <BorderRadiusFieldEditor
                                label={t('Border Radius')}
                                value={currentSettings.chatWindow.borderRadius}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('chatWindow', 'borderRadius', v)}
                                disabled={disabled}
                                defaultGlobalRef="effects.borderRadiusLarge"
                            />
                            <div className="pt-2 border-t border-gray-200">
                                <h5 className="text-xs font-semibold text-gray-600 mb-2">{t('Border')}</h5>
                                <div className="space-y-3">
                                    <BorderStyleSelect
                                        label={t('Type')}
                                        value={(currentSettings.chatWindow.borderType || 'solid') as any}
                                        onChange={(v) => handleFieldChange('chatWindow', 'borderType' as never, v as any)}
                                        disabled={disabled}
                                    />
                                    <div>
                                        <label className="block text-xs text-gray-600 font-medium mb-1">{t('Width')}</label>
                                        <BorderWidthEditor
                                            value={(() => {
                                                const bw = (currentSettings.chatWindow as unknown as { borderWidth?: unknown }).borderWidth;
                                                if (bw && typeof bw === 'object') {
                                                    const o = bw as Record<string, unknown>;
                                                    if (typeof o.top === 'string' && typeof o.right === 'string' && typeof o.bottom === 'string' && typeof o.left === 'string') {
                                                        return { top: o.top, right: o.right, bottom: o.bottom, left: o.left };
                                                    }
                                                }
                                                const resolved = resolveFieldValue((bw as FieldValue) || createCustomValue('1px'), globalValues) || '1px';
                                                return { top: resolved, right: resolved, bottom: resolved, left: resolved };
                                            })()}
                                            onChange={(v) => handleFieldChange('chatWindow', 'borderWidth' as never, v as unknown as never)}
                                            disabled={disabled}
                                            label=""
                                        />
                                    </div>
                                    <LinkedFieldEditor
                                        label={t('Color')}
                                        value={currentSettings.chatWindow.borderColor || createGlobalRef('colors.borderSoft')}
                                        globalValues={globalValues}
                                        onChange={(v) => handleFieldChange('chatWindow', 'borderColor' as never, v)}
                                        fieldType="color"
                                        disabled={disabled}
                                    />
                                </div>
                            </div>
                            <BoxShadowFieldEditor
                                label={t('Shadow')}
                                value={currentSettings.chatWindow.shadow}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('chatWindow', 'shadow', v as unknown as never)}
                                disabled={disabled}
                                defaultGlobalRef="effects.shadowCard"
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Spacing')}</h4>
                        <div className="space-y-4">
                            <div className="bg-white border border-gray-200 rounded-lg p-3">
                                <PaddingFieldEditor
                                    label={t('Window padding (outer)')}
                                    value={currentSettings.chatWindow.padding || createGlobalRef('spacing.none')}
                                    globalValues={globalValues}
                                    onChange={(v) => handleFieldChange('chatWindow', 'padding', v)}
                                    disabled={disabled}
                                    fallback="0"
                                />
                            </div>
                            <div className="bg-white border border-gray-200 rounded-lg p-3">
                                <PaddingFieldEditor
                                    label={t('Messages area padding')}
                                    value={(currentSettings.chatWindow as unknown as { messagesPadding?: FieldValue }).messagesPadding || createGlobalRef('spacing.containerNormal')}
                                    globalValues={globalValues}
                                    onChange={(v) => handleFieldChange('chatWindow', 'messagesPadding' as never, v)}
                                    disabled={disabled}
                                    fallback="12px"
                                />
                                <div className="mt-3">
                                    <LinkedFieldEditor
                                        label={t('Message gap')}
                                        value={currentSettings.chatWindow.messagesGap || createGlobalRef('spacing.md')}
                                        globalValues={globalValues}
                                        onChange={(v) => handleFieldChange('chatWindow', 'messagesGap' as never, v)}
                                        fieldType="size"
                                        allowGlobalLink={true}
                                        placeholder="12px"
                                        disabled={disabled}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'bubble',
            label: t('Bubble'),
            icon: <Circle size={14} />,
            content: (
                <div className="space-y-6">
                    {/* Layout / Sizes */}
                    <div className="bg-white border border-gray-200 rounded-lg p-3 space-y-4">
                        <LinkedFieldEditor
                            label={t('Bubble Size')}
                            value={currentSettings.chatBubble.size}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('chatBubble', 'size', v)}
                            fieldType="size"
                            allowGlobalLink={true}
                            placeholder="45px"
                            disabled={disabled}
                        />

                        <PositionSelect
                            label={t('Position')}
                            value={(currentSettings.chatBubble.position || 'bottom-right') as any}
                            onChange={(v) => handleFieldChange('chatBubble', 'position' as never, v as any)}
                            disabled={disabled}
                        />

                        <div className="space-y-1.5">
                            <div className="text-sm font-medium text-gray-700">{t('Edge Distance (Margin)')}</div>
                            <FourSideBoxEditor
                                value={(() => {
                                    const m = currentSettings.chatBubble.margin as unknown
                                    if (m && typeof m === 'object' && 'top' in (m as any)) {
                                        const o = m as { top?: string; right?: string; bottom?: string; left?: string }
                                        return {
                                            top: o.top || '20px',
                                            right: o.right || '20px',
                                            bottom: o.bottom || '20px',
                                            left: o.left || '20px',
                                        }
                                    }
                                    const resolved = resolveFieldValue(m as FieldValue, globalValues) || '20px'
                                    return { top: resolved, right: resolved, bottom: resolved, left: resolved }
                                })()}
                                onChange={(v) => handleFieldChange('chatBubble', 'margin', v as unknown as never)}
                                disabled={disabled}
                                allowedUnits={['px']}
                                label=""
                            />
                        </div>

                        <AnimationSelect
                            label={t('Animation')}
                            value={(currentSettings.chatBubble.animation || 'none') as any}
                            onChange={(v) => handleFieldChange('chatBubble', 'animation', v as any)}
                            disabled={disabled}
                        />
                    </div>

                    {/* Colors */}
                    <div className="bg-white border border-gray-200 rounded-lg p-3 space-y-3">
                        <LinkedFieldEditor
                            label={t('Background Color')}
                            value={currentSettings.chatBubble.background}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('chatBubble', 'background', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                    </div>

                    {/* Icon */}
                    <div className="bg-white border border-gray-200 rounded-lg p-3 space-y-3">
                        <div>
                            <label className="text-sm font-medium text-gray-700 mb-2 block">{t('Icon')}</label>
                            <LucideIconPicker
                                value={(() => {
                                    const raw = String(currentSettings.chatBubble.icon || 'sparkles');
                                    const legacyMap: Record<string, HeaderAvatarIconName> = {
                                        robot: 'bot',
                                        chat: 'message-circle',
                                        message: 'message-circle',
                                        sparkles: 'sparkles',
                                        headphones: 'headphones',
                                    };
                                    const mapped = legacyMap[raw] || raw;
                                    return (HEADER_LUCIDE_ICON_MAP as Record<string, unknown>)[mapped]
                                        ? (mapped as HeaderAvatarIconName)
                                        : ('message-circle' as HeaderAvatarIconName);
                                })()}
                                onChange={(icon) => handleFieldChange('chatBubble', 'icon', icon)}
                                disabled={disabled}
                            />
                        </div>

                        <LinkedFieldEditor
                            label={t('Icon Color')}
                            value={(currentSettings.chatBubble as unknown as { iconColor?: FieldValue }).iconColor || createGlobalRef('colors.textLight')}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('chatBubble', 'iconColor' as never, v)}
                            fieldType="color"
                            disabled={disabled}
                        />

                        <LinkedFieldEditor
                            label={t('Icon Size')}
                            value={(currentSettings.chatBubble as unknown as { iconSize?: FieldValue }).iconSize || createGlobalRef('sizes.iconLarge')}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('chatBubble', 'iconSize' as never, v)}
                            fieldType="size"
                            allowGlobalLink={true}
                            placeholder="28px"
                            disabled={disabled}
                        />
                    </div>

                    {/* Unread Badge */}
                    <div className="bg-white border border-gray-200 rounded-lg p-3 space-y-3">
                        <div className="text-sm font-medium text-gray-700">{t('Unread Badge')}</div>
                        <LinkedFieldEditor
                            label={t('Background Color')}
                            value={(currentSettings.chatBubble.unreadBadge as any)?.background || createGlobalRef('colors.error')}
                            globalValues={globalValues}
                            onChange={(v) =>
                                handleFieldChange('chatBubble', 'unreadBadge' as never, {
                                    ...(currentSettings.chatBubble.unreadBadge as Record<string, unknown>),
                                    background: v,
                                } as never)
                            }
                            fieldType="color"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Text Color')}
                            value={(currentSettings.chatBubble.unreadBadge as any)?.textColor || createGlobalRef('colors.textLight')}
                            globalValues={globalValues}
                            onChange={(v) =>
                                handleFieldChange('chatBubble', 'unreadBadge' as never, {
                                    ...(currentSettings.chatBubble.unreadBadge as Record<string, unknown>),
                                    textColor: v,
                                } as never)
                            }
                            fieldType="color"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Height')}
                            value={(currentSettings.chatBubble.unreadBadge as any)?.size || createGlobalRef('sizes.iconMedium')}
                            globalValues={globalValues}
                            onChange={(v) =>
                                handleFieldChange('chatBubble', 'unreadBadge' as never, {
                                    ...(currentSettings.chatBubble.unreadBadge as Record<string, unknown>),
                                    size: v,
                                } as never)
                            }
                            fieldType="size"
                            allowGlobalLink={true}
                            placeholder="20px"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Minimum Width')}
                            value={(currentSettings.chatBubble.unreadBadge as any)?.minWidth || createGlobalRef('sizes.iconMedium')}
                            globalValues={globalValues}
                            onChange={(v) =>
                                handleFieldChange('chatBubble', 'unreadBadge' as never, {
                                    ...(currentSettings.chatBubble.unreadBadge as Record<string, unknown>),
                                    minWidth: v,
                                } as never)
                            }
                            fieldType="size"
                            allowGlobalLink={true}
                            placeholder="20px"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Horizontal Padding')}
                            value={(currentSettings.chatBubble.unreadBadge as any)?.paddingX || createCustomValue('4px')}
                            globalValues={globalValues}
                            onChange={(v) =>
                                handleFieldChange('chatBubble', 'unreadBadge' as never, {
                                    ...(currentSettings.chatBubble.unreadBadge as Record<string, unknown>),
                                    paddingX: v,
                                } as never)
                            }
                            fieldType="size"
                            allowGlobalLink={false}
                            placeholder="4px"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Horizontal Offset')}
                            value={(currentSettings.chatBubble.unreadBadge as any)?.offsetX || createCustomValue('-4px')}
                            globalValues={globalValues}
                            onChange={(v) =>
                                handleFieldChange('chatBubble', 'unreadBadge' as never, {
                                    ...(currentSettings.chatBubble.unreadBadge as Record<string, unknown>),
                                    offsetX: v,
                                } as never)
                            }
                            fieldType="size"
                            allowGlobalLink={false}
                            placeholder="-4px"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Vertical Offset')}
                            value={(currentSettings.chatBubble.unreadBadge as any)?.offsetY || createCustomValue('-4px')}
                            globalValues={globalValues}
                            onChange={(v) =>
                                handleFieldChange('chatBubble', 'unreadBadge' as never, {
                                    ...(currentSettings.chatBubble.unreadBadge as Record<string, unknown>),
                                    offsetY: v,
                                } as never)
                            }
                            fieldType="size"
                            allowGlobalLink={false}
                            placeholder="-4px"
                            disabled={disabled}
                        />
                        <BorderRadiusFieldEditor
                            label={t('Border Radius')}
                            value={(currentSettings.chatBubble.unreadBadge as any)?.borderRadius || createGlobalRef('effects.borderRadiusFull')}
                            globalValues={globalValues}
                            onChange={(v) =>
                                handleFieldChange('chatBubble', 'unreadBadge' as never, {
                                    ...(currentSettings.chatBubble.unreadBadge as Record<string, unknown>),
                                    borderRadius: v,
                                } as never)
                            }
                            disabled={disabled}
                            defaultGlobalRef="effects.borderRadiusFull"
                        />
                        <div className="pt-2 border-t border-gray-100">
                            <TypographyControl
                                label={t('Typography')}
                                value={(currentSettings.chatBubble.unreadBadge as any)?.typography || {}}
                                globalValues={globalValues}
                                onChange={(typography) =>
                                    handleFieldChange('chatBubble', 'unreadBadge' as never, {
                                        ...(currentSettings.chatBubble.unreadBadge as Record<string, unknown>),
                                        typography,
                                    } as never)
                                }
                                onSaveAsGlobalScale={onSaveAsGlobalTypographyScale}
                                disabled={disabled}
                            />
                        </div>
                    </div>

                    {/* Pulse Ring */}
                    <div className="bg-white border border-gray-200 rounded-lg p-3 space-y-3">
                        <div className="text-sm font-medium text-gray-700">{t('Pulse Ring (Unread)')}</div>
                        <LinkedFieldEditor
                            label={t('Color')}
                            value={(currentSettings.chatBubble.pulseRing as any)?.color || createGlobalRef('colors.primary')}
                            globalValues={globalValues}
                            onChange={(v) =>
                                handleFieldChange('chatBubble', 'pulseRing' as never, {
                                    ...(currentSettings.chatBubble.pulseRing as Record<string, unknown>),
                                    color: v,
                                } as never)
                            }
                            fieldType="color"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Scale')}
                            value={(currentSettings.chatBubble.pulseRing as any)?.scale || createCustomValue('1.2')}
                            globalValues={globalValues}
                            onChange={(v) =>
                                handleFieldChange('chatBubble', 'pulseRing' as never, {
                                    ...(currentSettings.chatBubble.pulseRing as Record<string, unknown>),
                                    scale: v,
                                } as never)
                            }
                            fieldType="text"
                            allowGlobalLink={false}
                            placeholder="1.2"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Start Opacity')}
                            value={(currentSettings.chatBubble.pulseRing as any)?.opacityStart || createCustomValue('0.5')}
                            globalValues={globalValues}
                            onChange={(v) =>
                                handleFieldChange('chatBubble', 'pulseRing' as never, {
                                    ...(currentSettings.chatBubble.pulseRing as Record<string, unknown>),
                                    opacityStart: v,
                                } as never)
                            }
                            fieldType="text"
                            allowGlobalLink={false}
                            placeholder="0.5"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('End Opacity')}
                            value={(currentSettings.chatBubble.pulseRing as any)?.opacityEnd || createCustomValue('0')}
                            globalValues={globalValues}
                            onChange={(v) =>
                                handleFieldChange('chatBubble', 'pulseRing' as never, {
                                    ...(currentSettings.chatBubble.pulseRing as Record<string, unknown>),
                                    opacityEnd: v,
                                } as never)
                            }
                            fieldType="text"
                            allowGlobalLink={false}
                            placeholder="0"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Duration')}
                            value={(currentSettings.chatBubble.pulseRing as any)?.duration || createCustomValue('1.5s')}
                            globalValues={globalValues}
                            onChange={(v) =>
                                handleFieldChange('chatBubble', 'pulseRing' as never, {
                                    ...(currentSettings.chatBubble.pulseRing as Record<string, unknown>),
                                    duration: v,
                                } as never)
                            }
                            fieldType="text"
                            allowGlobalLink={false}
                            placeholder="1.5s"
                            disabled={disabled}
                        />
                    </div>

                    {/* Border + Effects */}
                    <div className="bg-white border border-gray-200 rounded-lg p-3 space-y-4">
                        <BorderStyleSelect
                            label={t('Border Style')}
                            value={(((currentSettings.chatBubble as unknown as { borderType?: any }).borderType || 'solid') as any)}
                            onChange={(v) => handleFieldChange('chatBubble', 'borderType' as never, v as any)}
                            disabled={disabled}
                        />

                        <BorderWidthEditor
                            label={t('Border Thickness')}
                            value={(() => {
                                const bw = (currentSettings.chatBubble as unknown as { borderWidth?: BorderWidthValue | FieldValue }).borderWidth;
                                if (bw && typeof bw === 'object' && 'top' in bw && 'right' in bw && 'bottom' in bw && 'left' in bw) {
                                    return bw as BorderWidthValue;
                                }
                                const resolved = bw ? resolveFieldValue(bw as FieldValue, globalValues) : '2px';
                                return { top: resolved || '2px', right: resolved || '2px', bottom: resolved || '2px', left: resolved || '2px' };
                            })()}
                            onChange={(v) => handleFieldChange('chatBubble', 'borderWidth' as never, v)}
                            disabled={disabled}
                            allowedUnits={['px', 'em', 'rem']}
                        />

                        <LinkedFieldEditor
                            label={t('Border Color')}
                            value={(currentSettings.chatBubble as unknown as { borderColor?: FieldValue }).borderColor || createGlobalRef('colors.primary')}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('chatBubble', 'borderColor' as never, v)}
                            fieldType="color"
                            disabled={disabled}
                        />

                        <BorderRadiusFieldEditor
                            label={t('Border Radius')}
                            value={(currentSettings.chatBubble as unknown as { borderRadius?: FieldValue }).borderRadius || createGlobalRef('effects.borderRadiusFull')}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('chatBubble', 'borderRadius' as never, v)}
                            disabled={disabled}
                            defaultGlobalRef="effects.borderRadiusFull"
                        />

                        <BoxShadowFieldEditor
                            label={t('Shadow')}
                            value={(currentSettings.chatBubble as unknown as { shadow?: FieldValue }).shadow || createGlobalRef('effects.shadowCard')}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('chatBubble', 'shadow' as never, v as unknown as never)}
                            disabled={disabled}
                            defaultGlobalRef="effects.shadowCard"
                        />
                    </div>
                </div>
            ),
        },
        {
            id: 'userMessage',
            label: t('User Message'),
            icon: <User size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Colors')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Background Color')}
                                value={currentSettings.userMessage.background}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('userMessage', 'background', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={currentSettings.userMessage.text}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('userMessage', 'text', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Typography')}</h4>
                        <TypographyControl
                            label={t('Message text styling')}
                            value={currentSettings.userMessage.typography as TypographySettings || {}}
                            globalValues={globalValues}
                            onChange={(typography) => handleTypographyChange('userMessage', typography)}
                            onSaveAsGlobalScale={onSaveAsGlobalTypographyScale}
                            disabled={disabled}
                        />
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Dimensions')}</h4>
                        <div className="space-y-3">
                            <BorderRadiusFieldEditor
                                label={t('Border Radius')}
                                value={currentSettings.userMessage.borderRadius}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('userMessage', 'borderRadius', v)}
                                disabled={disabled}
                                defaultGlobalRef="effects.borderRadiusMedium"
                            />
                            <PaddingFieldEditor
                                label={t('Padding')}
                                value={currentSettings.userMessage.padding}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('userMessage', 'padding', v)}
                                disabled={disabled}
                                fallback="8px 16px"
                            />
                            <LinkedFieldEditor
                                label={t('Max Width')}
                                value={currentSettings.userMessage.maxWidth}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('userMessage', 'maxWidth', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                placeholder="80%"
                                disabled={disabled}
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Timestamp')}</h4>
                        <div className="space-y-3">
                            <TypographyControl
                                label={t('Timestamp typography')}
                                value={(currentSettings.userMessage as { timestampTypography?: TypographySettings }).timestampTypography as TypographySettings || {}}
                                globalValues={globalValues}
                                onChange={(typography) => handleTypographyFieldChange('userMessage', 'timestampTypography' as never, typography)}
                                onSaveAsGlobalScale={onSaveAsGlobalTypographyScale}
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Timestamp opacity')}
                                value={(currentSettings.userMessage as { timestampOpacity?: FieldValue }).timestampOpacity || createCustomValue('0.6')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('userMessage', 'timestampOpacity' as never, v)}
                                fieldType="select"
                                allowGlobalLink={false}
                                selectOptions={[
                                    { value: '1', label: '100%' },
                                    { value: '0.8', label: '80%' },
                                    { value: '0.6', label: '60%' },
                                    { value: '0.4', label: '40%' },
                                    { value: '0.2', label: '20%' },
                                ]}
                                disabled={disabled}
                            />
                        </div>
                    </div>
                    <div className="bg-white border border-gray-200 rounded-lg p-4">
                        <h4 className="text-base font-semibold text-gray-800 mb-3">{t('User Avatar')}</h4>
                        <div className="space-y-3">
                            <label className="flex items-center gap-2 text-sm text-gray-700">
                                <input
                                    type="checkbox"
                                    checked={(currentSettings.userMessage as { showAvatar?: boolean }).showAvatar !== false}
                                    onChange={(e) => handleFieldChange('userMessage', 'showAvatar' as never, e.target.checked as never)}
                                    disabled={disabled}
                                />
                                {t('Show user avatar')}
                            </label>
                            <LinkedFieldEditor
                                label={t('Avatar Size')}
                                value={(currentSettings.userMessage as { avatarSize?: FieldValue }).avatarSize || createGlobalRef('sizes.lg')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('userMessage', 'avatarSize' as never, v)}
                                fieldType="size"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Avatar Background Color')}
                                value={(currentSettings.userMessage as { avatarBackground?: FieldValue }).avatarBackground || createGlobalRef('colors.border')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('userMessage', 'avatarBackground' as never, v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Avatar Icon Color')}
                                value={(currentSettings.userMessage as { avatarIconColor?: FieldValue }).avatarIconColor || createCustomValue('#4B5563')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('userMessage', 'avatarIconColor' as never, v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Avatar Icon Size')}
                                value={(currentSettings.userMessage as { avatarIconSize?: FieldValue }).avatarIconSize || createGlobalRef('sizes.sm')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('userMessage', 'avatarIconSize' as never, v)}
                                fieldType="size"
                                disabled={disabled}
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'botMessage',
            label: t('Bot Message'),
            icon: <Bot size={14} />,
            content: (
                <div className="space-y-6">
                    <div className="bg-white border border-gray-200 rounded-lg p-4">
                        <h4 className="text-base font-semibold text-gray-800 mb-3">{t('Avatar')}</h4>
                        <div className="space-y-3">
                            <label className="flex items-center gap-2 text-sm text-gray-700">
                                <input
                                    type="checkbox"
                                    checked={(currentSettings.botMessage as unknown as { showAvatar?: boolean }).showAvatar !== false}
                                    onChange={(e) => handleFieldChange('botMessage', 'showAvatar' as never, e.target.checked as never)}
                                    disabled={disabled}
                                />
                                {t('Show bot avatar')}
                            </label>

                            <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">{t('Avatar URL (optional)')}</label>
                                <input
                                    type="text"
                                    value={String((currentSettings.botMessage as unknown as { avatarUrl?: string }).avatarUrl || '')}
                                    onChange={(e) => handleFieldChange('botMessage', 'avatarUrl' as never, e.target.value as never)}
                                    disabled={disabled}
                                    placeholder="https://..."
                                    className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-1 focus:ring-primary-500 focus:border-primary-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
                                />
                            </div>
                            <LinkedFieldEditor
                                label={t('Avatar Size')}
                                value={(currentSettings.botMessage as unknown as { avatarSize?: FieldValue }).avatarSize || createGlobalRef('sizes.lg')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('botMessage', 'avatarSize' as never, v)}
                                fieldType="size"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Avatar Background Color')}
                                value={(currentSettings.botMessage as unknown as { avatarBackground?: FieldValue }).avatarBackground || createGlobalRef('colors.primarySoft')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('botMessage', 'avatarBackground' as never, v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Avatar Icon Color')}
                                value={(currentSettings.botMessage as unknown as { avatarIconColor?: FieldValue }).avatarIconColor || createGlobalRef('colors.primary')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('botMessage', 'avatarIconColor' as never, v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Avatar Icon Size')}
                                value={(currentSettings.botMessage as unknown as { avatarIconSize?: FieldValue }).avatarIconSize || createGlobalRef('sizes.sm')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('botMessage', 'avatarIconSize' as never, v)}
                                fieldType="size"
                                disabled={disabled}
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Colors')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Background Color')}
                                value={currentSettings.botMessage.background}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('botMessage', 'background', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={currentSettings.botMessage.text}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('botMessage', 'text', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Typography')}</h4>
                        <TypographyControl
                            label={t('Message text styling')}
                            value={currentSettings.botMessage.typography as TypographySettings || {}}
                            globalValues={globalValues}
                            onChange={(typography) => handleTypographyChange('botMessage', typography)}
                            onSaveAsGlobalScale={onSaveAsGlobalTypographyScale}
                            disabled={disabled}
                        />
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Dimensions')}</h4>
                        <div className="space-y-3">
                            <BorderRadiusFieldEditor
                                label={t('Border Radius')}
                                value={currentSettings.botMessage.borderRadius}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('botMessage', 'borderRadius', v)}
                                disabled={disabled}
                                defaultGlobalRef="effects.borderRadiusMedium"
                            />
                            <PaddingFieldEditor
                                label={t('Padding')}
                                value={currentSettings.botMessage.padding}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('botMessage', 'padding', v)}
                                disabled={disabled}
                                fallback="8px 16px"
                            />
                            <LinkedFieldEditor
                                label={t('Max Width')}
                                value={currentSettings.botMessage.maxWidth || createGlobalRef('sizes.messageMaxWidth')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('botMessage', 'maxWidth' as never, v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                placeholder="80%"
                                disabled={disabled}
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Border and Shadow')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Border Color')}
                                value={(currentSettings.botMessage as { borderColor?: FieldValue }).borderColor || createCustomValue('#E5E7EB')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('botMessage', 'borderColor' as never, v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Border Width')}
                                value={(currentSettings.botMessage as { borderWidth?: FieldValue }).borderWidth || createCustomValue('1px')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('botMessage', 'borderWidth' as never, v)}
                                fieldType="size"
                                placeholder="1px"
                                disabled={disabled}
                            />
                            <BoxShadowFieldEditor
                                label={t('Shadow')}
                                value={(currentSettings.botMessage as { shadow?: FieldValue }).shadow || createCustomValue('0 1px 2px rgba(0,0,0,0.05)')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('botMessage', 'shadow' as never, v)}
                                disabled={disabled}
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Timestamp')}</h4>
                        <div className="space-y-3">
                            <TypographyControl
                                label={t('Timestamp typography')}
                                value={(currentSettings.botMessage as { timestampTypography?: TypographySettings }).timestampTypography as TypographySettings || {}}
                                globalValues={globalValues}
                                onChange={(typography) => handleTypographyFieldChange('botMessage', 'timestampTypography' as never, typography)}
                                onSaveAsGlobalScale={onSaveAsGlobalTypographyScale}
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Timestamp opacity')}
                                value={(currentSettings.botMessage as { timestampOpacity?: FieldValue }).timestampOpacity || createCustomValue('0.6')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('botMessage', 'timestampOpacity' as never, v)}
                                fieldType="select"
                                allowGlobalLink={false}
                                selectOptions={[
                                    { value: '1', label: '100%' },
                                    { value: '0.8', label: '80%' },
                                    { value: '0.6', label: '60%' },
                                    { value: '0.4', label: '40%' },
                                    { value: '0.2', label: '20%' },
                                ]}
                                disabled={disabled}
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'input',
            label: t('Input Field'),
            icon: <Keyboard size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Input Field')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Background Color')}
                                value={currentSettings.inputArea.background}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('inputArea', 'background', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={currentSettings.inputArea.text}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('inputArea', 'text', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">{t('Placeholder text')}</label>
                                <input
                                    type="text"
                                    value={String((currentSettings.inputArea as unknown as { placeholder?: string }).placeholder || '')}
                                    onChange={(e) => handleFieldChange('inputArea', 'placeholder' as never, e.target.value as never)}
                                    disabled={disabled}
                                    placeholder={t('Type a message...')}
                                    className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-1 focus:ring-primary-500 focus:border-primary-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
                                />
                            </div>
                            <LinkedFieldEditor
                                label={t('Placeholder Color')}
                                value={(currentSettings.inputArea as unknown as { placeholderColor?: FieldValue }).placeholderColor || createGlobalRef('colors.textMuted')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('inputArea', 'placeholderColor' as never, v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <div className="pt-2 border-t border-gray-100">
                                <TypographyControl
                                    label={t('Typography')}
                                    value={(currentSettings.inputArea as unknown as { typography?: TypographySettings }).typography || {}}
                                    globalValues={globalValues}
                                    onChange={(typography) => handleTypographyChange('inputArea', typography)}
                                    onSaveAsGlobalScale={onSaveAsGlobalTypographyScale}
                                    disabled={disabled}
                                />
                            </div>
                            <LinkedFieldEditor
                                label={t('Border Color')}
                                value={currentSettings.inputArea.border}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('inputArea', 'border', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Border Width')}
                                value={(currentSettings.inputArea as unknown as { borderWidth?: FieldValue }).borderWidth || createGlobalRef('sizes.borderThin')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('inputArea', 'borderWidth' as never, v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                placeholder="1px"
                                disabled={disabled}
                            />
                            <BorderRadiusFieldEditor
                                label={t('Border Radius')}
                                value={currentSettings.inputArea.borderRadius}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('inputArea', 'borderRadius', v)}
                                disabled={disabled}
                                defaultGlobalRef="effects.borderRadiusMedium"
                            />
                            <PaddingFieldEditor
                                label={t('Inner Padding')}
                                value={currentSettings.inputArea.padding}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('inputArea', 'padding', v)}
                                disabled={disabled}
                                fallback="12px 16px"
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Character Counter')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Counter text color')}
                                value={(currentSettings.inputArea as { counterTextColor?: FieldValue }).counterTextColor || createGlobalRef('colors.textSubtle')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('inputArea', 'counterTextColor' as never, v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <TypographyControl
                                label={t('Counter typography')}
                                value={(currentSettings.inputArea as { counterTextTypography?: TypographySettings }).counterTextTypography || {}}
                                globalValues={globalValues}
                                onChange={(typography) => handleTypographyFieldChange('inputArea', 'counterTextTypography' as never, typography)}
                                onSaveAsGlobalScale={onSaveAsGlobalTypographyScale}
                                disabled={disabled}
                            />
                        </div>
                    </div>
                    {/* Send Button Styling */}
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Send Button')}</h4>
                        <ButtonStyleEditor
                            value={(() => {
                                const legacyIcon = resolveFieldValue(currentSettings.inputArea.sendButtonIcon, globalValues) || 'send';
                                const base = (currentSettings.inputArea.sendButton || createDefaultButtonStyle('primary', true)) as any;
                                const next = {
                                    ...base,
                                    icon: {
                                        ...(base.icon || {
                                            position: 'only',
                                            size: '20px',
                                            color: createGlobalRef('colors.textLight'),
                                            spacing: '0px',
                                        }),
                                        icon: legacyIcon,
                                        position: 'only',
                                    },
                                };
                                return next;
                            })()}
                            onChange={(v) => {
                                const legacyIcon = resolveFieldValue(currentSettings.inputArea.sendButtonIcon, globalValues) || 'send';
                                const nextStyle = {
                                    ...(v as any),
                                    icon: {
                                        ...((v as any).icon || {}),
                                        position: 'only',
                                    },
                                } as any;
                                const iconName = (nextStyle?.icon?.icon || legacyIcon) as string;

                                onChange({
                                    ...currentSettings,
                                    inputArea: {
                                        ...currentSettings.inputArea,
                                        sendButton: nextStyle as ButtonStyleSettings,
                                        sendButtonIcon: createCustomValue(iconName),
                                    },
                                });
                            }}
                            globalValues={globalValues}
                            label=""
                            disabled={disabled}
                            showIcon={true}
                            showIconPicker={true}
                            showTypography={false}
                            hideIconPosition={true}
                        />
                    </div>
                </div>
            ),
        },
    ];

    return (
        <WidgetSectionBase
            title={t('General Chat View')}
            description={t('Design settings for the main chat window - header, messages, input field and buttons')}
            icon={<MessageSquare size={24} />}
            tabs={tabs}
            disableSettingsPointerEvents={disableSettingsPointerEvents}
            onLockedHoverActionClick={onLockedHoverActionClick}
            preview={
                <ChatSimulator
                    globalValues={globalValues}
                    elementSettings={currentSettings}
                    scale={1}
                    isRTL={isRTL}
                    presetLanguage={presetLanguage}
                />
            }
            defaultCollapsed={false}
        />
    );
};

export default GeneralChatViewSection;
