import { useState, useEffect, useRef, useCallback } from 'react';
import AddIcon from '@mui/icons-material/Add';
import CheckIcon from '@mui/icons-material/Check';
import LocalOfferIcon from '@mui/icons-material/LocalOffer';
import RemoveIcon from '@mui/icons-material/Remove';
import ShoppingCartCheckoutIcon from '@mui/icons-material/ShoppingCartCheckout';
import {
  Avatar,
  Box,
  Chip,
  Collapse,
  IconButton,
  Skeleton,
  Stack,
  Switch,
  TextField,
  Typography,
  useMediaQuery,
  useTheme,
} from '@mui/material';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import type { TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
import { getPriceUnitAmountByCurrency } from '@blocklet/payment-react-headless';
import Toast from '@arcblock/ux/lib/Toast';
import {
  INTERVAL_LOCALE_KEY,
  formatDynamicUnitPrice,
  formatTokenAmount,
  formatTrialText,
  primaryContrastColor,
} from '../../utils/format';

interface ProductItemCardProps {
  item: TLineItemExpanded & { adjustable_quantity?: { enabled: boolean; minimum?: number; maximum?: number } };
  currency: TPaymentCurrency | null;
  discounts: any[];
  exchangeRate: string | null;
  onQuantityChange: (itemId: string, qty: number) => Promise<void>;
  onUpsell: (fromId: string, toId: string) => Promise<void>;
  onDownsell: (priceId: string) => Promise<void>;
  trialActive: boolean;
  trialDays: number;
  t: (key: string, params?: any) => string;
  recommended?: boolean;
  hideUpsell?: boolean;
  isRateLoading?: boolean;
  showFeatures?: boolean;
  children?: React.ReactNode;
}

export default function ProductItemCard({
  item,
  currency,
  discounts,
  exchangeRate,
  onQuantityChange,
  onUpsell,
  onDownsell,
  trialActive,
  trialDays,
  t,
  recommended = false,
  hideUpsell = false,
  isRateLoading = false,
  showFeatures = true,
  children = undefined,
}: ProductItemCardProps) {
  const activePrice: any = (item as any).upsell_price || item.price;
  const product = activePrice?.product;
  const name = product?.name || 'Item';
  const logo = product?.images?.[0] || '';
  const features: Array<{ name: string; icon?: string }> = product?.features || [];
  const recurring = activePrice?.recurring;

  const quantity = item.quantity || 1;
  const isMetered = recurring?.usage_type === 'metered';
  const metered = isMetered ? ` ${t('common.metered')}` : '';

  const perUnitFormatted = formatDynamicUnitPrice(activePrice, currency, exchangeRate);

  // Item type badge: just "SUBSCRIPTION" or "ONE-TIME" (interval is shown with price)
  const isSubscription = !!recurring;
  const typeBadgeText = isSubscription
    ? t('payment.checkout.typeBadge.subscription')
    : t('payment.checkout.typeBadge.oneTime');

  // Billing interval suffix for price display: "/ month"
  const priceIntervalSuffix = recurring?.interval ? ` / ${t(`common.${recurring.interval}`)}` : '';

  // Subtitle: only quantity breakdown (interval is now in the type badge)
  const subtitleText = (() => {
    if (quantity > 1 && perUnitFormatted && currency) {
      return `${quantity} × ${perUnitFormatted} ${currency.symbol}`;
    }
    if (isMetered) return metered.trim();
    return '';
  })();

  // Item total
  const itemTotal = (() => {
    // custom_amount is backend-quoted in a specific currency — only use when quote_currency_id is present and matches
    // (when quote_currency_id is absent, custom_amount denomination is unknown — skip to base_amount path)
    const quoteCurrencyId = (item as any).quote_currency_id as string | undefined;
    if ((item as any).custom_amount && quoteCurrencyId && quoteCurrencyId === currency?.id) {
      return formatTokenAmount((item as any).custom_amount, currency);
    }
    if (activePrice?.pricing_type === 'dynamic' && exchangeRate && activePrice.base_amount) {
      const rate = Number(exchangeRate);
      if (rate > 0 && Number.isFinite(rate)) {
        const baseUsd = Number(activePrice.base_amount);
        if (baseUsd > 0 && Number.isFinite(baseUsd)) {
          const tokenAmount = (baseUsd * quantity) / rate;
          const abs = Math.abs(tokenAmount);
          const precision = abs > 0 && abs < 0.01 ? 6 : 2;
          return (
            tokenAmount
              .toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: precision })
              .replace(/(\.\d*?)0+$/, '$1')
              .replace(/\.$/, '') || '0'
          );
        }
      }
    }
    // Fiat/Stripe fallback: use base_amount when no exchange rate
    // (unit_amount may be in crypto denomination, not fiat cents)
    if (!exchangeRate && activePrice?.base_amount != null) {
      const baseUsd = Number(activePrice.base_amount);
      if (baseUsd >= 0 && Number.isFinite(baseUsd)) {
        const total = baseUsd * quantity;
        return total.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
      }
    }
    // Fallback: look up unit_amount from currency_options for the selected currency
    if (activePrice && currency) {
      const unitAmount = getPriceUnitAmountByCurrency(activePrice, currency);
      if (unitAmount && unitAmount !== '0') {
        const totalUnits = BigInt(unitAmount) * BigInt(quantity);
        return formatTokenAmount(totalUnits.toString(), currency);
      }
    }
    return '0';
  })();

  // Per-item discount
  const discount = discounts?.[0];
  const discountCode =
    discount?.promotion_code_details?.code || discount?.verification_data?.code || discount?.promotion_code || '';
  const perItemDiscount = (() => {
    if (!discountCode || !discount) return null;
    const couponDetails = discount?.coupon_details;
    if (couponDetails?.percent_off > 0) {
      const numericTotal = parseFloat(String(itemTotal).replace(/,/g, ''));
      if (!Number.isNaN(numericTotal) && numericTotal > 0) {
        const discAmount = (numericTotal * couponDetails.percent_off) / 100;
        const abs = Math.abs(discAmount);
        const precision = abs > 0 && abs < 0.01 ? 6 : 2;
        return `${
          discAmount
            .toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: precision })
            .replace(/(\.\d*?)0+$/, '$1')
            .replace(/\.$/, '') || '0'
        } ${currency?.symbol || ''}`;
      }
    }
    if ((item as any).discount_amounts?.length > 0 && currency) {
      return `${formatTokenAmount((item as any).discount_amounts[0].amount, currency)} ${currency.symbol}`;
    }
    return null;
  })();

  // Quantity controls
  const adjustable = item.adjustable_quantity?.enabled;
  const min = item.adjustable_quantity?.minimum || 1;
  const max = item.adjustable_quantity?.maximum;

  const [qtyInput, setQtyInput] = useState(String(quantity));
  const [isEditing, setIsEditing] = useState(false);
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
  const [featuresOpen, setFeaturesOpen] = useState(!isMobile);
  useEffect(() => {
    if (!isEditing) setQtyInput(String(quantity));
  }, [quantity, isEditing]);

  // Debounce quantity API calls — UI updates immediately, API fires after 400ms idle
  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const debouncedQuantityChange = useCallback(
    (priceId: string, qty: number) => {
      if (debounceRef.current) clearTimeout(debounceRef.current);
      debounceRef.current = setTimeout(() => {
        onQuantityChange(priceId, qty);
      }, 400);
    },
    [onQuantityChange]
  );
  useEffect(
    () => () => {
      if (debounceRef.current) clearTimeout(debounceRef.current);
    },
    []
  );

  // Upsell info
  const canUpsell = !!(item.price as any)?.upsell?.upsells_to;
  const isUpselled = !!(item as any).upsell_price;
  const upsellTo = (item.price as any)?.upsell?.upsells_to;

  let savingsPercent = 0;
  if (canUpsell && upsellTo) {
    const fromAmount = parseFloat((item.price as any)?.base_amount || (item.price as any)?.unit_amount || '0');
    const toAmount = parseFloat(upsellTo?.base_amount || upsellTo?.unit_amount || '0');
    const fromInterval = (item.price as any)?.recurring?.interval;
    const toInterval = upsellTo?.recurring?.interval;
    if (fromAmount > 0 && toAmount > 0 && fromInterval && toInterval) {
      const monthsMap: Record<string, number> = { day: 365, week: 52, month: 12, year: 1 };
      const fromYearly = fromAmount * (monthsMap[fromInterval] || 1);
      const toYearly = toAmount * (monthsMap[toInterval] || 1);
      if (fromYearly > toYearly) {
        savingsPercent = Math.round(((fromYearly - toYearly) / fromYearly) * 100);
      }
    }
  }

  // Upsell price display
  const upsellInterval = upsellTo?.recurring?.interval;
  const upsellPrice = (() => {
    if (!upsellTo) return '';
    const slashText = upsellInterval ? t('common.slash', { interval: t(`common.${upsellInterval}`) }) : '';
    if (upsellTo.pricing_type === 'dynamic' && upsellTo.base_amount && exchangeRate) {
      const rate = Number(exchangeRate);
      if (rate > 0 && Number.isFinite(rate)) {
        const baseUsd = parseFloat(upsellTo.base_amount);
        if (baseUsd > 0 && Number.isFinite(baseUsd)) {
          const tokenAmount = baseUsd / rate;
          const abs = Math.abs(tokenAmount);
          const precision = abs > 0 && abs < 0.01 ? 6 : 2;
          const formatted =
            tokenAmount
              .toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: precision })
              .replace(/(\.\d*?)0+$/, '$1')
              .replace(/\.$/, '') || '0';
          return `${formatted} ${currency?.symbol || ''} ${slashText}`;
        }
      }
    }
    if (upsellTo.pricing_type === 'dynamic' && upsellTo.base_amount && upsellTo.base_currency === 'USD') {
      const baseUsd = parseFloat(upsellTo.base_amount);
      const formattedUsd = baseUsd.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
      return `$${formattedUsd} ${slashText}`;
    }
    const upsellUnitFormatted = formatDynamicUnitPrice(upsellTo, currency, exchangeRate);
    return upsellUnitFormatted ? `${upsellUnitFormatted} ${currency?.symbol || ''} ${slashText}` : '';
  })();

  // Downsell price display
  const originalInterval = (item.price as any)?.recurring?.interval;
  const downsellPrice = (() => {
    if (!item.price || !isUpselled) return '';
    const originalPrice: any = item.price;
    const originalSlash = originalInterval ? t('common.slash', { interval: t(`common.${originalInterval}`) }) : '';
    if (originalPrice.pricing_type === 'dynamic' && originalPrice.base_amount && exchangeRate) {
      const rate = Number(exchangeRate);
      if (rate > 0 && Number.isFinite(rate)) {
        const baseUsd = parseFloat(originalPrice.base_amount);
        if (baseUsd > 0 && Number.isFinite(baseUsd)) {
          const tokenAmount = baseUsd / rate;
          const abs = Math.abs(tokenAmount);
          const precision = abs > 0 && abs < 0.01 ? 6 : 2;
          const formatted =
            tokenAmount
              .toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: precision })
              .replace(/(\.\d*?)0+$/, '$1')
              .replace(/\.$/, '') || '0';
          return `${formatted} ${currency?.symbol || ''} ${originalSlash}`;
        }
      }
    }
    if (
      originalPrice.pricing_type === 'dynamic' &&
      originalPrice.base_amount &&
      originalPrice.base_currency === 'USD'
    ) {
      const baseUsd = parseFloat(originalPrice.base_amount);
      const formattedUsd = baseUsd.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
      return `$${formattedUsd} ${originalSlash}`;
    }
    const unitFormatted = formatDynamicUnitPrice(originalPrice, currency, exchangeRate);
    return unitFormatted ? `${unitFormatted} ${currency?.symbol || ''} ${originalSlash}` : '';
  })();

  // Upsell toggle label
  const upsellToggleLabel = (() => {
    if (isUpselled) {
      const recurringLabel = originalInterval ? t(INTERVAL_LOCALE_KEY[originalInterval] || '') : '';
      return t('payment.checkout.upsell.revert', { recurring: recurringLabel });
    }
    const recurringLabel = upsellInterval ? t(INTERVAL_LOCALE_KEY[upsellInterval] || '') : '';
    return t('payment.checkout.upsell.save', { recurring: recurringLabel });
  })();

  return (
    <Box sx={{ position: 'relative' }}>
      {/* Recommended badge — top-right */}
      {recommended && (
        <Chip
          label="RECOMMENDED"
          size="small"
          sx={{
            position: 'absolute',
            top: 0,
            right: 40,
            transform: 'translateY(-50%)',
            zIndex: 1,
            height: 22,
            fontSize: 9,
            fontWeight: 900,
            letterSpacing: '0.12em',
            bgcolor: 'primary.main',
            color: (th: any) => primaryContrastColor(th),
            boxShadow: '0 4px 12px rgba(45,124,243,0.2)',
            '& .MuiChip-label': { px: 1.5 },
          }}
        />
      )}

      <Box
        sx={{
          p: { xs: 2, md: 3 },
          bgcolor: 'background.paper',
          borderRadius: { xs: '16px', md: '24px' },
          border: '1px solid',
          borderColor: 'divider',
          boxShadow: (th) =>
            th.palette.mode === 'dark' ? '0 12px 40px -8px rgba(0,0,0,0.3)' : '0 12px 40px -8px rgba(0,0,0,0.06)',
          transition: 'all 0.3s ease',
          ...(canUpsell && !hideUpsell ? { borderRadius: { xs: '16px 16px 0 0', md: '24px 24px 0 0' } } : {}),
          '&:hover': {
            borderColor: (th) => (th.palette.mode === 'dark' ? 'rgba(255,255,255,0.12)' : 'rgba(45,124,243,0.15)'),
          },
        }}>
        <Stack direction="row" spacing={{ xs: 1.5, md: 2.5 }} sx={{ alignItems: 'center', width: '100%' }}>
          {/* Product avatar */}
          {logo ? (
            <Avatar
              src={logo}
              alt={name}
              variant="rounded"
              sx={{
                width: { xs: 44, md: 64 },
                height: { xs: 44, md: 64 },
                borderRadius: { xs: '12px', md: '16px' },
                flexShrink: 0,
              }}
            />
          ) : (
            <Avatar
              variant="rounded"
              sx={{
                width: { xs: 44, md: 64 },
                height: { xs: 44, md: 64 },
                borderRadius: { xs: '12px', md: '16px' },
                bgcolor: (th) => (th.palette.mode === 'dark' ? 'rgba(255,255,255,0.06)' : '#eff6ff'),
                flexShrink: 0,
              }}>
              <ShoppingCartCheckoutIcon sx={{ fontSize: { xs: 22, md: 28 }, color: 'primary.main', opacity: 0.45 }} />
            </Avatar>
          )}

          <Box sx={{ flex: 1, minWidth: 0, overflow: 'hidden' }}>
            <Stack direction="row" justifyContent="space-between" alignItems="flex-start" sx={{ mb: 0.25 }}>
              <Box sx={{ minWidth: 0 }}>
                <Typography
                  sx={{ color: 'text.primary', fontWeight: 800, fontSize: { xs: 15, md: 18 }, lineHeight: 1.3 }}>
                  {name}
                </Typography>
                {/* Item type badge: subscription/one-time + interval */}
                <Typography
                  component="span"
                  sx={{
                    display: 'inline-block',
                    mt: 0.5,
                    fontSize: 10,
                    fontWeight: 700,
                    letterSpacing: '0.08em',
                    lineHeight: 1,
                    textTransform: 'uppercase',
                    color: 'primary.main',
                    bgcolor: (th) =>
                      th.palette.mode === 'dark' ? `${th.palette.primary.main}1A` : `${th.palette.primary.main}0D`,
                    px: 0.75,
                    py: 0.4,
                    borderRadius: '3px',
                  }}>
                  {typeBadgeText}
                </Typography>
                {subtitleText && (
                  <Typography sx={{ color: 'text.disabled', fontSize: 13, fontWeight: 500, mt: 0.25 }}>
                    {subtitleText}
                  </Typography>
                )}
              </Box>
              <Stack alignItems="flex-end" sx={{ flexShrink: 0, ml: 1.5 }}>
                {/* eslint-disable-next-line no-nested-ternary */}
                {trialActive && isSubscription ? (
                  <Typography
                    sx={{ fontWeight: 800, color: 'text.primary', whiteSpace: 'nowrap', fontSize: { xs: 15, md: 18 } }}>
                    {formatTrialText(t, trialDays, recurring?.interval || 'day')}
                  </Typography>
                ) : isRateLoading ? (
                  <Skeleton variant="text" width={100} height={28} />
                ) : (
                  <>
                    <Typography
                      sx={{
                        fontWeight: 800,
                        color: 'text.primary',
                        whiteSpace: 'nowrap',
                        fontSize: { xs: 15, md: 18 },
                        transition: 'opacity 0.3s ease',
                      }}>
                      {itemTotal} {currency?.symbol}
                      {priceIntervalSuffix}
                    </Typography>
                    {exchangeRate && activePrice?.base_amount && (
                      <Typography sx={{ fontSize: 12, color: 'text.disabled', fontWeight: 600, lineHeight: 1 }}>
                        ≈ ${(Number(activePrice.base_amount) * quantity).toFixed(2)}
                      </Typography>
                    )}
                  </>
                )}
              </Stack>
            </Stack>
          </Box>
        </Stack>

        {/* Product features — collapsible, default expanded */}
        {showFeatures && features.length > 0 && (
          <Box
            sx={{
              mt: { xs: 2, md: 2.5 },
              pt: { xs: 2, md: 2.5 },
              borderTop: '1px solid',
              borderColor: (th) => (th.palette.mode === 'dark' ? 'rgba(255,255,255,0.06)' : 'grey.100'),
            }}>
            <Stack
              direction="row"
              alignItems="center"
              justifyContent="space-between"
              onClick={() => setFeaturesOpen((v) => !v)}
              sx={{ cursor: 'pointer', userSelect: 'none', mb: featuresOpen ? 1.25 : 0 }}>
              <Typography sx={{ fontSize: 14, fontWeight: 700, color: 'text.primary' }}>
                {t('payment.checkout.planFeatures')}
              </Typography>
              <KeyboardArrowUpIcon
                sx={{
                  fontSize: 20,
                  color: 'text.secondary',
                  transition: 'transform 0.2s ease',
                  transform: featuresOpen ? 'rotate(0deg)' : 'rotate(180deg)',
                }}
              />
            </Stack>
            <Collapse in={featuresOpen}>
              <Stack spacing={1.25}>
                {features.map((feature) => (
                  <Stack key={feature.name} direction="row" spacing={1.5} alignItems="center">
                    <Box
                      sx={{
                        width: 20,
                        height: 20,
                        borderRadius: '50%',
                        bgcolor: (th) =>
                          th.palette.mode === 'dark' ? 'rgba(16,185,129,0.15)' : 'rgba(16,185,129,0.1)',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        flexShrink: 0,
                      }}>
                      <CheckIcon sx={{ fontSize: 14, color: 'success.main' }} />
                    </Box>
                    <Typography sx={{ fontSize: 14, fontWeight: 500, color: 'text.secondary' }}>
                      {feature.name}
                    </Typography>
                  </Stack>
                ))}
              </Stack>
            </Collapse>
          </Box>
        )}

        {/* Discount chip */}
        {discountCode && perItemDiscount && (
          <Box sx={{ mt: 1.5 }}>
            {isRateLoading ? (
              <Skeleton variant="rounded" width={160} height={22} sx={{ borderRadius: '6px' }} />
            ) : (
              <Chip
                icon={<LocalOfferIcon sx={{ color: 'warning.main', fontSize: 'small' }} />}
                label={`${discountCode} (-${perItemDiscount})`}
                size="small"
                sx={{ height: 22, borderRadius: '6px', '& .MuiChip-label': { fontSize: 12 } }}
              />
            )}
          </Box>
        )}

        {/* Quantity controls */}
        {adjustable && (
          <Stack direction="row" spacing={1} alignItems="center" sx={{ mt: 2 }}>
            <Typography sx={{ color: 'text.secondary', minWidth: 'fit-content', fontSize: 13, fontWeight: 500 }}>
              {t('common.quantity')}
            </Typography>
            <IconButton
              size="small"
              onClick={() => {
                const cur = parseInt(qtyInput, 10) || quantity;
                const newQty = cur - 1;
                if (newQty < min) return;
                setQtyInput(String(newQty));
                debouncedQuantityChange(item.price_id, newQty);
              }}
              disabled={(parseInt(qtyInput, 10) || quantity) <= min}
              sx={{
                width: 36,
                height: 36,
                border: '1px solid',
                borderColor: 'divider',
                borderRadius: '50%',
                '&:hover': { bgcolor: 'action.hover' },
              }}>
              <RemoveIcon sx={{ fontSize: 20 }} />
            </IconButton>
            <TextField
              value={qtyInput}
              size="small"
              type="number"
              slotProps={{
                htmlInput: {
                  style: {
                    textAlign: 'center',
                    padding: '6px 4px',
                    fontWeight: 700,
                    fontSize: 16,
                    MozAppearance: 'textfield',
                  } as React.CSSProperties,
                  min,
                  max: max || undefined,
                },
              }}
              sx={{
                minWidth: 64,
                '& input': { textAlign: 'center' },
                '& .MuiOutlinedInput-root': { borderRadius: '12px' },
                '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
                  WebkitAppearance: 'none',
                  margin: 0,
                },
                '& input[type=number]': {
                  MozAppearance: 'textfield',
                },
              }}
              onFocus={() => setIsEditing(true)}
              onChange={(e) => setQtyInput(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === 'Enter') {
                  e.preventDefault();
                  e.stopPropagation();
                  (e.target as HTMLInputElement).blur();
                }
              }}
              onBlur={() => {
                setIsEditing(false);
                const v = parseInt(qtyInput, 10);
                if (!Number.isNaN(v) && v >= min && (!max || v <= max) && v !== quantity) {
                  onQuantityChange(item.price_id, v);
                } else {
                  setQtyInput(String(quantity));
                }
              }}
            />
            <IconButton
              size="small"
              onClick={() => {
                const cur = parseInt(qtyInput, 10) || quantity;
                const newQty = cur + 1;
                if (max && newQty > max) return;
                setQtyInput(String(newQty));
                debouncedQuantityChange(item.price_id, newQty);
              }}
              disabled={max ? (parseInt(qtyInput, 10) || quantity) >= max : false}
              sx={{
                width: 36,
                height: 36,
                border: '1px solid',
                borderColor: 'divider',
                borderRadius: '50%',
                '&:hover': { bgcolor: 'action.hover' },
              }}>
              <AddIcon sx={{ fontSize: 20 }} />
            </IconButton>
          </Stack>
        )}

        {children}
      </Box>

      {/* Upsell toggle strip — seamless with card (hidden when promoted to top-level) */}
      {canUpsell && !hideUpsell && (
        <Box
          sx={{
            px: { xs: 2, md: 3 },
            py: 1.5,
            bgcolor: 'background.paper',
            border: '1px solid',
            borderTop: 0,
            borderColor: 'divider',
            borderRadius: { xs: '0 0 16px 16px', md: '0 0 24px 24px' },
            boxShadow: (th) =>
              th.palette.mode === 'dark' ? '0 12px 40px -8px rgba(0,0,0,0.3)' : '0 12px 40px -8px rgba(0,0,0,0.06)',
          }}>
          {/* Subtle divider */}
          <Box sx={{ borderTop: '1px solid', borderColor: 'divider', mb: 1.5 }} />
          <Stack direction="row" alignItems="center" justifyContent="space-between">
            <Stack direction="row" alignItems="center" spacing={1}>
              <Switch
                checked={isUpselled}
                onChange={async () => {
                  try {
                    if (isUpselled) {
                      await onDownsell((item as any).upsell_price?.id || (item.price as any).id);
                    } else {
                      await onUpsell(item.price_id, upsellTo.id);
                    }
                  } catch (err: any) {
                    Toast.error(err?.response?.data?.error || err?.message || 'Failed');
                  }
                }}
                size="small"
                sx={{
                  '& .MuiSwitch-switchBase.Mui-checked': { color: '#12b886' },
                  '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: '#12b886' },
                }}
              />
              <Typography
                sx={{ fontSize: 13, color: 'text.secondary', cursor: 'pointer', fontWeight: 600 }}
                onClick={async () => {
                  try {
                    if (isUpselled) await onDownsell((item as any).upsell_price?.id || (item.price as any).id);
                    else await onUpsell(item.price_id, upsellTo.id);
                  } catch (err: any) {
                    Toast.error(err?.response?.data?.error || err?.message || 'Failed');
                  }
                }}>
                {upsellToggleLabel}
              </Typography>
              {!isUpselled && savingsPercent > 0 && (
                <Chip
                  label={t('payment.checkout.upsell.off', { saving: savingsPercent })}
                  size="small"
                  sx={{
                    height: 22,
                    fontSize: 11,
                    fontWeight: 700,
                    bgcolor: (th) => (th.palette.mode === 'dark' ? 'rgba(18,184,134,0.1)' : '#ebfef5'),
                    color: '#12b886',
                    border: '1px solid',
                    borderColor: (th) => (th.palette.mode === 'dark' ? 'rgba(18,184,134,0.2)' : '#d3f9e8'),
                    borderRadius: '9999px',
                    '& .MuiChip-label': { px: 1 },
                  }}
                />
              )}
            </Stack>
            <Typography sx={{ fontSize: 13, color: 'text.primary', whiteSpace: 'nowrap', fontWeight: 700 }}>
              {isUpselled ? downsellPrice : upsellPrice}
            </Typography>
          </Stack>
        </Box>
      )}
    </Box>
  );
}