import { jsx, jsxs } from "react/jsx-runtime";
import { Stack, Typography, TextField, Card } from "@mui/material";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import { useState, useMemo } from "react";
import ProductCard from "../../payment/product-card.js";
import {
  formatPrice,
  formatNumber,
  formatDynamicPrice,
  formatUsdAmount,
  formatExchangeRate,
  formatToDatetime,
  formatCreditForCheckout
} from "../../libs/util.js";
import QuoteDetailsPanel from "../quote-details-panel.js";
export default function AutoTopupProductCard({
  product,
  price,
  currency,
  quantity,
  onQuantityChange,
  maxQuantity = 99,
  minQuantity = 1,
  creditCurrency,
  exchangeRate = null,
  isDynamicPricing = false,
  exchangeRateData = null,
  slippageConfig = null,
  slippagePercent = 0.5,
  onSlippageChange = void 0,
  disabled = false
}) {
  const { t, locale } = useLocaleContext();
  const [localQuantity, setLocalQuantity] = useState(quantity);
  const localQuantityNum = Number(localQuantity) || 0;
  const { paymentAmount, usdReferenceDisplay } = useMemo(() => {
    if (!isDynamicPricing || !exchangeRate || !price?.base_amount) {
      return {
        paymentAmount: formatPrice(price, currency, product?.unit_label, localQuantity, true),
        usdReferenceDisplay: null
      };
    }
    const baseAmount = Number(price.base_amount) * localQuantityNum;
    const rate = Number(exchangeRate);
    if (rate <= 0 || !Number.isFinite(baseAmount)) {
      return {
        paymentAmount: formatPrice(price, currency, product?.unit_label, localQuantity, true),
        usdReferenceDisplay: null
      };
    }
    const tokenAmount = baseAmount / rate;
    const formattedToken = formatDynamicPrice(tokenAmount, true, 6);
    const formattedUsd = formatUsdAmount(baseAmount.toString(), locale);
    return {
      paymentAmount: `${formattedToken} ${currency.symbol}`,
      usdReferenceDisplay: formattedUsd ? `\u2248 $${formattedUsd}` : null
    };
  }, [isDynamicPricing, exchangeRate, price, currency, product?.unit_label, localQuantity, localQuantityNum, locale]);
  const handleQuantityChange = (newQuantity) => {
    if (!newQuantity) {
      setLocalQuantity(void 0);
      return;
    }
    if (newQuantity >= minQuantity && newQuantity <= maxQuantity) {
      setLocalQuantity(newQuantity);
      onQuantityChange(newQuantity);
    }
  };
  const handleQuantityInputChange = (event) => {
    const value = parseInt(event.target.value || "0", 10);
    if (!Number.isNaN(value)) {
      handleQuantityChange(value);
    }
  };
  const creditUnitAmount = Number(price.metadata?.credit_config?.credit_amount || 0);
  return /* @__PURE__ */ jsxs(Card, { variant: "outlined", sx: { p: 2 }, children: [
    /* @__PURE__ */ jsxs(
      Stack,
      {
        direction: "row",
        spacing: 2,
        sx: {
          flexDirection: {
            xs: "column",
            sm: "row"
          },
          alignItems: {
            xs: "flex-start",
            sm: "center"
          },
          justifyContent: {
            xs: "flex-start",
            sm: "space-between"
          }
        },
        children: [
          /* @__PURE__ */ jsx(
            Stack,
            {
              direction: "row",
              spacing: 2,
              sx: {
                alignItems: "center",
                flex: 1
              },
              children: /* @__PURE__ */ jsx(
                ProductCard,
                {
                  name: product?.name || "",
                  description: t("payment.autoTopup.creditsIncluded", {
                    num: formatCreditForCheckout(
                      formatNumber(creditUnitAmount * localQuantityNum),
                      creditCurrency?.symbol || "",
                      locale
                    )
                  }),
                  logo: product?.images?.[0],
                  size: 40
                }
              )
            }
          ),
          /* @__PURE__ */ jsxs(
            Stack,
            {
              direction: "row",
              spacing: 1,
              sx: {
                alignItems: "center",
                alignSelf: {
                  xs: "flex-end",
                  sm: "center"
                }
              },
              children: [
                /* @__PURE__ */ jsxs(
                  Typography,
                  {
                    variant: "body2",
                    sx: {
                      color: "text.secondary",
                      minWidth: "fit-content"
                    },
                    children: [
                      t("common.quantity"),
                      ":"
                    ]
                  }
                ),
                /* @__PURE__ */ jsx(
                  TextField,
                  {
                    size: "small",
                    value: localQuantity,
                    onChange: handleQuantityInputChange,
                    type: "number",
                    sx: {
                      "& .MuiInputBase-root": {
                        height: 32
                      }
                    },
                    slotProps: {
                      htmlInput: {
                        min: 0,
                        max: maxQuantity,
                        style: { textAlign: "center", padding: "4px 8px" }
                      }
                    }
                  }
                )
              ]
            }
          )
        ]
      }
    ),
    /* @__PURE__ */ jsxs(
      Stack,
      {
        direction: "row",
        sx: {
          justifyContent: "space-between",
          alignItems: "flex-start",
          mt: 2,
          pt: 2,
          borderTop: "1px solid",
          borderColor: "divider"
        },
        children: [
          /* @__PURE__ */ jsx(
            Typography,
            {
              variant: "body2",
              sx: {
                color: "text.secondary"
              },
              children: t("payment.autoTopup.rechargeAmount")
            }
          ),
          /* @__PURE__ */ jsxs(Stack, { sx: { alignItems: "flex-end" }, children: [
            /* @__PURE__ */ jsx(
              Typography,
              {
                variant: "h6",
                sx: {
                  fontWeight: 600,
                  color: "text.primary"
                },
                children: paymentAmount
              }
            ),
            usdReferenceDisplay && /* @__PURE__ */ jsx(
              Typography,
              {
                sx: {
                  fontSize: "0.7875rem",
                  color: "text.lighter"
                },
                children: usdReferenceDisplay
              }
            ),
            isDynamicPricing && exchangeRateData?.rate && /* @__PURE__ */ jsx(
              QuoteDetailsPanel,
              {
                rateLine: t("payment.checkout.quote.rateLine", {
                  symbol: currency.symbol,
                  rate: `$${formatExchangeRate(exchangeRateData.rate) || exchangeRateData.rate}`
                }),
                rows: [
                  {
                    label: t("payment.checkout.quote.detailProvider"),
                    value: exchangeRateData?.provider_display || exchangeRateData?.provider_name || "\u2014"
                  },
                  {
                    label: t("payment.checkout.quote.detailUpdatedAt"),
                    value: exchangeRateData?.timestamp_ms ? formatToDatetime(exchangeRateData.timestamp_ms, locale) : "\u2014"
                  },
                  {
                    label: t("payment.checkout.quote.detailSlippage"),
                    value: slippageConfig?.mode === "rate" && slippageConfig.min_acceptable_rate ? `$${formatExchangeRate(slippageConfig.min_acceptable_rate) || slippageConfig.min_acceptable_rate}` : `${slippageConfig?.percent ?? slippagePercent}%`,
                    isSlippage: true
                  }
                ],
                isSubscription: true,
                slippageValue: slippageConfig?.percent ?? slippagePercent,
                slippageConfig: slippageConfig || void 0,
                onSlippageChange,
                exchangeRate: exchangeRateData?.rate,
                baseCurrency: "USD",
                disabled
              }
            )
          ] })
        ]
      }
    )
  ] });
}
