"use client"

import { dmSans125ClassName } from "@/lib/fonts"
import { PLAN_DISPLAY_NAMES, useTokenUsage } from "@/hooks/use-token-usage"
import { cn } from "@lib/utils"
import { useAuth } from "@lib/auth-context"
import {
	Dialog,
	DialogClose,
	DialogContent,
	DialogTrigger,
} from "@ui/components/dialog"
import { useQuery, useQueryClient } from "@tanstack/react-query"
import { useCustomer } from "autumn-js/react"
import {
	Coins,
	ExternalLink,
	LoaderIcon,
	Plus,
	ReceiptText,
	Settings,
	X,
} from "lucide-react"
import { useEffect, useMemo, useState } from "react"
import { toast } from "sonner"

const API_BASE =
	process.env.NEXT_PUBLIC_BACKEND_URL ?? "https://api.supermemory.ai"

const CREDIT_FEATURE_ID = "usd_credits"
const TOP_UP_PLAN_ID = "credits_topup"
const TOP_UP_AMOUNTS = [10, 25, 50, 100] as const

type BillingInvoice = {
	planIds?: string[]
	stripeId: string
	status: string
	total: number
	currency: string
	createdAt: number
	hostedInvoiceUrl?: string | null
}

type AutoTopupConfig = {
	featureId: string
	enabled: boolean
	threshold: number
	quantity: number
	purchaseLimit: {
		interval: "hour" | "day" | "week" | "month"
		intervalCount: number
		limit: number
	} | null
}

type AutoTopupsResponse =
	| {
			ok: true
			hasPaymentMethod: boolean
			autoTopup: AutoTopupConfig | null
	  }
	| { ok: false; reason: string; message?: string }

function SectionTitle({
	children,
	aside,
}: {
	children: React.ReactNode
	aside?: React.ReactNode
}) {
	return (
		<div className="flex items-center justify-between gap-3 px-2">
			<p
				className={cn(
					dmSans125ClassName(),
					"font-semibold text-[20px] tracking-[-0.2px] text-[#FAFAFA]",
				)}
			>
				{children}
			</p>
			{aside}
		</div>
	)
}

function SettingsCard({
	children,
	className,
}: {
	children: React.ReactNode
	className?: string
}) {
	return (
		<div
			className={cn(
				"relative w-full overflow-hidden rounded-[14px] bg-[#14161A] p-5",
				"shadow-[inset_2.42px_2.42px_4.263px_rgba(11,15,21,0.7)]",
				className,
			)}
		>
			{children}
		</div>
	)
}

function Pill({
	children,
	tone = "muted",
}: {
	children: React.ReactNode
	tone?: "active" | "muted" | "warning"
}) {
	return (
		<span
			className={cn(
				"inline-flex h-[18px] shrink-0 items-center rounded-[3px] px-1.5 text-[10px] font-bold uppercase tracking-[0.36px]",
				tone === "active" && "bg-[#4BA0FA] text-[#00171A]",
				tone === "muted" && "bg-[#2E353D] text-[#A3A3A3]",
				tone === "warning" && "bg-[#290F0A] text-[#C73B1B]",
			)}
		>
			{children}
		</span>
	)
}

function FieldSelect({
	value,
	values,
	prefix,
	onChange,
	disabled,
}: {
	value: number
	values: readonly number[]
	prefix?: string
	onChange: (value: number) => void
	disabled?: boolean
}) {
	const cols = values.length <= 3 ? "grid-cols-3" : "grid-cols-4"
	return (
		<div
			className={cn(
				"grid gap-1 rounded-[10px] border border-white/10 bg-[#0D121A] p-1",
				cols,
			)}
		>
			{values.map((item) => (
				<button
					key={item}
					type="button"
					disabled={disabled}
					onClick={() => onChange(item)}
					className={cn(
						dmSans125ClassName(),
						"h-8 rounded-[7px] text-[13px] font-semibold tabular-nums transition-colors",
						item === value
							? "bg-[#1C2B3E] text-[#FAFAFA]"
							: "text-[#737373] hover:bg-white/[0.04] hover:text-[#A3A3A3]",
						disabled && "cursor-not-allowed opacity-50",
					)}
				>
					{prefix}
					{item}
				</button>
			))}
		</div>
	)
}

function formatUsd(value: number) {
	return value.toLocaleString(undefined, {
		style: "currency",
		currency: "USD",
		minimumFractionDigits: 2,
		maximumFractionDigits: 2,
	})
}

