import { useRouter } from "../../router/RouteContext.js";
import { useClipboard } from "../../hooks/useClipboard.js";
import { localizationKeys } from "../../localization/localizationKeys.js";
import check_default from "../../icons/check.js";
import copy_default from "../../icons/copy.js";
import { useSubscriberTypeContext, useSubscriberTypeLocalizationRoot } from "../../contexts/components/SubscriberType.js";
import { useLocalizations } from "../../localization/makeLocalizable.js";
import { descriptors } from "../../customizables/elementDescriptors.js";
import { Badge, Box, Button, Heading, Icon, Span, Spinner, Text } from "../../customizables/index.js";
import { Alert } from "../../elements/Alert.js";
import { Header } from "../../elements/Header.js";
import { truncateWithEndVisible } from "../../utils/truncateTextWithEndVisible.js";
import { LineItems } from "../../elements/LineItems.js";
import { formatDate } from "../../utils/formatDate.js";
import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
import { __internal_usePaymentAttemptQuery } from "@clerk/shared/react/index";

//#region src/components/PaymentAttempts/PaymentAttemptPage.tsx
const PaymentAttemptPage = () => {
	const { params, navigate } = useRouter();
	const subscriberType = useSubscriberTypeContext();
	const localizationRoot = useSubscriberTypeLocalizationRoot();
	const { t, translateError } = useLocalizations();
	const requesterType = subscriberType === "organization" ? "organization" : "user";
	const { data: paymentAttempt, isLoading, error } = __internal_usePaymentAttemptQuery({
		paymentAttemptId: params.paymentAttemptId,
		for: requesterType,
		enabled: Boolean(params.paymentAttemptId)
	});
	const subscriptionItem = paymentAttempt?.subscriptionItem;
	if (isLoading) return /* @__PURE__ */ jsx(Box, {
		sx: {
			display: "flex",
			justifyContent: "center",
			alignItems: "center",
			height: "100%"
		},
		children: /* @__PURE__ */ jsx(Spinner, {
			colorScheme: "primary",
			sx: {
				margin: "auto",
				display: "block"
			},
			elementDescriptor: descriptors.spinner
		})
	});
	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Header.Root, {
		sx: (t$1) => ({
			borderBlockEndWidth: t$1.borderWidths.$normal,
			borderBlockEndStyle: t$1.borderStyles.$solid,
			borderBlockEndColor: t$1.colors.$borderAlpha100,
			marginBlockEnd: t$1.space.$4,
			paddingBlockEnd: t$1.space.$4
		}),
		children: /* @__PURE__ */ jsx(Header.BackLink, {
			onClick: () => void navigate("../../", { searchParams: new URLSearchParams("tab=payments") }),
			children: /* @__PURE__ */ jsx(Header.Title, {
				localizationKey: localizationKeys(`${localizationRoot}.billingPage.start.headerTitle__payments`),
				textVariant: "h2"
			})
		})
	}), !paymentAttempt ? /* @__PURE__ */ jsx(Box, {
		sx: {
			display: "flex",
			justifyContent: "center",
			alignItems: "center",
			height: "100%"
		},
		children: /* @__PURE__ */ jsx(Alert, {
			variant: "danger",
			colorScheme: "danger",
			children: error ? translateError(error.errors[0]) : t(localizationKeys(`${localizationRoot}.billingPage.paymentHistorySection.notFound`))
		})
	}) : /* @__PURE__ */ jsxs(Box, {
		elementDescriptor: descriptors.paymentAttemptRoot,
		as: "article",
		sx: (t$1) => ({
			borderWidth: t$1.borderWidths.$normal,
			borderStyle: t$1.borderStyles.$solid,
			borderColor: t$1.colors.$borderAlpha100,
			borderRadius: t$1.radii.$lg,
			overflow: "clip"
		}),
		children: [
			/* @__PURE__ */ jsxs(Box, {
				elementDescriptor: descriptors.paymentAttemptHeader,
				as: "header",
				sx: (t$1) => ({
					padding: t$1.space.$4,
					background: t$1.colors.$neutralAlpha25,
					display: "flex",
					justifyContent: "space-between",
					alignItems: "flex-start"
				}),
				children: [/* @__PURE__ */ jsxs(Span, {
					elementDescriptor: descriptors.paymentAttemptHeaderTitleContainer,
					children: [/* @__PURE__ */ jsx(Heading, {
						elementDescriptor: descriptors.paymentAttemptHeaderTitle,
						textVariant: "h2",
						localizationKey: formatDate(paymentAttempt.paidAt || paymentAttempt.failedAt || paymentAttempt.updatedAt, "long")
					}), /* @__PURE__ */ jsxs(Span, {
						sx: (t$1) => ({
							display: "flex",
							alignItems: "center",
							gap: t$1.space.$0x25,
							color: t$1.colors.$colorMutedForeground
						}),
						children: [/* @__PURE__ */ jsx(CopyButton, {
							copyLabel: "Copy payment attempt ID",
							text: paymentAttempt.id
						}), /* @__PURE__ */ jsx(Text, {
							colorScheme: "secondary",
							variant: "subtitle",
							children: truncateWithEndVisible(paymentAttempt.id)
						})]
					})]
				}), /* @__PURE__ */ jsx(Badge, {
					elementDescriptor: descriptors.paymentAttemptHeaderBadge,
					colorScheme: paymentAttempt.status === "paid" ? "success" : paymentAttempt.status === "failed" ? "danger" : "primary",
					sx: { textTransform: "capitalize" },
					children: paymentAttempt.status
				})]
			}),
			/* @__PURE__ */ jsx(PaymentAttemptBody, { subscriptionItem }),
			/* @__PURE__ */ jsxs(Box, {
				elementDescriptor: descriptors.paymentAttemptFooter,
				as: "footer",
				sx: (t$1) => ({
					paddingInline: t$1.space.$4,
					paddingBlock: t$1.space.$3,
					background: t$1.colors.$neutralAlpha25,
					borderBlockStartWidth: t$1.borderWidths.$normal,
					borderBlockStartStyle: t$1.borderStyles.$solid,
					borderBlockStartColor: t$1.colors.$borderAlpha100,
					display: "flex",
					justifyContent: "space-between"
				}),
				children: [/* @__PURE__ */ jsx(Text, {
					variant: "h3",
					localizationKey: localizationKeys("billing.totalDue"),
					elementDescriptor: descriptors.paymentAttemptFooterLabel
				}), /* @__PURE__ */ jsxs(Span, {
					elementDescriptor: descriptors.paymentAttemptFooterValueContainer,
					sx: (t$1) => ({
						display: "flex",
						alignItems: "center",
						gap: t$1.space.$2x5
					}),
					children: [/* @__PURE__ */ jsx(Text, {
						variant: "caption",
						colorScheme: "secondary",
						elementDescriptor: descriptors.paymentAttemptFooterCurrency,
						sx: { textTransform: "uppercase" },
						children: paymentAttempt.amount.currency
					}), /* @__PURE__ */ jsxs(Text, {
						variant: "h3",
						elementDescriptor: descriptors.paymentAttemptFooterValue,
						children: [paymentAttempt.amount.currencySymbol, paymentAttempt.amount.amountFormatted]
					})]
				})]
			})
		]
	})] });
};
function PaymentAttemptBody({ subscriptionItem }) {
	if (!subscriptionItem) return null;
	const fee = subscriptionItem.planPeriod === "month" ? subscriptionItem.plan.fee : subscriptionItem.plan.annualMonthlyFee;
	return /* @__PURE__ */ jsx(Box, {
		elementDescriptor: descriptors.paymentAttemptBody,
		sx: (t) => ({ padding: t.space.$4 }),
		children: /* @__PURE__ */ jsxs(LineItems.Root, { children: [
			/* @__PURE__ */ jsxs(LineItems.Group, { children: [/* @__PURE__ */ jsx(LineItems.Title, { title: subscriptionItem.plan.name }), /* @__PURE__ */ jsx(LineItems.Description, {
				prefix: subscriptionItem.planPeriod === "annual" ? "x12" : void 0,
				text: `${fee.currencySymbol}${fee.amountFormatted}`
			})] }),
			/* @__PURE__ */ jsxs(LineItems.Group, {
				borderTop: true,
				variant: "tertiary",
				children: [/* @__PURE__ */ jsx(LineItems.Title, { title: localizationKeys("billing.subtotal") }), /* @__PURE__ */ jsx(LineItems.Description, { text: `${subscriptionItem.amount?.currencySymbol}${subscriptionItem.amount?.amountFormatted}` })]
			}),
			subscriptionItem.credits && subscriptionItem.credits.proration && subscriptionItem.credits.proration.amount.amount > 0 && /* @__PURE__ */ jsxs(LineItems.Group, {
				variant: "tertiary",
				children: [/* @__PURE__ */ jsx(LineItems.Title, { title: localizationKeys("billing.prorationCredit") }), /* @__PURE__ */ jsx(LineItems.Description, { text: `- ${subscriptionItem.credits.proration.amount.currencySymbol}${subscriptionItem.credits.proration.amount.amountFormatted}` })]
			}),
			subscriptionItem.credits && subscriptionItem.credits.payer && subscriptionItem.credits.payer.appliedAmount.amount > 0 && /* @__PURE__ */ jsxs(LineItems.Group, {
				variant: "tertiary",
				children: [/* @__PURE__ */ jsx(LineItems.Title, { title: localizationKeys("billing.accountCredit") }), /* @__PURE__ */ jsx(LineItems.Description, { text: `- ${subscriptionItem.credits.payer.appliedAmount.currencySymbol}${subscriptionItem.credits.payer.appliedAmount.amountFormatted}` })]
			})
		] })
	});
}
function CopyButton({ text, copyLabel = "Copy" }) {
	const { onCopy, hasCopied } = useClipboard(text);
	return /* @__PURE__ */ jsx(Button, {
		elementDescriptor: descriptors.paymentAttemptCopyButton,
		variant: "unstyled",
		onClick: () => onCopy(),
		sx: (t) => ({
			color: "inherit",
			width: t.sizes.$4,
			height: t.sizes.$4,
			padding: 0,
			borderRadius: t.radii.$sm,
			"&:focus-visible": {
				outline: "2px solid",
				outlineColor: t.colors.$colorRing
			}
		}),
		focusRing: false,
		"aria-label": hasCopied ? "Copied" : copyLabel,
		children: /* @__PURE__ */ jsx(Icon, {
			size: "sm",
			icon: hasCopied ? check_default : copy_default,
			"aria-hidden": true
		})
	});
}

//#endregion
export { PaymentAttemptPage };
//# sourceMappingURL=PaymentAttemptPage.js.map