/**
 * Lead Form Widget Section
 * 
 * Settings for lead capture forms displayed in chat.
 * 
 * @since 1.5.0
 */

import React from 'react';
import { FileText, Palette, Type, FormInput, Send, CheckCircle, AlignLeft, ChevronDown, Calendar, Hash, CheckSquare, ToggleLeft, Disc } from 'lucide-react';
import { WidgetSectionBase, WidgetSectionTab } from './WidgetSectionBase';
import { LinkedFieldEditor } from '../LinkedFieldEditor';
import { TypographyControl, TypographySettings } from '../TypographyControl';
import { LeadFormPreview } from '../PreviewElements';
import { ButtonStyleEditor, ButtonStyleValue } from '../../common/ButtonStyleEditor';
import { BorderRadiusFieldEditor } from '../../common/BorderRadiusFieldEditor';
import { PaddingFieldEditor } from '../../common/PaddingFieldEditor';
import { SelectField } from '../../common/SelectField';
import { 
    LeadFormWidgetSettings, 
    PresetGlobalValues, 
    DEFAULT_WIDGET_SETTINGS,
    FieldValue,
    ElementTypography,
    ButtonStyleSettings,
    createDefaultButtonStyle,
    createGlobalRef,
} from '../../../types/appearance';
import { BoxShadowFieldEditor } from '../../common/BoxShadowFieldEditor';
import { deepMerge } from '../../../utils/appearanceMerge';
import { t } from '@/lib/i18n';
import { useLanguage } from '@/contexts/LanguageContext';