function formatInvoiceAmount(total: number, currency: string) {
	const normalizedTotal =
		Number.isInteger(total) && total > 100 ? total / 100 : total
	return normalizedTotal.toLocaleString(undefined, {
		style: "currency",
		currency: currency?.toUpperCase() || "USD",
		minimumFractionDigits: 2,
		maximumFractionDigits: 2,
	})
}

function formatDate(timestamp: number) {
	return new Intl.DateTimeFormat(undefined, {
		month: "short",
		day: "numeric",
		year: "numeric",
	}).format(new Date(timestamp))
}

function normalizeTimestamp(timestamp: number) {
	return timestamp < 10_000_000_000 ? timestamp * 1000 : timestamp
}

function getStatusTone(status: string): "active" | "muted" | "warning" {
	const normalized = status.toLowerCase()
	if (normalized === "paid" || normalized === "succeeded") return "active"
	if (normalized === "open" || normalized === "draft") return "muted"
	return "warning"
}

function getInvoiceProductLabel(productId: string | undefined): string {
	if (!productId) return "Billing invoice"
	if (productId === TOP_UP_PLAN_ID || productId === "api_topup")
		return "Credits top-up"
	const planMap: Record<string, string> = {
		api_free: "Free",
		api_pro: "Pro",
		api_scale: "Scale",
		api_enterprise: "Enterprise",
		memory_free: "Free",
		memory_starter: "Pro",
		memory_growth: "Scale",
		memory_enterprise: "Enterprise",
	}
	if (planMap[productId]) return planMap[productId]
	return productId
		.split("_")
		.map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
		.join(" ")
}

