/**
 * Calendar Widget Section
 * 
 * Settings for the calendar/scheduling widget that appears in chat.
 * 
 * @since 1.5.0
 */

import React from 'react';
import { Calendar, Palette, Grid3X3, Clock, Check, ListOrdered, Tag } from 'lucide-react';
import { WidgetSectionBase, WidgetSectionTab } from './WidgetSectionBase';
import { LinkedFieldEditor } from '../LinkedFieldEditor';
import { TypographyControl, TypographySettings } from '../TypographyControl';
import { CalendarPreview } from '../PreviewElements';
import { 
    CalendarWidgetSettings, 
    PresetGlobalValues, 
    DEFAULT_WIDGET_SETTINGS,
    FieldValue,
    ElementTypography,
    HeaderAvatarIconName,
    createGlobalRef,
    createCustomValue,
    createDefaultButtonStyle,
} from '../../../types/appearance';
import { BorderRadiusFieldEditor } from '../../common/BorderRadiusFieldEditor';
import { PaddingFieldEditor } from '../../common/PaddingFieldEditor';
import { BoxShadowFieldEditor } from '../../common/BoxShadowFieldEditor';
import { deepMerge } from '../../../utils/appearanceMerge';
import { LucideIconPicker } from '../../common/LucideIconPicker';
import { ButtonStyleEditor, type ButtonStyleValue } from '../../common/ButtonStyleEditor';
import { ColumnCountSelect } from '../../common/ColumnCountSelect';
import { t } from '@/lib/i18n';
import { useLanguage } from '@/contexts/LanguageContext';