interface LeadFormSectionProps {
    settings: LeadFormWidgetSettings | null;
    globalValues: PresetGlobalValues;
    onChange: (settings: LeadFormWidgetSettings) => 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;
}

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

    const currentSettings: LeadFormWidgetSettings = React.useMemo(
        () => deepMerge(DEFAULT_WIDGET_SETTINGS.leadForm, settings),
        [settings]
    );

    const handleFieldChange = <K extends keyof LeadFormWidgetSettings>(
        sectionKey: K,
        fieldKey: keyof LeadFormWidgetSettings[K],
        value: FieldValue | string
    ) => {
        const updates: Partial<LeadFormWidgetSettings> = {};

        if (sectionKey === 'field') {
            const nextFieldValue = value as FieldValue;

            const syncAlways = (
                targetSection: 'textarea' | 'select' | 'date' | 'number',
                targetKey: string
            ) => {
                updates[targetSection] = {
                    ...(currentSettings as any)[targetSection],
                    [targetKey]: nextFieldValue,
                };
            };

            if (fieldKey === 'inputBackground') {
                syncAlways('textarea', 'background');
                syncAlways('select', 'background');
                syncAlways('date', 'background');
                syncAlways('number', 'background');
            }

            if (fieldKey === 'inputBorder') {
                syncAlways('textarea', 'border');
                syncAlways('select', 'border');
                syncAlways('date', 'border');
                syncAlways('number', 'border');
            }

            if (fieldKey === 'inputFocusBorder') {
                syncAlways('textarea', 'focusBorder');
                syncAlways('select', 'focusBorder');
                syncAlways('date', 'focusBorder');
                syncAlways('number', 'focusBorder');
            }

            if (fieldKey === 'inputColor') {
                syncAlways('textarea', 'color');
                syncAlways('select', 'color');
                syncAlways('date', 'color');
                syncAlways('number', 'color');
            }

            if (fieldKey === 'inputBorderRadius') {
                syncAlways('textarea', 'borderRadius');
                syncAlways('select', 'borderRadius');
                syncAlways('date', 'borderRadius');
                syncAlways('number', 'borderRadius');
            }

            if (fieldKey === 'inputPadding') {
                syncAlways('textarea', 'padding');
                syncAlways('select', 'padding');
                syncAlways('date', 'padding');
                syncAlways('number', 'padding');
            }

            if (fieldKey === 'placeholderColor') {
                syncAlways('textarea', 'placeholderColor');
            }
        }

        onChange({
            ...currentSettings,
            [sectionKey]: {
                ...currentSettings[sectionKey],
                [fieldKey]: value,
            },
            ...updates,
        });
    };

    // Handler for typography changes
    const handleTypographyChange = (
        sectionKey: 'title' | 'field' | 'submit' | 'success' | 'checkbox' | 'textarea' | 'select' | 'collapseToggle' | 'chips',
        typography: TypographySettings
    ) => {
        onChange({
            ...currentSettings,
            [sectionKey]: {
                ...currentSettings[sectionKey],
                typography: typography as ElementTypography,
            },
        });
    };

    // Handler for typography changes in nested sections with custom field key
    const handleTypographyFieldChange = (
        sectionKey: 'error' | 'checkbox',
        fieldKey: 'typography' | 'labelTypography',
        typography: TypographySettings
    ) => {
        onChange({
            ...currentSettings,
            [sectionKey]: {
                ...currentSettings[sectionKey],
                [fieldKey]: typography as ElementTypography,
            },
        });
    };

    // Handler for submit button style changes (full ButtonStyleSettings)
    const handleButtonStyleChange = (buttonStyle: ButtonStyleValue) => {
        onChange({
            ...currentSettings,
            submit: {
                ...currentSettings.submit,
                buttonStyle: buttonStyle as ButtonStyleSettings,
            },
        });
    };

    const tabs: WidgetSectionTab[] = [
        {
            id: 'container',
            label: t('Container'),
            icon: <Palette size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('General Styling')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Background Color')}
                                value={currentSettings.container.background}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('container', 'background', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <BorderRadiusFieldEditor
                                label={t('Border Radius')}
                                value={currentSettings.container.borderRadius}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('container', 'borderRadius', v)}
                                disabled={disabled}
                                defaultGlobalRef="effects.borderRadiusMedium"
                            />
                            <LinkedFieldEditor
                                label={t('Border Color')}
                                value={currentSettings.container.borderColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('container', 'borderColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Border Width')}
                                value={currentSettings.container.borderWidth}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('container', 'borderWidth', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="0px"
                            />
                            <PaddingFieldEditor
                                label={t('Padding')}
                                value={currentSettings.container.padding}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('container', 'padding', v)}
                                disabled={disabled}
                                fallback="12px"
                            />
                            <BoxShadowFieldEditor
                                label={t('Shadow')}
                                value={currentSettings.container.shadow}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('container', 'shadow', v)}
                                disabled={disabled}
                                defaultGlobalRef="effects.shadowSmall"
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'title',
            label: t('Title'),
            icon: <Type size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Form Title')}</h4>
                        {/* UI order (expected): typography → textColor → textAlign → marginBottom */}
                        <div className="space-y-3">
                            <TypographyControl
                                label={t('Typography')}
                                value={(currentSettings.title as any)?.typography as TypographySettings || {}}
                                globalValues={globalValues}
                                onChange={(typography) => handleTypographyChange('title', typography)}
                                disabled={disabled}
                                context="header"
                                hideTextAlign={true}
                            />

                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={(currentSettings.title as any)?.textColor || currentSettings.title.color}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('title', 'textColor' as any, v)}
                                fieldType="color"
                                disabled={disabled}
                            />

                            <SelectField
                                label={t('Text Alignment')}
                                value={(currentSettings.title as any)?.textAlign || 'center'}
                                onChange={(v) => handleFieldChange('title', 'textAlign' as any, v)}
                                disabled={disabled}
                                options={[
                                    { value: 'start', label: t('Start (RTL/LTR)') },
                                    { value: 'center', label: t('Center') },
                                    { value: 'end', label: t('End (RTL/LTR)') },
                                    { value: 'justify', label: t('Justify') },
                                ]}
                                description={t('Recommended: start/end (RTL/LTR compatible).')}
                            />

                            <LinkedFieldEditor
                                label={t('Bottom Margin')}
                                value={(currentSettings.title as any)?.marginBottom || { type: 'global', ref: 'spacing.containerRelaxed' }}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('title', 'marginBottom' as any, v)}
                                fieldType="size"
                                placeholder="16px"
                                disabled={disabled}
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'fields',
            label: t('Fields'),
            icon: <FormInput size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Layout')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Gap Between Fields')}
                                value={(currentSettings.field as any)?.gap || { type: 'global', ref: 'spacing.containerRelaxed' }}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('field', 'gap' as any, v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="16px"
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Labels')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Label Color')}
                                value={currentSettings.field.labelColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('field', 'labelColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                        <div className="mt-3">
                            <TypographyControl
                                label={t('Fields Text Styling')}
                                value={(currentSettings.field as any)?.typography as TypographySettings || {}}
                                globalValues={globalValues}
                                onChange={(typography) => handleTypographyChange('field', typography)}
                                disabled={disabled}
                            />
                        </div>
                    </div>
                    <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.field.inputBackground}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('field', 'inputBackground', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Border Color')}
                                value={currentSettings.field.inputBorder}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('field', 'inputBorder', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Focus Border')}
                                value={currentSettings.field.inputFocusBorder}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('field', 'inputFocusBorder', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={currentSettings.field.inputColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('field', 'inputColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Placeholder Color')}
                                value={(currentSettings.field as any)?.placeholderColor || { type: 'global', ref: 'colors.textSubtle' }}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('field', 'placeholderColor' as any, v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <BorderRadiusFieldEditor
                                label={t('Border Radius')}
                                value={currentSettings.field.inputBorderRadius}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('field', 'inputBorderRadius', v)}
                                disabled={disabled}
                                defaultGlobalRef="effects.borderRadiusSmall"
                            />
                            <LinkedFieldEditor
                                label={t('Padding')}
                                value={currentSettings.field.inputPadding}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('field', 'inputPadding', v)}
                                fieldType="text"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="12px"
                            />
                            <LinkedFieldEditor
                                label={t('Icon Color')}
                                value={currentSettings.field.iconColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('field', 'iconColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Errors')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={currentSettings.error.color}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('error', 'color', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Border Color')}
                                value={currentSettings.error.borderColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('error', 'borderColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                        <div className="mt-3">
                            <TypographyControl
                                label={t('Errors Typography')}
                                value={currentSettings.error.typography as TypographySettings || {}}
                                globalValues={globalValues}
                                onChange={(typography) => handleTypographyFieldChange('error', 'typography', typography)}
                                disabled={disabled}
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'textarea',
            label: t('Textarea'),
            icon: <AlignLeft size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Textarea Field')}</h4>
                        <p className="text-xs text-gray-500 mb-3">{t('Colors/borders/padding controlled by the "Fields" tab.')}</p>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Minimum Height')}
                                value={currentSettings.textarea?.minHeight || createGlobalRef('sizes.textareaMin')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('textarea', 'minHeight', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                placeholder="80px"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Maximum Height')}
                                value={currentSettings.textarea?.maxHeight || createGlobalRef('sizes.textareaMax')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('textarea', 'maxHeight', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                placeholder="200px"
                                disabled={disabled}
                            />
                            <TypographyControl
                                label={t('Typography')}
                                value={(currentSettings.textarea as any)?.typography as TypographySettings || {}}
                                globalValues={globalValues}
                                onChange={(typography) => handleTypographyChange('textarea', typography)}
                                disabled={disabled}
                                context="body"
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'select',
            label: t('Select'),
            icon: <ChevronDown size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Select/Dropdown Field')}</h4>
                        <p className="text-xs text-gray-500 mb-3">{t('Colors/borders/padding controlled by the "Fields" tab.')}</p>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Option Background')}
                                value={currentSettings.select?.optionBackground || { type: 'global', ref: 'colors.background' }}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('select', 'optionBackground', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Option Hover Background')}
                                value={currentSettings.select?.optionHoverBackground || { type: 'global', ref: 'colors.surface' }}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('select', 'optionHoverBackground', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Option Text Color')}
                                value={currentSettings.select?.optionColor || { type: 'global', ref: 'colors.text' }}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('select', 'optionColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Arrow Color')}
                                value={currentSettings.select?.arrowColor || { type: 'global', ref: 'colors.textMuted' }}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('select', 'arrowColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <TypographyControl
                                label={t('Typography')}
                                value={(currentSettings.select as any)?.typography as TypographySettings || {}}
                                globalValues={globalValues}
                                onChange={(typography) => handleTypographyChange('select', typography)}
                                disabled={disabled}
                                context="body"
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'date',
            label: t('Date'),
            icon: <Calendar size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Date Field (Date Picker)')}</h4>
                        <p className="text-xs text-gray-500 mb-3">{t('Colors/borders controlled by the "Fields" tab.')}</p>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Icon Color')}
                                value={currentSettings.date?.iconColor || { type: 'global', ref: 'colors.textMuted' }}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('date', 'iconColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Calendar Background')}
                                value={currentSettings.date?.calendarBackground || { type: 'global', ref: 'colors.background' }}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('date', 'calendarBackground', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Selected Date Background')}
                                value={currentSettings.date?.calendarSelectedBackground || { type: 'global', ref: 'colors.primary' }}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('date', 'calendarSelectedBackground', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Selected Date Color')}
                                value={currentSettings.date?.calendarSelectedColor || createGlobalRef('colors.textLight')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('date', 'calendarSelectedColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'number',
            label: t('Number'),
            icon: <Hash size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Number Field')}</h4>
                        <p className="text-xs text-gray-500 mb-3">{t('Colors/borders controlled by the "Fields" tab.')}</p>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Arrows Color')}
                                value={currentSettings.number?.spinnerColor || { type: 'global', ref: 'colors.textMuted' }}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('number', 'spinnerColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'checkbox',
            label: t('Checkbox'),
            icon: <CheckSquare size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Checkbox')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Size')}
                                value={currentSettings.checkbox?.size || { type: 'custom', value: '20px' }}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('checkbox', 'size', v)}
                                fieldType="size"
                                placeholder="20px"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Background Color')}
                                value={currentSettings.checkbox?.background || { type: 'global', ref: 'colors.background' }}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('checkbox', 'background', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Border Color')}
                                value={currentSettings.checkbox?.border || { type: 'global', ref: 'colors.border' }}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('checkbox', 'border', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Checked Background')}
                                value={currentSettings.checkbox?.checkedBackground || { type: 'global', ref: 'colors.primary' }}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('checkbox', 'checkedBackground', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Checked Border')}
                                value={currentSettings.checkbox?.checkedBorder || { type: 'global', ref: 'colors.primary' }}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('checkbox', 'checkedBorder', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Checkmark Color')}
                                value={currentSettings.checkbox?.checkmarkColor || { type: 'custom', value: '#FFFFFF' }}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('checkbox', 'checkmarkColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <BorderRadiusFieldEditor
                                label={t('Border Radius')}
                                value={currentSettings.checkbox?.borderRadius || { type: 'global', ref: 'effects.borderRadiusSmall' }}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('checkbox', 'borderRadius', v)}
                                disabled={disabled}
                                defaultGlobalRef="effects.borderRadiusSmall"
                            />
                            <LinkedFieldEditor
                                label={t('Label Color')}
                                value={currentSettings.checkbox?.labelColor || { type: 'global', ref: 'colors.text' }}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('checkbox', 'labelColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                        <div className="mt-3">
                            <TypographyControl
                                label={t('Label Typography')}
                                value={currentSettings.checkbox?.labelTypography as TypographySettings || {}}
                                globalValues={globalValues}
                                onChange={(typography) => handleTypographyFieldChange('checkbox', 'labelTypography', typography)}
                                disabled={disabled}
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'submit',
            label: t('Submit'),
            icon: <Send size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Submit Button')}</h4>
                        <div className="space-y-3 mb-3">
                            <LinkedFieldEditor
                                label={t('Gap Above Button')}
                                value={currentSettings.submit?.marginTop || { type: 'custom', value: '12px' }}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('submit', 'marginTop' as any, v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="12px"
                            />
                        </div>
                        <ButtonStyleEditor
                            value={(currentSettings.submit.buttonStyle as ButtonStyleValue) || createDefaultButtonStyle('primary')}
                            onChange={handleButtonStyleChange}
                            globalValues={globalValues}
                            label=""
                            disabled={disabled}
                            showIcon={true}
                            showIconPicker={true}
                            showTypography={true}
                        />
                    </div>
                </div>
            ),
        },
        {
            id: 'success',
            label: t('Success'),
            icon: <CheckCircle size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Success Screen')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Icon Color')}
                                value={currentSettings.success.iconColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('success', 'iconColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Title Color')}
                                value={currentSettings.success.titleColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('success', 'titleColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Message Color')}
                                value={currentSettings.success.messageColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('success', 'messageColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                        <div className="mt-3">
                            <TypographyControl
                                label={t('Success Text Styling')}
                                value={(currentSettings.success as any)?.typography as TypographySettings || {}}
                                globalValues={globalValues}
                                onChange={(typography) => handleTypographyChange('success', typography)}
                                disabled={disabled}
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'collapseToggle',
            label: t('Collapse Toggle'),
            icon: <ToggleLeft size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Expand/Collapse Button')}</h4>
                        <p className="text-xs text-gray-500 mb-3">{t('Button that allows the user to collapse or expand the form.')}</p>
                        <div className="space-y-3">
                            <SelectField
                                label={t('Enable Collapse Toggle')}
                                value={
                                    currentSettings.collapseToggle?.enabled?.type === 'custom' 
                                        ? currentSettings.collapseToggle.enabled.value 
                                        : 'false'
                                }
                                onChange={(v) => handleFieldChange('collapseToggle', 'enabled', { type: 'custom', value: v })}
                                disabled={disabled}
                                options={[
                                    { value: 'true', label: t('Yes - Enable') },
                                    { value: 'false', label: t('No - Disabled') },
                                ]}
                                description={t('When enabled, a collapse/expand button will appear on the form.')}
                            />
                            <LinkedFieldEditor
                                label={t('Background Color')}
                                value={currentSettings.collapseToggle?.background || createGlobalRef('colors.surfaceSecondary')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('collapseToggle', 'background', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Hover Background')}
                                value={currentSettings.collapseToggle?.hoverBackground || createGlobalRef('colors.surfaceHover')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('collapseToggle', 'hoverBackground', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Icon Color')}
                                value={currentSettings.collapseToggle?.iconColor || createGlobalRef('colors.text')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('collapseToggle', 'iconColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={currentSettings.collapseToggle?.textColor || createGlobalRef('colors.text')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('collapseToggle', 'textColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <BorderRadiusFieldEditor
                                label={t('Border Radius')}
                                value={currentSettings.collapseToggle?.borderRadius || createGlobalRef('effects.borderRadiusSmall')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('collapseToggle', 'borderRadius', v)}
                                disabled={disabled}
                                defaultGlobalRef="effects.borderRadiusSmall"
                            />
                            <PaddingFieldEditor
                                label={t('Padding')}
                                value={currentSettings.collapseToggle?.padding || { type: 'custom', value: '8px 12px' }}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('collapseToggle', 'padding', v)}
                                disabled={disabled}
                                fallback="8px 12px"
                            />
                            <LinkedFieldEditor
                                label={t('Bottom Margin (before chips/form)')}
                                value={currentSettings.collapseToggle?.marginBottom || createGlobalRef('spacing.sm')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('collapseToggle', 'marginBottom', v)}
                                fieldType="text"
                                disabled={disabled}
                            />
                            <TypographyControl
                                label={t('Typography')}
                                value={(currentSettings.collapseToggle as any)?.typography as TypographySettings || {}}
                                globalValues={globalValues}
                                onChange={(typography) => handleTypographyChange('collapseToggle', typography)}
                                disabled={disabled}
                                context="body"
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Texts')}</h4>
                        <div className="space-y-3">
                            <div>
                                <label className="block text-sm font-medium text-gray-600 mb-1">{t('Text When Form is Expanded')}</label>
                                <input
                                    type="text"
                                    value={currentSettings.collapseToggle?.expandedText || t('Collapse Form')}
                                    onChange={(e) => handleFieldChange('collapseToggle', 'expandedText', e.target.value)}
                                    disabled={disabled}
                                    className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm disabled:bg-gray-100"
                                    placeholder={t('Collapse Form')}
                                />
                            </div>
                            <div>
                                <label className="block text-sm font-medium text-gray-600 mb-1">{t('Text When Form is Collapsed')}</label>
                                <input
                                    type="text"
                                    value={currentSettings.collapseToggle?.collapsedText || t('Expand Form')}
                                    onChange={(e) => handleFieldChange('collapseToggle', 'collapsedText', e.target.value)}
                                    disabled={disabled}
                                    className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm disabled:bg-gray-100"
                                    placeholder={t('Expand Form')}
                                />
                            </div>
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'chips',
            label: t('Chips'),
            icon: <Disc size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Chips (Field Buttons)')}</h4>
                        <p className="text-xs text-gray-500 mb-3">{t('In collapsed mode, each field is represented as a clickable "chip".')}</p>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Default Background')}
                                value={currentSettings.chips?.background || createGlobalRef('colors.surfaceSecondary')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('chips', 'background', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Active Background')}
                                value={currentSettings.chips?.activeBackground || createGlobalRef('colors.primary')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('chips', 'activeBackground', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Filled Background')}
                                value={currentSettings.chips?.filledBackground || { type: 'custom', value: '#ECFDF5' }}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('chips', 'filledBackground', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Default Text Color')}
                                value={currentSettings.chips?.textColor || createGlobalRef('colors.textSecondary')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('chips', 'textColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Active Text Color')}
                                value={currentSettings.chips?.activeTextColor || createGlobalRef('colors.textLight')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('chips', 'activeTextColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Filled Text Color')}
                                value={currentSettings.chips?.filledTextColor || { type: 'custom', value: '#059669' }}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('chips', 'filledTextColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Borders')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Default Border Color')}
                                value={currentSettings.chips?.borderColor || createGlobalRef('colors.border')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('chips', 'borderColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Active Border Color')}
                                value={currentSettings.chips?.activeBorderColor || createGlobalRef('colors.primary')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('chips', 'activeBorderColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Filled Border Color')}
                                value={currentSettings.chips?.filledBorderColor || { type: 'custom', value: '#A7F3D0' }}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('chips', 'filledBorderColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <BorderRadiusFieldEditor
                                label={t('Border Radius')}
                                value={currentSettings.chips?.borderRadius || { type: 'custom', value: '9999px' }}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('chips', 'borderRadius', v)}
                                disabled={disabled}
                                defaultGlobalRef="effects.borderRadiusFull"
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Spacing')}</h4>
                        <div className="space-y-3">
                            <PaddingFieldEditor
                                label={t('Chip Padding')}
                                value={currentSettings.chips?.padding || { type: 'custom', value: '8px 16px' }}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('chips', 'padding', v)}
                                disabled={disabled}
                                fallback="8px 16px"
                            />
                            <LinkedFieldEditor
                                label={t('Gap Between Chips')}
                                value={currentSettings.chips?.gap || createGlobalRef('spacing.sm')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('chips', 'gap', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="8px"
                            />
                        </div>
                    </div>
                    <div>
                        <TypographyControl
                            label={t('Typography')}
                            value={(currentSettings.chips as any)?.typography as TypographySettings || {}}
                            globalValues={globalValues}
                            onChange={(typography) => handleTypographyChange('chips', typography)}
                            disabled={disabled}
                            context="body"
                        />
                    </div>
                </div>
            ),
        },
    ];

    return (
        <WidgetSectionBase
            title={`📝 ${t('Lead Form')}`}
            description={t('Lead capture form styling')}
            icon={<FileText size={24} />}
            tabs={tabs}
            disableSettingsPointerEvents={disableSettingsPointerEvents}
            onLockedHoverActionClick={onLockedHoverActionClick}
            preview={
                <LeadFormPreview 
                    globalValues={globalValues} 
                    widgetSettings={currentSettings}
                    isRTL={isRTL}
                    language={currentLanguage}
                />
            }
            defaultCollapsed={true}
        />
    );
};

export default LeadFormSection;