export default function Billing() {
	const queryClient = useQueryClient()
	const { user, org } = useAuth()
	const autumn = useCustomer({ expand: ["payment_method"] })
	const [isUpgrading, setIsUpgrading] = useState(false)
	const [isCancelling, setIsCancelling] = useState(false)
	const [isCancelDialogOpen, setIsCancelDialogOpen] = useState(false)
	const [isCreditsDialogOpen, setIsCreditsDialogOpen] = useState(false)
	const [topUpAmount, setTopUpAmount] = useState<number>(25)
	const [customTopUpAmount, setCustomTopUpAmount] = useState("")
	const [topUpPendingAmount, setTopUpPendingAmount] = useState<number | null>(
		null,
	)
	const [autoTopUpEnabled, setAutoTopUpEnabled] = useState(false)
	const [autoTopUpThreshold, setAutoTopUpThreshold] = useState<number>(5)
	const [autoTopUpAmount, setAutoTopUpAmount] = useState<number>(25)
	const [isSavingAutoTopUp, setIsSavingAutoTopUp] = useState(false)

	const currentMember = org?.members?.find(
		(m: { userId: string }) => m.userId === user?.id,
	)
	const userRole = (currentMember?.role ?? "member") as string
	const isAdmin = userRole === "owner" || userRole === "admin"

	const {
		usdIncluded,
		usdSpent,
		planUsagePct,
		currentPlan,
		hasPaidPlan,
		isLoading: isCheckingStatus,
		daysRemaining,
	} = useTokenUsage(autumn)

	const balance = autumn.data?.balances?.[CREDIT_FEATURE_ID]
	const creditRemaining =
		balance?.remaining ?? Math.max(usdIncluded - usdSpent, 0)

	// --- Invoices via dedicated billing API (matches console) ---
	const invoicesQuery = useQuery({
		queryKey: ["billing", org?.id ?? "", "invoices"],
		queryFn: async () => {
			const res = await fetch(`${API_BASE}/v3/auth/billing/invoices`, {
				credentials: "include",
				headers: { "X-App-Source": "nova" },
			})
			if (!res.ok) return []
			const data = (await res.json()) as { invoices?: BillingInvoice[] }
			return data.invoices ?? []
		},
		enabled: Boolean(org?.id),
		staleTime: 60_000,
	})
	const invoices = useMemo(() => {
		return [...(invoicesQuery.data ?? [])].sort(
			(a, b) => b.createdAt - a.createdAt,
		)
	}, [invoicesQuery.data])

	// --- Auto top-ups via dedicated billing API (matches console) ---
	const autoTopupsQuery = useQuery({
		queryKey: ["billing", org?.id ?? "", "auto-topups"],
		queryFn: async () => {
			const res = await fetch(`${API_BASE}/v3/auth/billing/auto-topups`, {
				credentials: "include",
				headers: { "X-App-Source": "nova" },
			})
			if (!res.ok) return null
			return (await res.json()) as AutoTopupsResponse
		},
		enabled: Boolean(org?.id),
		staleTime: 20_000,
	})

	const autoTopupData =
		autoTopupsQuery.data &&
		"ok" in autoTopupsQuery.data &&
		autoTopupsQuery.data.ok
			? autoTopupsQuery.data
			: null
	const hasPaymentMethod = Boolean(autoTopupData?.hasPaymentMethod)
	const activeAutoTopUp = autoTopupData?.autoTopup ?? null
	const selectedTopUpAmount = customTopUpAmount
		? Number.parseFloat(customTopUpAmount) || 0
		: topUpAmount

	useEffect(() => {
		if (!autoTopupData) return
		if (!activeAutoTopUp) {
			setAutoTopUpEnabled(false)
			return
		}
		setAutoTopUpEnabled(activeAutoTopUp.enabled)
		setAutoTopUpThreshold(activeAutoTopUp.threshold)
		setAutoTopUpAmount(activeAutoTopUp.quantity)
	}, [activeAutoTopUp, autoTopupData])

	useEffect(() => {
		if (!hasPaymentMethod && !activeAutoTopUp?.enabled) {
			setAutoTopUpEnabled(false)
		}
	}, [activeAutoTopUp?.enabled, hasPaymentMethod])

	const planDisplayNames = PLAN_DISPLAY_NAMES

	const handleUpgrade = async () => {
		setIsUpgrading(true)
		try {
			const result = await autumn.attach({
				planId: "api_pro",
				successUrl: `${window.location.origin}/settings#billing`,
			})
			if ((result as { paymentUrl?: string })?.paymentUrl) {
				window.location.href = (result as { paymentUrl: string }).paymentUrl
				return
			}
			autumn.refetch?.()
		} catch (error) {
			console.error(error)
			toast.error("Failed to start checkout. Please try again.")
		} finally {
			setIsUpgrading(false)
		}
	}

	const cancellablePlanId =
		currentPlan === "pro" || currentPlan === "scale"
			? (`api_${currentPlan}` as const)
			: null

	const handleCancelSubscription = async () => {
		if (!cancellablePlanId) return
		setIsCancelling(true)
		try {
			await autumn.updateSubscription({
				planId: cancellablePlanId,
				cancelAction: "cancel_end_of_cycle",
			})
			autumn.refetch?.()
			setIsCancelDialogOpen(false)
			toast.success(
				`Subscription cancelled. ${planDisplayNames[currentPlan]} features remain active until the end of your billing period.`,
			)
		} catch (error) {
			console.error(error)
			toast.error("Failed to cancel subscription. Please try again.")
		} finally {
			setIsCancelling(false)
		}
	}

	const handleTopUp = async (amount: number) => {
		if (!isAdmin) {
			toast.error("Only owners/admins can purchase credits.")
			return
		}
		if (!hasPaidPlan) {
			toast.error("Upgrade to a paid plan before purchasing credits.")
			return
		}
		setTopUpPendingAmount(amount)
		try {
			const result = await autumn.attach({
				planId: TOP_UP_PLAN_ID,
				featureQuantities: [{ featureId: CREDIT_FEATURE_ID, quantity: amount }],
				successUrl: `${window.location.origin}/settings#billing`,
				metadata: {
					source: "nova_billing_topup",
					amount: String(amount),
				},
			})
			if ((result as { paymentUrl?: string })?.paymentUrl) {
				window.location.href = (result as { paymentUrl: string }).paymentUrl
				return
			}
			autumn.refetch?.()
			toast.success(`${formatUsd(amount)} credit top-up added.`)
		} catch (error) {
			console.error(error)
			toast.error("Failed to start top-up checkout. Please try again.")
		} finally {
			setTopUpPendingAmount(null)
		}
	}

	const handleAutoReloadToggle = (next: boolean) => {
		if (next && !hasPaymentMethod) {
			toast.error(
				"Add a payment method under Manage Billing before enabling auto reload.",
			)
			return
		}
		setAutoTopUpEnabled(next)
	}

	const handleSaveAutoTopUp = async () => {
		if (!isAdmin) {
			toast.error("Only owners/admins can change auto top-up settings.")
			return
		}
		if (autoTopUpEnabled && !hasPaymentMethod) {
			toast.error(
				"Add a payment method under Manage Billing before enabling auto top-up.",
			)
			return
		}
		setIsSavingAutoTopUp(true)
		try {
			const response = await fetch(`${API_BASE}/v3/auth/billing/auto-topups`, {
				method: "POST",
				credentials: "include",
				headers: {
					"Content-Type": "application/json",
					"X-App-Source": "nova",
				},
				body: JSON.stringify({
					enabled: autoTopUpEnabled,
					threshold: autoTopUpThreshold,
					quantity: autoTopUpAmount,
					purchaseLimit: {
						interval: "month" as const,
						intervalCount: 1,
						limit: 10,
					},
				}),
			})

			if (!response.ok) {
				const body = (await response.json().catch(() => ({}))) as {
					message?: string
				}
				throw new Error(body.message ?? "Failed to update auto top-up")
			}

			await queryClient.invalidateQueries({
				queryKey: ["billing", org?.id ?? "", "auto-topups"],
			})
			await queryClient.invalidateQueries({ queryKey: ["autumn"] })
			autumn.refetch?.()
			toast.success(
				autoTopUpEnabled
					? "Auto top-up settings saved."
					: "Auto top-up disabled.",
			)
		} catch (error) {
			console.error(error)
			toast.error(
				error instanceof Error
					? error.message
					: "Failed to update auto top-up.",
			)
		} finally {
			setIsSavingAutoTopUp(false)
		}
	}

	const handleManageBilling = () => {
		autumn.openCustomerPortal?.({
			returnUrl: `${window.location.origin}/settings#billing`,
		})
	}

	return (
		<div className="flex w-full flex-col gap-7">
			<section id="billing-subscription" className="flex flex-col gap-4">
				<SectionTitle>Billing &amp; Subscription</SectionTitle>
				<SettingsCard>
					<div className="flex flex-col gap-5">
						<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
							<div className="min-w-0">
								<div className="flex items-center gap-3">
									<p
										className={cn(
											dmSans125ClassName(),
											"font-semibold text-[18px] tracking-[-0.18px] text-[#FAFAFA]",
										)}
									>
										{hasPaidPlan
											? `${planDisplayNames[currentPlan]} plan`
											: "Free plan"}
									</p>
									<Pill tone={hasPaidPlan ? "active" : "muted"}>
										{hasPaidPlan ? "Active" : "Free"}
									</Pill>
								</div>
								<p
									className={cn(
										dmSans125ClassName(),
										"mt-1 text-[13px] leading-relaxed text-[#A3A3A3]",
									)}
								>
									{hasPaidPlan
										? "Expanded memory, connections, and usage for this workspace."
										: "Upgrade when you need more workspace usage and integrations."}
								</p>
							</div>

							<div className="flex shrink-0 items-center gap-2">
								<button
									type="button"
									onClick={handleManageBilling}
									className={cn(
										dmSans125ClassName(),
										"inline-flex h-9 items-center gap-2 rounded-[9px] border border-white/10 bg-[#0D121A] px-3 text-[13px] font-medium text-[#FAFAFA] transition-colors hover:bg-[#121A24]",
									)}
								>
									<Settings className="size-3.5 text-[#737373]" />
									Manage
								</button>
								{cancellablePlanId ? (
									<Dialog
										open={isCancelDialogOpen}
										onOpenChange={setIsCancelDialogOpen}
									>
										<DialogTrigger asChild>
											<button
												type="button"
												className={cn(
													dmSans125ClassName(),
													"inline-flex h-9 items-center rounded-[9px] bg-[#290F0A] px-3 text-[13px] font-medium text-[#C73B1B] transition-opacity hover:opacity-90",
												)}
											>
												Cancel
											</button>
										</DialogTrigger>
										<DialogContent
											showCloseButton={false}
											className="w-[min(420px,calc(100vw-32px))] rounded-[18px] border border-white/10 bg-[#14161A] p-5 shadow-[0px_16px_60px_rgba(0,0,0,0.55)]"
										>
											<div className="flex items-start justify-between gap-4">
												<div>
													<p
														className={cn(
															dmSans125ClassName(),
															"text-[17px] font-semibold tracking-[-0.17px] text-[#FAFAFA]",
														)}
													>
														Cancel {planDisplayNames[currentPlan]}?
													</p>
													<p
														className={cn(
															dmSans125ClassName(),
															"mt-2 text-[13px] leading-relaxed text-[#A3A3A3]",
														)}
													>
														You keep paid features until the current billing
														period ends
														{daysRemaining !== null
															? ` (${daysRemaining} day${daysRemaining !== 1 ? "s" : ""} remaining)`
															: ""}
														.
													</p>
												</div>
												<DialogClose asChild>
													<button
														type="button"
														className="flex size-7 shrink-0 items-center justify-center rounded-full border border-white/10 bg-[#0D121A] text-[#737373] transition-colors hover:text-[#FAFAFA]"
													>
														<X className="size-4" />
													</button>
												</DialogClose>
											</div>
											<div className="mt-5 flex items-center justify-end gap-3">
												<DialogClose asChild>
													<button
														type="button"
														className={cn(
															dmSans125ClassName(),
															"h-9 px-3 text-[13px] font-medium text-[#A3A3A3] transition-colors hover:text-[#FAFAFA]",
														)}
													>
														Keep plan
													</button>
												</DialogClose>
												<button
													type="button"
													onClick={() => void handleCancelSubscription()}
													disabled={isCancelling}
													className={cn(
														dmSans125ClassName(),
														"inline-flex h-9 items-center gap-2 rounded-[9px] bg-[#290F0A] px-3 text-[13px] font-medium text-[#C73B1B] transition-opacity disabled:cursor-not-allowed disabled:opacity-50",
													)}
												>
													{isCancelling ? (
														<LoaderIcon className="size-3.5 animate-spin" />
													) : null}
													Cancel subscription
												</button>
											</div>
										</DialogContent>
									</Dialog>
								) : null}
							</div>
						</div>

						<div className="flex flex-col gap-2">
							<div className="flex items-center justify-between gap-3">
								<p
									className={cn(
										dmSans125ClassName(),
										"text-[13px] font-medium text-[#A3A3A3]",
									)}
								>
									Plan usage
								</p>
								<p
									className={cn(
										dmSans125ClassName(),
										"text-[13px] font-semibold tabular-nums text-[#FAFAFA]",
									)}
								>
									{planUsagePct < 1 && planUsagePct > 0
										? "< 1"
										: Math.round(planUsagePct)}
									% used
								</p>
							</div>
							<div className="h-2 w-full overflow-hidden rounded-full bg-[#2E353D]">
								<div
									className="h-full rounded-full bg-[#4BA0FA] transition-all"
									style={{
										width: `${planUsagePct}%`,
										background:
											planUsagePct > 80
												? "#C73B1B"
												: "linear-gradient(90deg, #2368D2 0%, #4BA0FA 100%)",
									}}
								/>
							</div>
							<p
								className={cn(
									dmSans125ClassName(),
									"text-[12px] text-[#737373]",
								)}
							>
								{daysRemaining !== null
									? `Resets in ${daysRemaining} day${daysRemaining !== 1 ? "s" : ""}`
									: "Usage resets with your billing cycle"}
							</p>
						</div>

						{!hasPaidPlan ? (
							<button
								type="button"
								onClick={handleUpgrade}
								disabled={isUpgrading || isCheckingStatus || autumn.isLoading}
								className={cn(
									dmSans125ClassName(),
									"inline-flex h-10 w-full items-center justify-center gap-2 rounded-[10px] bg-[#0054AD] text-[14px] font-semibold text-[#FAFAFA] transition-colors hover:bg-[#0B65C9] disabled:cursor-not-allowed disabled:opacity-60",
								)}
							>
								{isUpgrading || isCheckingStatus || autumn.isLoading ? (
									<LoaderIcon className="size-4 animate-spin" />
								) : null}
								Upgrade to Pro - $19/month
							</button>
						) : null}
					</div>
				</SettingsCard>
			</section>

			<section className="flex flex-col gap-4">
				<SectionTitle>Credits</SectionTitle>

				<SettingsCard>
					<div className="flex flex-col gap-5 sm:flex-row sm:items-start sm:justify-between">
						<div className="min-w-0 flex-1">
							<p className="text-[11px] font-bold uppercase tracking-[0.5px] text-[#737373]">
								Usage this period
							</p>
							<div className="mt-4 flex items-baseline gap-1 text-[13px] text-[#A3A3A3]">
								<span className="font-semibold text-[#FAFAFA]">
									{planUsagePct < 1 && planUsagePct > 0
										? "< 1"
										: Math.round(planUsagePct)}
									%
								</span>
								<span>of monthly usage</span>
								<span className="text-[#737373]">
									{daysRemaining !== null
										? `· resets in ${daysRemaining} day${daysRemaining !== 1 ? "s" : ""}`
										: "· resets with your billing cycle"}
								</span>
							</div>
							<div className="mt-3 h-2 w-full overflow-hidden rounded-full bg-[#2E353D]">
								<div
									className="h-full rounded-full bg-[#4BA0FA]"
									style={{ width: `${planUsagePct}%` }}
								/>
							</div>
							<p className="mt-3 text-[12px] text-[#737373]">
								{planUsagePct > 0
									? `${formatUsd(usdSpent)} used this period`
									: "No usage yet this period"}
							</p>
						</div>

						<div className="flex shrink-0 flex-col gap-2 sm:min-w-[170px]">
							<Dialog
								open={isCreditsDialogOpen}
								onOpenChange={setIsCreditsDialogOpen}
							>
								<DialogTrigger asChild>
									<button
										type="button"
										className={cn(
											dmSans125ClassName(),
											"inline-flex h-9 items-center justify-center gap-2 rounded-[9px] bg-[#0054AD] px-3 text-[13px] font-semibold text-[#FAFAFA] transition-colors hover:bg-[#0B65C9]",
										)}
									>
										<Plus className="size-3.5" />
										Buy credits
									</button>
								</DialogTrigger>
								<DialogContent
									showCloseButton={false}
									className="w-[min(560px,calc(100vw-32px))] rounded-[18px] border border-[#1C2B3E] bg-[#0B0D12] p-6 shadow-[0px_18px_70px_rgba(0,0,0,0.72)]"
								>
									<div className="flex items-start justify-between gap-4">
										<div>
											<p
												className={cn(
													dmSans125ClassName(),
													"text-[22px] font-semibold tracking-[-0.22px] text-[#FAFAFA]",
												)}
											>
												Buy Credits
											</p>
											<p
												className={cn(
													dmSans125ClassName(),
													"mt-2 text-[15px] text-[#A3A3A3]",
												)}
											>
												Add USD to your balance for metered usage.
											</p>
										</div>
										<DialogClose asChild>
											<button
												type="button"
												className="flex size-9 shrink-0 items-center justify-center rounded-full border border-white/10 bg-[#0D121A] text-[#737373] transition-colors hover:text-[#FAFAFA]"
											>
												<X className="size-5" />
											</button>
										</DialogClose>
									</div>

									<div className="mt-8 flex flex-col gap-5">
										<div className="flex flex-col gap-3">
											<p
												className={cn(
													dmSans125ClassName(),
													"text-[16px] font-semibold text-[#FAFAFA]",
												)}
											>
												Choose an amount
											</p>
											<FieldSelect
												value={topUpAmount}
												values={TOP_UP_AMOUNTS}
												prefix="$"
												onChange={(value) => {
													setTopUpAmount(value)
													setCustomTopUpAmount("")
												}}
												disabled={topUpPendingAmount !== null}
											/>
											<div className="flex flex-col gap-2">
												<label
													htmlFor="custom-topup-amount"
													className="text-[11px] font-bold uppercase tracking-[0.5px] text-[#737373]"
												>
													Custom amount (USD)
												</label>
												<input
													id="custom-topup-amount"
													inputMode="decimal"
													min={1}
													onChange={(event) =>
														setCustomTopUpAmount(event.target.value)
													}
													placeholder="e.g. 75"
													type="number"
													value={customTopUpAmount}
													className="h-11 rounded-[10px] border border-white/10 bg-[#080B10] px-3 text-[14px] text-[#FAFAFA] outline-none placeholder:text-[#737373] focus:border-[#0054AD]"
												/>
											</div>
										</div>

										<div className="h-px bg-white/[0.06]" />

										<div className="flex flex-col gap-4">
											<div className="flex items-center justify-between">
												<p className="text-[11px] font-bold uppercase tracking-[0.5px] text-[#737373]">
													Auto reload
												</p>
												<span className="text-[12px] text-[#737373]">
													{autoTopUpEnabled ? "on" : "off"}
												</span>
											</div>

											<div className="flex items-center justify-between gap-4">
												<p
													className={cn(
														dmSans125ClassName(),
														"text-[16px] text-[#FAFAFA]",
													)}
												>
													Auto reload is{" "}
													{autoTopUpEnabled ? "enabled" : "disabled"}
												</p>
												<button
													type="button"
													disabled={
														isSavingAutoTopUp ||
														!isAdmin ||
														(!hasPaymentMethod && !activeAutoTopUp?.enabled)
													}
													onClick={() =>
														handleAutoReloadToggle(!autoTopUpEnabled)
													}
													className={cn(
														dmSans125ClassName(),
														"inline-flex h-9 min-w-[96px] items-center justify-center rounded-[9px] border border-white/10 bg-[#0D121A] px-3 text-[13px] font-medium text-[#FAFAFA] transition-colors hover:bg-[#121A24] disabled:cursor-not-allowed disabled:opacity-45",
													)}
												>
													{autoTopUpEnabled ? "Disable" : "Enable"}
												</button>
											</div>

											{!hasPaymentMethod && !activeAutoTopUp?.enabled ? (
												<p className="text-[13px] text-[#737373]">
													Save a card in Manage Billing to enable automatic
													reloads.
												</p>
											) : null}

											<div
												className={cn(
													"grid gap-3 rounded-[10px] border border-white/[0.06] bg-[#0D121A] p-3 transition-[filter,opacity] sm:grid-cols-2",
													!autoTopUpEnabled &&
														"pointer-events-none select-none opacity-45 blur-[3px]",
												)}
											>
												<div className="flex flex-col gap-2">
													<label
														htmlFor="auto-topup-threshold"
														className="text-[11px] font-bold uppercase tracking-[0.5px] text-[#737373]"
													>
														Threshold (USD)
													</label>
													<input
														id="auto-topup-threshold"
														disabled={!autoTopUpEnabled || isSavingAutoTopUp}
														inputMode="decimal"
														min={0}
														onChange={(event) => {
															const value = Number.parseFloat(
																event.target.value,
															)
															setAutoTopUpThreshold(
																Number.isFinite(value) ? value : 0,
															)
														}}
														type="number"
														value={
															Number.isFinite(autoTopUpThreshold)
																? autoTopUpThreshold
																: ""
														}
														className="h-10 rounded-[8px] border border-white/10 bg-[#080B10] px-3 text-[13px] text-[#FAFAFA] outline-none focus:border-[#0054AD] disabled:opacity-60"
													/>
												</div>
												<div className="flex flex-col gap-2">
													<label
														htmlFor="auto-topup-amount"
														className="text-[11px] font-bold uppercase tracking-[0.5px] text-[#737373]"
													>
														Reload amount (USD)
													</label>
													<input
														id="auto-topup-amount"
														disabled={!autoTopUpEnabled || isSavingAutoTopUp}
														inputMode="decimal"
														min={0.01}
														onChange={(event) => {
															const value = Number.parseFloat(
																event.target.value,
															)
															setAutoTopUpAmount(
																Number.isFinite(value) ? value : 0,
															)
														}}
														type="number"
														value={
															Number.isFinite(autoTopUpAmount)
																? autoTopUpAmount
																: ""
														}
														className="h-10 rounded-[8px] border border-white/10 bg-[#080B10] px-3 text-[13px] text-[#FAFAFA] outline-none focus:border-[#0054AD] disabled:opacity-60"
													/>
												</div>
												<div className="sm:col-span-2">
													<button
														type="button"
														onClick={() => void handleSaveAutoTopUp()}
														disabled={isSavingAutoTopUp || !isAdmin}
														className={cn(
															dmSans125ClassName(),
															"inline-flex h-9 w-full items-center justify-center gap-2 rounded-[8px] border border-white/10 bg-[#080B10] text-[13px] font-medium text-[#FAFAFA] transition-colors hover:bg-[#121A24] disabled:cursor-not-allowed disabled:opacity-60",
														)}
													>
														{isSavingAutoTopUp ? (
															<LoaderIcon className="size-3.5 animate-spin" />
														) : null}
														Save threshold &amp; reload amount
													</button>
												</div>
											</div>
										</div>

										<button
											type="button"
											onClick={() => void handleTopUp(selectedTopUpAmount)}
											disabled={
												topUpPendingAmount !== null ||
												!isAdmin ||
												selectedTopUpAmount <= 0
											}
											className={cn(
												dmSans125ClassName(),
												"inline-flex h-11 w-full items-center justify-center gap-2 rounded-[10px] bg-[#0054AD] text-[14px] font-bold text-[#FAFAFA] transition-colors hover:bg-[#0B65C9] disabled:cursor-not-allowed disabled:opacity-60",
											)}
										>
											{topUpPendingAmount !== null ? (
												<LoaderIcon className="size-4 animate-spin" />
											) : null}
											Buy {formatUsd(selectedTopUpAmount)} in credits
										</button>

										{!isAdmin ? (
											<p className="text-center text-[11px] text-[#737373]">
												Only owners/admins can purchase credits.
											</p>
										) : null}
									</div>
								</DialogContent>
							</Dialog>
							<button
								type="button"
								onClick={() => setIsCreditsDialogOpen(true)}
								disabled={!isAdmin}
								className="inline-flex h-8 items-center justify-center gap-2 rounded-[8px] text-[12px] font-medium text-[#A3A3A3] transition-colors hover:bg-white/[0.04] disabled:cursor-not-allowed disabled:opacity-50"
							>
								<span
									className="size-1.5 rounded-full"
									style={{
										backgroundColor: autoTopUpEnabled ? "#4BA0FA" : "#737373",
									}}
								/>
								Auto reload: {autoTopUpEnabled ? "on" : "off"}
							</button>
						</div>
					</div>
				</SettingsCard>

				{hasPaidPlan ? (
					<SettingsCard className="border border-dashed border-white/10 bg-[#14161A]/70">
						<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
							<div className="flex min-w-0 items-start gap-3">
								<Coins className="mt-1 size-4 shrink-0 text-[#4BA0FA]" />
								<div className="min-w-0">
									<p className="text-[11px] font-bold uppercase tracking-[0.5px] text-[#737373]">
										Top-up credits{" "}
										<span className="font-normal normal-case tracking-normal text-[#A3A3A3]">
											(optional)
										</span>
									</p>
									<p
										className={cn(
											dmSans125ClassName(),
											"mt-2 text-[14px] font-semibold text-[#FAFAFA]",
										)}
									>
										{creditRemaining > 0
											? `${formatUsd(creditRemaining)} available`
											: "No top-up credits yet"}
									</p>
									<p className="mt-2 text-[12px] leading-snug text-[#737373]">
										Optional add-on that{" "}
										<span className="font-semibold text-[#A3A3A3]">
											rolls over
										</span>{" "}
										month-to-month, separate from your monthly usage above.
									</p>
								</div>
							</div>
							<button
								type="button"
								onClick={() => setIsCreditsDialogOpen(true)}
								className={cn(
									dmSans125ClassName(),
									"inline-flex h-9 shrink-0 items-center justify-center gap-2 rounded-[9px] border border-white/10 bg-[#0D121A] px-3 text-[13px] font-medium text-[#FAFAFA] transition-colors hover:bg-[#121A24]",
								)}
							>
								<Plus className="size-3.5" />
								{creditRemaining > 0 ? "Add more" : "Add credits"}
							</button>
						</div>
					</SettingsCard>
				) : null}
			</section>

			<section className="flex flex-col gap-4">
				<SectionTitle>Invoice history</SectionTitle>
				<SettingsCard className="p-0">
					{invoicesQuery.isLoading ? (
						<div className="flex h-28 items-center justify-center gap-3 text-[#737373]">
							<LoaderIcon className="size-4 animate-spin" />
							<span className={cn(dmSans125ClassName(), "text-[13px]")}>
								Loading invoices
							</span>
						</div>
					) : invoices.length === 0 ? (
						<div className="flex h-28 flex-col items-center justify-center gap-2 px-5 text-center">
							<ReceiptText className="size-5 text-[#737373]" />
							<p
								className={cn(
									dmSans125ClassName(),
									"text-[13px] text-[#A3A3A3]",
								)}
							>
								No invoices yet
							</p>
						</div>
					) : (
						<div className="divide-y divide-white/[0.06]">
							{invoices.map((invoice) => {
								const date = formatDate(normalizeTimestamp(invoice.createdAt))
								const label = invoice.planIds?.length
									? invoice.planIds
											.map((id) => getInvoiceProductLabel(id))
											.join(", ")
									: "Billing invoice"
								return (
									<div
										key={invoice.stripeId}
										className="grid grid-cols-[minmax(0,1fr)_auto] gap-3 px-5 py-3 sm:grid-cols-[minmax(0,1.2fr)_110px_90px_auto]"
									>
										<div className="min-w-0">
											<p
												className={cn(
													dmSans125ClassName(),
													"truncate text-[13px] font-medium text-[#FAFAFA]",
												)}
											>
												{label}
											</p>
											<p className="mt-0.5 truncate text-[12px] text-[#737373]">
												{invoice.stripeId}
											</p>
										</div>
										<p className="hidden self-center text-[13px] text-[#A3A3A3] sm:block">
											{date}
										</p>
										<p className="self-center text-right text-[13px] font-semibold tabular-nums text-[#FAFAFA] sm:text-left">
											{formatInvoiceAmount(invoice.total, invoice.currency)}
										</p>
										<div className="col-span-2 flex items-center justify-between gap-3 sm:col-span-1 sm:justify-end">
											<Pill tone={getStatusTone(invoice.status)}>
												{invoice.status}
											</Pill>
											{invoice.hostedInvoiceUrl ? (
												<a
													href={invoice.hostedInvoiceUrl}
													target="_blank"
													rel="noreferrer"
													className="inline-flex size-7 items-center justify-center rounded-[8px] border border-white/10 bg-[#0D121A] text-[#737373] transition-colors hover:text-[#FAFAFA]"
													aria-label={`Open invoice ${invoice.stripeId}`}
												>
													<ExternalLink className="size-3.5" />
												</a>
											) : null}
										</div>
									</div>
								)
							})}
						</div>
					)}
				</SettingsCard>
			</section>
		</div>
	)
}