import React from 'react';
import { ShoppingCart, Palette, Layers3, Rows3, MousePointerClick } from 'lucide-react';
import { WidgetSectionBase, WidgetSectionTab } from './WidgetSectionBase';
import { LinkedFieldEditor } from '../LinkedFieldEditor';
import { BorderRadiusFieldEditor } from '../../common/BorderRadiusFieldEditor';
import { BoxShadowFieldEditor } from '../../common/BoxShadowFieldEditor';
import { CartPreview } from '../PreviewElements';
import {
    CartWidgetSettings,
    DEFAULT_WIDGET_SETTINGS,
    FieldValue,
    PresetGlobalValues,
} from '../../../types/appearance';
import { t } from '@/lib/i18n';
import { useLanguage } from '@/contexts/LanguageContext';

interface CartSectionProps {
    settings: CartWidgetSettings | null;
    globalValues: PresetGlobalValues;
    onChange: (settings: CartWidgetSettings) => void;
    disabled?: boolean;
    disableSettingsPointerEvents?: boolean;
    onLockedHoverActionClick?: () => void;
}

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

    const currentSettings: CartWidgetSettings = {
        ...DEFAULT_WIDGET_SETTINGS.cart,
        ...(settings ?? {}),
        badge: { ...DEFAULT_WIDGET_SETTINGS.cart.badge, ...(settings?.badge ?? {}) },
        drawer: { ...DEFAULT_WIDGET_SETTINGS.cart.drawer, ...(settings?.drawer ?? {}) },
        header: { ...DEFAULT_WIDGET_SETTINGS.cart.header, ...(settings?.header ?? {}) },
        item: { ...DEFAULT_WIDGET_SETTINGS.cart.item, ...(settings?.item ?? {}) },
        summary: { ...DEFAULT_WIDGET_SETTINGS.cart.summary, ...(settings?.summary ?? {}) },
        actions: { ...DEFAULT_WIDGET_SETTINGS.cart.actions, ...(settings?.actions ?? {}) },
        empty: { ...DEFAULT_WIDGET_SETTINGS.cart.empty, ...(settings?.empty ?? {}) },
    };

    const handleFieldChange = <K extends keyof CartWidgetSettings>(
        sectionKey: K,
        fieldKey: keyof CartWidgetSettings[K],
        value: FieldValue
    ) => {
        onChange({
            ...currentSettings,
            [sectionKey]: {
                ...currentSettings[sectionKey],
                [fieldKey]: value,
            },
        });
    };

    const tabs: WidgetSectionTab[] = [
        {
            id: 'badge',
            label: t('Badge'),
            icon: <ShoppingCart size={14} />,
            content: (
                <div className="space-y-3">
                    <LinkedFieldEditor label={t('Background Color')} value={currentSettings.badge.background} globalValues={globalValues} onChange={(v) => handleFieldChange('badge', 'background', v)} fieldType="color" disabled={disabled} />
                    <LinkedFieldEditor label={t('Icon Color')} value={currentSettings.badge.iconColor} globalValues={globalValues} onChange={(v) => handleFieldChange('badge', 'iconColor', v)} fieldType="color" disabled={disabled} />
                    <BorderRadiusFieldEditor label={t('Border Radius')} value={currentSettings.badge.borderRadius} globalValues={globalValues} onChange={(v) => handleFieldChange('badge', 'borderRadius', v)} disabled={disabled} defaultGlobalRef="effects.borderRadiusFull" />
                    <LinkedFieldEditor label={t('Min Width')} value={currentSettings.badge.minWidth} globalValues={globalValues} onChange={(v) => handleFieldChange('badge', 'minWidth', v)} fieldType="size" allowGlobalLink={true} disabled={disabled} placeholder="36px" />
                    <LinkedFieldEditor label={t('Height')} value={currentSettings.badge.height} globalValues={globalValues} onChange={(v) => handleFieldChange('badge', 'height', v)} fieldType="size" allowGlobalLink={true} disabled={disabled} placeholder="36px" />
                </div>
            ),
        },
        {
            id: 'drawer',
            label: t('Drawer'),
            icon: <Palette size={14} />,
            content: (
                <div className="space-y-3">
                    <LinkedFieldEditor label={t('Background Color')} value={currentSettings.drawer.background} globalValues={globalValues} onChange={(v) => handleFieldChange('drawer', 'background', v)} fieldType="color" disabled={disabled} />
                    <LinkedFieldEditor label={t('Border Color')} value={currentSettings.drawer.borderColor} globalValues={globalValues} onChange={(v) => handleFieldChange('drawer', 'borderColor', v)} fieldType="color" disabled={disabled} />
                    <BorderRadiusFieldEditor label={t('Border Radius')} value={currentSettings.drawer.borderRadius} globalValues={globalValues} onChange={(v) => handleFieldChange('drawer', 'borderRadius', v)} disabled={disabled} defaultGlobalRef="effects.borderRadiusLarge" />
                    <BoxShadowFieldEditor label={t('Shadow')} value={currentSettings.drawer.shadow} globalValues={globalValues} onChange={(v) => handleFieldChange('drawer', 'shadow', v)} disabled={disabled} defaultGlobalRef="effects.shadowLarge" />
                    <LinkedFieldEditor label={t('Header Background')} value={currentSettings.header.background} globalValues={globalValues} onChange={(v) => handleFieldChange('header', 'background', v)} fieldType="color" disabled={disabled} />
                    <LinkedFieldEditor label={t('Header Text Color')} value={currentSettings.header.color} globalValues={globalValues} onChange={(v) => handleFieldChange('header', 'color', v)} fieldType="color" disabled={disabled} />
                    <LinkedFieldEditor label={t('Count Badge Background')} value={currentSettings.header.countBackground} globalValues={globalValues} onChange={(v) => handleFieldChange('header', 'countBackground', v)} fieldType="color" disabled={disabled} />
                    <LinkedFieldEditor label={t('Count Badge Text Color')} value={currentSettings.header.countColor} globalValues={globalValues} onChange={(v) => handleFieldChange('header', 'countColor', v)} fieldType="color" disabled={disabled} />
                </div>
            ),
        },
        {
            id: 'item',
            label: t('Items'),
            icon: <Rows3 size={14} />,
            content: (
                <div className="space-y-3">
                    <LinkedFieldEditor label={t('Item Background')} value={currentSettings.item.background} globalValues={globalValues} onChange={(v) => handleFieldChange('item', 'background', v)} fieldType="color" disabled={disabled} />
                    <LinkedFieldEditor label={t('Item Border Color')} value={currentSettings.item.borderColor} globalValues={globalValues} onChange={(v) => handleFieldChange('item', 'borderColor', v)} fieldType="color" disabled={disabled} />
                    <BorderRadiusFieldEditor label={t('Item Border Radius')} value={currentSettings.item.borderRadius} globalValues={globalValues} onChange={(v) => handleFieldChange('item', 'borderRadius', v)} disabled={disabled} defaultGlobalRef="effects.borderRadiusMedium" />
                    <LinkedFieldEditor label={t('Title Color')} value={currentSettings.item.titleColor} globalValues={globalValues} onChange={(v) => handleFieldChange('item', 'titleColor', v)} fieldType="color" disabled={disabled} />
                    <LinkedFieldEditor label={t('Meta Color')} value={currentSettings.item.metaColor} globalValues={globalValues} onChange={(v) => handleFieldChange('item', 'metaColor', v)} fieldType="color" disabled={disabled} />
                    <LinkedFieldEditor label={t('Price Color')} value={currentSettings.item.priceColor} globalValues={globalValues} onChange={(v) => handleFieldChange('item', 'priceColor', v)} fieldType="color" disabled={disabled} />
                    <LinkedFieldEditor label={t('Quantity Background')} value={currentSettings.item.quantityBackground} globalValues={globalValues} onChange={(v) => handleFieldChange('item', 'quantityBackground', v)} fieldType="color" disabled={disabled} />
                    <LinkedFieldEditor label={t('Quantity Text Color')} value={currentSettings.item.quantityColor} globalValues={globalValues} onChange={(v) => handleFieldChange('item', 'quantityColor', v)} fieldType="color" disabled={disabled} />
                    <LinkedFieldEditor label={t('Remove Color')} value={currentSettings.item.removeColor} globalValues={globalValues} onChange={(v) => handleFieldChange('item', 'removeColor', v)} fieldType="color" disabled={disabled} />
                </div>
            ),
        },
        {
            id: 'summary',
            label: t('Summary'),
            icon: <Layers3 size={14} />,
            content: (
                <div className="space-y-3">
                    <LinkedFieldEditor label={t('Summary Background')} value={currentSettings.summary.background} globalValues={globalValues} onChange={(v) => handleFieldChange('summary', 'background', v)} fieldType="color" disabled={disabled} />
                    <LinkedFieldEditor label={t('Summary Border Color')} value={currentSettings.summary.borderColor} globalValues={globalValues} onChange={(v) => handleFieldChange('summary', 'borderColor', v)} fieldType="color" disabled={disabled} />
                    <BorderRadiusFieldEditor label={t('Summary Border Radius')} value={currentSettings.summary.borderRadius} globalValues={globalValues} onChange={(v) => handleFieldChange('summary', 'borderRadius', v)} disabled={disabled} defaultGlobalRef="effects.borderRadiusMedium" />
                    <LinkedFieldEditor label={t('Label Color')} value={currentSettings.summary.labelColor} globalValues={globalValues} onChange={(v) => handleFieldChange('summary', 'labelColor', v)} fieldType="color" disabled={disabled} />
                    <LinkedFieldEditor label={t('Value Color')} value={currentSettings.summary.valueColor} globalValues={globalValues} onChange={(v) => handleFieldChange('summary', 'valueColor', v)} fieldType="color" disabled={disabled} />
                    <LinkedFieldEditor label={t('Empty Icon Color')} value={currentSettings.empty.iconColor} globalValues={globalValues} onChange={(v) => handleFieldChange('empty', 'iconColor', v)} fieldType="color" disabled={disabled} />
                    <LinkedFieldEditor label={t('Empty Title Color')} value={currentSettings.empty.titleColor} globalValues={globalValues} onChange={(v) => handleFieldChange('empty', 'titleColor', v)} fieldType="color" disabled={disabled} />
                    <LinkedFieldEditor label={t('Empty Description Color')} value={currentSettings.empty.descriptionColor} globalValues={globalValues} onChange={(v) => handleFieldChange('empty', 'descriptionColor', v)} fieldType="color" disabled={disabled} />
                </div>
            ),
        },
        {
            id: 'actions',
            label: t('Actions'),
            icon: <MousePointerClick size={14} />,
            content: (
                <div className="space-y-3">
                    <LinkedFieldEditor label={t('Primary Background')} value={currentSettings.actions.primaryBackground} globalValues={globalValues} onChange={(v) => handleFieldChange('actions', 'primaryBackground', v)} fieldType="color" disabled={disabled} />
                    <LinkedFieldEditor label={t('Primary Text Color')} value={currentSettings.actions.primaryColor} globalValues={globalValues} onChange={(v) => handleFieldChange('actions', 'primaryColor', v)} fieldType="color" disabled={disabled} />
                    <LinkedFieldEditor label={t('Primary Hover Background')} value={currentSettings.actions.primaryHoverBackground} globalValues={globalValues} onChange={(v) => handleFieldChange('actions', 'primaryHoverBackground', v)} fieldType="color" disabled={disabled} />
                    <LinkedFieldEditor label={t('Secondary Background')} value={currentSettings.actions.secondaryBackground} globalValues={globalValues} onChange={(v) => handleFieldChange('actions', 'secondaryBackground', v)} fieldType="color" disabled={disabled} />
                    <LinkedFieldEditor label={t('Secondary Text Color')} value={currentSettings.actions.secondaryColor} globalValues={globalValues} onChange={(v) => handleFieldChange('actions', 'secondaryColor', v)} fieldType="color" disabled={disabled} />
                    <LinkedFieldEditor label={t('Secondary Border Color')} value={currentSettings.actions.secondaryBorderColor} globalValues={globalValues} onChange={(v) => handleFieldChange('actions', 'secondaryBorderColor', v)} fieldType="color" disabled={disabled} />
                    <LinkedFieldEditor label={t('Secondary Hover Background')} value={currentSettings.actions.secondaryHoverBackground} globalValues={globalValues} onChange={(v) => handleFieldChange('actions', 'secondaryHoverBackground', v)} fieldType="color" disabled={disabled} />
                    <BorderRadiusFieldEditor label={t('Button Border Radius')} value={currentSettings.actions.borderRadius} globalValues={globalValues} onChange={(v) => handleFieldChange('actions', 'borderRadius', v)} disabled={disabled} defaultGlobalRef="effects.borderRadiusMedium" />
                </div>
            ),
        },
    ];

    return (
        <WidgetSectionBase
            title={`🛒 ${t('Cart')}`}
            description={t('Cart badge, drawer and in-chat cart card styling')}
            icon={<ShoppingCart size={24} />}
            tabs={tabs}
            disableSettingsPointerEvents={disableSettingsPointerEvents}
            onLockedHoverActionClick={onLockedHoverActionClick}
            preview={<CartPreview globalValues={globalValues} widgetSettings={currentSettings} isRTL={isRTL} language={currentLanguage} />}
            defaultCollapsed={true}
        />
    );
};

export default CartSection;
