/**
 * Product Card Preview Component
 * 
 * Preview of a product card as it would appear in chat.
 * Uses the shared ProductCard component for parity with live view.
 * 
 * @since 1.5.0
 * @updated 1.6.0 - Migrated to shared component
 * @updated 1.8.0 - Added language prop for multilingual preview
 */

import React, { useMemo, useState } from 'react';
import { ProductCard } from '@shared/components/widgets/ProductCard';
import type { PresetGlobalValues, ProductCardWidgetSettings } from '../../../types/appearance';
import { getWidgetStrings } from '@shared/utils/widget-strings';
import { ToggleSwitch } from '../../common/ToggleSwitch';
import { t } from '@/lib/i18n';

interface ProductCardPreviewProps {
    globalValues: PresetGlobalValues;
    widgetSettings?: ProductCardWidgetSettings | null;
    productId?: number | null;
    isRTL?: boolean;
    language?: string;
}

export const ProductCardPreview: React.FC<ProductCardPreviewProps> = ({ 
    globalValues,
    widgetSettings,
    isRTL = true,
    language,
}) => {
    const ws = getWidgetStrings(language);
    const [showSale, setShowSale] = useState(true);
    const [showOutOfStock, setShowOutOfStock] = useState(false);
    const [showLowStock, setShowLowStock] = useState(false);
    const [showLoading, setShowLoading] = useState(false);
    const [showSuccess, setShowSuccess] = useState(false);

    const previewButtonState = showLoading ? 'loading' : showSuccess ? 'success' : 'idle';
    const previewProduct = useMemo(() => ({
        id: 1,
        name: ws.productPreviewName,
        price: showSale ? '199' : '249',
        regular_price: '249',
        description: ws.productPreviewDescription,
        rating: 4.2,
        in_stock: !showOutOfStock,
        on_sale: showSale,
        sale_percentage: showSale ? 20 : null,
        stock_status: showOutOfStock ? 'outofstock' : 'instock',
        stock_quantity: showOutOfStock ? 0 : (showLowStock ? 3 : 12),
        is_purchasable: !showOutOfStock,
        max_quantity: showOutOfStock ? 0 : 12,
        product_type: 'simple',
    }), [showLowStock, showOutOfStock, showSale, ws.productPreviewDescription, ws.productPreviewName]);

    return (
        <div style={{ maxWidth: '320px', width: '100%' }}>
            <div className="mb-3 rounded-lg border border-gray-200 bg-white p-3">
                <div className="grid grid-cols-2 gap-3">
                    <div className="flex items-center justify-between gap-2">
                        <span className="text-xs text-gray-600">{t('Sale')}</span>
                        <ToggleSwitch checked={showSale} onChange={setShowSale} ariaLabel={t('Toggle sale preview')} size="sm" />
                    </div>
                    <div className="flex items-center justify-between gap-2">
                        <span className="text-xs text-gray-600">{t('Out of Stock')}</span>
                        <ToggleSwitch checked={showOutOfStock} onChange={setShowOutOfStock} ariaLabel={t('Toggle out of stock preview')} size="sm" />
                    </div>
                    <div className="flex items-center justify-between gap-2">
                        <span className="text-xs text-gray-600">{t('Low Stock')}</span>
                        <ToggleSwitch checked={showLowStock} onChange={setShowLowStock} ariaLabel={t('Toggle low stock preview')} size="sm" />
                    </div>
                    <div className="flex items-center justify-between gap-2">
                        <span className="text-xs text-gray-600">{t('Loading')}</span>
                        <ToggleSwitch
                            checked={showLoading}
                            onChange={(checked) => {
                                setShowLoading(checked);
                                if (checked) setShowSuccess(false);
                            }}
                            ariaLabel={t('Toggle loading preview')}
                            size="sm"
                        />
                    </div>
                    <div className="flex items-center justify-between gap-2 col-span-2">
                        <span className="text-xs text-gray-600">{t('Success')}</span>
                        <ToggleSwitch
                            checked={showSuccess}
                            onChange={(checked) => {
                                setShowSuccess(checked);
                                if (checked) setShowLoading(false);
                            }}
                            ariaLabel={t('Toggle success preview')}
                            size="sm"
                        />
                    </div>
                </div>
            </div>
            <ProductCard
                globalValues={globalValues as any}
                widgetSettings={widgetSettings as any}
                context="preview"
                isRTL={isRTL}
                language={language}
                previewButtonState={previewButtonState}
                product={previewProduct}
                showAddToCart={true}
                showViewButton={true}
            />
        </div>
    );
};

export default ProductCardPreview;