interface CalendarWidgetSectionProps {
    settings: CalendarWidgetSettings | null;
    globalValues: PresetGlobalValues;
    onChange: (settings: CalendarWidgetSettings) => 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 CalendarWidgetSection: React.FC<CalendarWidgetSectionProps> = ({
    settings,
    globalValues,
    onChange,
    disabled = false,
    disableSettingsPointerEvents = false,
    onLockedHoverActionClick,
}) => {
    const { currentLanguage } = useLanguage();
    const isRTL = currentLanguage === 'he';
    const currentSettings = React.useMemo(
        () => deepMerge(DEFAULT_WIDGET_SETTINGS.calendar, settings),
        [settings]
    );

    // Generic handler for updating nested settings
    const handleFieldChange = <K extends keyof CalendarWidgetSettings>(
        sectionKey: K,
        fieldKey: keyof CalendarWidgetSettings[K],
        value: FieldValue | string
    ) => {
        onChange({
            ...currentSettings,
            [sectionKey]: {
                ...currentSettings[sectionKey],
                [fieldKey]: value,
            },
        });
    };

    // Handler for typography changes
    const handleTypographyChange = (
        sectionKey: 'navigation' | 'grid' | 'timeSlots' | 'confirmation',
        typography: TypographySettings
    ) => {
        onChange({
            ...currentSettings,
            [sectionKey]: {
                ...currentSettings[sectionKey],
                typography: typography as ElementTypography,
            },
        });
    };

    // Confirmation has an extra typography field for the "Confirmation sent to:" label
    const handleConfirmationSentToLabelTypographyChange = (typography: TypographySettings) => {
        onChange({
            ...currentSettings,
            confirmation: {
                ...currentSettings.confirmation,
                sentToLabelTypography: typography as ElementTypography,
            },
        });
    };

    const handleFormFieldChange = (fieldKey: string, value: FieldValue) => {
        onChange({
            ...currentSettings,
            form: {
                ...((currentSettings as any).form || {}),
                [fieldKey]: value,
            },
        } as any);
    };

    const handleFormTypographyChange = (fieldKey: 'labelTypography' | 'inputTypography' | 'errorTypography', typography: TypographySettings) => {
        onChange({
            ...currentSettings,
            form: {
                ...((currentSettings as any).form || {}),
                [fieldKey]: typography as ElementTypography,
            },
        } as any);
    };

    // Legacy per-step stepHeaders handlers removed from UI (kept in types for backward compatibility)

    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}
                            />
                            <PaddingFieldEditor
                                label={t('Padding')}
                                value={currentSettings.container.padding}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('container', 'padding', v)}
                                disabled={disabled}
                                fallback="16px"
                            />
                            <BorderRadiusFieldEditor
                                label={t('Border Radius')}
                                value={currentSettings.container.borderRadius}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('container', 'borderRadius', v)}
                                disabled={disabled}
                                defaultGlobalRef="effects.borderRadiusMedium"
                            />
                            <BoxShadowFieldEditor
                                label={t('Shadow')}
                                value={currentSettings.container.shadow}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('container', 'shadow', v)}
                                disabled={disabled}
                                defaultGlobalRef="effects.shadowMedium"
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'stepHeaders',
            label: t('Step Headers'),
            icon: <ListOrdered size={14} />,
            content: (
                <div className="space-y-6">
                    {/* Shared step header style (preferred). Legacy per-step settings are kept for backward compatibility only. */}
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Shared Style for All Step Headers')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Background Color')}
                                value={(currentSettings as any).stepHeader?.background || createGlobalRef('colors.primary')}
                                globalValues={globalValues}
                                onChange={(v) => onChange({ ...currentSettings, stepHeader: { ...(currentSettings as any).stepHeader, background: v } } as any)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={(currentSettings as any).stepHeader?.textColor || createGlobalRef('colors.textLight')}
                                globalValues={globalValues}
                                onChange={(v) => onChange({ ...currentSettings, stepHeader: { ...(currentSettings as any).stepHeader, textColor: v } } as any)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Background Color (Inactive)')}
                                value={(currentSettings as any).stepHeader?.inactiveBackground || createGlobalRef('colors.surface')}
                                globalValues={globalValues}
                                onChange={(v) => onChange({ ...currentSettings, stepHeader: { ...(currentSettings as any).stepHeader, inactiveBackground: v } } as any)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Text Color (Inactive)')}
                                value={(currentSettings as any).stepHeader?.inactiveTextColor || createGlobalRef('colors.textMuted')}
                                globalValues={globalValues}
                                onChange={(v) => onChange({ ...currentSettings, stepHeader: { ...(currentSettings as any).stepHeader, inactiveTextColor: v } } as any)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <PaddingFieldEditor
                                label={t('Padding')}
                                value={(currentSettings as any).stepHeader?.padding || { type: 'custom', value: '6px 10px' }}
                                globalValues={globalValues}
                                onChange={(v) => onChange({ ...currentSettings, stepHeader: { ...(currentSettings as any).stepHeader, padding: v } } as any)}
                                disabled={disabled}
                                fallback="6px 10px"
                            />
                            <BorderRadiusFieldEditor
                                label={t('Border Radius (Header)')}
                                value={(currentSettings as any).stepHeader?.borderRadius || { type: 'custom', value: '8px 8px 0 0' }}
                                globalValues={globalValues}
                                onChange={(v) =>
                                    onChange({ ...currentSettings, stepHeader: { ...(currentSettings as any).stepHeader, borderRadius: v } } as any)
                                }
                                disabled={disabled}
                                defaultGlobalRef="effects.borderRadiusMedium"
                            />
                            <TypographyControl
                                label={t('Text Styling (Step Header)')}
                                value={(((currentSettings as any).stepHeader?.typography as TypographySettings) || {})}
                                globalValues={globalValues}
                                onChange={(typography) =>
                                    onChange({
                                        ...currentSettings,
                                        stepHeader: { ...(currentSettings as any).stepHeader, typography: typography as ElementTypography },
                                    } as any)
                                }
                                disabled={disabled}
                            />
                        </div>
                    </div>

                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Header Icon Styling')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Icon Color')}
                                value={(currentSettings as any).stepHeader?.icon?.color || createGlobalRef('colors.textLight')}
                                globalValues={globalValues}
                                onChange={(v) =>
                                    onChange({
                                        ...currentSettings,
                                        stepHeader: {
                                            ...(currentSettings as any).stepHeader,
                                            icon: { ...(currentSettings as any).stepHeader?.icon, color: v },
                                        },
                                    } as any)
                                }
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Icon Size')}
                                value={(currentSettings as any).stepHeader?.icon?.size || createGlobalRef('sizes.iconXSmall')}
                                globalValues={globalValues}
                                onChange={(v) =>
                                    onChange({
                                        ...currentSettings,
                                        stepHeader: {
                                            ...(currentSettings as any).stepHeader,
                                            icon: { ...(currentSettings as any).stepHeader?.icon, size: v },
                                        },
                                    } as any)
                                }
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Gap Between Icon and Text')}
                                value={(currentSettings as any).stepHeader?.icon?.gap || createGlobalRef('spacing.xsPlus')}
                                globalValues={globalValues}
                                onChange={(v) =>
                                    onChange({
                                        ...currentSettings,
                                        stepHeader: {
                                            ...(currentSettings as any).stepHeader,
                                            icon: { ...(currentSettings as any).stepHeader?.icon, gap: v },
                                        },
                                    } as any)
                                }
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                            />
                        </div>
                    </div>

                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Icon Selection for Each Step')}</h4>
                        <div className="grid grid-cols-2 gap-4">
                            {([
                                { key: 'date', label: t('Date'), fallback: 'calendar' },
                                { key: 'time', label: t('Time'), fallback: 'clock' },
                                { key: 'form', label: t('Details'), fallback: 'file-text' },
                                { key: 'confirmation', label: t('Confirmation'), fallback: 'check' },
                            ] as const).map(({ key, label, fallback }) => {
                                const current = (((currentSettings as any).stepHeaderIcons?.[key] || fallback) as HeaderAvatarIconName);
                                return (
                                    <div key={key} className="space-y-2">
                                        <label className="block text-sm font-medium text-gray-700">{label}</label>
                                        <LucideIconPicker
                                            value={current}
                                            onChange={(icon) =>
                                                onChange({
                                                    ...currentSettings,
                                                    stepHeaderIcons: {
                                                        ...((currentSettings as any).stepHeaderIcons || {}),
                                                        [key]: icon,
                                                    },
                                                } as any)
                                            }
                                            disabled={disabled}
                                        />
                                    </div>
                                );
                            })}
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'navigation',
            label: t('Navigation'),
            icon: <Calendar size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Step Navigation Buttons')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Gap Between Buttons')}
                                value={(currentSettings.navigation as any)?.buttons?.gap ?? createCustomValue('8px')}
                                globalValues={globalValues}
                                onChange={(v) =>
                                    onChange({
                                        ...currentSettings,
                                        navigation: {
                                            ...currentSettings.navigation,
                                            buttons: {
                                                ...((currentSettings.navigation as any)?.buttons || {}),
                                                gap: v,
                                            },
                                        },
                                    } as any)
                                }
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="8px"
                            />

                            <ButtonStyleEditor
                                label={t('Button Styling ("Previous" / "Next" / "Submit")')}
                                value={(((currentSettings.navigation as any)?.buttons?.buttonStyle ?? createDefaultButtonStyle('primary', true)) as unknown as ButtonStyleValue)}
                                onChange={(style) =>
                                    onChange({
                                        ...currentSettings,
                                        navigation: {
                                            ...currentSettings.navigation,
                                            buttons: {
                                                ...((currentSettings.navigation as any)?.buttons || {}),
                                                buttonStyle: style as any,
                                            },
                                        },
                                    } as any)
                                }
                                globalValues={globalValues}
                                disabled={disabled}
                                showIcon={true}
                                showTypography={true}
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Arrows')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Arrow Size')}
                                value={currentSettings.navigation.arrowSize ?? createCustomValue('14px')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('navigation', 'arrowSize', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="14px"
                            />
                            <LinkedFieldEditor
                                label={t('Arrows Color')}
                                value={currentSettings.navigation.arrowColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('navigation', 'arrowColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Hover Background')}
                                value={currentSettings.navigation.arrowHoverBackground}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('navigation', 'arrowHoverBackground', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Arrows Hover Color')}
                                value={currentSettings.navigation.arrowHoverColor ?? currentSettings.navigation.arrowColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('navigation', 'arrowHoverColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Month and Year')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={currentSettings.navigation.monthYearColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('navigation', 'monthYearColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'grid',
            label: t('Day Grid'),
            icon: <Grid3X3 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('Day Size')}
                                value={currentSettings.grid.daySize ?? createCustomValue('20px')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('grid', 'daySize', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="20px"
                            />
                            <BorderRadiusFieldEditor
                                label={t('Day Border Radius')}
                                value={currentSettings.grid.dayBorderRadius ?? createCustomValue('50%')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('grid', 'dayBorderRadius', v)}
                                disabled={disabled}
                                defaultGlobalRef="effects.borderRadiusFull"
                            />
                            <LinkedFieldEditor
                                label={t('Gap Between Days')}
                                value={(currentSettings.grid as any).gap ?? createGlobalRef('spacing.none')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('grid', 'gap' as never, v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="0px"
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Month and Year')}</h4>
                        <TypographyControl
                            label={t('Month and Year Text Styling')}
                            value={currentSettings.navigation.typography as TypographySettings || {}}
                            globalValues={globalValues}
                            onChange={(typography) => handleTypographyChange('navigation', typography)}
                            disabled={disabled}
                        />
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Day Headers')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Background Color')}
                                value={(currentSettings.grid as any).dayHeaderBackground ?? createGlobalRef('colors.surface')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('grid', 'dayHeaderBackground' as never, v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={currentSettings.grid.dayHeaderColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('grid', 'dayHeaderColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                        <div className="mt-3">
                            <TypographyControl
                                label={t('Day Headers Text Styling')}
                                value={currentSettings.grid?.typography as TypographySettings || {}}
                                globalValues={globalValues}
                                onChange={(typography) => handleTypographyChange('grid', typography)}
                                disabled={disabled}
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Regular Day')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={currentSettings.grid.dayColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('grid', 'dayColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Hover Background')}
                                value={currentSettings.grid.dayHoverBackground}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('grid', 'dayHoverBackground', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Today')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Border Color')}
                                value={currentSettings.grid.dayBorder ?? createCustomValue('')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('grid', 'dayBorder', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Background Color')}
                                value={currentSettings.grid.todayBackground}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('grid', 'todayBackground', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={currentSettings.grid.todayColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('grid', 'todayColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Unavailable Day')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={currentSettings.grid.disabledColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('grid', 'disabledColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Selected Day')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Background Color')}
                                value={currentSettings.grid.selectedBackground}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('grid', 'selectedBackground', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={currentSettings.grid.selectedColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('grid', 'selectedColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'timeSlots',
            label: t('Time Slots'),
            icon: <Clock 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">
                            <div>
                                <ColumnCountSelect
                                    label={t('Column Count')}
                                    value={String(currentSettings.timeSlots.columns)}
                                    onChange={(v) => handleFieldChange('timeSlots', 'columns', v)}
                                    disabled={disabled}
                                    options={['2', '3', '4']}
                                />
                            </div>
                            <LinkedFieldEditor
                                label={t('Gap')}
                                value={currentSettings.timeSlots.gap ?? createCustomValue('8px')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('timeSlots', 'gap', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="8px"
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Time Slot')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Background Color')}
                                value={currentSettings.timeSlots.slotBackground}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('timeSlots', 'slotBackground', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Border Color')}
                                value={currentSettings.timeSlots.slotBorder}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('timeSlots', 'slotBorder', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <BorderRadiusFieldEditor
                                label={t('Border Radius')}
                                value={(currentSettings.timeSlots as any).borderRadius ?? createGlobalRef('effects.borderRadiusSmall')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('timeSlots', 'borderRadius' as any, v)}
                                disabled={disabled}
                                defaultGlobalRef="effects.borderRadiusSmall"
                            />
                            <PaddingFieldEditor
                                label={t('Padding')}
                                value={(currentSettings.timeSlots as any).padding ?? createCustomValue('6px 4px')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('timeSlots', 'padding' as any, v)}
                                disabled={disabled}
                                fallback="6px 4px"
                            />
                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={currentSettings.timeSlots.slotColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('timeSlots', 'slotColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Hover Background')}
                                value={currentSettings.timeSlots.slotHoverBackground}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('timeSlots', 'slotHoverBackground', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Unavailable Background')}
                                value={currentSettings.timeSlots.unavailableBackground}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('timeSlots', 'unavailableBackground', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                        <div className="mt-3">
                            <TypographyControl
                                label={t('Time Slots Text Styling')}
                                value={(currentSettings.timeSlots as any).typography as TypographySettings || {}}
                                globalValues={globalValues}
                                onChange={(typography) => handleTypographyChange('timeSlots', typography)}
                                disabled={disabled}
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Selected Slot')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Background Color')}
                                value={currentSettings.timeSlots.selectedBackground}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('timeSlots', 'selectedBackground', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={currentSettings.timeSlots.selectedColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('timeSlots', 'selectedColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'form',
            label: t('Details'),
            icon: <ListOrdered 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 as any).form?.fieldGap ?? createGlobalRef('spacing.sm')}
                                globalValues={globalValues}
                                onChange={(v) => handleFormFieldChange('fieldGap', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="8px"
                            />
                            <LinkedFieldEditor
                                label={t('Gap Between Label and Field')}
                                value={(currentSettings as any).form?.labelGap ?? createCustomValue('2px')}
                                globalValues={globalValues}
                                onChange={(v) => handleFormFieldChange('labelGap', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="2px"
                            />
                        </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 as any).form?.labelColor ?? createGlobalRef('colors.textMuted')) as FieldValue)}
                                globalValues={globalValues}
                                onChange={(v) => handleFormFieldChange('labelColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Asterisk "*" Color')}
                                value={(((currentSettings as any).form?.requiredAsteriskColor ?? createGlobalRef('colors.error')) as FieldValue)}
                                globalValues={globalValues}
                                onChange={(v) => handleFormFieldChange('requiredAsteriskColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                        <div className="mt-3">
                            <TypographyControl
                                label={t('Label Typography')}
                                value={(((currentSettings as any).form?.labelTypography as TypographySettings) || {})}
                                globalValues={globalValues}
                                onChange={(typography) => handleFormTypographyChange('labelTypography', typography)}
                                disabled={disabled}
                            />
                        </div>
                    </div>

                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Input Fields')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Background')}
                                value={(((currentSettings as any).form?.inputBackground ?? createGlobalRef('colors.surface')) as FieldValue)}
                                globalValues={globalValues}
                                onChange={(v) => handleFormFieldChange('inputBackground', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={(((currentSettings as any).form?.inputTextColor ?? createGlobalRef('colors.text')) as FieldValue)}
                                globalValues={globalValues}
                                onChange={(v) => handleFormFieldChange('inputTextColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Placeholder Color')}
                                value={(((currentSettings as any).form?.inputPlaceholderColor ?? createGlobalRef('colors.textMuted')) as FieldValue)}
                                globalValues={globalValues}
                                onChange={(v) => handleFormFieldChange('inputPlaceholderColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Border Color')}
                                value={(((currentSettings as any).form?.inputBorderColor ?? createGlobalRef('colors.border')) as FieldValue)}
                                globalValues={globalValues}
                                onChange={(v) => handleFormFieldChange('inputBorderColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Error Border Color')}
                                value={(((currentSettings as any).form?.inputBorderColorError ?? createGlobalRef('colors.error')) as FieldValue)}
                                globalValues={globalValues}
                                onChange={(v) => handleFormFieldChange('inputBorderColorError', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <BorderRadiusFieldEditor
                                label={t('Border Radius')}
                                value={(((currentSettings as any).form?.inputBorderRadius ?? createGlobalRef('effects.borderRadiusMedium')) as FieldValue)}
                                globalValues={globalValues}
                                onChange={(v) => handleFormFieldChange('inputBorderRadius', v as any)}
                                disabled={disabled}
                                defaultGlobalRef="effects.borderRadiusMedium"
                            />
                            <PaddingFieldEditor
                                label={t('Padding')}
                                value={(((currentSettings as any).form?.inputPadding ?? createCustomValue('8px 12px')) as FieldValue)}
                                globalValues={globalValues}
                                onChange={(v) => handleFormFieldChange('inputPadding', v as any)}
                                disabled={disabled}
                                fallback="8px 12px"
                            />
                        </div>
                        <div className="mt-3">
                            <TypographyControl
                                label={t('Input Field Typography')}
                                value={(((currentSettings as any).form?.inputTypography as TypographySettings) || {})}
                                globalValues={globalValues}
                                onChange={(typography) => handleFormTypographyChange('inputTypography', typography)}
                                disabled={disabled}
                            />
                        </div>
                    </div>

                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Field Icons')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Icon Color')}
                                value={(((currentSettings as any).form?.iconColor ?? createGlobalRef('colors.textMuted')) as FieldValue)}
                                globalValues={globalValues}
                                onChange={(v) => handleFormFieldChange('iconColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Icon Size')}
                                value={(currentSettings as any).form?.iconSize ?? createGlobalRef('sizes.iconSmall')}
                                globalValues={globalValues}
                                onChange={(v) => handleFormFieldChange('iconSize', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="14px"
                            />
                            <LinkedFieldEditor
                                label={t('Icon Offset (inset)')}
                                value={(currentSettings as any).form?.iconInset ?? createCustomValue('10px')}
                                globalValues={globalValues}
                                onChange={(v) => handleFormFieldChange('iconInset', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="10px"
                            />
                        </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('Error Text Color')}
                                value={(((currentSettings as any).form?.errorColor ?? createGlobalRef('colors.error')) as FieldValue)}
                                globalValues={globalValues}
                                onChange={(v) => handleFormFieldChange('errorColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                        <div className="mt-3">
                            <TypographyControl
                                label={t('Error Text Typography')}
                                value={(((currentSettings as any).form?.errorTypography as TypographySettings) || {})}
                                globalValues={globalValues}
                                onChange={(typography) => handleFormTypographyChange('errorTypography', typography)}
                                disabled={disabled}
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'meetingTypes',
            label: t('Meeting Types'),
            icon: <Tag size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Meeting Type Buttons')}</h4>
                        <p className="text-xs text-gray-500 mb-3">{t('Button styling for selecting meeting type (in-person, phone, virtual, etc.)')}</p>
                        <ButtonStyleEditor
                            label={t('Meeting Type Button Styling')}
                            value={(((currentSettings as any).meetingTypeButtons?.buttonStyle ?? createDefaultButtonStyle('primary', true)) as unknown as ButtonStyleValue)}
                            onChange={(style) => onChange({
                                ...currentSettings,
                                meetingTypeButtons: {
                                    ...((currentSettings as any).meetingTypeButtons || {}),
                                    buttonStyle: style as any,
                                },
                            } as any)}
                            globalValues={globalValues}
                            disabled={disabled}
                            showIcon={true}
                            showIconPicker={true}
                            showTypography={true}
                        />
                    </div>
                </div>
            ),
        },
        {
            id: 'confirmation',
            label: t('Confirmation'),
            icon: <Check size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Confirmation Box')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Background Color')}
                                value={currentSettings.confirmation.background}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('confirmation', 'background', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Border Color')}
                                value={currentSettings.confirmation.borderColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('confirmation', 'borderColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <BorderRadiusFieldEditor
                                label={t('Border Radius')}
                                value={(currentSettings.confirmation as any).borderRadius ?? createGlobalRef('effects.borderRadiusMedium')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('confirmation', 'borderRadius' as any, v)}
                                disabled={disabled}
                                defaultGlobalRef="effects.borderRadiusMedium"
                            />
                            <PaddingFieldEditor
                                label={t('Inner Padding')}
                                value={(currentSettings.confirmation as any).padding ?? createCustomValue('10px')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('confirmation', 'padding' as any, v)}
                                disabled={disabled}
                                fallback="10px"
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Confirmation Text')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Title Color')}
                                value={currentSettings.confirmation.titleColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('confirmation', 'titleColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Details Color')}
                                value={currentSettings.confirmation.detailsColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('confirmation', 'detailsColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                        <div className="mt-3">
                            <TypographyControl
                                label={t('Confirmation Text Styling')}
                                value={currentSettings.confirmation.typography as TypographySettings || {}}
                                globalValues={globalValues}
                                onChange={(typography) => handleTypographyChange('confirmation', typography)}
                                disabled={disabled}
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Confirmation Icon')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Icon Background')}
                                value={(currentSettings.confirmation as any).iconBackground ?? createCustomValue('rgba(16, 185, 129, 0.12)')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('confirmation', 'iconBackground' as any, v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Icon Color')}
                                value={(currentSettings.confirmation as any).iconColor ?? createGlobalRef('colors.success')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('confirmation', 'iconColor' as any, v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Icon Size')}
                                value={(currentSettings.confirmation as any).iconSize ?? createCustomValue('18px')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('confirmation', 'iconSize' as any, v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="18px"
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('"Confirmation sent to:" Line')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Text Color (Label)')}
                                value={(currentSettings.confirmation as any).sentToLabelColor ?? currentSettings.confirmation.detailsColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('confirmation', 'sentToLabelColor' as any, v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <TypographyControl
                                label={t('Typography (Label)')}
                                value={((currentSettings.confirmation as any).sentToLabelTypography as TypographySettings) || {}}
                                globalValues={globalValues}
                                onChange={handleConfirmationSentToLabelTypographyChange}
                                disabled={disabled}
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Confirmation Button')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Background Color')}
                                value={currentSettings.confirmation.buttonBackground}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('confirmation', 'buttonBackground', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={currentSettings.confirmation.buttonColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('confirmation', 'buttonColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                    </div>
                </div>
            ),
        },
    ];

    return (
        <WidgetSectionBase
            title={`📅 ${t('Calendar / Scheduling')}`}
            description={t('Calendar widget styling for scheduling and time selection')}
            icon={<Calendar size={24} />}
            tabs={tabs}
            disableSettingsPointerEvents={disableSettingsPointerEvents}
            onLockedHoverActionClick={onLockedHoverActionClick}
            preview={
                <CalendarPreview
                    globalValues={globalValues}
                    widgetSettings={currentSettings}
                    isRTL={isRTL}
                    language={currentLanguage}
                />
            }
            defaultCollapsed={true}
        />
    );
};

export default CalendarWidgetSection;
