/**
 * Coupon Preview Component
 * 
 * Static preview of a coupon card as it would appear in chat.
 * 
 * @since 1.9.0
 */

import React from 'react';
import { Copy, Clock, Sparkles } from 'lucide-react';
import type { PresetGlobalValues, CouponWidgetSettings } from '../../../types/appearance';
import { resolveValue } from '@shared/utils/resolveAppearance';
import { t } from '@/lib/i18n';

interface CouponPreviewProps {
    globalValues: PresetGlobalValues;
    widgetSettings?: CouponWidgetSettings | null;
    isRTL?: boolean;
    language?: string;
}

export const CouponPreview: React.FC<CouponPreviewProps> = ({
    globalValues,
    widgetSettings,
    isRTL = true,
}) => {
    const rv = (field: any, fallback: string) =>
        resolveValue(field, globalValues as any, fallback);

    return (
        <div style={{ maxWidth: '320px', width: '100%' }} dir={isRTL ? 'rtl' : 'ltr'}>
            <div
                style={{
                    background: rv(widgetSettings?.container?.background, '#ffffff'),
                    borderRadius: rv(widgetSettings?.container?.borderRadius, '12px'),
                    borderStyle: widgetSettings?.container?.borderStyle || 'dashed',
                    borderWidth: '2px',
                    borderColor: rv(widgetSettings?.container?.borderColor, '#3BC2D0'),
                    overflow: 'hidden',
                }}
            >
                {/* Header */}
                <div
                    style={{
                        background: rv(widgetSettings?.header?.background, '#3BC2D0'),
                        color: rv(widgetSettings?.header?.color, '#ffffff'),
                        padding: '10px 16px',
                    }}
                >
                    <div style={{
                        fontSize: rv(widgetSettings?.header?.fontSize, '18px'),
                        fontWeight: 700,
                    }}>
                        20% {t('discount')}
                    </div>
                    <p
                        style={{
                            fontSize: rv(widgetSettings?.description?.fontSize, '13px'),
                            color: rv(widgetSettings?.description?.color, 'rgba(255,255,255,0.92)'),
                            opacity: 0.95,
                            margin: '4px 0 0',
                        }}
                    >
                        {t('Special offer just for you')}
                    </p>
                </div>

                {/* Code + Copy */}
                <div style={{ padding: '12px 16px' }}>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px', marginBottom: '8px' }}>
                        <span
                            style={{
                                display: 'inline-flex',
                                alignItems: 'center',
                                gap: '4px',
                                background: rv(widgetSettings?.badge?.background, '#E0F2FE'),
                                color: rv(widgetSettings?.badge?.color, '#0F172A'),
                                borderRadius: rv(widgetSettings?.badge?.borderRadius, '9999px'),
                                padding: '4px 8px',
                                fontSize: '11px',
                                fontWeight: 600,
                            }}
                        >
                            <Sparkles size={11} />
                            {t('Ready to apply')}
                        </span>
                        <span
                            style={{
                                display: 'inline-flex',
                                alignItems: 'center',
                                background: rv(widgetSettings?.badge?.background, '#E0F2FE'),
                                color: rv(widgetSettings?.badge?.color, '#0F172A'),
                                borderRadius: rv(widgetSettings?.badge?.borderRadius, '9999px'),
                                padding: '4px 8px',
                                fontSize: '11px',
                                fontWeight: 600,
                            }}
                        >
                            {t('Expires soon')}
                        </span>
                    </div>

                    <div
                        style={{
                            display: 'flex',
                            alignItems: 'center',
                            gap: '8px',
                            background: rv(widgetSettings?.code?.background, '#f3f4f6'),
                            borderRadius: rv(widgetSettings?.code?.borderRadius, '6px'),
                            padding: '8px 10px',
                            marginBottom: '8px',
                        }}
                    >
                        <span
                            style={{
                                flex: 1,
                                fontFamily: 'monospace',
                                fontWeight: 700,
                                fontSize: rv(widgetSettings?.code?.fontSize, '15px'),
                                letterSpacing: '0.08em',
                                color: rv(widgetSettings?.code?.color, '#1f2937'),
                            }}
                        >
                            SAVE20
                        </span>
                        <button
                            type="button"
                            style={{
                                background: rv(widgetSettings?.copyButton?.background, '#3BC2D0'),
                                color: rv(widgetSettings?.copyButton?.color, '#ffffff'),
                                border: 'none',
                                borderRadius: rv(widgetSettings?.copyButton?.borderRadius, '6px'),
                                padding: '6px 12px',
                                fontSize: '12px',
                                fontWeight: 500,
                                cursor: 'default',
                                display: 'flex',
                                alignItems: 'center',
                                gap: '4px',
                            }}
                        >
                            <Copy size={12} />
                            {t('Copy code')}
                        </button>
                    </div>

                    {/* Expiry */}
                    <div
                        style={{
                            display: 'flex',
                            alignItems: 'center',
                            gap: '4px',
                            fontSize: rv(widgetSettings?.expiry?.fontSize, '11px'),
                            color: rv(widgetSettings?.expiry?.color, '#6b7280'),
                        }}
                    >
                        <Clock size={11} />
                        <span>{t('Until Dec 31')}</span>
                    </div>

                    <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginTop: '10px' }}>
                        <button
                            type="button"
                            style={{
                                background: rv(widgetSettings?.copyButton?.background, '#3BC2D0'),
                                color: rv(widgetSettings?.copyButton?.color, '#ffffff'),
                                border: 'none',
                                borderRadius: rv(widgetSettings?.copyButton?.borderRadius, '6px'),
                                padding: '7px 12px',
                                fontSize: '12px',
                                fontWeight: 600,
                                cursor: 'default',
                            }}
                        >
                            {t('Apply to Cart')}
                        </button>
                        <button
                            type="button"
                            style={{
                                background: 'transparent',
                                border: 'none',
                                padding: 0,
                                color: rv(widgetSettings?.removeLink?.color, '#1D4ED8'),
                                fontSize: '12px',
                                textDecoration: 'underline',
                                cursor: 'default',
                            }}
                        >
                            {t('Remove')}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default CouponPreview;
