import React from 'react';
import { Minus, Plus, ShoppingCart, Trash2 } from 'lucide-react';
import type { CartWidgetSettings, PresetGlobalValues } from '../../../types/appearance';
import { resolveValue } from '@shared/utils/resolveAppearance';
import { t } from '@/lib/i18n';

interface CartPreviewProps {
    globalValues: PresetGlobalValues;
    widgetSettings?: CartWidgetSettings | null;
    isRTL?: boolean;
    language?: string;
}

export const CartPreview: React.FC<CartPreviewProps> = ({
    globalValues,
    widgetSettings,
    isRTL = true,
    language = 'he',
}) => {
    const rv = (field: unknown, fallback: string) => resolveValue(field as any, globalValues as any, fallback);
    const currencySymbol =
        (window as any).boostbotAdmin?.woocommerce_currency_by_language?.[language]
        || (window as any).boostbotAdmin?.woocommerce_currency_symbol
        || (language === 'en' ? '$' : '₪');

    return (
        <div style={{ maxWidth: '320px', width: '100%' }} dir={isRTL ? 'rtl' : 'ltr'}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
                <div style={{ fontSize: '12px', color: '#64748b' }}>{t('Header badge')}</div>
                <button
                    type="button"
                    style={{
                        display: 'inline-flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        gap: '8px',
                        minWidth: rv(widgetSettings?.badge?.minWidth, '36px'),
                        height: rv(widgetSettings?.badge?.height, '36px'),
                        padding: '0 12px',
                        border: 'none',
                        borderRadius: rv(widgetSettings?.badge?.borderRadius, '9999px'),
                        background: rv(widgetSettings?.badge?.background, '#EEF2FF'),
                        color: rv(widgetSettings?.badge?.iconColor, '#4F46E5'),
                    }}
                >
                    <ShoppingCart size={16} />
                    <span
                        style={{
                            display: 'inline-flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            minWidth: '20px',
                            padding: '0 6px',
                            borderRadius: '9999px',
                            background: rv(widgetSettings?.header?.countBackground, '#4F46E5'),
                            color: rv(widgetSettings?.header?.countColor, '#FFFFFF'),
                            fontSize: '11px',
                            fontWeight: 700,
                        }}
                    >
                        2
                    </span>
                </button>
            </div>

            <div
                style={{
                    background: rv(widgetSettings?.drawer?.background, '#FFFFFF'),
                    border: `1px solid ${rv(widgetSettings?.drawer?.borderColor, '#E5E7EB')}`,
                    borderRadius: rv(widgetSettings?.drawer?.borderRadius, '16px'),
                    boxShadow: rv(widgetSettings?.drawer?.shadow, '0 18px 40px rgba(15,23,42,0.14)'),
                    overflow: 'hidden',
                }}
            >
                <div
                    style={{
                        background: rv(widgetSettings?.header?.background, '#F8FAFC'),
                        color: rv(widgetSettings?.header?.color, '#0F172A'),
                        padding: '14px 16px',
                        borderBottom: `1px solid ${rv(widgetSettings?.drawer?.borderColor, '#E5E7EB')}`,
                        fontSize: '14px',
                        fontWeight: 700,
                    }}
                >
                    {t('Your cart')}
                </div>

                <div style={{ padding: '14px 16px' }}>
                    <div
                        style={{
                            background: rv(widgetSettings?.item?.background, '#FFFFFF'),
                            border: `1px solid ${rv(widgetSettings?.item?.borderColor, '#E5E7EB')}`,
                            borderRadius: rv(widgetSettings?.item?.borderRadius, '12px'),
                            padding: '12px',
                            marginBottom: '12px',
                        }}
                    >
                        <div style={{ display: 'flex', justifyContent: 'space-between', gap: '12px' }}>
                            <div>
                                <div style={{ color: rv(widgetSettings?.item?.titleColor, '#111827'), fontWeight: 600, fontSize: '14px' }}>
                                    {t('Sample Product')}
                                </div>
                                <div style={{ color: rv(widgetSettings?.item?.metaColor, '#6B7280'), fontSize: '12px', marginTop: '4px' }}>
                                    {currencySymbol}99.00
                                </div>
                            </div>
                            <Trash2 size={15} color={rv(widgetSettings?.item?.removeColor, '#DC2626')} />
                        </div>

                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '12px' }}>
                            <div
                                style={{
                                    display: 'inline-flex',
                                    alignItems: 'center',
                                    gap: '8px',
                                    padding: '4px 8px',
                                    borderRadius: '9999px',
                                    background: rv(widgetSettings?.item?.quantityBackground, '#F3F4F6'),
                                    color: rv(widgetSettings?.item?.quantityColor, '#111827'),
                                    fontSize: '12px',
                                }}
                            >
                                <Minus size={12} />
                                <span>2</span>
                                <Plus size={12} />
                            </div>
                            <div style={{ color: rv(widgetSettings?.item?.priceColor, '#4F46E5'), fontWeight: 700, fontSize: '14px' }}>
                                {currencySymbol}198.00
                            </div>
                        </div>
                    </div>

                    <div
                        style={{
                            background: rv(widgetSettings?.summary?.background, '#F8FAFC'),
                            border: `1px solid ${rv(widgetSettings?.summary?.borderColor, '#E5E7EB')}`,
                            borderRadius: rv(widgetSettings?.summary?.borderRadius, '12px'),
                            padding: '12px 14px',
                            marginBottom: '12px',
                            display: 'flex',
                            justifyContent: 'space-between',
                            alignItems: 'center',
                        }}
                    >
                        <span style={{ color: rv(widgetSettings?.summary?.labelColor, '#6B7280'), fontSize: '13px' }}>{t('Total')}</span>
                        <span style={{ color: rv(widgetSettings?.summary?.valueColor, '#111827'), fontWeight: 700, fontSize: '14px' }}>{currencySymbol}198.00</span>
                    </div>

                    <div style={{ display: 'flex', gap: '8px' }}>
                        <button
                            type="button"
                            style={{
                                flex: 1,
                                border: 'none',
                                borderRadius: rv(widgetSettings?.actions?.borderRadius, '12px'),
                                background: rv(widgetSettings?.actions?.primaryBackground, '#4F46E5'),
                                color: rv(widgetSettings?.actions?.primaryColor, '#FFFFFF'),
                                padding: '10px 12px',
                                fontSize: '13px',
                                fontWeight: 600,
                            }}
                        >
                            {t('Checkout')}
                        </button>
                        <button
                            type="button"
                            style={{
                                borderRadius: rv(widgetSettings?.actions?.borderRadius, '12px'),
                                background: rv(widgetSettings?.actions?.secondaryBackground, '#FFFFFF'),
                                color: rv(widgetSettings?.actions?.secondaryColor, '#111827'),
                                border: `1px solid ${rv(widgetSettings?.actions?.secondaryBorderColor, '#D1D5DB')}`,
                                padding: '10px 12px',
                                fontSize: '13px',
                                fontWeight: 600,
                            }}
                        >
                            {t('Continue chat')}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default CartPreview;
