/**
 * Product Card Widget (Live)
 * 
 * Displays product information from WooCommerce.
 * Supports image, title, price, and action buttons.
 * Uses the shared ProductCard component for parity with preview.
 * 
 * @since 1.0.0
 * @updated 1.6.0 - Migrated to shared component
 */

import {
  ProductCard,
  type ProductActionResult,
  type ProductAddToCartRequest,
  type ProductVariationInfo,
} from '@shared/components/widgets/ProductCard';
import type { GlobalValues, FieldValue } from '@/utils/resolveAppearance';
import type { ButtonStyleSettings } from '@/types';

interface ProductCardWidgetSettings {
  container?: {
    background?: FieldValue;
    borderRadius?: FieldValue;
    shadow?: FieldValue;
  };
  text?: {
    padding?: FieldValue;
    gap?: FieldValue;
  };
  image?: {
    height?: FieldValue;
    maxHeight?: FieldValue;
    aspectRatio?: string;
    objectFit?: string;
    borderRadius?: FieldValue;
  };
  badge?: {
    background?: FieldValue;
    color?: FieldValue;
    borderRadius?: FieldValue;
  };
  title?: {
    color?: FieldValue;
    font?: FieldValue;
    typography?: Record<string, FieldValue | undefined> | unknown;
  };
  description?: {
    color?: FieldValue;
    font?: FieldValue;
    typography?: Record<string, FieldValue | undefined> | unknown;
  };
  price?: {
    color?: FieldValue;
    font?: FieldValue;
    saleColor?: FieldValue;
    originalColor?: FieldValue;
    currencySymbolSize?: FieldValue;
    typography?: Record<string, FieldValue | undefined> | unknown;
  };
  rating?: {
    starColor?: FieldValue;
    emptyStarColor?: FieldValue;
    starSize?: FieldValue;
    gap?: FieldValue;
    countColor?: FieldValue;
    countTypography?: Record<string, FieldValue | undefined> | unknown;
  };
  button?: {
    background?: FieldValue;
    color?: FieldValue;
    borderRadius?: FieldValue;
    hoverBackground?: FieldValue;
    buttonStyle?: ButtonStyleSettings;
    viewButtonStyle?: ButtonStyleSettings;
  };
}

interface ProductCardWidgetProps {
  config: {
    product: {
      id: number;
      name: string;
      price: string;
      currency_code?: string;
      regular_price?: string;
      image?: string;
      description?: string;
      url?: string;
      rating?: number;
      in_stock?: boolean;
      on_sale?: boolean;
      sale_percentage?: number | null;
      stock_status?: string;
      stock_quantity?: number | null;
      is_purchasable?: boolean;
      max_quantity?: number | null;
      product_type?: string;
      variations?: ProductVariationInfo[] | null;
    };
    show_add_to_cart?: boolean;
    show_view_button?: boolean;
    is_rtl?: boolean;
  };
  widgetSettings?: ProductCardWidgetSettings;
  globalValues?: GlobalValues;
  language?: string;
  currencySymbol?: string;
  onAddToCart?: (request: ProductAddToCartRequest) => Promise<ProductActionResult>;
  onViewProduct?: (productId: number) => void;
}

export function ProductCardWidget({ 
  config, 
  widgetSettings, 
  globalValues = {},
  language,
  currencySymbol,
  onAddToCart, 
  onViewProduct 
}: ProductCardWidgetProps) {
  const { product, show_add_to_cart = true, show_view_button = true, is_rtl = true } = config;

  if (!product) {
    console.warn('[BoostBot] ProductCardWidget: no product data — skipping render');
    return null;
  }

  return (
    <ProductCard
      globalValues={globalValues as any}
      widgetSettings={widgetSettings as any}
      context="live"
      isRTL={is_rtl}
      language={language}
      currencySymbol={currencySymbol}
      product={product}
      showAddToCart={show_add_to_cart}
      showViewButton={show_view_button}
      onAddToCart={onAddToCart}
      onViewProduct={onViewProduct}
    />
  );
}

export default ProductCardWidget;
